From ae06be8f02bb6dcf7699a6eac9cf8ba31e0409cc Mon Sep 17 00:00:00 2001
From: AmirHossein Mahmoodi <amir.mahmoodi74@gmail.com>
Date: Tue, 22 Jul 2025 13:08:53 +0000
Subject: [PATCH] Feature/amiriis qr for factor

---
 package.json                                  |  1 +
 .../Form/CreateFactor/CreateFactorContent.jsx | 67 +++++++++++++++----
 .../headerWithLogo/HaederBottom/index.jsx     | 23 +++----
 .../dashboard/headerWithSidebar/index.jsx     |  4 +-
 4 files changed, 68 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index 45edef7..a4532cb 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "react-leaflet": "^4.2.1",
     "react-leaflet-draw": "^0.20.4",
     "react-leaflet-markercluster": "^4.2.1",
+    "react-qr-code": "^2.0.18",
     "react-toastify": "^10.0.5",
     "sass": "^1.75.0",
     "sharp": "^0.33.4",
diff --git a/src/components/dashboard/damages/operator/Form/CreateFactor/CreateFactorContent.jsx b/src/components/dashboard/damages/operator/Form/CreateFactor/CreateFactorContent.jsx
index b538199..fe8380b 100644
--- a/src/components/dashboard/damages/operator/Form/CreateFactor/CreateFactorContent.jsx
+++ b/src/components/dashboard/damages/operator/Form/CreateFactor/CreateFactorContent.jsx
@@ -17,6 +17,7 @@ import {
     Typography,
 } from "@mui/material";
 import { useReducer, useState } from "react";
