init project portal web

lib/price-plan/constant/index.tsx

@@ -0,0 +1,65 @@
+import { ColumnDef, Row } from "@tanstack/react-table"
+import { Eye, Pencil, Trash2 } from "lucide-react"
+import PricePlanModel from "../model/price-plan-model"
+import { useRouter } from "next/navigation"
+
+export interface PricePlan {
+    name: string
+    type: string
+    code: string
+    validPeriod: string
+}
+
+interface Props {
+    onClickDelete: (id: string) => void
+}
+
+export default function PricePlanColumns({
+    onClickDelete
+}: Props): ColumnDef<PricePlanModel>[] {
+    const router = useRouter()
+    // const setFields = priceplandeta
+
+    const onNavigate = (row: Row<PricePlanModel>) => {
+        router.push(`/main/price-plan/${row.original.getId()}`)
+        // setFields({
+        //     pricplanId: row.original.getId(),
+        //     name: row.original.getName(),
+        //     version: row.original.getValidPeriod()
+        // })
+    }
+    return [
+        {
+            accessorKey: "name",
+            header: () => <div className="text-left">Price Plan Name</div>,
+            cell: ({ row }) => <div className="text-[#0096A6]">{row.getValue("name")}</div>,
+        },
+        {
+            accessorKey: "type",
+            header: () => <div className="text-left">Price Plan Type</div>,
+            cell: ({ row }) => <div>{row.getValue("type")}</div>,
+        },
+        {
+            accessorKey: "code",
+            header: () => <div className="text-left">Price Plan Code</div>,
+            cell: ({ row }) => <div>{row.getValue("code")}</div>,
+        },
+        {
+            accessorKey: "validPeriod",
+            header: () => <div className="text-left">Valid Period</div>,
+            cell: ({ row }) => <div>{row.getValue("validPeriod")}</div>,
+        },
+        {
+            id: "operations",
+            header: () => <div className="text-left">Action</div>,
+            cell: ({row}) => {
+                const id = row.original.getId()
+                return <div className="flex items-center gap-4">
+                    <Eye size={18} className="text-[#36587A] cursor-pointer" onClick={() => onNavigate(row)}/>
+                    <Pencil size={18} className="text-[#36587A] cursor-pointer" />
+                    <Trash2 size={18} className="text-[#E46A56] cursor-pointer" onClick={() => onClickDelete(id)} />
+                </div>
+            },
+        },
+    ]
+}

lib/price-plan/data/model/index.ts

@@ -0,0 +1,4 @@
+export interface MenuModel {
+    type: string
+    list: Array<string>
+}

lib/price-plan/data/repository/index.ts

@@ -0,0 +1,26 @@
+import { apiClient } from "@/services/api/api-client"
+
+export type CreatePricePlanPayload = {
+    offerType: string
+    offerName: string
+    applyLevel?: string
+    pricePlanCode?: string
+    remarks?: string
+    sourceFrom?: string
+    baseValidPeriod: string
+    versionValidPeriod?: string
+    serviceType?: number
+}
+
+export const pricePlanRepository = {
+    getMenuList: async () => await apiClient("/api/priceplan/menu", "POST"),
+    getPricePlan: async ({page, size, type}: {page: number, size: number, type: string}) => await apiClient("/api/priceplan", "POST", {
+        page,
+        size,
+        type
+    }),
+    createPricePlan: async (payload: CreatePricePlanPayload) => await apiClient("/api/priceplan/create", "POST", payload),
+    deletePricePlan: async (id: string) => await apiClient("/api/priceplan/delete", "POST", {id}),
+    getPricePlanTypes: async () => await apiClient("/api/priceplan/types", "POST"),
+    getServiceTypes: async () => await apiClient("/api/priceplan/servetypes", "POST"),
+}

lib/price-plan/model/menu-model.ts

