jason
/
FPSMS-frontend
2
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
FPSMS-frontend
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
1253 提交
10 分支
7.5 MiB
 
 
目录树: 4e9dfc4100
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 '4e9dfc4100'
${ noResults }
FPSMS-frontend/src/components/NavigationContent/NavigationContent.tsx

787 行
27 KiB
原始文件 Blame 文件历史 

  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],

  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],

  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],

  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.         },

  329.         {

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

  331.           icon: <EventAvailable />,

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

  333.           path: "/settings/itemDefaultShelfLife",

  334.         },

  335.         {

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

  337.           icon: <Build />,

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

  339.           path: "/settings/equipment",

  340.         },

  341.         {

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

  343.           icon: <Warehouse />,

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

  345.           path: "/settings/warehouse",

  346.         },

  347.         {

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

  349.           icon: <Print />,

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

  351.           path: "/settings/printer",

  352.         },

  353.         {

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

  355.           icon: <Assessment />,

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

  357.           path: "/settings/itemPrice",

  358.         },

  359.         {

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

  361.           icon: <VerifiedUser />,

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

  363.           path: "/settings/qcItem",

  364.         },

  365.         {

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

  367.           icon: <Label />,

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

  369.           path: "/settings/qcCategory",

  370.         },

  371.         {

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

  373.           icon: <Checklist />,

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

  375.           path: "/settings/qcItemAll",

  376.         },

  377.         {

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

  379.           icon: <Storefront />,

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

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

  382.         },

  383.         {

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

  385.           icon: <Layers />,

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

  387.           path: "/settings/deliveryOrderFloor",

  388.         },

  389.         {

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

  391.           icon: <TrendingUp />,

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

  393.           path: "/settings/rss",

  394.         },

  395.         {

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

  397.           icon: <ViewModule />,

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

  399.           path: "/settings/bomWeighting",

  400.         },

  401.         {

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

  403.           icon: <ReportProblem />,

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

  405.           path: "/settings/masterDataIssues",

  406.           requiredAbility: [AUTH.ADMIN],

  407.         },

  408.         {

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

  410.           icon: <QrCodeIcon />,

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

  412.           path: "/settings/qrCodeHandle",

  413.         },

  414.         {

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

  416.           icon: <Science />,

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

  418.           path: "/settings/m18ImportTesting",

  419.         },

  420.         {

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

  422.           icon: <UploadFile />,

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

  424.           path: "/settings/importExcel",

  425.         },

  426.         {

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

  428.           icon: <UploadFile />,

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

  430.           path: "/settings/importBom",

  431.         },

  432.       ],

  433.     },

  434.   ];

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

  436.   const pathname = usePathname();

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

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

  439.   const canSeePoAlerts =

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

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

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

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

  444. 

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

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

  447.   React.useEffect(() => {

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

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

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

  451.     }

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

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

  454.     }

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

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

  457.     }

  458.     if (

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

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

  461.       pathname === "/jodetail" ||

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

  463.     ) {

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

  465.     }

  466.     if (

  467.       pathname === "/doworkbench" ||

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

  469.       pathname === "/doworkbenchsearch" ||

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

  471.     ) {

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

  473.     }

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

  475.     setOpenItems((prev) => {

  476.       const set = new Set(prev);

  477.       let changed = false;

  478.       for (const id of ensureOpen) {

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

  480.           set.add(id);

  481.           changed = true;

  482.         }

  483.       }

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

  485.     });

  486.   }, [pathname]);

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

  488.     setOpenItems((prevOpenItems) =>

  489.       prevOpenItems.includes(id)

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

  491.         : [...prevOpenItems, id],

  492.     );

  493.   };

  494. 

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

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

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

  498.       for (const it of items) {

  499.         if (it.isHidden) continue;

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

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

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

  503.       }

  504.     };

  505.     walk(navigationItems);

  506. 

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

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

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

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

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

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

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

  514.       if (

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

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

  517.       ) {

  518.         return true;

  519.       }

  520.       return true;

  521.     });

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

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

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

  525. 

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

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

  528.       return null;

  529.     }

  530. 

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

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

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

  534.     const isSelected = isLeaf && item.path

  535.       ? item.path === selectedLeafPath

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

  537. 

  538.     const content = (

  539.       <ListItemButton

  540.         selected={isSelected}

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

  542.         sx={{

  543.           mx: 1,

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

  545.         }}

  546.       >

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

  548.         <ListItemText

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

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

  551.         />

  552.       </ListItemButton>

  553.     );

  554. 

  555.     return (

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

  557.         {isLeaf ? (

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

  559.             {content}

  560.           </Link>

  561.         ) : (

  562.           content

  563.         )}

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

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

  566.             {item.children.map(

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

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

  569.                   <Box

  570.                     key={child.id}

  571.                     sx={{

  572.                       display: "flex",

  573.                       alignItems: "stretch",

  574.                       mx: 1,

  575.                       borderRadius: 1,

  576.                       overflow: "hidden",

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

  578.                     }}

  579.                   >

  580.                     <Box

  581.                       component={Link}

  582.                       href={child.path}

  583.                       sx={{

  584.                         flex: 1,

  585.                         minWidth: 0,

  586.                         textDecoration: "none",

  587.                         color: "inherit",

  588.                         display: "flex",

  589.                       }}

  590.                     >

  591.                       <ListItemButton

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

  593.                         sx={{

  594.                           flex: 1,

  595.                           py: 1,

  596.                           pr: 0.5,

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

  598.                         }}

  599.                       >

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

  601.                         <ListItemText

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

  603.                           primaryTypographyProps={{

  604.                             fontWeight:

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

  606.                             fontSize: "0.875rem",

  607.                           }}

  608.                         />

  609.                       </ListItemButton>

  610.                     </Box>

  611.                     <PurchaseStockInNavAlerts enabled={canSeePoAlerts} />

  612.                   </Box>

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

  614.                   <Box

  615.                     key={child.id}

  616.                     component={Link}

  617.                     href={child.path}

  618.                     sx={{

  619.                       display: "block",

  620.                       mx: 1,

  621.                       borderRadius: 1,

  622.                       textDecoration: "none",

  623.                       color: "inherit",

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

  625.                     }}

  626.                   >

  627.                     <ListItemButton

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

  629.                       sx={{

  630.                         py: 1,

  631.                         pr: 1.5,

  632.                         display: "flex",

  633.                         alignItems: "center",

  634.                         gap: 0.5,

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

  636.                       }}

  637.                     >

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

  639.                       <ListItemText

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

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

  642.                         primaryTypographyProps={{

  643.                           fontWeight:

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

  645.                           fontSize: "0.875rem",

  646.                         }}

  647.                       />

  648.                       <MasterDataIssuesNavBadge enabled={canSeeMasterDataIssueBadge} />

  649.                     </ListItemButton>

  650.                   </Box>

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

  652.                   <Box

  653.                     key={child.id}

  654.                     sx={{

  655.                       display: "flex",

  656.                       alignItems: "stretch",

  657.                       mx: 1,

  658.                       borderRadius: 1,

  659.                       overflow: "hidden",

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

  661.                     }}

  662.                   >

  663.                     <Box

  664.                       component={Link}

  665.                       href={child.path}

  666.                       sx={{

  667.                         flex: 1,

  668.                         minWidth: 0,

  669.                         textDecoration: "none",

  670.                         color: "inherit",

  671.                         display: "flex",

  672.                       }}

  673.                     >

  674.                       <ListItemButton

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

  676.                         sx={{

  677.                           flex: 1,

  678.                           py: 1,

  679.                           pr: 0.5,

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

  681.                         }}

  682.                       >

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

  684.                         <ListItemText

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

  686.                           primaryTypographyProps={{

  687.                             fontWeight:

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

  689.                             fontSize: "0.875rem",

  690.                           }}

  691.                         />

  692.                       </ListItemButton>

  693.                     </Box>

  694.                     <JobOrderFgStockInNavAlerts enabled={canSeeJoFgAlerts} />

  695.                   </Box>

  696.                 ) : (

  697.                   <Box

  698.                     key={child.id}

  699.                     component={Link}

  700.                     href={child.path}

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

  702.                   >

  703.                     <ListItemButton

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

  705.                       sx={{

  706.                         mx: 1,

  707.                         py: 1,

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

  709.                       }}

  710.                     >

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

  712.                       <ListItemText

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

  714.                         primaryTypographyProps={{

  715.                           fontWeight:

  716.                             child.path === selectedLeafPath

  717.                               ? 600

  718.                               : 500,

  719.                           fontSize: "0.875rem",

  720.                         }}

  721.                       />

  722.                     </ListItemButton>

  723.                   </Box>

  724.                 )

  725.               ),

  726.             )}

  727.           </List>

  728.         )}

  729.       </Box>

  730.     );

  731.   };

  732. 

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

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

  735.   }

  736. 

  737.   return (

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

  739.       <Box

  740.         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"

  741.         sx={{

  742.           mx: 1,

  743.           mt: 1,

  744.           mb: 1,

  745.           px: 1.5,

  746.           py: 2,

  747.           flexShrink: 0,

  748.           display: "flex",

  749.           alignItems: "center",

  750.           justifyContent: "flex-start",

  751.           minHeight: 56,

  752.         }}

  753.       >

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

  755.           <Logo height={42} />

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

  757.             <Typography

  758.               variant="body2"

  759.               sx={{

  760.                 fontWeight: 700,

  761.                 color: "warning.dark",

  762.                 bgcolor: "warning.light",

  763.                 px: 1,

  764.                 py: 0.5,

  765.                 borderRadius: 1,

  766.                 border: "1px solid",

  767.                 borderColor: "warning.main",

  768.               }}

  769.             >

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

  771.             </Typography>

  772.           )}

  773.         </Stack>

  774.       </Box>

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

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

  777.         {navigationItems

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

  779.           .map(renderNavigationItem)

  780.           .filter(Boolean)}

  781.       </List>

  782.     </Box>

  783.   );

  784. };

  785. 

  786. export default NavigationContent;