init project portal web

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