toggle screen for product configurations

Frontend/erp-system/components/Layouts/AppSidebar.tsx

@@ -15,6 +15,7 @@ import {
   Package,
   PackageCheck,
   Settings,
+  SlidersHorizontal,
   ShoppingCart,
   SwatchBook,
   Tag,
@@ -44,6 +45,7 @@ const navItems: {
       { title: "Category", href: "/dashboard/products/categories", icon: ListTree },
       { title: "Brand", href: "/dashboard/products/brands", icon: Tag },
       { title: "Variant", href: "/dashboard/products/variants", icon: SwatchBook },
+      { title: "Product Configuration", href: "/dashboard/products/configuration", icon: SlidersHorizontal },
     ],
   },
   { title: "Vendors", href: "/dashboard/vendors", icon: Truck, chevron: true },

Frontend/erp-system/components/ui/switch.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({ className, ...props }: SwitchPrimitive.Root.Props) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent bg-input transition-colors outline-none focus-visible:ring-3 focus-visible:ring-purple-500/50 disabled:cursor-not-allowed disabled:opacity-50 data-checked:bg-purple-600 dark:bg-input/60",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block size-5 translate-x-0.5 rounded-full bg-background shadow-sm ring-0 transition-transform data-checked:translate-x-5.5 dark:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }