Feature/inquiry privacy tasks details

src/core/components/ApplicantRequestDetail/DetailItem.jsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { Box, Chip, Divider, Grid, Typography } from "@mui/material";
+import QrCode2Icon from "@mui/icons-material/QrCode2";
+import HomeWorkIcon from "@mui/icons-material/HomeWork";
+import DomainIcon from "@mui/icons-material/Domain";
+import CottageIcon from "@mui/icons-material/Cottage";
+import AccountTreeIcon from "@mui/icons-material/AccountTree";
+import HolidayVillageIcon from "@mui/icons-material/HolidayVillage";
+import CalendarMonthIcon from "@mui/icons-material/CalendarMonth";
+import FaxIcon from "@mui/icons-material/Fax";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+import ArchitectureIcon from "@mui/icons-material/Architecture";
+import Diversity2Icon from "@mui/icons-material/Diversity2";
+import SubtitlesIcon from "@mui/icons-material/Subtitles";
+import FingerprintIcon from "@mui/icons-material/Fingerprint";
+
+const findItem = {
+    id: { title: "کد یکتا", icon: <FingerprintIcon /> },
+    shomareh_darkhast: { title: "شماره درخواست", icon: <QrCode2Icon /> },
+    ostan: { title: "استان", icon: <HomeWorkIcon /> },
+    shahr: { title: "شهر", icon: <DomainIcon /> },
+    shahrestan: { title: "شهرستان", icon: <CottageIcon /> },
+    bakhsh: { title: "بخش", icon: <AccountTreeIcon /> },
+    roosta: { title: "روستا", icon: <HolidayVillageIcon /> },
+    tarikh_darkhast: { title: "تاریخ درخواست", icon: <CalendarMonthIcon /> },
+    sazman: { title: "سازمان", icon: <FaxIcon /> },
+    masahat_zamin: { title: "مساحت زمین", icon: <FullscreenIcon /> },
+    masahat_tarh: { title: "مساحت طرح", icon: <ArchitectureIcon /> },
+    gorooh_tarh: { title: "گروه طرح", icon: <Diversity2Icon /> },
+    onvane_tarh: { title: "عنوان طرح", icon: <SubtitlesIcon /> },
+};
+
+const DetailItem = ({ item }) => {
+    const currentItem = findItem[item.key];
+    if (!currentItem) return null;
+
+    return (
+        <Grid item xs={12} md={6}>
+            <Box sx={{ display: "flex", alignItems: "center" }}>
+                <Chip
+                    icon={currentItem?.icon}
+                    sx={{ fontSize: "12px", fontWeight: 500, pl: "5px" }}
+                    label={currentItem?.title}
+                />
+                <Divider sx={{ flex: 1, mx: 2 }} />
+                <Typography>{item.value}</Typography>
+            </Box>
+        </Grid>
+    );
+};
+export default DetailItem;

src/core/components/ApplicantRequestDetail/DetailMap.jsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Box } from "@mui/material";
+import dynamic from "next/dynamic";
+import MapLoading from "@/core/components/MapLayer/Loading";
+import FlyToPolyGon from "./FlyToPolygon";
+
+const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
+    loading: () => <MapLoading />,
+    ssr: false,
+});
+
+const DetailMap = ({ data }) => {
+    return (
+        <Box
+            sx={{
+                width: "100%",
+                height: "200px",
+                border: "1px solid #e1e1e1",
+                borderRadius: 2,
+                my: 3,
+            }}
+        >
+            <Box
+                sx={{
+                    height: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }}
+            >
+                <MapLayer>
+                    <FlyToPolyGon polygon={data.polygon} />
+                </MapLayer>
+            </Box>
+        </Box>
+    );
+};
+export default DetailMap;

src/core/components/ApplicantRequestDetail/FlyToPolygon.jsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Polygon, useMap } from "react-leaflet";
+import { useEffect } from "react";
+
+const purpleOptions = { color: "purple" };
+
+const FlyToPolygon = ({ polygon }) => {
+    const map = useMap();
+
+    useEffect(() => {
+        if (map) {
+            const leafletPolygon = L.polygon(polygon);
+            const bounds = leafletPolygon.getBounds();
+            map.flyToBounds(bounds, { padding: [50, 50] });
+        }
+    }, [map, polygon]);
+
+    return <Polygon pathOptions={purpleOptions} positions={polygon} />;
+};
+
+export default FlyToPolygon;

src/core/components/ApplicantRequestDetail/index.jsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { Box, Button, Chip, Divider, Grid, Typography } from "@mui/material";
+import AttachFileIcon from "@mui/icons-material/AttachFile";
+import DownloadingIcon from "@mui/icons-material/Downloading";
+import DetailItem from "./DetailItem";
+import DetailMap from "./DetailMap";
+import ContactMailIcon from "@mui/icons-material/ContactMail";
+
+const ApplicantRequestDetail = ({ data }) => {
+    return (
+        <>
+            <Divider sx={{ my: 3 }}>
+                <Chip
+                    color="primary"
+                    sx={{ mx: 2, fontSize: "13px", fontWeight: 500 }}
+                    label="اطلاعات تکمیلی طرح متقاضی"
+                />
+            </Divider>
+            <Grid container columnSpacing={3} rowSpacing={1.2}>
+                {Object.entries(data).map(([key, value]) => (
+                    <DetailItem key={key} item={{ key: key, value: value }} />
+                ))}
+                <Grid item xs={12} md={6}>
+                    <Box sx={{ display: "flex", alignItems: "center" }}>
+                        <Chip
+                            icon={<AttachFileIcon />}
+                            sx={{ fontSize: "12px", fontWeight: 500, pl: "5px" }}
+                            label="فایل مصوب"
+                        />
+                        <Divider sx={{ flex: 1, mx: 2 }} />
+                        <Button
+                            variant="contained"
+                            color="success"
+                            startIcon={<DownloadingIcon />}
+                            sx={{ borderRadius: 5 }}
+                        >
+                            دریافت
+                        </Button>
+                    </Box>
+                </Grid>
+            </Grid>
+            <Grid container columnSpacing={2} sx={{ mt: 2, justifyContent: "center" }}>
+                <Grid item xs={12} md={6}>
+                    <Divider>
+                        <Chip
+                            sx={{ fontSize: "12px", fontWeight: 500, pl: "5px" }}
+                            icon={<ContactMailIcon />}
+                            label="آدرس"
+                        />
+                    </Divider>
+                    <Box sx={{ display: "flex", justifyContent: "center", my: 1 }}>
+                        <Typography>{data.address}</Typography>
+                    </Box>
+                </Grid>
+            </Grid>
+            <DetailMap data={data} />
+        </>
+    );
+};
+export default ApplicantRequestDetail;