Feature/inquiry privacy tasks details

src/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/RowActions/TaskDetail/DetailDialog.jsx

@@ -0,0 +1,109 @@
+"use client";
+
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    FormControl,
+    FormHelperText,
+    InputLabel,
+    OutlinedInput,
+} from "@mui/material";
+import { object, string } from "yup";
+import useRequest from "@/lib/hooks/useRequest";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import StyledForm from "@/core/components/StyledForm";
+import ApplicantRequestDetail from "@/core/components/ApplicantRequestDetail";
+
+const fakeData = {
+    id: 1,
+    shomareh_darkhast: "2124",
+    ostan: "ostan",
+    shahr: "shahr",
+    shahrestan: "shahrestan",
+    bakhsh: "bakhsh",
+    roosta: "roosta",
+    tarikh_darkhast: "tarikh_darkhast",
+    sazman: "sazman",
+    masahat_zamin: "masahat_zamin",
+    masahat_tarh: "masahat_tarh",
+    gorooh_tarh: "gorooh_tarh",
+    onvane_tarh: "onvane_tarh",
+    address: "کرج - فلان جا - جنب پاساژ - نزدیک اونجا - اونور خیابون - زیر رو گذر - روی زیر گذر",
+    file_mosavab: "file",
+    polygon: [
+        [51.515, -0.09],
+        [51.52, -0.1],
+        [51.52, -0.12],
+    ],
+};
+
+const validationSchema = object({
+    description: string().required("وارد کردن توضیحات الزامیست!"),
+});
+
+const DetailDialog = ({ taskModal, setTaskModal, rowId, mutate }) => {
+    const requestServer = useRequest({ auth: true });
+    const defaultValues = {
+        description: "",
+    };
+    const handleClose = () => {
+        setTaskModal(false);
+    };
+
+    const {
+        register,
+        handleSubmit,
+        formState: { isSubmitting, errors, touchedFields },
+    } = useForm({ defaultValues, resolver: yupResolver(validationSchema), mode: "onBlur" });
+
+    const onSubmit = async (data) => {
+        const formData = new FormData();
+        formData.append("description", data.description);
+        requestServer(`api-for-send-to-harim/${rowId}`, "post", {
+            data: formData,
+        })
+            .then(() => {
+                handleClose();
+                mutate();
+            })
+            .catch(() => {});
+    };
+    return (
+        <StyledForm onSubmit={handleSubmit(onSubmit)}>
+            <Dialog open={taskModal} onClose={handleClose} maxWidth="lg" fullWidth>
+                <DialogContent dividers>
+                    <ApplicantRequestDetail data={fakeData} />
+                    <FormControl error={!!errors.description} size="small" fullWidth variant="outlined">
+                        <InputLabel sx={{ pt: 1 }} htmlFor="description">
+                            توضیحات
+                        </InputLabel>
+                        <OutlinedInput
+                            id="description"
+                            label={"توضیحات"}
+                            multiline
+                            rows={8}
+                            autoComplete="off"
+                            {...register("description")}
+                            size="small"
+                            fullWidth
+                            sx={{ mt: 1 }}
+                            type="text"
+                        />
+                        <FormHelperText id="description">
+                            {errors.description ? errors.description.message : null}
+                        </FormHelperText>
+                    </FormControl>
+                </DialogContent>
+                <DialogActions sx={{ justifyContent: "center", py: 2 }}>
+                    <Button size="large" variant="contained">
+                        ارسال به دفتر حریم
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </StyledForm>
+    );
+};
+export default DetailDialog;

src/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/RowActions/TaskDetail/index.jsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { IconButton, Tooltip } from "@mui/material";
+import AssignmentIcon from "@mui/icons-material/Assignment";
+import DetailDialog from "./DetailDialog";
+import { useState } from "react";
+
+const TaskDetail = ({ rowId, mutate }) => {
+    const [taskModal, setTaskModal] = useState(false);
+
+    const openDetailDialog = () => {
+        setTaskModal(true);
+    };
+
+    return (
+        <>
+            <Tooltip title="جزئیات طرح متقاضی" arrow placement="right">
+                <IconButton color="primary" onClick={openDetailDialog}>
+                    <AssignmentIcon />
+                </IconButton>
+            </Tooltip>
+            <DetailDialog taskModal={taskModal} setTaskModal={setTaskModal} rowId={rowId} mutate={mutate} />
+        </>
+    );
+};
+export default TaskDetail;

src/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/RowActions/index.jsx

@@ -1,8 +1,15 @@
-import ReferForm from "@/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/RowActions/Refer";
+"use client";
+
+import ReferForm from "./Refer";
+import TaskDetail from "./TaskDetail";
+import { Box } from "@mui/material";
 
 const RowActions = ({ row, mutate }) => {
     return (
-        <ReferForm mutate={mutate} rowId={row.getValue("id")} /> //rowId should pass
+        <Box sx={{ display: "flex", gap: 1 }}>
+            <ReferForm mutate={mutate} rowId={row.getValue("id")} />
+            <TaskDetail mutate={mutate} rowId={row.getValue("id")} />
+        </Box>
     );
 };
 export default RowActions;

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;