push rasad front on new repo

src/pages/PaymentOfFees.js

@@ -0,0 +1,79 @@
+import { Box, Tab, Tabs } from "@mui/material";
+import { BackButton } from "../components/back-button/BackButton";
+import { Grid } from "../components/grid/Grid";
+import { SPACING } from "../data/spacing";
+import { SLaughterPaymentOverview } from "../features/slaughter-house/components/slaughter-payment-overview/SLaughterPaymentOverview";
+import { useState } from "react";
+import { TabContext, TabPanel } from "@mui/lab";
+import { SlaughterPaymentByWeight } from "../features/slaughter-house/components/slaughter-payment-by-weight/SlaughterPaymentByWeight";
+import { SlaughterPayingFees } from "../features/slaughter-house/components/slaughter-paying-fees/SlaughterPayingFees";
+
+const PaymentOfFees = () => {
+  const [tabValue, setTabValue] = useState("1");
+
+  const handleTabChange = (event, newValue) => {
+    setTabValue(newValue);
+  };
+  return (
+    <>
+      <Box display={"flex"} justifyContent="center">
+        <Grid
+          container
+          direction="column"
+          justifyContent="center"
+          ml={4}
+          // sm={12}
+          // md={10}
+          // lg={10}
+        >
+          <Grid ml={4}>
+            <BackButton />
+          </Grid>
+          <Grid xs={12} container alignItems="center" justifyContent="center">
+            <Tabs
+              scrollButtons="auto"
+              variant="scrollable"
+              allowScrollButtonsMobile
+              value={tabValue}
+              onChange={handleTabChange}
+            >
+              <Tab label="جزئیات" value="1" />
+              <Tab label="پرداخت" value="2" />
+            </Tabs>
+          </Grid>
+          <TabContext value={tabValue}>
+            <TabPanel value="1">
+              <Grid
+                container
+                justifyContent="space-between"
+                gap={SPACING.SMALL}
+                direction="column"
+              >
+                <Grid ml={4} mr={4}>
+                  <SLaughterPaymentOverview />
+                </Grid>
+                <Grid>
+                  <SlaughterPayingFees />
+                </Grid>
+              </Grid>
+            </TabPanel>
+            <TabPanel value="2" style={{ width: "100%" }}>
+              <Grid
+                container
+                justifyContent="space-between"
+                gap={SPACING.SMALL}
+                direction="column"
+              >
+                <Grid xs={12} style={{ width: "100%" }}>
+                  <SlaughterPaymentByWeight />
+                </Grid>
+              </Grid>
+            </TabPanel>
+          </TabContext>
+        </Grid>
+      </Box>
+    </>
+  );
+};
+
+export default PaymentOfFees;