@@ -0,0 +1,42 @@
+interface Props {
+    parentName: string;
+    pricePlanTypeDto: Array<PricePlanMenuItem>;
+}
+
+export interface PricePlanMenuItem {
+    id: string;
+    pricePlanTypeName: string;
+}
+
+export class PricePlanMenuModel {
+    private parentName: string
+    private pricePlanTypeDto: Array<PricePlanMenuItem>
+
+    constructor({
+        parentName,
+        pricePlanTypeDto,
+    }: Props) {
+        this.parentName = parentName
+        this.pricePlanTypeDto = pricePlanTypeDto
+    }
+
+    getParentName(): string {
+        return this.parentName
+    }
+
+    getPricePlanTypeDto(): Array<PricePlanMenuItem> {
+        return this.pricePlanTypeDto
+    }
+
+    static fromJSON = (data: any) => {
+        return data.data.map((item: {
+            parentName: string,
+            pricePlanTypeDto: Array<PricePlanMenuItem>,
+        }) => {
+            return new PricePlanMenuModel({
+                parentName: item.parentName,
+                pricePlanTypeDto: item.pricePlanTypeDto,
+            })
+        })
+    }
+}

lib/price-plan/model/price-plan-model.ts

@@ -0,0 +1,59 @@
+interface Props {
+  id: string
+  name: string
+  type: string
+  code: string
+  validPeriod: string
+}
+
+export default class PricePlanModel {
+  private id: string
+  private name: string
+  private type: string
+  private code: string
+  private validPeriod: string
+  
+  constructor({ id, name, type, code, validPeriod }: Props) {
+    this.id = id
+    this.name = name
+    this.type = type
+    this.code = code
+    this.validPeriod = validPeriod
+  }
+
+  getId() { return this.id}
+  getName() { return this.name }
+  getType() { return this.type } 
+  getCode() { return this.code }
+  getValidPeriod() { return this.validPeriod }
+
+  static fromJSON(data: any): PricePlanModel[] {
+    return data.data.content.map((item: {
+      id: string
+      pricePlanName: string,
+      pricePlanType: string,
+      pricePlanCode: string,
+      validPeriod: string,
+    }) => {
+      return new PricePlanModel({
+        id: item.id,
+        name: item.pricePlanName,
+        type: item.pricePlanType,
+        code: item.pricePlanCode,
+        validPeriod: item.validPeriod,
+      })
+    })
+  }
+
+  static toJsonList = (list: PricePlanModel[]): Props[] => {
+    return list.map((item: PricePlanModel) => {
+      return {
+        id: item.getId(),
+        name: item.getName(),
+        type: item.getType(),
+        code: item.getCode(),
+        validPeriod: item.getValidPeriod(),
+      }
+    })
+  }
+}

lib/price-plan/mutations/index.ts

@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { toast } from "sonner"
+import { pricePlanRepository } from "../data/repository"
+
+export const useDeletePricePlanMutation = () => {
+    const queryClient = useQueryClient()
+    return useMutation({
+        mutationFn: (id: string) => pricePlanRepository.deletePricePlan(id),
+        onSuccess: () => {
+            toast.success("Record has been successfully deleted")
+            queryClient.invalidateQueries({ queryKey: ["priceplan"] })
+        },
+        onError: (error: any) => toast.error(error.message),
+    })
+}
+
+export const useCreatePricePlanMutation = (onSuccessCallback: () => void) => {
+    const queryClient = useQueryClient()
+    return useMutation({
+        mutationFn: (payload: any) => pricePlanRepository.createPricePlan(payload),
+        onSuccess: () => {
+            toast.success("Price plan created successfully")
+            queryClient.invalidateQueries({ queryKey: ["priceplan"] })
+            onSuccessCallback()
+        },
+        onError: (error: any) => toast.error(error.message),
+    })
+}

lib/price-plan/queries/index.ts

