init project portal web

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