jason
/
FPSMS-frontend
2
0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
FPSMS-frontend
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
1221 коммит
9 Ветки
46 MiB
 
 
Дерево: 8f7ff13997
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из '8f7ff13997'
${ noResults }
FPSMS-frontend/src/components/NavigationContent/NavigationContent.tsx

779 строки
26 KiB
Исходник Вина История 

  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 { useTranslation } from "react-i18next";

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

  45. import Link from "next/link";

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

  47. import Logo from "../Logo";

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

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

  50. import PurchaseStockInNavAlerts from "./PurchaseStockInNavAlerts";

  51. import JobOrderFgStockInNavAlerts from "./JobOrderFgStockInNavAlerts";

  52. import MasterDataIssuesNavBadge from "./MasterDataIssuesNavBadge";

  53. 

  54. interface NavigationItem {

  55.   id: string;

  56.   icon: React.ReactNode;

  57.   labelKey: string;

  58.   path: string;

  59.   children?: NavigationItem[];

  60.   isHidden?: boolean | undefined;

  61.   requiredAbility?: string | string[];

  62. }

  63. 

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

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

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

  67. 

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

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

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

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

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

  73.     }

  74.     return abilities.includes(required);

  75.   };

  76. 

  77.   const navigationItems: NavigationItem[] = [

  78.     {

  79.       id: "nav.dashboard",

  80.       icon: <Dashboard />,

  81.       labelKey: "nav.dashboard",

  82.       path: "/dashboard",

  83.     },

  84.     {

  85.       id: "nav.storeManagement",

  86.       icon: <Storefront />,

  87.       labelKey: "nav.storeManagement",

  88.       path: "",

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

  90.       children: [

  91.         {

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

  93.           icon: <LocalShipping />,

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

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

  96.           path: "/po",

  97.         },

  98.         {

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

  100.           icon: <Assignment />,

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

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

  103.           path: "/pickOrder",

  104.         },

  105.         {

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

  107.           icon: <Inventory />,

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

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

  110.           path: "/inventory",

  111.         },

  112.         {

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

  114.           icon: <QrCodeIcon />,

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

  116.           requiredAbility: [AUTH.ITEM_TRACING],

  117.           path: "/itemTracing",

  118.         },

  119.         {

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

  121.           icon: <AssignmentTurnedIn />,

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

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

  124.           path: "/stocktakemanagement",

  125.         },

  126.         {

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

  128.           icon: <ReportProblem />,

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

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

  131.           path: "/stockIssue",

  132.         },

  133.         {

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

  135.           icon: <QrCodeIcon />,

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

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

  138.           path: "/putAway",

  139.         },

  140.         {

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

  142.           icon: <ViewModule />,

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

  144.           requiredAbility: [AUTH.ADMIN],

  145.           path: "/finishedGood/management",

  146.         },

  147.         {

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

  149.           icon: <Description />,

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

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

  152.           path: "/stockRecord",

  153.         },

  154.         {

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

  156.           icon: <Description />,

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

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

  159.           path: "/doworkbench",

  160.         },

  161.       ],

  162.     },

  163.     {

  164.       id: "nav.deliveryOrder",

  165.       icon: <LocalShipping />,

  166.       labelKey: "nav.deliveryOrder",

  167.       path: "/do",

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

  169.     },

  170.     {

  171.       id: "nav.scheduling",

  172.       icon: <CalendarMonth />,

  173.       labelKey: "nav.scheduling",

  174.       path: "/ps",

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

  176.       isHidden: false,

  177.     },

  178.     {

  179.       id: "nav.jobOrderManagement",

  180.       icon: <Factory />,

  181.       labelKey: "nav.jobOrderManagement",

  182.       path: "",

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

  184.       children: [

  185.         {

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

  187.           icon: <PostAdd />,

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

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

  190.           path: "/jo",

  191.         },

  192.         {

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

  194.           icon: <Inventory />,

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

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

  197.           path: "/jodetail",

  198.         },

  199.         {

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

  201.           icon: <Kitchen />,

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

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

  204.           path: "/productionProcess",

  205.         },

  206.         {

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

  208.           icon: <Inventory2 />,

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

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

  211.           path: "/bag",

  212.         },

  213.       ],

  214.     },

  215.     {

  216.       id: "nav.bagPrint",

  217.       icon: <Print />,

  218.       labelKey: "nav.bagPrint",

  219.       path: "/bagPrint",

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

  221.       isHidden: false,

  222.     },

  223.     {

  224.       id: "nav.laserPrint",

  225.       icon: <Print />,

  226.       labelKey: "nav.laserPrint",

  227.       path: "/laserPrint",

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

  229.       isHidden: false,

  230.     },

  231.     {

  232.       id: "nav.report",

  233.       icon: <Assessment />,

  234.       labelKey: "nav.report",

  235.       path: "/report",

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

  237.       isHidden: false,

  238.     },

  239.     {

  240.       id: "nav.m18Sync",

  241.       icon: <Sync />,

  242.       labelKey: "nav.m18Sync",

  243.       path: "/m18Syn",

  244.       requiredAbility: [AUTH.ADMIN],

  245.       isHidden: false,

  246.     },

  247.     {

  248.       id: "nav.chartReports",

  249.       icon: <ShowChart />,

  250.       labelKey: "nav.chartReports",

  251.       path: "",

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

  253.       isHidden: false,

  254.       children: [

  255.         {

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

  257.           icon: <Storefront />,

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

  259.           path: "/chart/purchase",

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

  261.         },

  262.         {

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

  264.           icon: <Assignment />,

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

  266.           path: "/chart/joborder",

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

  268.         },

  269.         {

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

  271.           icon: <ViewModule />,

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

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

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

  275.         },

  276.         {

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

  278.           icon: <LocalShipping />,

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

  280.           path: "/chart/delivery",

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

  282.         },

  283.         {

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

  285.           icon: <Warehouse />,

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

  287.           path: "/chart/warehouse",

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

  289.         },

  290.         {

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

  292.           icon: <TrendingUp />,

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

  294.           path: "/chart/forecast",

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

  296.         },

  297.       ],

  298.     },

  299.     {

  300.       id: "nav.settings",

  301.       icon: <Settings />,

  302.       labelKey: "nav.settings",

  303.       path: "",

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

  305.       children: [

  306.         {

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

  308.           icon: <Person />,

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

  310.           path: "/settings/user",

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

  312.         },

  313.         {

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

  315.           icon: <Devices />,

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

  317.           path: "/settings/clientMonitor",

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

  319.           isHidden: !isMonitoringEnabled,

  320.         },

  321.         {

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

  323.           icon: <Category />,

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

  325.           path: "/settings/items",

  326.         },

  327.         {

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

  329.           icon: <Build />,

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

  331.           path: "/settings/equipment",

  332.         },

  333.         {

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

  335.           icon: <Warehouse />,

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

  337.           path: "/settings/warehouse",

  338.         },

  339.         {

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

  341.           icon: <Print />,

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

  343.           path: "/settings/printer",

  344.         },

  345.         {

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

  347.           icon: <Assessment />,

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

  349.           path: "/settings/itemPrice",

  350.         },

  351.         {

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

  353.           icon: <VerifiedUser />,

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

  355.           path: "/settings/qcItem",

  356.         },

  357.         {

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

  359.           icon: <Label />,

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

  361.           path: "/settings/qcCategory",

  362.         },

  363.         {

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

  365.           icon: <Checklist />,

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

  367.           path: "/settings/qcItemAll",

  368.         },

  369.         {

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

  371.           icon: <Storefront />,

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

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

  374.         },

  375.         {

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

  377.           icon: <Layers />,

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

  379.           path: "/settings/deliveryOrderFloor",

  380.         },

  381.         {

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

  383.           icon: <TrendingUp />,

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

  385.           path: "/settings/rss",

  386.         },

  387.         {

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

  389.           icon: <ViewModule />,

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

  391.           path: "/settings/bomWeighting",

  392.         },

  393.         {

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

  395.           icon: <ReportProblem />,

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

  397.           path: "/settings/masterDataIssues",

  398.           requiredAbility: [AUTH.ADMIN],

  399.         },

  400.         {

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

  402.           icon: <QrCodeIcon />,

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

  404.           path: "/settings/qrCodeHandle",

  405.         },

  406.         {

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

  408.           icon: <Science />,

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

  410.           path: "/settings/m18ImportTesting",

  411.         },

  412.         {

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

  414.           icon: <UploadFile />,

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

  416.           path: "/settings/importExcel",

  417.         },

  418.         {

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

  420.           icon: <UploadFile />,

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

  422.           path: "/settings/importBom",

  423.         },

  424.       ],

  425.     },

  426.   ];

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

  428.   const pathname = usePathname();

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

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

  431.   const canSeePoAlerts =

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

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

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

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

  436. 

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

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

  439.   React.useEffect(() => {

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

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

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

  443.     }

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

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

  446.     }

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

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

  449.     }

  450.     if (

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

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

  453.       pathname === "/jodetail" ||

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

  455.     ) {

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

  457.     }

  458.     if (

  459.       pathname === "/doworkbench" ||

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

  461.       pathname === "/doworkbenchsearch" ||

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

  463.     ) {

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

  465.     }

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

  467.     setOpenItems((prev) => {

  468.       const set = new Set(prev);

  469.       let changed = false;

  470.       for (const id of ensureOpen) {

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

  472.           set.add(id);

  473.           changed = true;

  474.         }

  475.       }

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

  477.     });

  478.   }, [pathname]);

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

  480.     setOpenItems((prevOpenItems) =>

  481.       prevOpenItems.includes(id)

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

  483.         : [...prevOpenItems, id],

  484.     );

  485.   };

  486. 

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

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

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

  490.       for (const it of items) {

  491.         if (it.isHidden) continue;

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

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

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

  495.       }

  496.     };

  497.     walk(navigationItems);

  498. 

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

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

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

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

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

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

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

  506.       if (

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

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

  509.       ) {

  510.         return true;

  511.       }

  512.       return true;

  513.     });

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

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

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

  517. 

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

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

  520.       return null;

  521.     }

  522. 

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

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

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

  526.     const isSelected = isLeaf && item.path

  527.       ? item.path === selectedLeafPath

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

  529. 

  530.     const content = (

  531.       <ListItemButton

  532.         selected={isSelected}

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

  534.         sx={{

  535.           mx: 1,

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

  537.         }}

  538.       >

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

  540.         <ListItemText

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

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

  543.         />

  544.       </ListItemButton>

  545.     );

  546. 

  547.     return (

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

  549.         {isLeaf ? (

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

  551.             {content}

  552.           </Link>

  553.         ) : (

  554.           content

  555.         )}

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

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

  558.             {item.children.map(

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

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

  561.                   <Box

  562.                     key={child.id}

  563.                     sx={{

  564.                       display: "flex",

  565.                       alignItems: "stretch",

  566.                       mx: 1,

  567.                       borderRadius: 1,

  568.                       overflow: "hidden",

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

  570.                     }}

  571.                   >

  572.                     <Box

  573.                       component={Link}

  574.                       href={child.path}

  575.                       sx={{

  576.                         flex: 1,

  577.                         minWidth: 0,

  578.                         textDecoration: "none",

  579.                         color: "inherit",

  580.                         display: "flex",

  581.                       }}

  582.                     >

  583.                       <ListItemButton

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

  585.                         sx={{

  586.                           flex: 1,

  587.                           py: 1,

  588.                           pr: 0.5,

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

  590.                         }}

  591.                       >

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

  593.                         <ListItemText

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

  595.                           primaryTypographyProps={{

  596.                             fontWeight:

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

  598.                             fontSize: "0.875rem",

  599.                           }}

  600.                         />

  601.                       </ListItemButton>

  602.                     </Box>

  603.                     <PurchaseStockInNavAlerts enabled={canSeePoAlerts} />

  604.                   </Box>

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

  606.                   <Box

  607.                     key={child.id}

  608.                     component={Link}

  609.                     href={child.path}

  610.                     sx={{

  611.                       display: "block",

  612.                       mx: 1,

  613.                       borderRadius: 1,

  614.                       textDecoration: "none",

  615.                       color: "inherit",

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

  617.                     }}

  618.                   >

  619.                     <ListItemButton

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

  621.                       sx={{

  622.                         py: 1,

  623.                         pr: 1.5,

  624.                         display: "flex",

  625.                         alignItems: "center",

  626.                         gap: 0.5,

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

  628.                       }}

  629.                     >

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

  631.                       <ListItemText

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

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

  634.                         primaryTypographyProps={{

  635.                           fontWeight:

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

  637.                           fontSize: "0.875rem",

  638.                         }}

  639.                       />

  640.                       <MasterDataIssuesNavBadge enabled={canSeeMasterDataIssueBadge} />

  641.                     </ListItemButton>

  642.                   </Box>

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

  644.                   <Box

  645.                     key={child.id}

  646.                     sx={{

  647.                       display: "flex",

  648.                       alignItems: "stretch",

  649.                       mx: 1,

  650.                       borderRadius: 1,

  651.                       overflow: "hidden",

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

  653.                     }}

  654.                   >

  655.                     <Box

  656.                       component={Link}

  657.                       href={child.path}

  658.                       sx={{

  659.                         flex: 1,

  660.                         minWidth: 0,

  661.                         textDecoration: "none",

  662.                         color: "inherit",

  663.                         display: "flex",

  664.                       }}

  665.                     >

  666.                       <ListItemButton

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

  668.                         sx={{

  669.                           flex: 1,

  670.                           py: 1,

  671.                           pr: 0.5,

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

  673.                         }}

  674.                       >

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

  676.                         <ListItemText

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

  678.                           primaryTypographyProps={{

  679.                             fontWeight:

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

  681.                             fontSize: "0.875rem",

  682.                           }}

  683.                         />

  684.                       </ListItemButton>

  685.                     </Box>

  686.                     <JobOrderFgStockInNavAlerts enabled={canSeeJoFgAlerts} />

  687.                   </Box>

  688.                 ) : (

  689.                   <Box

  690.                     key={child.id}

  691.                     component={Link}

  692.                     href={child.path}

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

  694.                   >

  695.                     <ListItemButton

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

  697.                       sx={{

  698.                         mx: 1,

  699.                         py: 1,

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

  701.                       }}

  702.                     >

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

  704.                       <ListItemText

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

  706.                         primaryTypographyProps={{

  707.                           fontWeight:

  708.                             child.path === selectedLeafPath

  709.                               ? 600

  710.                               : 500,

  711.                           fontSize: "0.875rem",

  712.                         }}

  713.                       />

  714.                     </ListItemButton>

  715.                   </Box>

  716.                 )

  717.               ),

  718.             )}

  719.           </List>

  720.         )}

  721.       </Box>

  722.     );

  723.   };

  724. 

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

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

  727.   }

  728. 

  729.   return (

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

  731.       <Box

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

  733.         sx={{

  734.           mx: 1,

  735.           mt: 1,

  736.           mb: 1,

  737.           px: 1.5,

  738.           py: 2,

  739.           flexShrink: 0,

  740.           display: "flex",

  741.           alignItems: "center",

  742.           justifyContent: "flex-start",

  743.           minHeight: 56,

  744.         }}

  745.       >

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

  747.           <Logo height={42} />

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

  749.             <Typography

  750.               variant="body2"

  751.               sx={{

  752.                 fontWeight: 700,

  753.                 color: "warning.dark",

  754.                 bgcolor: "warning.light",

  755.                 px: 1,

  756.                 py: 0.5,

  757.                 borderRadius: 1,

  758.                 border: "1px solid",

  759.                 borderColor: "warning.main",

  760.               }}

  761.             >

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

  763.             </Typography>

  764.           )}

  765.         </Stack>

  766.       </Box>

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

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

  769.         {navigationItems

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

  771.           .map(renderNavigationItem)

  772.           .filter(Boolean)}

  773.       </List>

  774.     </Box>

  775.   );

  776. };

  777. 

  778. export default NavigationContent;