80 lines
2.6 KiB
JavaScript
80 lines
2.6 KiB
JavaScript
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;
|