init project portal web

lib/price-plan-detail/view/tab/index.tsx

@@ -0,0 +1,38 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import TabsUsageContent from "./usage-content"
+import PricePlanDetailViewModel from "../../view-model"
+
+interface Props {
+    vm: PricePlanDetailViewModel
+}
+
+const PricePlanTab = ({vm}: Props) => {
+    
+    return (
+        <section className="px-4 mt-4">
+                <Tabs defaultValue="usage" className="w-full border border-primary">
+                    <TabsList className="bg-[#e6f6f8] justify-start w-full">
+                        {["usage", "recurring", "subscription", "discount", "trigger", "total", "param", "param-version"].map(tab => (
+                            <TabsTrigger
+                                key={tab}
+                                value={tab}
+                                className="data-[state=active]:bg-[#00879E] data-[state=active]:text-white text-[#00879E] hover:bg-[#ccebf0]"
+                            >
+                                {tab.replace("-", " ").replace(/\b\w/g, l => l.toUpperCase())}
+                            </TabsTrigger>
+                        ))}
+                    </TabsList>
+                    <TabsUsageContent usageEventOptions={vm.getUsageEventOptions()} mainState={vm.getMainState()} formState={vm.getRatePlanFormState()}/>
+                    <TabsContent value="recurring">Recurring here.</TabsContent>
+                    <TabsContent value="subscription">Subscription here.</TabsContent>
+                    <TabsContent value="discount">Discount here.</TabsContent>
+                    <TabsContent value="trigger">Trigger here.</TabsContent>
+                    <TabsContent value="total">Total here.</TabsContent>
+                    <TabsContent value="param">Param here.</TabsContent>
+                    <TabsContent value="param-version">Param Version here.</TabsContent>
+                </Tabs>
+            </section>
+    )
+}
+
+export default PricePlanTab

lib/price-plan-detail/view/tab/usage-content/flow/create-event/index.tsx

@@ -0,0 +1,31 @@
+import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
+import { observer } from "mobx-react-lite"
+
+interface Props {
+    mainState: PricePlanDetailState
+}
+
+const CreateEvent = observer(({mainState}: Props) => {
+    if (mainState.getFlow() >= 1) return null
+
+    return (
+        <>
+            <div className="flex flex-col items-center text-center">
+                <button
+                    className="relative w-24 h-24 rounded-full border-4 border-[#00879E] bg-white flex items-center justify-center hover:bg-[#e6f6f8] transition"
+                    onClick={() => mainState.setUsageEventModalIsOpen(!mainState.getUsageEventModalIsOpen())}
+                >
+                    <svg className="w-10 h-10 text-[#00879E]" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                        <path d="M4 4h16v16H4V4z" />
+                        <path d="M8 8h8M8 12h8M8 16h8" />
+                    </svg>
+                    <span className="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-[#00879E] text-white text-sm font-bold flex items-center justify-center">+</span>
+                </button>
+                <span className="mt-2 text-[#00879E] font-medium">Event</span>
+            </div>
+            <div className="text-[#00879E] text-3xl">{'→'}</div>
+        </>
+    )
+})
+
+export default CreateEvent

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

@@ -0,0 +1,94 @@
+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 { observer } from "mobx-react-lite";
+
+
+const getStepStyle = (active: boolean) => ({
+    borderColor: active ? "#00879E" : "#D1D5DB", // tailwind: gray-300
+    textColor: active ? "#00879E" : "#9CA3AF", // tailwind: gray-400
+    bgColor: active ? "#00879E" : "#D1D5DB",
+    iconText: active ? "text-[#00879E]" : "text-gray-400",
+    opacity: active ? "opacity-100" : "opacity-30"
+});
+
+interface Props {
+   mainState: PricePlanDetailState
+   formState: RatePlanFormState
+}
+
+const CreateRatePlan = observer(({
+    mainState,
+    formState
+}: Props) => {
+    const isRatePlanActive = mainState.getFlow() >= 1;
+    const isPriceActive = mainState.getFlow() >= 2;
+
+    const ratePlanStyle = getStepStyle(isRatePlanActive);
+    const priceStyle = getStepStyle(isPriceActive);
+
+    return (
+        <>
+            <div className={`flex flex-col items-center text-center ${ratePlanStyle.opacity}`}>
+                <div
+                    className="relative w-24 h-24 cursor-pointer rounded-full bg-white flex items-center justify-center"
+                    style={{ borderWidth: "4px", borderColor: ratePlanStyle.borderColor }}
+                    onClick={() => {
+                        formState.setOpen(true)
+                    }}
+                >
+                    <svg
+                        className={`w-10 h-10 ${ratePlanStyle.iconText}`}
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        viewBox="0 0 24 24"
+                    >
+                        <path d="M4 4h16v16H4V4z" />
+                        <path d="M8 8h8M8 12h8M8 16h8" />
+                    </svg>
+                    <span
+                        className="absolute -top-2 -right-2 w-6 h-6 rounded-full text-white text-sm font-bold flex items-center justify-center"
+                        style={{ backgroundColor: ratePlanStyle.bgColor }}
+                    >
+                        +
+                    </span>
+                </div>
+                <span className={`mt-2 font-medium`} style={{ color: ratePlanStyle.textColor }}>
+                    Rate Plan
+                </span>
+            </div>
+
+            <div className={`text-3xl`} style={{ color: isPriceActive ? "#00879E" : "#D1D5DB", opacity: isPriceActive ? 1 : 0.3 }}>
+                →
+            </div>
+
+            <div className={`flex flex-col items-center text-center ${priceStyle.opacity}`}>
+                <div
+                    className="relative w-24 h-24 rounded-full bg-white flex items-center justify-center"
+                    style={{ borderWidth: "4px", borderColor: priceStyle.borderColor }}
+                >
+                    <svg
+                        className={`w-10 h-10 ${priceStyle.iconText}`}
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        viewBox="0 0 24 24"
+                    >
+                        <path d="M12 8c-2.21 0-4 1.79-4 4 0 1.84 1.28 3.39 3 3.87V18h2v-2.13c1.72-.48 3-2.03 3-3.87 0-2.21-1.79-4-4-4z" />
+                    </svg>
+                    <span
+                        className="absolute -top-2 -right-2 w-6 h-6 rounded-full text-white text-sm font-bold flex items-center justify-center"
+                        style={{ backgroundColor: priceStyle.bgColor }}
+                    >
+                        +
+                    </span>
+                </div>
+                <span className={`mt-2 font-medium`} style={{ color: priceStyle.textColor }}>
+                    Price
+                </span>
+            </div>
+        </>
+    );
+})
+
+export default CreateRatePlan

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

