fixed grid

src/components/grid/Grid.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import Grid2 from "@mui/material/Unstable_Grid2";
-import { PropTypes } from "prop-types";
+import PropTypes from "prop-types";
 import { styled } from "@mui/material/styles";
 import Button from "@mui/material/Button";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
@@ -23,8 +23,17 @@ const ToggleButton = styled(Button)({
   zIndex: 100,
 });
 
-const StyledGrid = styled(Grid2)(
+const StyledGrid = styled(Grid2, {
-  ({ theme, isDashboard, isPolicy, isLocked, isExpanded }) => ({
+  shouldForwardProp: (prop) =>
+    !["isDashboard", "isPolicy", "isLocked", "isExpanded"].includes(prop),
+})(
+  ({
+    theme,
+    isDashboard = false,
+    isPolicy = false,
+    isLocked = false,
+    isExpanded = false,
+  }) => ({
     ...(isDashboard
       ? {
           position: "relative",
@@ -47,9 +56,7 @@ const StyledGrid = styled(Grid2)(
       : isPolicy && {
           padding: "10px",
           color: "#727272",
-          borderStyle: "solid",
+          border: "1px solid #B0B0B0",
-          borderColor: "#B0B0B0",
-          borderWidth: "1px",
           borderRadius: "8px",
           width: "270px",
           background: isLocked ? "#EAEFFF" : "white",
@@ -64,7 +71,14 @@ const StyledGrid = styled(Grid2)(
 );
 
 export const Grid = (props) => {
-  const { children, isDashboard, isPolicy, ...rest } = props;
+  const {
+    children,
+    isDashboard = false,
+    isPolicy = false,
+    isLocked = false,
+    ...rest
+  } = props;
+
   const [isExpanded, setIsExpanded] = useState(false);
   const [showToggle, setShowToggle] = useState(false);
   const [isFirstRender, setIsFirstRender] = useState(true);
@@ -77,17 +91,19 @@ export const Grid = (props) => {
     }
   }, [children, isPolicy]);
 
-  setTimeout(() => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
       setIsFirstRender(false);
     }, 3000);
 
-  const toggleExpand = () => {
+    return () => clearTimeout(timer);
-    setIsExpanded(!isExpanded);
+  }, []);
-  };
 
   useEffect(() => {
-    if (contentRef.current) {
+    if (!contentRef.current) return;
+
     const contentHeight = contentRef.current.scrollHeight;
+
     if (contentHeight > 120) {
       if (!isFirstRender) {
         setIsExpanded(true);
@@ -95,18 +111,23 @@ export const Grid = (props) => {
     } else {
       setIsExpanded(false);
     }
-    }
+  }, [children, isFirstRender]);
-  }, [contentRef?.current?.scrollHeight]);
+
+  const toggleExpand = () => {
+    setIsExpanded((prev) => !prev);
+  };
 
   return (
     <StyledGrid
+      ref={contentRef}
       isDashboard={isDashboard}
       isPolicy={isPolicy}
+      isLocked={isLocked}
       isExpanded={isExpanded}
-      ref={contentRef}
       {...rest}
     >
       {children}
+
       {isPolicy && showToggle && (
         <ToggleButton onClick={toggleExpand}>
           {isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
@@ -122,9 +143,3 @@ Grid.propTypes = {
   isPolicy: PropTypes.bool,
   isLocked: PropTypes.bool,
 };
-
-Grid.defaultProps = {
-  isDashboard: false,
-  isPolicy: false,
-  isLocked: false,
-};

src/features/inspector/components/inspector-add-vet-to-kill-house/InspectorAddVetToKillHouse.js

@@ -26,11 +26,12 @@ export const InspectorAddVetToKillHouse = ({ userKey, item }) => {
   }, []);
 
   useEffect(() => {
-    const d = inspectorGetKillHouses
+    const d =
+      inspectorGetKillHouses
         ?.filter((item) => item.killer === false)
         .map((item) => {
           return { title: item.name, value: item.key };
-      });
+        }) || [];
     setKillhouses(d);
   }, [inspectorGetKillHouses]);
 

src/features/province/components/create-guilds/CreateGuilds.js

@@ -443,14 +443,19 @@ export const CreateGuilds = ({ guild, updateTable }) => {
       <Grid
         container
         gap={SPACING.TINY}
-        maxHeight="80vh"
+        sx={{
-        minWidth={
+          maxHeight: "80vh",
+          overflow: "auto",
+          p: 2,
+          minWidth:
             !guild && !isInquiryDone
               ? "auto"
-            : { xs: "96vw", md: "90vw", nlg: "1280px" }
+              : {
-        }
+                  xs: "96vw",
-        overflow="auto"
+                  md: "90vw",
-        p={2}
+                  nlg: "1280px",
+                },
+        }}
       >
         {shouldShowUpdateButton && (
           <UpdateFromExternalButton

src/pages/AcessDashboardV2.js

@@ -290,14 +290,9 @@ const AccessDashboardV2 = () => {
 
   function renderSkeletonCards(count = 6) {
     return (
-      <Grid
+      <Grid container spacing={{ xs: 1, sm: 3 }} justifyContent="center">
-        container
-        spacing={{ xs: 1, sm: 3 }}
-        justifyContent="center"
-        xs={12}
-      >
         {Array.from({ length: count }).map((_, i) => (
-          <Grid item key={i} xs={12} sm={12} lg={12}>
+          <Grid item key={i} xs={12} lg={10}>
             <Card
               elevation={2}
               sx={{
@@ -515,7 +510,6 @@ const AccessDashboardV2 = () => {
       >
         <Grid
           container
-          xs={12}
           justifyContent="space-between"
           alignItems="center"
           mb={2}
@@ -657,7 +651,7 @@ const AccessDashboardV2 = () => {
             <SlaughterBalanceStatusButton />
           )}
         </Grid>
-        <Grid container xs={12} justifyContent="center" alignItems="center">
+        <Grid container justifyContent="center" alignItems="center">
           {renderContent()}
         </Grid>
       </Box>
@@ -672,7 +666,7 @@ const AccessDashboardV2 = () => {
 
     if (!poultryRoles || poultryRoles.length === 0) {
       return (
-        <Grid container xs={12} justifyContent="center" alignItems="center">
+        <Grid container justifyContent="center" alignItems="center">
           <Card
             elevation={2}
             sx={{
@@ -704,20 +698,9 @@ const AccessDashboardV2 = () => {
     }
 
     return (
-      <Grid
+      <Grid container spacing={{ xs: 1, sm: 3 }} justifyContent="center">
-        container
-        spacing={{ xs: 1, sm: 3 }}
-        justifyContent="center"
-        xs={12}
-      >
         {sortRoles(poultryRoles)?.map((item, i) => (
-          <Grid
+          <Grid item xs={12} lg={poultryRoles?.length === 1 ? 12 : 6} key={i}>
-            item
-            xs={12}
-            sm={12}
-            lg={poultryRoles?.length === 1 ? 12 : 6}
-            key={i}
-          >
             <Card
               elevation={2}
               sx={{
@@ -938,7 +921,7 @@ const AccessDashboardV2 = () => {
 
     if (!livestockRoles || livestockRoles.length === 0) {
       return (
-        <Grid container xs={12} justifyContent="center" alignItems="center">
+        <Grid container justifyContent="center" alignItems="center">
           <Card
             elevation={2}
             sx={{
@@ -970,12 +953,7 @@ const AccessDashboardV2 = () => {
     }
 
     return (
-      <Grid
+      <Grid container spacing={{ xs: 1, sm: 3 }} justifyContent="center">
-        container
-        spacing={{ xs: 1, sm: 3 }}
-        justifyContent="center"
-        xs={12}
-      >
         {sortRoles(livestockRoles)?.map((item, i) => (
           <Grid
             item
@@ -1201,7 +1179,7 @@ const AccessDashboardV2 = () => {
 
     if (!barSquareRoles || barSquareRoles.length === 0) {
       return (
-        <Grid container xs={12} justifyContent="center" alignItems="center">
+        <Grid container justifyContent="center" alignItems="center">
           <Card
             elevation={2}
             sx={{
@@ -1233,20 +1211,9 @@ const AccessDashboardV2 = () => {
     }
 
     return (
-      <Grid
+      <Grid container spacing={{ xs: 1, sm: 3 }} justifyContent="center">
-        container
-        spacing={{ xs: 1, sm: 3 }}
-        justifyContent="center"
-        xs={12}
-      >
         {sortRoles(barSquareRoles)?.map((item, i) => (
-          <Grid
+          <Grid item xs={12} lg={barSquareRoles?.length === 1 ? 12 : 6} key={i}>
-            item
-            xs={12}
-            sm={12}
-            lg={barSquareRoles?.length === 1 ? 12 : 6}
-            key={i}
-          >
             <Card
               elevation={2}
               sx={{

src/pages/ProvinceManageStewards.js

@@ -23,9 +23,14 @@ import {
   ROUTE_PROVINCE_ROUTE_MANAGE_STEWARDS_OUT_PROVINCE,
   ROUTE_PROVINCE_ROUTE_MANAGE_STEWARDS_OUT_PROVINCE_LEGAL,
   ROUTE_PROVINCE_ROUTE_MANAGE_STEWARDS_OUT_PROVINCE_TRUE,
+  ROUTE_SLAUGHTER_MANAGE_STEWARDS,
   ROUTE_SLAUGHTER_MANAGE_STEWARDS_IN_PROVINCE,
+  ROUTE_SLAUGHTER_MANAGE_STEWARDS_IN_PROVINCE_LEGAL,
   ROUTE_SLAUGHTER_MANAGE_STEWARDS_IN_PROVINCE_STEWARDS_REQUESTS,
+  ROUTE_SLAUGHTER_MANAGE_STEWARDS_IN_PROVINCE_TRUE,
   ROUTE_SLAUGHTER_MANAGE_STEWARDS_OUT_PROVINCE,
+  ROUTE_SLAUGHTER_MANAGE_STEWARDS_OUT_PROVINCE_LEGAL,
+  ROUTE_SLAUGHTER_MANAGE_STEWARDS_OUT_PROVINCE_TRUE,
   ROUTE_SUPER_ADMIN_ROUTE_MANAGE_STEWARDS,
   ROUTE_SUPER_ADMIN_ROUTE_MANAGE_STEWARDS_IN_PROVINCE,
   ROUTE_SUPER_ADMIN_ROUTE_MANAGE_STEWARDS_IN_PROVINCE_LEGAL,
@@ -82,6 +87,8 @@ const ProvinceManageStewards = () => {
     ? ROUTE_SUPER_ADMIN_ROUTE_MANAGE_STEWARDS_IN_PROVINCE_TRUE
     : isProvinceOperator
     ? ROUTE_PROVINCE_ROUTE_MANAGE_STEWARDS_IN_PROVINCE_TRUE
+    : isSlaughter
+    ? ROUTE_SLAUGHTER_MANAGE_STEWARDS_IN_PROVINCE_TRUE
     : "";
 
   const STEWARDS_OUT_PROVINCE_TRUE = isAdminX
@@ -90,6 +97,8 @@ const ProvinceManageStewards = () => {
     ? ROUTE_SUPER_ADMIN_ROUTE_MANAGE_STEWARDS_OUT_PROVINCE_TRUE
     : isProvinceOperator
     ? ROUTE_PROVINCE_ROUTE_MANAGE_STEWARDS_OUT_PROVINCE_TRUE
+    : isSlaughter
+    ? ROUTE_SLAUGHTER_MANAGE_STEWARDS_OUT_PROVINCE_TRUE
     : "";
 
   const STEWARDS_IN_PROVINCE_LEGAL = isAdminX
@@ -98,6 +107,8 @@ const ProvinceManageStewards = () => {
     ? ROUTE_SUPER_ADMIN_ROUTE_MANAGE_STEWARDS_IN_PROVINCE_LEGAL
     : isProvinceOperator
     ? ROUTE_PROVINCE_ROUTE_MANAGE_STEWARDS_IN_PROVINCE_LEGAL
+    : isSlaughter
+    ? ROUTE_SLAUGHTER_MANAGE_STEWARDS_IN_PROVINCE_LEGAL
     : "";
 
   const STEWARDS_OUT_PROVINCE_LEGAL = isAdminX
@@ -106,6 +117,8 @@ const ProvinceManageStewards = () => {
     ? ROUTE_SUPER_ADMIN_ROUTE_MANAGE_STEWARDS_OUT_PROVINCE_LEGAL
     : isProvinceOperator
     ? ROUTE_PROVINCE_ROUTE_MANAGE_STEWARDS_OUT_PROVINCE_LEGAL
+    : isSlaughter
+    ? ROUTE_SLAUGHTER_MANAGE_STEWARDS_OUT_PROVINCE_LEGAL
     : "";
 
   return (
@@ -123,7 +136,8 @@ const ProvinceManageStewards = () => {
         </Grid>
         {(ROUTE_ADMINX_ROUTE_MANAGE_STEWARDS === pathname ||
           ROUTE_SUPER_ADMIN_ROUTE_MANAGE_STEWARDS === pathname ||
-          ROUTE_PROVINCE_ROUTE_MANAGE_STEWARDS === pathname) && (
+          ROUTE_PROVINCE_ROUTE_MANAGE_STEWARDS === pathname ||
+          ROUTE_SLAUGHTER_MANAGE_STEWARDS === pathname) && (
           <>
             <NavLink to={STEWARDS_IN_PROVINCE}>
               <LinkItem

src/utils/getRolesItems.js

@@ -835,7 +835,7 @@ export const getRoleItems = (role) => {
         },
         {
           text: "مدیریت مباشرین",
-          route: ROUTES.ROUTE_SLAUGHTER_ROUTE_MANAGE_STEWARDS,
+          route: ROUTES.ROUTE_SLAUGHTER_MANAGE_STEWARDS,
           icon: <BadgeIcon />,
         },
         // {