init project portal web

lib/price-plan-detail/view/tab/usage-content/rate-plan/index.tsx

@@ -0,0 +1,78 @@
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/module/dropdown"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
+import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state"
+import { ChevronDown, Plus, Tickets } from "lucide-react"
+import { observer } from "mobx-react-lite"
+
+interface Props {
+    mainState: PricePlanDetailState
+    ratePlanFormState: RatePlanFormState
+}
+
+const RatePlanSection = observer(({ mainState, ratePlanFormState }: Props) => {
+    if (mainState.getFlow() < 2) return null
+
+    return (
+        <div className={`p-4 ${mainState.getFlow() ? "col-span-9" : "col-span-12"}`}>
+            <div className="flex justify-between">
+                <div className="flex items-center gap-4">
+                    <Button className="h-6 rounded-sm" onClick={() => ratePlanFormState.setOpen(true)}>
+                        <Plus />
+                        <span>New Rate Plan</span>
+                    </Button>
+                    <Button className="h-6" variant="outline">
+                        <Plus />
+                        <span>New From Template</span>
+                    </Button>
+                    <Button className="h-6" variant="outline">
+                        <Plus />
+                        <span>Reservation Rule</span>
+                    </Button>
+                </div>
+                <div>
+                    <Input placeholder="Search Rate Plan Name" className="h-6 placeholder:text-zinc-400" />
+                </div>
+            </div>
+            <ul className="border border-primary mt-8">
+                {mainState.getRatePlans().map((item, idx) => (
+                    <li key={item.getRatePlanName() + idx} className="px-4 py-2 border-b last:border-none">
+                        <div className="flex justify-between items-center">
+                            <div className="flex items-center gap-3">
+                                <Tickets />
+                                <span>{item.getRatePlanName()}</span>
+                            </div>
+                            <ChevronDown
+                                className={`cursor-pointer transition-transform duration-300 ${item.getIsExpand() ? 'rotate-180' : ''}`}
+                                onClick={() => item.setIsExpand(!item.getIsExpand())}
+                            />
+                        </div>
+
+                        <div
+                            className={`transition-all duration-300 overflow-hidden ${item.getIsExpand() ? 'max-h-40 opacity-100 mt-5' : 'max-h-0 opacity-0'
+                                }`}
+                        >
+                            <DropdownMenu>
+                                <DropdownMenuTrigger>
+                                    <Button className="h-6">
+                                        <Plus />
+                                        Price Version
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent>
+                                    <DropdownMenuItem>New Version</DropdownMenuItem>
+                                    <DropdownMenuItem>New From Template</DropdownMenuItem>
+                                    <DropdownMenuItem>Shared From Template</DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+
+        </div>
+    )
+})
+
+export default RatePlanSection