init project portal web

components/module/sidebar/price-plan-sidebar/index.tsx

@@ -0,0 +1,78 @@
+"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/logo.png"
+import Image from "next/image"
+import QueryWrapper from "@/components/module/query-wrapper"
+import { useMenuPricePlan } from "./view-model"
+import Link from "next/link"
+
+const Content = () => {
+    const vm = useMenuPricePlan()
+
+    return (
+        <div>
+            <Sidebar>
+                <SidebarHeader className="mb-12">
+                    <div className="flex gap-2 items-center mx-auto">
+                        <Image src={mainLogo} alt="main-logo" width={42} height={42} />
+                        <h1 className="text-2xl">NetworkPro</h1>
+                    </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>
+                                <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>
+                                                <Link href="#" className=" text-base text-white/70 hover:text-black-80">
+                                                    -
+                                                    <span>{item.pricePlanTypeName}</span>
+                                                </Link>
+                                            </SidebarMenuButton>
+                                        </SidebarMenuItem>
+                                    ))}
+                                </SidebarMenu>
+                            </SidebarGroupContent>
+                        </CollapsibleContent>
+                    </Collapsible>
+                ))}
+            </Sidebar>
+        </div>
+    )
+}
+
+const PricePlanSidebar = () => {
+    return (
+        <QueryWrapper>
+            <Content />
+        </QueryWrapper>
+    )
+}
+
+export default PricePlanSidebar