init project portal web

lib/price-plan-detail/view/dialog/price-version-dialog/index.tsx

@@ -0,0 +1,19 @@
+import { Dialog, DialogContent, DialogDescription, DialogHeader } from "@/components/ui/dialog"
+import { DialogTitle } from "@radix-ui/react-dialog"
+
+const PriceVersionDialog = () => {
+    return(
+        <div>
+            <Dialog>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>Usage Price</DialogTitle>
+                        <DialogDescription>Test cek</DialogDescription>
+                    </DialogHeader>
+                </DialogContent>
+            </Dialog>
+        </div>
+    )
+}
+
+export default PriceVersionDialog

lib/price-plan-detail/view/dialog/rate-plan-dialog/index.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import * as React from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import DataTable from '../../data-table'
+import { columns } from '../../../constant'
+import { Select, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Button } from '@/components/ui/button'
+import PricePlanDetailViewModel from '@/lib/price-plan-detail/view-model'
+import { observer } from 'mobx-react-lite'
+import RatePlanSectionState from '@/lib/price-plan-detail/state/rate-plan-section-state'
+
+interface Props {
+  vm: PricePlanDetailViewModel
+}
+
+const RatePlanDialog = observer(({vm}: Props) => {
+  const mainState = vm.getMainState()
+  const formState = vm.getRatePlanFormState()
+
+  return (
+    <Dialog
+      open={formState.getOpen()}
+      onOpenChange={(val) => formState.setOpen(val)}
+    >
+      <DialogContent className="max-w-2xl max-h-[700px] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Create Rate Plan</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
+        <form action="" className='grid'>
+          <div>
+            <Label htmlFor='event-name'>Event Name*</Label>
+            <Input id='event-name' value={mainState.getEventSelected()?.name} readOnly className='bg-zinc-300/50' />
+          </div>
+          <div>
+            <Label htmlFor='rate plan name'>Rate Plan Name*</Label>
+            <Input
+              id='rate-plan-name'
+              value={formState.getRatePlanName()}
+              placeholder='Input plan name'
+              onChange={(e) => formState.setRatePlanName(e.currentTarget.value)}
+            />
+          </div>
+          <div>
+            <Label htmlFor='rate plan code'>Rate Plan Code</Label>
+            <Input
+              id='rate-plan-code'
+              value={formState.getRatePlanCode()}
+              placeholder='input rate plan code'
+              onChange={(e) => formState.setRatePlanCode(e.currentTarget.value)}
+            />
+          </div>
+          <div>
+            <Label htmlFor='remarks'>Remarks</Label>
+            <Input
+              id='remarks'
+              value={formState.getRemarks()}
+              placeholder='input remarks'
+              onChange={(e) => formState.setRemarks(e.currentTarget.value)}
+            />
+          </div>
+          <div>
+            <Label htmlFor='rate plan type'>Rate Plan Type</Label>
+            <RadioGroup defaultValue={formState.getRatePlanType()} className='flex h-8'>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="r" id="rating" onChange={(e) => formState.setRatePlanType(e.currentTarget.value)} />
+                <Label htmlFor="rating">Rating</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="a" id="accumulation" onChange={(e) => formState.setRatePlanType(e.currentTarget.value)} />
+                <Label htmlFor="accumulation">Accumulation</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="b" id="benefit" onChange={(e) => formState.setRatePlanType(e.currentTarget.value)} />
+                <Label htmlFor="benefit">Benefit</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="t" id="tax" onChange={(e) => formState.setRatePlanType(e.currentTarget.value)} />
+                <Label htmlFor="tax">Tax</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="o" id="optional rate plan" onChange={(e) => formState.setRatePlanType(e.currentTarget.value)} />
+                <Label htmlFor="optional rate plan">Optional Rate Plan</Label>
+              </div>
+            </RadioGroup>
+          </div>
+        </form>
+        <section>
+          <h3>Event Feature</h3>
+          <DataTable data={[]} columns={columns} />
+        </section>
+        <section>
+          <p>If you add event properties, the ratte plan will be mapping rate plan, otherwise a single one. Drags the items in the list to change their priority</p>
+          <h3 className='font-semibold'>Detail</h3>
+          <div className='grid grid-cols-2 gap-1'>
+            <div>
+              <Label>Source Type *</Label>
+              <Select >
+                <SelectTrigger className="bg-zinc-300">
+                  <SelectValue placeholder="Select item" />
+                </SelectTrigger>
+              </Select>
+            </div>
+            <div>
+              <Label>Destination Type *</Label>
+              <Select >
+                <SelectTrigger className="bg-zinc-300">
+                  <SelectValue placeholder="Select item" />
+                </SelectTrigger>
+              </Select>
+            </div>
+            <div>
+              <Label>Label*</Label>
+              <Input className='bg-zinc-300' readOnly />
+            </div>
+          </div>
+        </section>
+        <div className='flex justify-end gap-2'>
+          <Button variant="outline">Cancel</Button>
+          <Button variant="default" onClick={() => {
+            mainState.setFlow(2)
+            formState.reset()
+            mainState.setRatePlans([new RatePlanSectionState()])
+            
+          }}>Submit</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+})
+
+export default RatePlanDialog

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