jason
/
FPSMS-frontend
2
0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
FPSMS-frontend
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1323 Commits
16 Branches
15 MiB
 
 
Tree: 578b5f001a
Branches Labels
${ item.name }
Maak branch ${ searchTerm }
van '578b5f001a'
${ noResults }
FPSMS-frontend/src/components/NavigationContent/NavigationContent.tsx

804 regels
28 KiB
Ruw Blame Geschiedenis 

  1. import { useSession } from "next-auth/react";

  2. import Box from "@mui/material/Box";

  3. import Stack from "@mui/material/Stack";

  4. import Typography from "@mui/material/Typography";

  5. import React from "react";

  6. import List from "@mui/material/List";

  7. import ListItemButton from "@mui/material/ListItemButton";

  8. import ListItemText from "@mui/material/ListItemText";

  9. import ListItemIcon from "@mui/material/ListItemIcon";

  10. import Dashboard from "@mui/icons-material/Dashboard";

  11. import Storefront from "@mui/icons-material/Storefront";

  12. import LocalShipping from "@mui/icons-material/LocalShipping";

  13. import Assignment from "@mui/icons-material/Assignment";

  14. import Inventory from "@mui/icons-material/Inventory";

  15. import AssignmentTurnedIn from "@mui/icons-material/AssignmentTurnedIn";

  16. import ReportProblem from "@mui/icons-material/ReportProblem";

  17. import QrCodeIcon from "@mui/icons-material/QrCode";

  18. import ViewModule from "@mui/icons-material/ViewModule";

  19. import Description from "@mui/icons-material/Description";

  20. import CalendarMonth from "@mui/icons-material/CalendarMonth";

  21. import Factory from "@mui/icons-material/Factory";

  22. import PostAdd from "@mui/icons-material/PostAdd";

  23. import Kitchen from "@mui/icons-material/Kitchen";

  24. import Inventory2 from "@mui/icons-material/Inventory2";

  25. import Print from "@mui/icons-material/Print";

  26. import Assessment from "@mui/icons-material/Assessment";

  27. import ShowChart from "@mui/icons-material/ShowChart";

  28. import Settings from "@mui/icons-material/Settings";

  29. import Person from "@mui/icons-material/Person";

  30. import Group from "@mui/icons-material/Group";

  31. import Category from "@mui/icons-material/Category";

  32. import TrendingUp from "@mui/icons-material/TrendingUp";

  33. import Build from "@mui/icons-material/Build";

  34. import Warehouse from "@mui/icons-material/Warehouse";

  35. import VerifiedUser from "@mui/icons-material/VerifiedUser";

  36. import Label from "@mui/icons-material/Label";

  37. import Checklist from "@mui/icons-material/Checklist";

  38. import Science from "@mui/icons-material/Science";

  39. import UploadFile from "@mui/icons-material/UploadFile";

  40. import Sync from "@mui/icons-material/Sync";

  41. import Layers from "@mui/icons-material/Layers";

  42. import Devices from "@mui/icons-material/Devices";

  43. import EventAvailable from "@mui/icons-material/EventAvailable";

  44. import { useTranslation } from "react-i18next";

  45. import { usePathname } from "next/navigation";

  46. import Link from "next/link";

  47. import { NAVIGATION_CONTENT_WIDTH } from "@/config/uiConfig";

  48. import Logo from "../Logo";

  49. import { AUTH } from "../../authorities";

  50. import { isMonitoringEnabled } from "@/config/monitoring";

  51. import PurchaseStockInNavAlerts from "./PurchaseStockInNavAlerts";

  52. import JobOrderFgStockInNavAlerts from "./JobOrderFgStockInNavAlerts";

  53. import MasterDataIssuesNavBadge from "./MasterDataIssuesNavBadge";

  54. 

  55. interface NavigationItem {

  56.   id: string;

  57.   icon: React.ReactNode;

  58.   labelKey: string;

  59.   path: string;

  60.   children?: NavigationItem[];

  61.   isHidden?: boolean | undefined;

  62.   requiredAbility?: string | string[];

  63. }

  64. 

  65. /** FP-MTMS Version Checklist | Functions Ref. No. 67 | v1.0.0 | 2026-08-13 */

  66. const NavigationContent: React.FC = () => {

  67.   const { data: session, status } = useSession();

  68.   const abilities = session?.user?.abilities ?? [];

  69. 

  70.   // Helper: check if user has required permission

  71.   const hasAbility = (required?: string | string[]): boolean => {

  72.     if (!required) return true; // no requirement → always show

  73.     if (Array.isArray(required)) {

  74.       return required.some(ability => abilities.includes(ability));

  75.     }

  76.     return abilities.includes(required);

  77.   };

  78. 

  79.   const navigationItems: NavigationItem[] = [

  80.     {

  81.       id: "nav.dashboard",

  82.       icon: <Dashboard />,

  83.       labelKey: "nav.dashboard",

  84.       path: "/dashboard",

  85.     },

  86.     {

  87.       id: "nav.storeManagement",

  88.       icon: <Storefront />,

  89.       labelKey: "nav.storeManagement",

  90.       path: "",

  91.       requiredAbility: [AUTH.PURCHASE, AUTH.STOCK, AUTH.STOCK_TAKE, AUTH.STOCK_FG, AUTH.STOCK_IN_BIND, AUTH.ITEM_TRACING, AUTH.ADMIN],

  92.       children: [

  93.         {

  94.           id: "nav.store.purchaseOrder",

  95.           icon: <LocalShipping />,

  96.           labelKey: "nav.store.purchaseOrder",

  97.           requiredAbility: [AUTH.PURCHASE, AUTH.ADMIN],

  98.           path: "/po",

  99.         },

  100.         {

  101.           id: "nav.store.pickOrder",

  102.           icon: <Assignment />,

  103.           labelKey: "nav.store.pickOrder",

  104.           requiredAbility: [AUTH.STOCK, AUTH.ADMIN],

  105.           path: "/pickOrder",

  106.         },

  107.         {

  108.           id: "nav.store.inventoryLedger",

  109.           icon: <Inventory />,

  110.           labelKey: "nav.store.inventoryLedger",

  111.           requiredAbility: [AUTH.STOCK, AUTH.ADMIN],

  112.           path: "/inventory",

  113.         },

  114.         {

  115.           id: "nav.store.itemTracing",

  116.           icon: <QrCodeIcon />,

  117.           labelKey: "nav.store.itemTracing",

  118.           requiredAbility: [AUTH.ITEM_TRACING],

  119.           path: "/itemTracing",

  120.         },

  121.         {

  122.           id: "nav.store.stockTake",

  123.           icon: <AssignmentTurnedIn />,

  124.           labelKey: "nav.store.stockTake",

  125.           requiredAbility: [AUTH.STOCK, AUTH.STOCK_TAKE, AUTH.ADMIN],

  126.           path: "/stocktakemanagement",

  127.         },

  128.         {

  129.           id: "nav.store.stockIssue",

  130.           icon: <ReportProblem />,

  131.           labelKey: "nav.store.stockIssue",

  132.           requiredAbility: [AUTH.STOCK, AUTH.STOCK_TAKE, AUTH.ADMIN],

  133.           path: "/stockIssue",

  134.         },

  135.         {

  136.           id: "nav.store.putAwayScan",

  137.           icon: <QrCodeIcon />,

  138.           labelKey: "nav.store.putAwayScan",

  139.           requiredAbility: [AUTH.STOCK, AUTH.STOCK_TAKE, AUTH.STOCK_IN_BIND, AUTH.ADMIN],

  140.           path: "/putAway",

  141.         },

  142.         {

  143.           id: "nav.store.finishedGoodManagement",

  144.           icon: <ViewModule />,

  145.           labelKey: "nav.store.finishedGoodManagement",

  146.           requiredAbility: [AUTH.ADMIN],

  147.           path: "/finishedGood/management",

  148.         },

  149.         {

  150.           id: "nav.store.stockRecord",

  151.           icon: <Description />,

  152.           labelKey: "nav.store.stockRecord",

  153.           requiredAbility: [AUTH.STOCK, AUTH.STOCK_TAKE, AUTH.STOCK_IN_BIND, AUTH.STOCK_FG, AUTH.ADMIN],

  154.           path: "/stockRecord",

  155.         },

  156.         {

  157.           id: "nav.store.doWorkbench",

  158.           icon: <Description />,

  159.           labelKey: "nav.store.doWorkbench",

  160.           requiredAbility: [AUTH.STOCK, AUTH.STOCK_TAKE, AUTH.STOCK_IN_BIND, AUTH.STOCK_FG, AUTH.ADMIN],

  161.           path: "/doworkbench",

  162.         },

  163.       ],

  164.     },

  165.     {

  166.       id: "nav.deliveryOrder",

  167.       icon: <LocalShipping />,

  168.       labelKey: "nav.deliveryOrder",

  169.       path: "/do",

  170.       requiredAbility: [AUTH.STOCK_FG, AUTH.ADMIN],

  171.     },

  172.     {

  173.       id: "nav.scheduling",

  174.       icon: <CalendarMonth />,

  175.       labelKey: "nav.scheduling",

  176.       path: "/ps",

  177.       requiredAbility: [AUTH.FORECAST, AUTH.ADMIN],

  178.       isHidden: false,

  179.     },

  180.     {

  181.       id: "nav.jobOrderManagement",

  182.       icon: <Factory />,

  183.       labelKey: "nav.jobOrderManagement",

  184.       path: "",

  185.       requiredAbility: [AUTH.JOB_CREATE, AUTH.JOB_PICK, AUTH.JOB_PROD, AUTH.ADMIN],

  186.       children: [

  187.         {

  188.           id: "nav.jobOrder.searchCreate",

  189.           icon: <PostAdd />,

  190.           labelKey: "nav.jobOrder.searchCreate",

  191.           requiredAbility: [AUTH.JOB_CREATE, AUTH.ADMIN],

  192.           path: "/jo",

  193.         },

  194.         {

  195.           id: "nav.jobOrder.pickExecution",

  196.           icon: <Inventory />,

  197.           labelKey: "nav.jobOrder.pickExecution",

  198.           requiredAbility: [AUTH.JOB_PICK, AUTH.JOB_MAT, AUTH.ADMIN],

  199.           path: "/jodetail",

  200.         },

  201.         {

  202.           id: "nav.jobOrder.productionProcess",

  203.           icon: <Kitchen />,

  204.           labelKey: "nav.jobOrder.productionProcess",

  205.           requiredAbility: [AUTH.JOB_PROD, AUTH.ADMIN],

  206.           path: "/productionProcess",

  207.         },

  208.         {

  209.           id: "nav.jobOrder.bagUsage",

  210.           icon: <Inventory2 />,

  211.           labelKey: "nav.jobOrder.bagUsage",

  212.           requiredAbility: [AUTH.JOB_PROD, AUTH.ADMIN],

  213.           path: "/bag",

  214.         },

  215.       ],

  216.     },

  217.     {

  218.       id: "nav.bagPrint",

  219.       icon: <Print />,

  220.       labelKey: "nav.bagPrint",

  221.       path: "/bagPrint",

  222.       requiredAbility: [AUTH.JOB_PROD, AUTH.ADMIN],

  223.       isHidden: false,

  224.     },

  225.     {

  226.       id: "nav.laserPrint",

  227.       icon: <Print />,

  228.       labelKey: "nav.laserPrint",

  229.       path: "/laserPrint",

  230.       requiredAbility: [AUTH.JOB_PROD, AUTH.ADMIN],

  231.       isHidden: false,

  232.     },

  233.     {

  234.       id: "nav.report",

  235.       icon: <Assessment />,

  236.       labelKey: "nav.report",

  237.       path: "/report",

  238.       requiredAbility: [AUTH.REPORT_MGMT, AUTH.ADMIN],

  239.       isHidden: false,

  240.     },

  241.     {

  242.       id: "nav.m18Sync",

  243.       icon: <Sync />,

  244.       labelKey: "nav.m18Sync",

  245.       path: "/m18Syn",

  246.       requiredAbility: [AUTH.M18_SYNC, AUTH.ADMIN],

  247.       isHidden: false,

  248.     },

  249.     {

  250.       id: "nav.chartReports",

  251.       icon: <ShowChart />,

  252.       labelKey: "nav.chartReports",

  253.       path: "",

  254.       requiredAbility: [AUTH.TESTING, AUTH.ADMIN, AUTH.PERFORMANCE],

  255.       isHidden: false,

  256.       children: [

  257.         {

  258.           id: "nav.chart.purchase",

  259.           icon: <Storefront />,

  260.           labelKey: "nav.chart.purchase",

  261.           path: "/chart/purchase",

  262.           requiredAbility: [AUTH.TESTING, AUTH.ADMIN],

  263.         },

  264.         {

  265.           id: "nav.chart.jobOrder",

  266.           icon: <Assignment />,

  267.           labelKey: "nav.chart.jobOrder",

  268.           path: "/chart/joborder",

  269.           requiredAbility: [AUTH.TESTING, AUTH.ADMIN],

  270.         },

  271.         {

  272.           id: "nav.chart.jobOrderBoard",

  273.           icon: <ViewModule />,

  274.           labelKey: "nav.chart.jobOrderBoard",

  275.           path: "/chart/joborder/board",

  276.           requiredAbility: [AUTH.TESTING, AUTH.ADMIN],

  277.         },

  278.         {

  279.           id: "nav.chart.delivery",

  280.           icon: <LocalShipping />,

  281.           labelKey: "nav.chart.delivery",

  282.           path: "/chart/delivery",

  283.           requiredAbility: [AUTH.TESTING, AUTH.ADMIN, AUTH.PERFORMANCE],

  284.         },

  285.         {

  286.           id: "nav.chart.warehouse",

  287.           icon: <Warehouse />,

  288.           labelKey: "nav.chart.warehouse",

  289.           path: "/chart/warehouse",

  290.           requiredAbility: [AUTH.TESTING, AUTH.ADMIN],

  291.         },

  292.         {

  293.           id: "nav.chart.forecast",

  294.           icon: <TrendingUp />,

  295.           labelKey: "nav.chart.forecast",

  296.           path: "/chart/forecast",

  297.           requiredAbility: [AUTH.TESTING, AUTH.ADMIN],

  298.         },

  299.       ],

  300.     },

  301.     {

  302.       id: "nav.settings",

  303.       icon: <Settings />,

  304.       labelKey: "nav.settings",

  305.       path: "",

  306.       requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN, AUTH.TRUCK_LANE],

  307.       children: [

  308.         {

  309.           id: "nav.settings.user",

  310.           icon: <Person />,

  311.           labelKey: "nav.settings.user",

  312.           path: "/settings/user",

  313.           requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],

  314.         },

  315.         {

  316.           id: "nav.settings.clientMonitor",

  317.           icon: <Devices />,

  318.           labelKey: "nav.settings.clientMonitor",

  319.           path: "/settings/clientMonitor",

  320.           requiredAbility: [AUTH.ADMIN, AUTH.TESTING],

  321.           isHidden: !isMonitoringEnabled,

  322.         },

  323.         {

  324.           id: "nav.settings.items",

  325.           icon: <Category />,

  326.           labelKey: "nav.settings.items",

  327.           path: "/settings/items",

  328.           requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],

  329.         },

  330.         {

  331.           id: "nav.settings.itemDefaultShelfLife",

  332.           icon: <EventAvailable />,

  333.           labelKey: "nav.settings.itemDefaultShelfLife",

  334.           path: "/settings/itemDefaultShelfLife",

  335.           requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],

  336.         },

  337.         {

  338.           id: "nav.settings.equipment",

  339.           icon: <Build />,

  340.           labelKey: "nav.settings.equipment",

  341.           path: "/settings/equipment",

  342.           requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],

  343.         },

  344.         {

  345.           id: "nav.settings.warehouse",

  346.           icon: <Warehouse />,

  347.           labelKey: "nav.settings.warehouse",

  348.           path: "/settings/warehouse",

  349.           requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],

  350.         },

  351.         {

  352.           id: "nav.settings.printer",

  353.           icon: <Print />,

  354.           labelKey: "nav.settings.printer",

  355.           path: "/settings/printer",

  356.           requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],

  357.         },

  358.         {

  359.           id: "nav.settings.priceInquiry",

  360.           icon: <Assessment />,

  361.           labelKey: "nav.settings.priceInquiry",

  362.           path: "/settings/itemPrice",

  363.           requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],

  364.         },

  365.         {

  366.           id: "nav.settings.qcItem",

  367.           icon: <VerifiedUser />,

  368.           labelKey: "nav.settings.qcItem",

  369.           path: "/settings/qcItem",

  370.           requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],

  371.         },

  372.         {

  373.           id: "nav.settings.qcCategory",

  374.           icon: <Label />,

  375.           labelKey: "nav.settings.qcCategory",

  376.           path: "/settings/qcCategory",

  377.           requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],

  378.         },

  379.         {

  380.           id: "nav.settings.qcItemAll",

  381.           icon: <Checklist />,

  382.           labelKey: "nav.settings.qcItemAll",

  383.           path: "/settings/qcItemAll",

  384.           requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],

  385.         },

  386.         {

  387.           id: "nav.settings.shopAndTruck",

  388.           icon: <Storefront />,

  389.           labelKey: "nav.settings.shopAndTruck",

  390.           path: "/settings/shop/board",

  391.           requiredAbility: [AUTH.TRUCK_LANE, AUTH.ADMIN],

  392.         },

  393.         {

  394.           id: "nav.settings.deliveryOrderFloor",

  395.           icon: <Layers />,

  396.           labelKey: "nav.settings.deliveryOrderFloor",

  397.           path: "/settings/deliveryOrderFloor",

  398.           requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],

  399.         },

  400.         {

  401.           id: "nav.settings.demandForecast",

  402.           icon: <TrendingUp />,

  403.           labelKey: "nav.settings.demandForecast",

  404.           path: "/settings/rss",

  405.           requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],

  406.         },

  407.         {

  408.           id: "nav.settings.bomWeighting",

  409.           icon: <ViewModule />,

  410.           labelKey: "nav.settings.bomWeighting",

  411.           path: "/settings/bomWeighting",

  412.           requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],

  413.         },

  414.         {

  415.           id: "nav.settings.masterDataIssues",

  416.           icon: <ReportProblem />,

  417.           labelKey: "nav.settings.masterDataIssues",

  418.           path: "/settings/masterDataIssues",

  419.           requiredAbility: [AUTH.ADMIN],

  420.         },

  421.         {

  422.           id: "nav.settings.qrCodeHandle",

  423.           icon: <QrCodeIcon />,

  424.           labelKey: "nav.settings.qrCodeHandle",

  425.           path: "/settings/qrCodeHandle",

  426.           requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],

  427.         },

  428.         {

  429.           id: "nav.settings.importTesting",

  430.           icon: <Science />,

  431.           labelKey: "nav.settings.importTesting",

  432.           path: "/settings/m18ImportTesting",

  433.           requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],

  434.         },

  435.         {

  436.           id: "nav.settings.importExcel",

  437.           icon: <UploadFile />,

  438.           labelKey: "nav.settings.importExcel",

  439.           path: "/settings/importExcel",

  440.           requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],

  441.         },

  442.         {

  443.           id: "nav.settings.importBom",

  444.           icon: <UploadFile />,

  445.           labelKey: "nav.settings.importBom",

  446.           path: "/settings/importBom",

  447.           requiredAbility: [AUTH.VIEW_USER, AUTH.ADMIN],

  448.         },

  449.       ],

  450.     },

  451.   ];

  452.   const { t } = useTranslation("navigation");

  453.   const pathname = usePathname();

  454.   const abilitySet = new Set(abilities.map((a) => String(a).trim()));

  455.   /** 採購入庫側欄紅點：TESTING / ADMIN / STOCK */

  456.   const canSeePoAlerts =

  457.     abilitySet.has(AUTH.TESTING) || abilitySet.has(AUTH.ADMIN) || abilitySet.has(AUTH.STOCK);

  458.   /** 工單 QC／上架紅點：仍僅 TESTING */

  459.   const canSeeJoFgAlerts = abilitySet.has(AUTH.TESTING);

  460.   const canSeeMasterDataIssueBadge = abilitySet.has(AUTH.ADMIN);

  461. 

  462.   const [openItems, setOpenItems] = React.useState<string[]>([]);

  463.   /** Keep parent sections expanded on deep links (e.g. /po/edit from nav red spot) so alerts stay visible. */

  464.   React.useEffect(() => {

  465.     const ensureOpen: string[] = [];

  466.     if (pathname.startsWith("/chart")) {

  467.       ensureOpen.push("nav.chartReports");

  468.     }

  469.     if (pathname === "/po" || pathname.startsWith("/po/")) {

  470.       ensureOpen.push("nav.storeManagement");

  471.     }

  472.     if (pathname === "/productionProcess" || pathname.startsWith("/productionProcess/")) {

  473.       ensureOpen.push("nav.jobOrderManagement");

  474.     }

  475.     if (

  476.       pathname === "/jo/workbench" ||

  477.       pathname.startsWith("/jo/workbench/") ||

  478.       pathname === "/jodetail" ||

  479.       pathname.startsWith("/jodetail/")

  480.     ) {

  481.       ensureOpen.push("nav.jobOrderManagement");

  482.     }

  483.     if (

  484.       pathname === "/doworkbench" ||

  485.       pathname.startsWith("/doworkbench/") ||

  486.       pathname === "/doworkbenchsearch" ||

  487.       pathname.startsWith("/doworkbenchsearch/")

  488.     ) {

  489.       ensureOpen.push("nav.storeManagement");

  490.     }

  491.     if (ensureOpen.length === 0) return;

  492.     setOpenItems((prev) => {

  493.       const set = new Set(prev);

  494.       let changed = false;

  495.       for (const id of ensureOpen) {

  496.         if (!set.has(id)) {

  497.           set.add(id);

  498.           changed = true;

  499.         }

  500.       }

  501.       return changed ? Array.from(set) : prev;

  502.     });

  503.   }, [pathname]);

  504.   const toggleItem = (id: string) => {

  505.     setOpenItems((prevOpenItems) =>

  506.       prevOpenItems.includes(id)

  507.         ? prevOpenItems.filter((item) => item !== id)

  508.         : [...prevOpenItems, id],

  509.     );

  510.   };

  511. 

  512.   const selectedLeafPath = React.useMemo(() => {

  513.     const leafPaths: string[] = [];

  514.     const walk = (items: NavigationItem[]) => {

  515.       for (const it of items) {

  516.         if (it.isHidden) continue;

  517.         if (!hasAbility(it.requiredAbility)) continue;

  518.         if (it.path) leafPaths.push(it.path);

  519.         if (it.children?.length) walk(it.children);

  520.       }

  521.     };

  522.     walk(navigationItems);

  523. 

  524.     // Pick the most specific (longest) match to avoid double-highlighting

  525.     const matches = leafPaths.filter((p) => {

  526.       if (pathname === p) return true;

  527.       if (!pathname.startsWith(p + "/")) return false;

  528.       // `/doworkbench` must not claim `/doworkbenchsearch` (prefix without trailing slash)

  529.       if (p === "/doworkbench" && pathname.startsWith("/doworkbenchsearch")) return false;

  530.       // Shop sub-routes (detail, truckdetail, legacy tab page) share one nav entry → board

  531.       if (

  532.         p === "/settings/shop/board" &&

  533.         (pathname === "/settings/shop" || pathname.startsWith("/settings/shop/"))

  534.       ) {

  535.         return true;

  536.       }

  537.       return true;

  538.     });

  539.     matches.sort((a, b) => b.length - a.length);

  540.     return matches[0] ?? "";

  541.   }, [hasAbility, navigationItems, pathname]);

  542. 

  543.   const renderNavigationItem = (item: NavigationItem) => {

  544.     if (!hasAbility(item.requiredAbility)) {

  545.       return null;

  546.     }

  547. 

  548.     const isOpen = openItems.includes(item.id);

  549.     const hasVisibleChildren = item.children?.some(child => hasAbility(child.requiredAbility));

  550.     const isLeaf = Boolean(item.path);

  551.     const isSelected = isLeaf && item.path

  552.       ? item.path === selectedLeafPath

  553.       : hasVisibleChildren && item.children?.some((c) => c.path && c.path === selectedLeafPath);

  554. 

  555.     const content = (

  556.       <ListItemButton

  557.         selected={isSelected}

  558.         onClick={isLeaf ? undefined : () => toggleItem(item.id)}

  559.         sx={{

  560.           mx: 1,

  561.           "&.Mui-selected .MuiListItemIcon-root": { color: "primary.main" },

  562.         }}

  563.       >

  564.         <ListItemIcon sx={{ minWidth: 40 }}>{item.icon}</ListItemIcon>

  565.         <ListItemText

  566.           primary={t(item.labelKey)}

  567.           primaryTypographyProps={{ fontWeight: isSelected ? 600 : 500 }}

  568.         />

  569.       </ListItemButton>

  570.     );

  571. 

  572.     return (

  573.       <Box key={item.id}>

  574.         {isLeaf ? (

  575.           <Link href={item.path!} style={{ textDecoration: "none", color: "inherit" }}>

  576.             {content}

  577.           </Link>

  578.         ) : (

  579.           content

  580.         )}

  581.         {item.children && isOpen && hasVisibleChildren && (

  582.           <List sx={{ pl: 2, py: 0 }}>

  583.             {item.children.map(

  584.               (child) => !child.isHidden && hasAbility(child.requiredAbility) && (

  585.                 child.path === "/po" ? (

  586.                   <Box

  587.                     key={child.id}

  588.                     sx={{

  589.                       display: "flex",

  590.                       alignItems: "stretch",

  591.                       mx: 1,

  592.                       borderRadius: 1,

  593.                       overflow: "hidden",

  594.                       "&:hover": { bgcolor: "action.hover" },

  595.                     }}

  596.                   >

  597.                     <Box

  598.                       component={Link}

  599.                       href={child.path}

  600.                       sx={{

  601.                         flex: 1,

  602.                         minWidth: 0,

  603.                         textDecoration: "none",

  604.                         color: "inherit",

  605.                         display: "flex",

  606.                       }}

  607.                     >

  608.                       <ListItemButton

  609.                         selected={child.path === selectedLeafPath}

  610.                         sx={{

  611.                           flex: 1,

  612.                           py: 1,

  613.                           pr: 0.5,

  614.                           "&.Mui-selected .MuiListItemIcon-root": { color: "primary.main" },

  615.                         }}

  616.                       >

  617.                         <ListItemIcon sx={{ minWidth: 40 }}>{child.icon}</ListItemIcon>

  618.                         <ListItemText

  619.                           primary={t(child.labelKey)}

  620.                           primaryTypographyProps={{

  621.                             fontWeight:

  622.                               child.path === selectedLeafPath ? 600 : 500,

  623.                             fontSize: "0.875rem",

  624.                           }}

  625.                         />

  626.                       </ListItemButton>

  627.                     </Box>

  628.                     <PurchaseStockInNavAlerts enabled={canSeePoAlerts} />

  629.                   </Box>

  630.                 ) : child.path === "/settings/masterDataIssues" ? (

  631.                   <Box

  632.                     key={child.id}

  633.                     component={Link}

  634.                     href={child.path}

  635.                     sx={{

  636.                       display: "block",

  637.                       mx: 1,

  638.                       borderRadius: 1,

  639.                       textDecoration: "none",

  640.                       color: "inherit",

  641.                       "&:hover": { bgcolor: "action.hover" },

  642.                     }}

  643.                   >

  644.                     <ListItemButton

  645.                       selected={child.path === selectedLeafPath}

  646.                       sx={{

  647.                         py: 1,

  648.                         pr: 1.5,

  649.                         display: "flex",

  650.                         alignItems: "center",

  651.                         gap: 0.5,

  652.                         "&.Mui-selected .MuiListItemIcon-root": { color: "primary.main" },

  653.                       }}

  654.                     >

  655.                       <ListItemIcon sx={{ minWidth: 40 }}>{child.icon}</ListItemIcon>

  656.                       <ListItemText

  657.                         primary={t(child.labelKey)}

  658.                         sx={{ flex: 1, minWidth: 0, my: 0 }}

  659.                         primaryTypographyProps={{

  660.                           fontWeight:

  661.                             child.path === selectedLeafPath ? 600 : 500,

  662.                           fontSize: "0.875rem",

  663.                         }}

  664.                       />

  665.                       <MasterDataIssuesNavBadge enabled={canSeeMasterDataIssueBadge} />

  666.                     </ListItemButton>

  667.                   </Box>

  668.                 ) : child.path === "/productionProcess" ? (

  669.                   <Box

  670.                     key={child.id}

  671.                     sx={{

  672.                       display: "flex",

  673.                       alignItems: "stretch",

  674.                       mx: 1,

  675.                       borderRadius: 1,

  676.                       overflow: "hidden",

  677.                       "&:hover": { bgcolor: "action.hover" },

  678.                     }}

  679.                   >

  680.                     <Box

  681.                       component={Link}

  682.                       href={child.path}

  683.                       sx={{

  684.                         flex: 1,

  685.                         minWidth: 0,

  686.                         textDecoration: "none",

  687.                         color: "inherit",

  688.                         display: "flex",

  689.                       }}

  690.                     >

  691.                       <ListItemButton

  692.                         selected={child.path === selectedLeafPath}

  693.                         sx={{

  694.                           flex: 1,

  695.                           py: 1,

  696.                           pr: 0.5,

  697.                           "&.Mui-selected .MuiListItemIcon-root": { color: "primary.main" },

  698.                         }}

  699.                       >

  700.                         <ListItemIcon sx={{ minWidth: 40 }}>{child.icon}</ListItemIcon>

  701.                         <ListItemText

  702.                           primary={t(child.labelKey)}

  703.                           primaryTypographyProps={{

  704.                             fontWeight:

  705.                               child.path === selectedLeafPath ? 600 : 500,

  706.                             fontSize: "0.875rem",

  707.                           }}

  708.                         />

  709.                       </ListItemButton>

  710.                     </Box>

  711.                     <JobOrderFgStockInNavAlerts enabled={canSeeJoFgAlerts} />

  712.                   </Box>

  713.                 ) : (

  714.                   <Box

  715.                     key={child.id}

  716.                     component={Link}

  717.                     href={child.path}

  718.                     sx={{ textDecoration: "none", color: "inherit" }}

  719.                   >

  720.                     <ListItemButton

  721.                       selected={child.path === selectedLeafPath}

  722.                       sx={{

  723.                         mx: 1,

  724.                         py: 1,

  725.                         "&.Mui-selected .MuiListItemIcon-root": { color: "primary.main" },

  726.                       }}

  727.                     >

  728.                       <ListItemIcon sx={{ minWidth: 40 }}>{child.icon}</ListItemIcon>

  729.                       <ListItemText

  730.                         primary={t(child.labelKey)}

  731.                         primaryTypographyProps={{

  732.                           fontWeight:

  733.                             child.path === selectedLeafPath

  734.                               ? 600

  735.                               : 500,

  736.                           fontSize: "0.875rem",

  737.                         }}

  738.                       />

  739.                     </ListItemButton>

  740.                   </Box>

  741.                 )

  742.               ),

  743.             )}

  744.           </List>

  745.         )}

  746.       </Box>

  747.     );

  748.   };

  749. 

  750.   if (status === "loading") {

  751.     return <Box sx={{ width: NAVIGATION_CONTENT_WIDTH, p: 3 }}>Loading...</Box>;

  752.   }

  753. 

  754.   return (

  755.     <Box sx={{ width: NAVIGATION_CONTENT_WIDTH, height: "100%", display: "flex", flexDirection: "column" }}>

  756.       <Box

  757.         className="bg-gradient-to-br from-blue-500/15 via-slate-100 to-slate-50 dark:from-blue-500/20 dark:via-slate-800 dark:to-slate-900"

  758.         sx={{

  759.           mx: 1,

  760.           mt: 1,

  761.           mb: 1,

  762.           px: 1.5,

  763.           py: 2,

  764.           flexShrink: 0,

  765.           display: "flex",

  766.           alignItems: "center",

  767.           justifyContent: "flex-start",

  768.           minHeight: 56,

  769.         }}

  770.       >

  771.         <Stack direction="column" alignItems="flex-start" spacing={0.5}>

  772.           <Logo height={42} />

  773.           {process.env.NODE_ENV === "production" && (

  774.             <Typography

  775.               variant="body2"

  776.               sx={{

  777.                 fontWeight: 700,

  778.                 color: "warning.dark",

  779.                 bgcolor: "warning.light",

  780.                 px: 1,

  781.                 py: 0.5,

  782.                 borderRadius: 1,

  783.                 border: "1px solid",

  784.                 borderColor: "warning.main",

  785.               }}

  786.             >

  787.               {t("nav.productionServer")}

  788.             </Typography>

  789.           )}

  790.         </Stack>

  791.       </Box>

  792.       <Box sx={{ borderTop: 1, borderColor: "divider" }} />

  793.       <List component="nav" sx={{ flex: 1, overflow: "auto", py: 1, px: 0 }}>

  794.         {navigationItems

  795.           .filter(item => !item.isHidden)

  796.           .map(renderNavigationItem)

  797.           .filter(Boolean)}

  798.       </List>

  799.     </Box>

  800.   );

  801. };

  802. 

  803. export default NavigationContent;