init project portal web

lib/price-plan-detail/view/dialog/usage-event-dialog/index.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '@/components/ui/input'
+import { OptionProps } from '@/lib/helper/type'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import PricePlanDetailState from '@/lib/price-plan-detail/state/price-plan-detail-state'
+import { observer } from 'mobx-react-lite'
+
+interface Props {
+  options: OptionProps[],
+  mainState: PricePlanDetailState
+}
+
+const UsageEventDialog = observer(({options, mainState}: Props) => {
+  const [selected, setSelected] = React.useState<string[]>([])
+  const [search, setSearch] = React.useState('')
+
+  const toggleItem = (item: string) => {
+    setSelected(prev =>
+      prev.includes(item) ? prev.filter(i => i !== item) : [...prev, item]
+    )
+  }
+
+  const filteredEvents = options.filter(event =>
+    event.name.toLowerCase().includes(search.toLowerCase())
+  )
+
+  return (
+    <Dialog open={mainState.getUsageEventModalIsOpen()} onOpenChange={(open) => mainState.setUsageEventModalIsOpen(open)}>
+      <DialogContent className="w-[400px] max-h-[450px] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Usage Event</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
+        <div className="flex justify-end mt-4 gap-2">
+          <Button size="sm" variant="ghost" onClick={() => setSelected([])}>Cancel</Button>
+          <Button size="sm" onClick={() => {
+            mainState.setUsageEventModalIsOpen(false)
+            mainState.setUsageEventSelected(selected)
+            mainState.setFlow(1)
+          }}>Save</Button>
+        </div>
+        <Input
+          placeholder="Search..."
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          className="mb-2"
+        />
+        <div className="flex flex-col gap-2">
+          {filteredEvents.length > 0 ? (
+            filteredEvents.map((event, idx) => (
+              <label key={idx} className="flex items-center gap-2 cursor-pointer">
+                <Checkbox
+                  checked={selected.includes(event.value)}
+                  onCheckedChange={() => toggleItem(event.value)}
+                />
+                <span className="text-sm">{event.name}</span>
+              </label>
+            ))
+          ) : (
+            <span className="text-sm text-muted-foreground">No results found.</span>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+})
+
+export default UsageEventDialog