@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query"
+import { pricePlanRepository } from "../data/repository"
+
+export const usePricePlanQuery = (page: number, size: number, type: string) =>
+  useQuery({
+    queryKey: ["priceplan", page, size, type],
+    queryFn: () => pricePlanRepository.getPricePlan({ page, size, type }),
+  })
+
+export const usePricePlanTypesQuery = () =>
+  useQuery({
+    queryKey: ["priceplanTypes"],
+    queryFn: () => pricePlanRepository.getPricePlanTypes(),
+  })
+
+export const useServiceTypesQuery = () =>
+  useQuery({
+    queryKey: ["serviceTypes"],
+    queryFn: () => pricePlanRepository.getServiceTypes(),
+  })

lib/price-plan/store/form-store.ts

@@ -0,0 +1,102 @@
+import { makeAutoObservable } from "mobx";
+
+export class PricePlanFormStore {
+  // --- Private state ---
+  private isOpen = false;
+  private offerType = "";
+  private offerName = "";
+  private applyLevel = "";
+  private serviceType = "S";
+  private pricePlanCode = "";
+  private remarks = "";
+  private copyFrom = "";
+  private sourceFrom = "";
+  private effType = "";
+  private baseValidPeriod: Date | undefined = undefined;
+  private versionValidPeriod: Date | undefined = undefined;
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  // --- Getters ---
+  getIsOpen = () => this.isOpen;
+  getOfferType = () => this.offerType;
+  getOfferName = () => this.offerName;
+  getApplyLevel = () => this.applyLevel;
+  getServiceType = () => this.serviceType;
+  getPricePlanCode = () => this.pricePlanCode;
+  getRemarks = () => this.remarks;
+  getCopyFrom = () => this.copyFrom;
+  getSourceFrom = () => this.sourceFrom;
+  getEffType = () => this.effType;
+  getBaseValidPeriod = () => this.baseValidPeriod;
+  getVersionValidPeriod = () => this.versionValidPeriod;
+
+  // --- Setters ---
+  setIsOpen = (val: boolean) => {
+    this.isOpen = val;
+  };
+
+  setOfferType = (val: string) => {
+    this.offerType = val;
+  };
+
+  setOfferName = (val: string) => {
+    this.offerName = val;
+  };
+
+  setApplyLevel = (val: string) => {
+    this.applyLevel = val;
+  };
+
+  setServiceType = (val: string) => {
+    this.serviceType = val;
+  };
+
+  setPricePlanCode = (val: string) => {
+    this.pricePlanCode = val;
+  };
+
+  setRemarks = (val: string) => {
+    this.remarks = val;
+  };
+
+  setCopyFrom = (val: string) => {
+    this.copyFrom = val;
+  };
+
+  setSourceFrom = (val: string) => {
+    this.sourceFrom = val;
+  };
+
+  setEffType = (val: string) => {
+    this.effType = val;
+  };
+
+  setBaseValidPeriod = (val: Date | undefined) => {
+    this.baseValidPeriod = val;
+  };
+
+  setVersionValidPeriod = (val: Date | undefined) => {
+    this.versionValidPeriod = val;
+  };
+
+  resetForm = () => {
+    this.isOpen = false;
+    this.offerType = "";
+    this.offerName = "";
+    this.applyLevel = "";
+    this.serviceType = "S";
+    this.pricePlanCode = "";
+    this.remarks = "";
+    this.copyFrom = "";
+    this.sourceFrom = "";
+    this.effType = "";
+    this.baseValidPeriod = undefined;
+    this.versionValidPeriod = undefined;
+  };
+}
+
+const pricePlanFormStore = new PricePlanFormStore();
+export default pricePlanFormStore;

lib/price-plan/store/index.ts

