fixed grid

2026-01-20 09:39:11 +03:30
parent 5b251732a9
commit e03e4bd0cc
6 changed files with 90 additions and 88 deletions
--- a/src/components/grid/Grid.js
+++ b/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)(
-  ({ theme, isDashboard, isPolicy, isLocked, isExpanded }) => ({
+const StyledGrid = styled(Grid2, {
+  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",
-          borderColor: "#B0B0B0",
-          borderWidth: "1px",
+          border: "1px solid #B0B0B0",
          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,36 +91,43 @@ export const Grid = (props) => {
    }
  }, [children, isPolicy]);

-  setTimeout(() => {
-    setIsFirstRender(false);
-  }, 3000);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsFirstRender(false);
+    }, 3000);

-  const toggleExpand = () => {
-    setIsExpanded(!isExpanded);
-  };
+    return () => clearTimeout(timer);
+  }, []);

  useEffect(() => {
-    if (contentRef.current) {
-      const contentHeight = contentRef.current.scrollHeight;
-      if (contentHeight > 120) {
-        if (!isFirstRender) {
-          setIsExpanded(true);
-        }
-      } else {
-        setIsExpanded(false);
+    if (!contentRef.current) return;
+
+    const contentHeight = contentRef.current.scrollHeight;
+
+    if (contentHeight > 120) {
+      if (!isFirstRender) {
+        setIsExpanded(true);
      }
+    } else {
+      setIsExpanded(false);
    }
-  }, [contentRef?.current?.scrollHeight]);
+  }, [children, isFirstRender]);
+
+  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,
-};
--- a/src/features/inspector/components/inspector-add-vet-to-kill-house/InspectorAddVetToKillHouse.js
+++ b/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
-      ?.filter((item) => item.killer === false)
-      .map((item) => {
-        return { title: item.name, value: item.key };
-      });
+    const d =
+      inspectorGetKillHouses
+        ?.filter((item) => item.killer === false)
+        .map((item) => {
+          return { title: item.name, value: item.key };
+        }) || [];
    setKillhouses(d);
  }, [inspectorGetKillHouses]);

--- a/src/features/province/components/create-guilds/CreateGuilds.js
+++ b/src/features/province/components/create-guilds/CreateGuilds.js
@@ -443,14 +443,19 @@ export const CreateGuilds = ({ guild, updateTable }) => {
      <Grid
        container
        gap={SPACING.TINY}
-        maxHeight="80vh"
-        minWidth={
-          !guild && !isInquiryDone
-            ? "auto"
-            : { xs: "96vw", md: "90vw", nlg: "1280px" }
-        }
-        overflow="auto"
-        p={2}
+        sx={{
+          maxHeight: "80vh",
+          overflow: "auto",
+          p: 2,
+          minWidth:
+            !guild && !isInquiryDone
+              ? "auto"
+              : {
+                  xs: "96vw",
+                  md: "90vw",
+                  nlg: "1280px",
+                },
+        }}
      >
        {shouldShowUpdateButton && (
          <UpdateFromExternalButton
--- a/src/pages/AcessDashboardV2.js
+++ b/src/pages/AcessDashboardV2.js
@@ -290,14 +290,9 @@ const AccessDashboardV2 = () => {

  function renderSkeletonCards(count = 6) {
    return (
-      <Grid
-        container
-        spacing={{ xs: 1, sm: 3 }}
-        justifyContent="center"
-        xs={12}
-      >
+      <Grid container spacing={{ xs: 1, sm: 3 }} justifyContent="center">
        {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
-        container
-        spacing={{ xs: 1, sm: 3 }}
-        justifyContent="center"
-        xs={12}
-      >
+      <Grid container spacing={{ xs: 1, sm: 3 }} justifyContent="center">
        {sortRoles(poultryRoles)?.map((item, i) => (
-          <Grid
-            item
-            xs={12}
-            sm={12}
-            lg={poultryRoles?.length === 1 ? 12 : 6}
-            key={i}
-          >
+          <Grid item xs={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
-        container
-        spacing={{ xs: 1, sm: 3 }}
-        justifyContent="center"
-        xs={12}
-      >
+      <Grid container spacing={{ xs: 1, sm: 3 }} justifyContent="center">
        {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
-        container
-        spacing={{ xs: 1, sm: 3 }}
-        justifyContent="center"
-        xs={12}
-      >
+      <Grid container spacing={{ xs: 1, sm: 3 }} justifyContent="center">
        {sortRoles(barSquareRoles)?.map((item, i) => (
-          <Grid
-            item
-            xs={12}
-            sm={12}
-            lg={barSquareRoles?.length === 1 ? 12 : 6}
-            key={i}
-          >
+          <Grid item xs={12} lg={barSquareRoles?.length === 1 ? 12 : 6} key={i}>
            <Card
              elevation={2}
              sx={{
--- a/src/pages/ProvinceManageStewards.js
+++ b/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
--- a/src/utils/getRolesItems.js
+++ b/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 />,
        },
        // {