From f22c50b6172762c5f28f9315eca808c7d3fc0f60 Mon Sep 17 00:00:00 2001
From: "MSI\\derek" <abc@gmail.com>
Date: Fri, 28 Feb 2025 15:46:08 +0800
Subject: [PATCH] update nav bar

---
 src/components/LoginPage/LoginForm.tsx        |   2 +
 .../NavigationContent/NavigationContent.tsx   | 447 +++++++++---------
 src/theme/devias-material-kit/components.ts   |  10 +
 3 files changed, 223 insertions(+), 236 deletions(-)

diff --git a/src/components/LoginPage/LoginForm.tsx b/src/components/LoginPage/LoginForm.tsx
index 38b1bab..3defadb 100644
--- a/src/components/LoginPage/LoginForm.tsx
+++ b/src/components/LoginPage/LoginForm.tsx
@@ -32,6 +32,8 @@ const getHumanFriendlyErrorMessage = (
 };
 
 const LoginForm: React.FC = () => {
+  // clean abilities before login
+  window.localStorage.removeItem("abilities")
   const { t } = useTranslation("login");
   const {
     register,
diff --git a/src/components/NavigationContent/NavigationContent.tsx b/src/components/NavigationContent/NavigationContent.tsx
index c26e034..9bd005f 100644
--- a/src/components/NavigationContent/NavigationContent.tsx
+++ b/src/components/NavigationContent/NavigationContent.tsx
@@ -1,6 +1,6 @@
 import Divider from "@mui/material/Divider";
 import Box from "@mui/material/Box";
-import React from "react";
+import React, { useEffect } from "react";
 import List from "@mui/material/List";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
@@ -29,243 +29,218 @@ interface NavigationItem {
   label: string;
   path: string;
   children?: NavigationItem[];
+  isHidden?: true | undefined
 }
 
-const navigationItems: NavigationItem[] = [
-  {
-    icon: <Dashboard />,
-    label: "Dashboard",
-    path: "",
-    // children: [
-      // {
-      //   icon: <SummarizeIcon />,
-      //   label: "Project Financial Summary",
-      //   path: "/dashboard/ProjectFinancialSummary",
-      // },
-      // {
-      //   icon: <PaymentsIcon />,
-      //   label: "Company / Team Cash Flow",
-      //   path: "/dashboard/CompanyTeamCashFlow",
-      // },
-      // {
-      //   icon: <PaymentsIcon />,
-      //   label: "Project Cash Flow",
-      //   path: "/dashboard/ProjectCashFlow",
-      // },
-      // {
-      //   icon: <AccountTreeIcon />,
-      //   label: "Project Status by Client",
-      //   path: "/dashboard/ProjectStatusByClient",
-      // },
-      // {
-      //   icon: <PeopleIcon />,
-      //   label: "Staff Utilization",
-      //   path: "/dashboard/StaffUtilization",
-      // },
-    // ],
-  },
-  {
-    icon: <RequestQuote />,
-    label: "Raw Material",
-    path: "",
-    children: [
-      {
-        icon: <RequestQuote />,
-        label: "Purchase Order",
-        path: "",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Pick Order",
-        path: "",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Cons. Pick Order",
-        path: "",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Delivery Pick Order",
-        path: "",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Warehouse",
-        path: "",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Location Transfer Order",
-        path: "",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "View item In-out And invertory Ledger",
-        path: "",
-      },
-    ],
-  },
-  {
-    icon: <RequestQuote />,
-    label: "Production",
-    path: "",
-    children: [
-      {
-        icon: <RequestQuote />,
-        label: "Job Order",
-        path: "",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Job Order Traceablity ",
-        path: "",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Work Order",
-        path: "",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Work Order Traceablity ",
-        path: "",
-      },
-    ],
-  },
-  {
-    icon: <RequestQuote />,
-    label: "Quality Control Log",
-    path: "",
-    children: [
-      {
-        icon: <RequestQuote />,
-        label: "Quality Control Log",
-        path: "",
-      },
-    ],
-  },
-  {
-    icon: <RequestQuote />,
-    label: "Delivery",
-    path: "",
-    children: [
-      {
-        icon: <RequestQuote />,
-        label: "Delivery Order",
-        path: "",
-      },
-    ],
-  },
-  {
-    icon: <RequestQuote />,
-    label: "Report",
-    path: "",
-    children: [
-      {
-        icon: <RequestQuote />,
-        label: "report",
-        path: "",
-      },
-    ],
-  },
-  {
-    icon: <RequestQuote />,
-    label: "Recipe",
-    path: "",
-    children: [
-      {
-        icon: <RequestQuote />,
-        label: "FG Recipe",
-        path: "",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "SFG Recipe",
-        path: "",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Recipe",
-        path: "",
-      },
-    ],
-  },
-  {
-    icon: <RequestQuote />,
-    label: "Settings",
-    path: "",
-    children: [
-      {
-        icon: <RequestQuote />,
-        label: "User",
-        path: "/settings/user",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "User Group",
-        path: "/settings/user",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Material",
-        path: "/settings/user",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Maintain By-product",
-        path: "/settings/user",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Finished Goods",
-        path: "/settings/user",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Equipment Type",
-        path: "/settings/user",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Equipment",
-        path: "/settings/user",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Warehouse",
-        path: "/settings/user",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Supplier",
-        path: "/settings/user",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "Customer",
-        path: "/settings/user",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "QC Check Item",
-        path: "/settings/user",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "QC Category",
-        path: "/settings/user",
-      },
-      {
-        icon: <RequestQuote />,
-        label: "QC Check Template",
-        path: "/settings/user",
-      },
-    ],
-  },
-];
-
 const NavigationContent: React.FC = () => {
+  // const abilities = window.localStorage.getItem("abilites")
+  // console.log(abilities)
+  const navigationItems: NavigationItem[] = [
+    {
+      icon: <Dashboard />,
+      label: "Dashboard",
+      path: "",
+    },
+    {
+      icon: <RequestQuote />,
+      label: "Raw Material",
+      path: "",
+      children: [
+        {
+          icon: <RequestQuote />,
+          label: "Purchase Order",
+          path: "",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Pick Order",
+          path: "",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Cons. Pick Order",
+          path: "",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Delivery Pick Order",
+          path: "",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Warehouse",
+          path: "",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Location Transfer Order",
+          path: "",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "View item In-out And invertory Ledger",
+          path: "",
+        },
+      ],
+    },
+    {
+      icon: <RequestQuote />,
+      label: "Production",
+      path: "",
+      children: [
+        {
+          icon: <RequestQuote />,
+          label: "Job Order",
+          path: "",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Job Order Traceablity ",
+          path: "",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Work Order",
+          path: "",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Work Order Traceablity ",
+          path: "",
+        },
+      ],
+    },
+    {
+      icon: <RequestQuote />,
+      label: "Quality Control Log",
+      path: "",
+      children: [
+        {
+          icon: <RequestQuote />,
+          label: "Quality Control Log",
+          path: "",
+        },
+      ],
+    },
+    {
+      icon: <RequestQuote />,
+      label: "Delivery",
+      path: "",
+      children: [
+        {
+          icon: <RequestQuote />,
+          label: "Delivery Order",
+          path: "",
+        },
+      ],
+    },
+    {
+      icon: <RequestQuote />,
+      label: "Report",
+      path: "",
+      children: [
+        {
+          icon: <RequestQuote />,
+          label: "report",
+          path: "",
+        },
+      ],
+    },
+    {
+      icon: <RequestQuote />,
+      label: "Recipe",
+      path: "",
+      children: [
+        {
+          icon: <RequestQuote />,
+          label: "FG Recipe",
+          path: "",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "SFG Recipe",
+          path: "",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Recipe",
+          path: "",
+        },
+      ],
+    },
+    {
+      icon: <RequestQuote />,
+      label: "Settings",
+      path: "",
+      children: [
+        {
+          icon: <RequestQuote />,
+          label: "User",
+          path: "/settings/user",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "User Group",
+          path: "/settings/user",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Material",
+          path: "/settings/user",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Maintain By-product",
+          path: "/settings/user",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Finished Goods",
+          path: "/settings/user",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Equipment Type",
+          path: "/settings/user",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Equipment",
+          path: "/settings/user",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Warehouse",
+          path: "/settings/user",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Supplier",
+          path: "/settings/user",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "Customer",
+          path: "/settings/user",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "QC Check Item",
+          path: "/settings/user",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "QC Category",
+          path: "/settings/user",
+        },
+        {
+          icon: <RequestQuote />,
+          label: "QC Check Template",
+          path: "/settings/user",
+        },
+      ],
+    },
+  ];
   const { t } = useTranslation("common");
   const pathname = usePathname();
 
@@ -297,7 +272,7 @@ const NavigationContent: React.FC = () => {
         </ListItemButton>
         {item.children && isOpen && (
           <List sx={{ pl: 2 }}>
-            {item.children.map((child) => renderNavigationItem(child))}
+            {item.children.map((child) => (!child.isHidden && renderNavigationItem(child)))}
           </List>
         )}
       </Box>
diff --git a/src/theme/devias-material-kit/components.ts b/src/theme/devias-material-kit/components.ts
index 4a742ad..6ecdf39 100644
--- a/src/theme/devias-material-kit/components.ts
+++ b/src/theme/devias-material-kit/components.ts
@@ -172,6 +172,16 @@ const components: ThemeOptions["components"] = {
       },
     },
   },
+  MuiAutocomplete: {
+    styleOverrides: {
+      root: {
+        "& .MuiFilledInput-root": {
+          paddingTop: 8,
+          paddingBottom: 8,
+        },
+      },
+    },
+  },
   MuiFilledInput: {
     styleOverrides: {
       root: {