@@ -0,0 +1,55 @@
+import { makeAutoObservable } from "mobx";
+
+class PricePlanStore {
+  private currentPage = 0;
+  private size = 10;
+  private type = "";
+  private isAlertOpen = false;
+  private priceplanId = "";
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  getCurrentPage = () => this.currentPage
+
+  getSize = () => this.size
+
+  getType = () => this.type
+
+  getIsAlertOpen = () => this.isAlertOpen
+
+  getPricePlanId = () => this.priceplanId
+
+  setPricePlanId = (id: string) => {
+    this.priceplanId = id;
+  };
+  
+  setIsAlertOpen = (isOpen: boolean) => {
+    this.isAlertOpen = isOpen;
+  };
+  
+  setCurrentPage = (page: number) => {
+    this.currentPage = page;
+  };
+  
+  setSize = (size: number) => {
+    this.size = size;
+  };
+  
+  setType = (type: string) => {
+    this.type = type;
+  };  
+
+  reset = () => {
+    this.currentPage = 0;
+    this.size = 10;
+    this.type = "";
+    this.isAlertOpen = false;
+    this.priceplanId = "";
+  }
+}
+
+const pricePlanStore = new PricePlanStore();
+
+export default pricePlanStore;

lib/price-plan/view-model/index.ts

@@ -0,0 +1,65 @@
+import PricePlanModel from "../model/price-plan-model"
+import PaginationModel from "@/lib/helper/pagination"
+import { usePricePlanQuery, usePricePlanTypesQuery, useServiceTypesQuery } from "../queries"
+import { useCreatePricePlanMutation, useDeletePricePlanMutation } from "../mutations"
+
+type UsePricePlanReturn = {
+    isLoading: boolean
+    isError: boolean
+    error: unknown
+    data: PaginationModel<PricePlanModel[]>
+    ppTypes: Array<{[key: string]: string}>
+    serviceTypes: Array<{[key: string]: string}>
+    extra: {
+        deletePricePlan: (id: string) => void
+        createPricePlan: (payload: any) => void
+        isDeleting: boolean
+        isCreating: boolean
+    }
+}
+
+export const usePricePlan = (
+    page: number,
+    size: number,
+    type: string,
+    onCreateSuccess: () => void
+): UsePricePlanReturn => {
+    // Queries
+    const priceplanQuery = usePricePlanQuery(page, size, type)
+    const ppTypesQuery = usePricePlanTypesQuery()
+    const servTypesQuery = useServiceTypesQuery()
+    // Mutations
+    const deleteMutation = useDeletePricePlanMutation()
+    const createMutation = useCreatePricePlanMutation(onCreateSuccess)
+    // Data
+    const dataJson: any = priceplanQuery.data
+    const ppTypes: any = ppTypesQuery.data
+    const serviceTypes: any = servTypesQuery.data
+    let models: PricePlanModel[] = []
+    if (dataJson) {
+        models = PricePlanModel.fromJSON(dataJson)
+    }
+
+    return {
+        isLoading: priceplanQuery.isLoading,
+        isError: priceplanQuery.isError,
+        error: priceplanQuery.error,
+        data: priceplanQuery.data ? new PaginationModel({
+            currentPage: dataJson.data.number,
+            totalPages: dataJson.data.totalPages,
+            pageSize: dataJson.data.size,
+            totalElements: dataJson.data.totalElements,
+            content: models,
+        }) : PaginationModel.initialValue(),
+        ppTypes: ppTypes ? ppTypes.data : [],
+        serviceTypes: serviceTypes ? serviceTypes?.data.map((item: any) => {{
+            return {id: item.id, servTypeName: item.servTypeName}
+        }}).slice(0, 100) : [],
+        extra: {
+            deletePricePlan: deleteMutation.mutate,
+            isDeleting: deleteMutation.isPending,
+            createPricePlan: createMutation.mutate,
+            isCreating: createMutation.isPending
+        }
+    }
+}

lib/price-plan/view-model/sidebar-view-model.ts

@@ -0,0 +1,19 @@
+import CommonData from "@/lib/helper/query-data"
+import { pricePlanRepository } from "@/lib/price-plan/data/repository"
+import { PricePlanMenuModel } from "@/lib/price-plan/model/menu-model"
+import { useQuery } from "@tanstack/react-query"
+
+export const useMenuPricePlan = () => {
+    const query = useQuery({
+        queryKey: ["priceplan-menu"],
+        queryFn: pricePlanRepository.getMenuList,
+    })
+
+    return new CommonData<PricePlanMenuModel[], any>({
+        isLoading: query.isLoading,
+        isError: query.isError,
+        error: query.error,
+        data: query.data ? PricePlanMenuModel.fromJSON(query.data) : [],
+        extra: null
+    })
+}

lib/price-plan/view/combobox/index.tsx

@@ -0,0 +1,66 @@
+import { useState } from "react"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Button } from "@/components/ui/button"
+import { Check, ChevronsUpDown } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+type Props = {
+  types: any[]
+  value: string
+  onChange: (val: string) => void
+}
+
+export function ComboboxPricePlanType({ types, value, onChange }: Props) {
+  const [open, setOpen] = useState(false)
+
+  const selected = types.find((item) => item.id === value)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between"
+        >
+          {selected ? selected.pricePlanTypeName : "Select priceplan type"}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0 max-h-60 overflow-y-auto">
+        <Command>
+          <CommandInput placeholder="Search priceplan type..." />
+          <CommandEmpty>No type found.</CommandEmpty>
+          <CommandGroup>
+            {types.map((item) => (
+              <CommandItem
+                key={item.id}
+                value={item.pricePlanTypeName}
+                onSelect={() => {
+                  onChange(item.id)
+                  setOpen(false)
+                }}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    item.id === value ? "opacity-100" : "opacity-0"
+                  )}
+                />
+                {item.pricePlanTypeName}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

lib/price-plan/view/data-table/index.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+} from "@tanstack/react-table"
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+}
+
+const DataTable = <TData, TValue>({
+    data,
+    columns,
+}: DataTableProps<TData, TValue>) => {
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    })
+
+    return (
+        <div className="rounded-md mx-8 mt-4">
+            <Table className="border-separate border-spacing-0">
+                <TableHeader className="bg-primary rounded-lg">
+                    {table.getHeaderGroups().map((headerGroup) => (
+                        <TableRow key={headerGroup.id}>
+                            {headerGroup.headers.map((header, index) => {
+                                const isFirst = index === 0;
+                                const isLast = index === headerGroup.headers.length - 1;
+                                return (
+                                    <TableHead
+                                        key={header.id}
+                                        className={`text-white ${isFirst ? "rounded-tl-md" : ""} ${isLast ? "rounded-tr-md" : ""}`}
+                                    >
+                                        {header.isPlaceholder
+                                            ? null
+                                            : flexRender(
+                                                header.column.columnDef.header,
+                                                header.getContext()
+                                            )}
+                                    </TableHead>
+                                )
+                            })}
+                        </TableRow>
+                    ))}
+                </TableHeader>
+                <TableBody>
+                    {table.getRowModel().rows?.length ? (
+                        table.getRowModel().rows.map((row) => (
+                            <TableRow
+                                key={row.id}
+                                data-state={row.getIsSelected() && "selected"}
+                            >
+                                {row.getVisibleCells().map((cell) => (
+                                    <TableCell key={cell.id} className="border-b border-[#00879E]">
+                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))
+                    ) : (
+                        <TableRow>
+                            <TableCell colSpan={columns.length} className="h-24 text-center">
+                                No results.
+                            </TableCell>
+                        </TableRow>
+                    )}
+                </TableBody>
+            </Table>
+        </div>
+    )
+}
+
+export default DataTable

lib/price-plan/view/index.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import ActionTable from "@/components/module/action-table"
+import DataTable from "@/components/module/data-table"
+import { usePricePlan } from "../view-model"
+import QueryWrapper from "@/components/module/query-wrapper"
+import React from "react"
+import PricePlanColumns from "../constant"
+import ModalCreatePriceplan from "./modal-create-priceplan"
+import pricePlanStore from "../store"
+import pricePlanFormStore from "../store/form-store"
+import { observer } from "mobx-react-lite"
+
+const Content = observer(() => {
+
+    const pricePlanVM = usePricePlan(pricePlanStore.getCurrentPage(), pricePlanStore.getSize(), pricePlanStore.getType(), pricePlanFormStore.resetForm)
+    const data = pricePlanVM.data
+    const extra = pricePlanVM.extra
+    const ppTypes = pricePlanVM.ppTypes
+    const serviceTypes = pricePlanVM.serviceTypes
+
+    return (
+        <div>
+            <ActionTable onClickNew={() => pricePlanFormStore.setIsOpen(true)} />
+            <DataTable
+                data={data.getContent()}
+                columns={PricePlanColumns({
+                    onClickDelete: (id: string) => {
+                        pricePlanStore.setIsAlertOpen(true)
+                        pricePlanStore.setPricePlanId(id)
+                    }
+                })}
+                pagination={{
+                    pageIndex: data.getCurrentPage(),
+                    pageSize: data.getPageSize(),
+                    pageCount: data.getTotalPages(),
+                    setPageIndex: pricePlanStore.setCurrentPage,
+                    setPageSize: pricePlanStore.setSize,
+                }}
+                alertDialog={{
+                    isOpen: pricePlanStore.getIsAlertOpen(),
+                    onCancel: () => pricePlanStore.setIsAlertOpen(false),
+                    onConfirm: () => extra.deletePricePlan(pricePlanStore.getPricePlanId()),
+                    setOpen: pricePlanStore.setIsAlertOpen
+                }}
+            />
+            <ModalCreatePriceplan
+                ppTypes={ppTypes}
+                serviceTypes={serviceTypes}
+                onConfirm={extra.createPricePlan}
+                onOpenChange={(val) => pricePlanFormStore.setIsOpen(val)}
+            />
+        </div>
+    )
+})
+
+const PricePlanList = () => {
+    return (
+        <QueryWrapper>
+            <Content />
+        </QueryWrapper>
+    )
+}
+
+export default PricePlanList

lib/price-plan/view/modal-create-priceplan/index.tsx

@@ -0,0 +1,196 @@
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+    DialogFooter,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { DatePicker } from "@/components/module/date-picker"
+import Backdrop from "@/components/module/backdrop"
+import { CreatePricePlanPayload } from "../../data/repository"
+import { format } from "date-fns"
+import pricePlanFormStore from "../../store/form-store"
+import { observer } from "mobx-react-lite"
+
+interface ModalCreatePriceplanProps {
+    ppTypes: Array<{ [key: string]: string }>
+    serviceTypes: Array<{ [key: string]: string }>
+    onOpenChange: (open: boolean) => void
+    onConfirm: (payload: CreatePricePlanPayload) => void
+}
+
+const ModalCreatePriceplan = observer(({
+    ppTypes,
+    serviceTypes,
+    onOpenChange,
+    onConfirm
+}: ModalCreatePriceplanProps) => {
+
+    return (
+        <Backdrop isOpen={pricePlanFormStore.getIsOpen()} onClose={() => onOpenChange(false)}>
+            <Dialog open={pricePlanFormStore.getIsOpen()} onOpenChange={onOpenChange}>
+                <DialogContent className="max-w-4xl" style={{ boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px" }}>
+                    <DialogHeader>
+                        <DialogTitle>New Price Plan</DialogTitle>
+                        <DialogDescription></DialogDescription>
+                    </DialogHeader>
+
+                    <form className="mt-4">
+                        <section>
+                            <h3>Basic Information</h3>
+                            <div className="mt-4 px-4 grid grid-cols-2 gap-2">
+                                <div>
+                                    <Label htmlFor="priceplan-type">Price Plan Type*</Label>
+                                    <Select value={pricePlanFormStore.getOfferType()} onValueChange={(val) => pricePlanFormStore.setOfferType(val)}>
+                                        <SelectTrigger className="w-full">
+                                            <SelectValue id="priceplan-type" placeholder="Select priceplan type" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            {ppTypes.map((item) => (
+                                                <SelectItem key={item.id} value={item.id}>
+                                                    {item.pricePlanTypeName}
+                                                </SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div>
+                                    <Label htmlFor="priceplan-name">Price Plan Name*</Label>
+                                    <Input
+                                        id="priceplan-name"
+                                        placeholder="Input name"
+                                        value={pricePlanFormStore.getOfferName()}
+                                        onChange={(event) => pricePlanFormStore.setOfferName(event.target.value)}
+                                    />
+                                </div>
+                                <div>
+                                    <Label htmlFor="priceplan-code">Price Plan Code</Label>
+                                    <Input
+                                        id="priceplan-code"
+                                        placeholder="Input code"
+                                        value={pricePlanFormStore.getPricePlanCode()}
+                                        onChange={(event) => pricePlanFormStore.setPricePlanCode(event.target.value)}
+                                    />
+                                </div>
+                                <div>
+                                    <Label htmlFor="service-type">Service Type</Label>
+                                    <Select
+                                        value={pricePlanFormStore.getServiceType()}
+                                        onValueChange={(val) => pricePlanFormStore.setServiceType(val)}
+                                    >
+                                        <SelectTrigger>
+                                            <SelectValue id="service-type" placeholder="Select service type" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            {serviceTypes.map((item: any) => (
+                                                <SelectItem key={item.id} value={item.id.toString()}>
+                                                    {item.servTypeName}
+                                                </SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div>
+                                    <Label>Valid Period*</Label>
+                                    <div className="flex gap-2">
+                                        <DatePicker
+                                            placeholder="Start Date"
+                                            value={pricePlanFormStore.getBaseValidPeriod()}
+                                            onChange={(date) => pricePlanFormStore.setBaseValidPeriod(date)}
+                                        />
+                                        <span>-</span>
+                                        <DatePicker placeholder="End Date" value={undefined} />
+                                    </div>
+                                </div>
+                                <div className="col-span-2">
+                                    <Label>Remarks</Label>
+                                    <Input
+                                        placeholder="Input notes"
+                                        value={pricePlanFormStore.getRemarks()}
+                                        onChange={(event) => pricePlanFormStore.setRemarks(event.target.value)}
+                                    />
+                                </div>
+                            </div>
+                        </section>
+
+                        <section className="mt-4">
+                            <h3>Version Information</h3>
+                            <div className="mt-4 px-4 grid grid-cols-2 gap-2">
+                                <div>
+                                    <Label>Valid Period*</Label>
+                                    <div className="flex gap-2">
+                                        <DatePicker
+                                            placeholder="Start Date"
+                                            value={pricePlanFormStore.getVersionValidPeriod()}
+                                            onChange={(date) => pricePlanFormStore.setVersionValidPeriod(date)}
+                                        />
+                                        <span>-</span>
+                                        <DatePicker placeholder="End Date" />
+                                    </div>
+                                </div>
+                                <div>
+                                    <Label htmlFor="source-from">Source From</Label>
+                                    <Select
+                                        value={pricePlanFormStore.getSourceFrom()}
+                                        onValueChange={(val) => pricePlanFormStore.setSourceFrom(val)}
+                                    >
+                                        <SelectTrigger className="w-full">
+                                            <SelectValue id="source-from" placeholder="Select source from" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="1">Share From</SelectItem>
+                                            <SelectItem value="2">Copy From</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div>
+                                    <Label htmlFor="copy-from">Copy From</Label>
+                                    <Select
+                                        value={pricePlanFormStore.getCopyFrom()}
+                                        onValueChange={(val) => pricePlanFormStore.setCopyFrom(val)}
+                                    >
+                                        <SelectTrigger className="w-full">
+                                            <SelectValue id="copy-from" placeholder="Select copy from" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="1">Option 1</SelectItem>
+                                            <SelectItem value="2">Option 2</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+                        </section>
+                    </form>
+
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => {
+                            onOpenChange(false)
+                            pricePlanFormStore.resetForm
+                        }}>Cancel</Button>
+                        <Button
+                            disabled={!pricePlanFormStore.getOfferType() || !pricePlanFormStore.getOfferName() || !pricePlanFormStore.getBaseValidPeriod() || !pricePlanFormStore.getVersionValidPeriod()}
+                            onClick={() => onConfirm({
+                                offerName: pricePlanFormStore.getOfferName(),
+                                offerType: pricePlanFormStore.getOfferType(),
+                                pricePlanCode: pricePlanFormStore.getPricePlanCode(),
+                                serviceType: +pricePlanFormStore.getServiceType(),
+                                baseValidPeriod: format(pricePlanFormStore.getBaseValidPeriod()!, "yyyy-MM-dd"),
+                                remarks: pricePlanFormStore.getRemarks(),
+                                versionValidPeriod: format(pricePlanFormStore.getVersionValidPeriod()!, "yyyy-MM-dd")
+                            })}
+                        >
+                            Submit
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </Backdrop>
+    )
+})
+
+export default ModalCreatePriceplan

lib/price-plan/view/sidebar/index.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { Sidebar, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"
+import { ChevronDown, DollarSign, LayoutDashboard } from "lucide-react"
+import mainLogo from "@/images/Telkomcel.png"
+import Image from "next/image"
+import QueryWrapper from "@/components/module/query-wrapper"
+import Link from "next/link"
+import { useMenuPricePlan } from "../../view-model/sidebar-view-model"
+import { useEffect } from "react"
+import pricePlanStore from "../../store"
+
+const Content = () => {
+    const vm = useMenuPricePlan()
+
+    const resetState = pricePlanStore.reset
+
+    const onClickMenu = (id: string) => {
+        pricePlanStore.setType(id)
+        pricePlanStore.setCurrentPage(0)
+    }
+
+    useEffect(() => {
+        return () => {
+            resetState()
+        }
+    }, [resetState])
+
+    return (
+        <div>
+            <Sidebar>
+                <SidebarHeader className="mb-12">
+                    <div className="max-w-[80%] mt-4 ml-4">
+                        <Image src={mainLogo} alt="main-logo" />
+                    </div>
+                </SidebarHeader>
+                <SidebarMenu>
+                    <SidebarMenuItem className="px-2">
+                        <SidebarMenuButton>
+                            <Link href="/" className="flex items-center gap-2 w-full text-white/60">
+                                <LayoutDashboard size={14}/>
+                                <span className="text-lg font-light">Dashboard</span>
+                            </Link>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+                {vm.getData().map((item, idx) => (
+                    <Collapsible defaultOpen className="group/collapsible" key={item.getParentName() + idx}>
+                        <SidebarGroup>
+                            <SidebarGroupLabel asChild onClick={() => onClickMenu("")}>
+                                <CollapsibleTrigger className="flex items-center gap-1 text-white">
+                                    <DollarSign size={16} />
+                                    <span className="text-lg font-light">
+                                        {item.getParentName() === "S" ? "Subscribe" : item.getParentName()}
+                                    </span>
+                                    <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+                                </CollapsibleTrigger>
+                            </SidebarGroupLabel>
+                        </SidebarGroup>
+                        <CollapsibleContent className="px-6">
+                            <SidebarGroupContent>
+                                <SidebarMenu>
+                                    {item.getPricePlanTypeDto().map((item) => (
+                                        <SidebarMenuItem key={item.id}>
+                                            <SidebarMenuButton asChild onClick={() => onClickMenu(item.id)}>
+                                                <span className={`text-base hover:text-black-80 ${item.id == pricePlanStore.getType() ? "text-white" : "text-white/70"}`}>
+                                                    -
+                                                    <span>{item.pricePlanTypeName}</span>
+                                                </span>
+                                            </SidebarMenuButton>
+                                        </SidebarMenuItem>
+                                    ))}
+                                </SidebarMenu>
+                            </SidebarGroupContent>
+                        </CollapsibleContent>
+                    </Collapsible>
+                ))}
+            </Sidebar>
+        </div>
+    )
+}
+
+const PricePlanSidebar = () => {
+    return (
+        <QueryWrapper>
+            <Content />
+        </QueryWrapper>
+    )
+}
+
+export default PricePlanSidebar