@@ -0,0 +1,24 @@
+import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state"
+import CreateEvent from "./create-event"
+import CreateRatePlan from "./create-rate-plan"
+import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
+import { observer } from "mobx-react-lite"
+
+interface Props {
+    mainState: PricePlanDetailState
+    formState: RatePlanFormState
+}
+const RatePlanFlow = observer( ({mainState, formState}: Props) => {
+    if(mainState.getFlow() >= 2) return null
+
+    return (
+        <section className={`flex gap-12 justify-center items-center ${mainState.getFlow() ? "col-span-9" : "col-span-12"}`}>
+            {/* Step 1 */}
+            <CreateEvent mainState={mainState} />
+            {/* Step 2 */}
+            <CreateRatePlan mainState={mainState} formState={formState} />
+        </section>
+    )
+})
+
+export default RatePlanFlow

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

@@ -0,0 +1,32 @@
+import { TabsContent } from "@/components/ui/tabs"
+import { OptionProps } from "@/lib/helper/type"
+import UsageEvents from "./usage-events"
+import RatePlanFlow from "./flow"
+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 RatePlanSection from "./rate-plan"
+import { observer } from "mobx-react-lite"
+
+interface Props {
+    usageEventOptions: OptionProps[]
+    mainState: PricePlanDetailState
+    formState: RatePlanFormState
+}
+
+const TabsUsageContent = observer(({
+    usageEventOptions,
+    mainState,
+    formState
+}: Props) => {
+    return (
+        <TabsContent value="usage" className="m-0">
+            <div className="grid grid-cols-12 min-h-[50vh]">
+                <UsageEvents eventOptions={usageEventOptions} mainState={mainState}/>
+                <RatePlanFlow mainState={mainState} formState={formState}/>
+                <RatePlanSection mainState={mainState} ratePlanFormState={formState}/>
+            </div>
+        </TabsContent>
+    )
+})
+
+export default TabsUsageContent

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

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

@@ -0,0 +1,62 @@
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/module/dropdown"
+import { Button } from "@/components/ui/button"
+import { OptionProps } from "@/lib/helper/type"
+import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
+import { Ellipsis, PlusIcon } from "lucide-react"
+import { observer } from "mobx-react-lite"
+
+interface Props {
+    eventOptions: OptionProps[]
+    mainState: PricePlanDetailState
+}
+
+const UsageEvents = observer(({
+    eventOptions,
+    mainState
+}:Props) => {
+
+    if (mainState.getFlow() < 1) return null
+    
+    return (
+        <section className="col-span-3 border-r border-primary text-sm font-semibold">
+            <div className="flex justify-between p-2 border-b-2 border-primary">
+                <h4 className="text-center">Usage Event</h4>
+                <PlusIcon className="cursor-pointer" onClick={() => mainState.setUsageEventModalIsOpen(true)}/>
+            </div>
+            <ul className="py-2 space-y-2">
+                {eventOptions.filter(item => mainState.getUsageEventSelected().includes(item.value)).map((item, index) => (
+                    <li 
+                        onClick={() => mainState.setEventSelected(item)}
+                        key={index} 
+                        className={`list-none cursor-pointer px-6 ${item.value == mainState.getEventSelected()?.value ? "bg-blue-200" : ""}`}
+                    >
+                        <div className="flex justify-between gap-2 items-center">
+                            <span>{item.name}</span>
+                            <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                    <Button variant="ghost" size="icon" className="h-6 w-6 p-0">
+                                        <Ellipsis className="h-4 w-4" />
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                    <DropdownMenuItem
+                                        onClick={() => {
+                                            const updated = [...mainState.getUsageEventSelected()]
+                                            updated.splice(index, 1)
+                                            mainState.setUsageEventSelected(updated)
+                                        }}
+                                        className="text-red-500"
+                                    >
+                                        Remove
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </section>
+    )
+})
+
+export default UsageEvents