+import QRCode from "react-qr-code";
 
 const initialState = {
     submittingCreateFactor: false,
@@ -147,15 +148,53 @@ const CreateFactorContent = ({ row, mutate, rowId, setOpenCreateFactorDialog })
                             ریال
                         </Typography>
                     </Grid>
-                    {!factorCreated && (
+                    {factorCreated ? (
+                        <Grid item xs={12}>
+                            <Stack
+                                direction={"row"}
+                                alignItems={"center"}
+                                justifyContent={"space-between"}
+                                sx={{
+                                    bgcolor: "rgb(229, 246, 253)",
+                                    color: "rgb(1, 67, 97)",
+                                    p: 2,
+                                    borderRadius: 1,
+                                }}
+                            >
+                                <Stack spacing={1}>
+                                    {row.original.is_foreign ? (
+                                        <>
+                                            <Typography fontWeight={"bold"}>
+                                                می‌توانید برای پرداخت، بارکد را اسکن کنید
+                                            </Typography>
+                                        </>
+                                    ) : (
+                                        <>
+                                            <Typography variant="body2">
+                                                لینک پرداخت به شماره همراه مورد نظر ارسال شد
+                                            </Typography>
+                                            <Typography fontWeight={"bold"}>
+                                                همچنین می‌توانید برای پرداخت، بارکد را اسکن کنید
+                                            </Typography>
+                                        </>
+                                    )}
+                                </Stack>
+                                <Box sx={{ p: 1, bgcolor: "background.default", borderRadius: 0.5 }}>
+                                    <QRCode value={row.original?.link || ""} size={60} />
+                                </Box>
+                            </Stack>
+                        </Grid>
+                    ) : (
                         <Grid item xs={12}>
                             <Stack spacing={1}>
                                 <Alert severity="warning">
                                     پس از صدور فاکتور، امکان ویرایش مبالغ بیمه و داغی وجود نخواهد داشت
                                 </Alert>
-                                <Alert severity="info">
-                                    لینک پرداخت فاکتور به شماره {row.original?.driver_phone_number} ارسال می شود.
-                                </Alert>
+                                {!row.original.is_foreign && (
+                                    <Alert severity="info">
+                                        لینک پرداخت فاکتور به شماره {row.original?.driver_phone_number} ارسال می شود.
+                                    </Alert>
+                                )}
                             </Stack>
                         </Grid>
                     )}
@@ -172,15 +211,17 @@ const CreateFactorContent = ({ row, mutate, rowId, setOpenCreateFactorDialog })
                         >
                             بستن
                         </Button>
-                        <Button
-                            key={"submittingSms"}
-                            onClick={handleSendSMS}
-                            variant="outlined"
-                            color="warning"
-                            disabled={state.submittingSms}
-                        >
-                            {state.submittingSms ? "درحال ارسال مجدد پیام پرداخت..." : "ارسال مجدد پیام پرداخت"}
-                        </Button>
+                        {!row.original.is_foreign && (
+                            <Button
+                                key={"submittingSms"}
+                                onClick={handleSendSMS}
+                                variant="outlined"
+                                color="warning"
+                                disabled={state.submittingSms}
+                            >
+                                {state.submittingSms ? "درحال ارسال مجدد پیام پرداخت..." : "ارسال مجدد پیام پرداخت"}
+                            </Button>
+                        )}
                         <Button
                             key={"submittingCheckFactor"}
                             onClick={handleCheckPaymentStatus}
diff --git a/src/components/layouts/dashboard/headerWithLogo/HaederBottom/index.jsx b/src/components/layouts/dashboard/headerWithLogo/HaederBottom/index.jsx
index b0f8685..47af636 100644
--- a/src/components/layouts/dashboard/headerWithLogo/HaederBottom/index.jsx
+++ b/src/components/layouts/dashboard/headerWithLogo/HaederBottom/index.jsx
@@ -10,19 +10,20 @@ const HeaderBottom = () => {
             direction="row"
             justifyContent={"space-between"}
             sx={{
-                px: 2,
-                py: 1,
+                pl: 2,
                 background: (theme) => theme.palette.primary2.main,
             }}
             spacing={2}
         >
-            <Stack spacing={4} alignItems={"center"} direction={"row"}>
-                <Image alt="" priority src={RmsLogo.src} width={50} height={54} />
-                <Stack alignItems={"center"} spacing={1}>
-                    <Typography variant="h6" sx={{ color: (theme) => theme.palette.primary2.contrastText }}>
+            <Stack sx={{ py: 0.5 }} spacing={4} alignItems={"center"} direction={"row"}>
+                <Image alt="" priority src={RmsLogo.src} width={40} height={43} />
+                <Stack alignItems={"center"} spacing={0.5}>
+                    <Typography sx={{ color: (theme) => theme.palette.primary2.contrastText }}>
                         سامانه جامع راهداری
                     </Typography>
-                    <Typography sx={{ color: (theme) => theme.palette.primary2.contrastText }}>rms.rmto.ir</Typography>
+                    <Typography variant="caption" sx={{ color: (theme) => theme.palette.primary2.contrastText }}>
+                        rms.rmto.ir
+                    </Typography>
                 </Stack>
             </Stack>
             <Stack sx={{ display: { xs: "none", sm: "flex" } }}>
@@ -30,13 +31,11 @@ const HeaderBottom = () => {
                     sx={{
                         p: 1,
                         background: "#fff",
-                        border: 2,
-                        borderColor: (theme) => theme.palette.primary.main,
-                        borderRadius: 2,
-                        borderStyle: "dashed",
+                        borderTopLeftRadius: 8,
+                        borderBottomLeftRadius: 8,
                     }}
                 >
-                    <Image alt="" priority src={HeaderLogo.src} width={140} height={32} />
+                    <Image alt="" priority src={HeaderLogo.src} width={117} height={27} />
                 </Box>
             </Stack>
         </Stack>
diff --git a/src/components/layouts/dashboard/headerWithSidebar/index.jsx b/src/components/layouts/dashboard/headerWithSidebar/index.jsx
index d7d289f..e5c655f 100644
--- a/src/components/layouts/dashboard/headerWithSidebar/index.jsx
+++ b/src/components/layouts/dashboard/headerWithSidebar/index.jsx
@@ -9,8 +9,8 @@ import moment from "jalali-moment";
 import { headerMenu } from "@/core/utils/headerMenu";
 import SidebarMenu from "./Sidebar/SidebarMenu";
 
-const drawerWidth = 300;
-const headersHeight = 72;
+const drawerWidth = 275;
+const headersHeight = 51;
 
 const Main = styled(Stack, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
     flexGrow: 1,