refer form admin city/province

src/app/api/fake-cities/route.js

@@ -0,0 +1,18 @@
+const data = [
+    {
+        id : 1,
+        name : "تهران"
+    },
+    {
+        id : 2,
+        name : "ری"
+    },
+    {
+        id : 3,
+        name : "اندیشه"
+    },
+];
+
+export async function GET() {
+    return Response.json({ data });
+}

src/app/api/fake-data/route.js

@@ -1,5 +1,39 @@
 const data = [
-    // put your fake data here
+    {
+        id : 1,
+        aplication_number : 1,
+        application_date : "1",
+        province:"tehran",
+        city:"tehran"
+    },
+    {
+        id : 2,
+        aplication_number : 2,
+        application_date : "1",
+        province:"tehran",
+        city:"tehran"
+    },
+    {
+        id : 3,
+        aplication_number : 3,
+        application_date : "1",
+        province:"tehran",
+        city:"tehran"
+    },
+    {
+        id : 4,
+        aplication_number : 4,
+        application_date : "1",
+        province:"tehran",
+        city:"tehran"
+    },
+    {
+        id : 5,
+        aplication_number : 5,
+        application_date : "1",
+        province:"tehran",
+        city:"tehran"
+    },
 ];
 
 export async function GET() {

src/app/api/fake-provinces/route.js

@@ -0,0 +1,18 @@
+const data = [
+    {
+        id : 1,
+        name : "تهران"
+    },
+    {
+        id : 2,
+        name : "مشهد"
+    },
+    {
+        id : 3,
+        name : "اصفهان"
+    },
+];
+
+export async function GET() {
+    return Response.json({ data });
+}

src/app/api/fake-submit/[id]/route.js

@@ -0,0 +1,3 @@
+export async function POST() {
+    return Response.json({message : "Done"});
+}

src/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/RowActions/Refer/ReferFormContext.jsx

@@ -0,0 +1,140 @@
+import {
+    Autocomplete,
+    Button, CircularProgress,
+    DialogActions,
+    DialogContent,
+    FormControl, FormHelperText,
+    InputLabel, OutlinedInput,
+    Stack,
+    TextField, Typography
+} from "@mui/material";
+import {Controller, useForm} from "react-hook-form";
+import {yupResolver} from "@hookform/resolvers/yup";
+import {object, string} from "yup";
+import StyledForm from "@/core/components/StyledForm";
+import useCities from "@/lib/hooks/useCities";
+import useRequest from "@/lib/hooks/useRequest";
+import {REFER_ADMIN_CITY} from "@/core/utils/routes";
+
+const validationSchema = object({
+    description: string().required("وارد کردن توضیحات الزامیست!"),
+    city: string().required("وارد کردن شهرستان الزامیست!"),
+});
+
+const ReferFormContext = ({setOpenReferDialog, rowId, mutate}) => {
+    const defaultValues = {
+        description: "",
+        city: "",
+    };
+    const { cities, loadingCities, errorCities } = useCities()
+    const requestServer = useRequest({auth: true})
+    const {
+        control,
+        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);
+        formData.append("cityId", data.city);
+        requestServer(`${REFER_ADMIN_CITY}/${rowId}`, 'post', {
+            data: formData,
+        }).then(() => {
+            setOpenReferDialog(false)
+            mutate()
+        }).catch(() => {})
+    }
+    return (
+        <StyledForm onSubmit={handleSubmit(onSubmit)}>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Stack>
+                        <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>
+                    </Stack>
+                    <Stack>
+                        <Controller
+                            name="city"
+                            control={control}
+                            render={({field: {onChange, value}, fieldState : {error }}) => (
+                                <FormControl error={!!error} size="small" fullWidth variant="outlined">
+                                    <InputLabel htmlFor="city"/>
+                                    {errorCities ? (
+                                        <Typography color={"red"}>خطایی در دریافت شهرستان ها رخ داده است!</Typography>
+                                        ) :
+                                        loadingCities ? (
+                                            <Typography sx={{display : 'flex', alignItems : "center", gap : 2}}>
+                                                <CircularProgress size={20} />
+                                                درحال دریافت لیست شهرستان ها
+                                            </Typography>
+                                            ) : (
+                                                <Autocomplete
+                                                id="city"
+                                                size="small"
+                                                value={cities.find(city => city.id === value) || null}
+                                                disablePortal
+                                                options={cities}
+                                                getOptionLabel={(city) => city.name}
+                                                isOptionEqualToValue={(option, value) => option.id === value.id}
+                                                onChange={(event, newValue) => {
+                                                    onChange(newValue ? newValue.id : "");
+                                                }}
+                                                renderInput={(params) => (
+                                                    <TextField
+                                                        {...params}
+                                                        autoComplete="off"
+                                                        error={!!errors.city}
+                                                        fullWidth
+                                                        label="شهرستان"
+                                                    />
+                                                )}
+                                            />
+                                        )}
+                                    <FormHelperText id="city">
+                                            {errors.city ? errors.city.message : null}
+                                    </FormHelperText>
+                                </FormControl>
+                            )}
+                        />
+                    </Stack>
+                </Stack>
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    onClick={() => setOpenReferDialog(false)}
+                    variant="outlined"
+                    color="secondary"
+                    autoFocus
+                >
+                    {"انصراف"}
+                </Button>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    type={"submit"}
+                    disabled={isSubmitting}
+                >
+                    {isSubmitting ? "در حال اسال" :"ارجاع"}
+                </Button>
+            </DialogActions>
+        </StyledForm>
+    )
+}
+export default ReferFormContext

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

@@ -0,0 +1,36 @@
+import {Dialog, DialogTitle, IconButton, Stack, Tooltip} from "@mui/material";
+import ReplyIcon from '@mui/icons-material/Reply';
+import DialogTransition from "@/core/components/DialogTransition";
+import ReferFormContext from "@/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/RowActions/Refer/ReferFormContext";
+import {useState} from "react";
+
+const ReferForm = ({rowId, mutate}) => {
+    const [openReferDialog, setOpenReferDialog] = useState(false)
+    return(
+        <Stack>
+            <Tooltip title="ارجاع به شهرستان دیگر" arrow placement="right">
+                <IconButton
+                    color="primary"
+                    sx={{textTransform: "unset", alignSelf: "center"}}
+                    onClick={() => {
+                        setOpenReferDialog(true)
+                    }}
+                >
+                    <ReplyIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog PaperProps={{
+                sx: {
+                    transition: 'all .3s',
+                    boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'
+                }
+            }} open={openReferDialog} fullWidth TransitionComponent={DialogTransition}>
+                <DialogTitle sx={{ m: 0, p: 2, borderBottom: 1, borderColor: "divider" }} id="create-dialog">
+                    ارجاع به شهرستان دیگر
+                </DialogTitle>
+                <ReferFormContext rowId={rowId} mutate={mutate} setOpenReferDialog={setOpenReferDialog} />
+            </Dialog>
+        </Stack>
+    )
+}
+export default ReferForm

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

@@ -0,0 +1,8 @@
+import ReferForm from "@/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/RowActions/Refer";
+
+const RowActions = ({row, mutate}) => {
+    return(
+        <ReferForm mutate={mutate} rowId={row.getValue("id")} /> //rowId should pass
+    )
+}
+export default RowActions

src/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/TaskList.jsx

@@ -4,10 +4,19 @@ import { useMemo } from "react";
 import { Box, IconButton, Tooltip } from "@mui/material";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
 import AssignmentIcon from "@mui/icons-material/Assignment";
+import RowActions from "@/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/RowActions";
 
 const TaskList = () => {
     const columns = useMemo(
         () => [
+            {
+                accessorKey: "id",
+                header: "کد یکتا",
+                id: "id",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "notEquals",
+            },
             {
                 accessorKey: "aplication_number",
                 header: "شماره درخواست",
@@ -112,16 +121,7 @@ const TaskList = () => {
                     table_name={"cityAdminZaminGovList"}
                     enableRowActions
                     positionActionsColumn={"last"}
-                    renderRowActions={({ row, table }) => (
+                    renderRowActions={({ row, table }) => <RowActions row={row}/>}
-                        <Tooltip arrow title="نمایش جزئیات" placement="right">
-                            <IconButton
-                                color="success"
-                                onClick={() => console.log("next part")}
-                            >
-                                <AssignmentIcon />
-                            </IconButton>
-                        </Tooltip>
-                    )}
                 />
             </Box>
         </>

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

@@ -1,10 +1,10 @@
 "use client";
-
 import PageTitle from "@/core/components/PageTitle";
 import { Stack } from "@mui/material";
 import TaskList from "./TaskList";
 
 const CityAdminZaminGovComponent = () => {
+
     return (
         <Stack spacing={1}>
             <PageTitle title={"استعلام حرائم پنجره واحد"} />

src/components/dashboard/inquiryPrivacy/provinceAdmin/zaminGov/RowActions/Refer/ReferFormContext.jsx

@@ -0,0 +1,141 @@
+import {
+    Autocomplete,
+    Button, CircularProgress,
+    DialogActions,
+    DialogContent,
+    FormControl, FormHelperText,
+    InputLabel, OutlinedInput,
+    Stack,
+    TextField, Typography
+} from "@mui/material";
+import {Controller, useForm} from "react-hook-form";
+import {yupResolver} from "@hookform/resolvers/yup";
+import {object, string} from "yup";
+import StyledForm from "@/core/components/StyledForm";
+import useProvinces from "@/lib/hooks/useProvince";
+import useRequest from "@/lib/hooks/useRequest";
+import {REFER_ADMIN_PROVINCE} from "@/core/utils/routes";
+
+const validationSchema = object({
+    description: string().required("وارد کردن توضیحات الزامیست!"),
+    province: string().required("وارد کردن استان الزامیست!"),
+});
+
+const ReferFormContext = ({setOpenReferDialog, rowId, mutate}) => {
+    const defaultValues = {
+        description: "",
+        province: "",
+    };
+    const { provinces, loadingProvinces, errorProvinces } = useProvinces()
+    const requestServer = useRequest({auth: true})
+    const {
+        control,
+        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);
+        formData.append("provinceId", data.province);
+
+        requestServer(`${REFER_ADMIN_PROVINCE}/${rowId}`, 'post', {
+            data: formData,
+        }).then(() => {
+            setOpenReferDialog(false)
+            mutate()
+        }).catch(() => {})
+    }
+    return (
+        <StyledForm onSubmit={handleSubmit(onSubmit)}>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Stack>
+                        <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>
+                    </Stack>
+                    <Stack>
+                        <Controller
+                            name="province"
+                            control={control}
+                            render={({field: {onChange, value}, fieldState : {error }}) => (
+                                <FormControl error={!!error} size="small" fullWidth variant="outlined">
+                                    <InputLabel htmlFor="province"/>
+                                    {errorProvinces ? (
+                                            <Typography color={"red"}>خطایی در دریافت استان ها رخ داده است!</Typography>
+                                        ) :
+                                        loadingProvinces ? (
+                                            <Typography sx={{display : 'flex', alignItems : "center", gap : 2}}>
+                                                <CircularProgress size={20} />
+                                                درحال دریافت لیست استان ها
+                                            </Typography>
+                                        ) : (
+                                            <Autocomplete
+                                                id="province"
+                                                size="small"
+                                                value={provinces.find(province => province.id === value) || null}
+                                                disablePortal
+                                                options={provinces}
+                                                getOptionLabel={(province) => province.name}
+                                                isOptionEqualToValue={(option, value) => option.id === value.id}
+                                                onChange={(event, newValue) => {
+                                                    onChange(newValue ? newValue.id : "");
+                                                }}
+                                                renderInput={(params) => (
+                                                    <TextField
+                                                        {...params}
+                                                        autoComplete="off"
+                                                        error={!!errors.province}
+                                                        fullWidth
+                                                        label="استان"
+                                                    />
+                                                )}
+                                            />
+                                        )}
+                                    <FormHelperText id="province">
+                                        {errors.province ? errors.province.message : null}
+                                    </FormHelperText>
+                                </FormControl>
+                            )}
+                        />
+                    </Stack>
+                </Stack>
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    onClick={() => setOpenReferDialog(false)}
+                    variant="outlined"
+                    color="secondary"
+                    autoFocus
+                >
+                    {"انصراف"}
+                </Button>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    type={"submit"}
+                    disabled={isSubmitting}
+                >
+                    {isSubmitting ? "در حال اسال" :"ارجاع"}
+                </Button>
+            </DialogActions>
+        </StyledForm>
+    )
+}
+export default ReferFormContext

src/components/dashboard/inquiryPrivacy/provinceAdmin/zaminGov/RowActions/Refer/index.jsx

@@ -0,0 +1,37 @@
+import {Dialog, DialogTitle, IconButton, Stack, Tooltip} from "@mui/material";
+import ReplyIcon from '@mui/icons-material/Reply';
+import DialogTransition from "@/core/components/DialogTransition";
+import {useState} from "react";
+import ReferFormContext
+    from "@/components/dashboard/inquiryPrivacy/provinceAdmin/zaminGov/RowActions/Refer/ReferFormContext";
+
+const ReferForm = ({rowId, mutate}) => {
+    const [openReferDialog, setOpenReferDialog] = useState(false)
+    return(
+        <Stack>
+            <Tooltip title="ارجاع به استان دیگر" arrow placement="right">
+                <IconButton
+                    color="primary"
+                    sx={{textTransform: "unset", alignSelf: "center"}}
+                    onClick={() => {
+                        setOpenReferDialog(true)
+                    }}
+                >
+                    <ReplyIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog PaperProps={{
+                sx: {
+                    transition: 'all .3s',
+                    boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'
+                }
+            }} open={openReferDialog} fullWidth TransitionComponent={DialogTransition}>
+                <DialogTitle sx={{ m: 0, p: 2, borderBottom: 1, borderColor: "divider" }} id="create-dialog">
+                    ارجاع به استان دیگر
+                </DialogTitle>
+                <ReferFormContext rowId={rowId} mutate={mutate} setOpenReferDialog={setOpenReferDialog} />
+            </Dialog>
+        </Stack>
+    )
+}
+export default ReferForm

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

@@ -0,0 +1,8 @@
+import ReferForm from "@/components/dashboard/inquiryPrivacy/provinceAdmin/zaminGov/RowActions/Refer";
+
+const RowActions = ({row, mutate}) => {
+    return(
+        <ReferForm mutate={mutate} rowId={row.getValue("id")} /> //rowId should pass
+    )
+}
+export default RowActions

src/components/dashboard/inquiryPrivacy/provinceAdmin/zaminGov/TaskList.jsx

@@ -4,10 +4,19 @@ import { useMemo } from "react";
 import { Box, IconButton, Tooltip } from "@mui/material";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
 import AssignmentIcon from "@mui/icons-material/Assignment";
+import RowActions from "@/components/dashboard/inquiryPrivacy/provinceAdmin/zaminGov/RowActions";
 
 const TaskList = () => {
     const columns = useMemo(
         () => [
+            {
+                accessorKey: "id",
+                header: "کد یکتا",
+                id: "id",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "notEquals",
+            },
             {
                 accessorKey: "aplication_number",
                 header: "شماره درخواست",
@@ -112,16 +121,7 @@ const TaskList = () => {
                     table_name={"provinceAdminZaminGovList"}
                     enableRowActions
                     positionActionsColumn={"last"}
-                    renderRowActions={({ row, table }) => (
+                    renderRowActions={({ row, table }) => <RowActions row={row}/>}
-                        <Tooltip arrow title="نمایش جزئیات" placement="right">
-                            <IconButton
-                                color="success"
-                                onClick={() => console.log("next part")}
-                            >
-                                <AssignmentIcon />
-                            </IconButton>
-                        </Tooltip>
-                    )}
                 />
             </Box>
         </>

src/core/utils/routes.js

@@ -6,3 +6,7 @@ export const CHANGE_USER_PASSWORD = api + "/api/v3/profile/change_password";
 export const GET_LOGIN_ROUTE = api + "/login_dev";
 export const GET_PERMISSIONS_ROUTE = api + "/webapi/user/get-permission";
 export const GET_SIDEBAR_BADGE_ROUTE = api + "/v2/activity_statistics";
+export const REFER_ADMIN_PROVINCE = "/v3/api/fake-submit"
+export const REFER_ADMIN_CITY = "/v3/api/fake-submit"
+export const GET_CITY_LISTS = "/v3/api/fake-cities"
+export const GET_PROVINCE_LISTS = "/v3/api/fake-provinces"

src/lib/hooks/useCities.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+import {GET_CITY_LISTS} from "@/core/utils/routes";
+
+const useCities = () => {
+    const [cities, setCities] = useState([]);
+    const [loadingCities, setLoadingCities] = useState(true);
+    const [errorCities, setErrorCities] = useState(null);
+
+    useEffect(() => {
+        const fetchCities = async () => {
+            try {
+                const response = await axios.get(`${GET_CITY_LISTS}`);
+                setCities(response.data.data);
+                setLoadingCities(false);
+            } catch (e) {
+                console.error("Error fetching cities:", e);
+                setErrorCities(e);
+                setLoadingCities(false);
+            }
+        };
+
+        fetchCities();
+    }, []);
+
+    return { cities, loadingCities, errorCities };
+};
+
+export default useCities;

src/lib/hooks/useProvince.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+import {GET_PROVINCE_LISTS} from "@/core/utils/routes";
+
+const useProvinces = () => {
+    const [provinces, setProvinces] = useState([]);
+    const [loadingProvinces, setLoadingProvinces] = useState(true);
+    const [errorProvinces, setErrorProvinces] = useState(null);
+
+    useEffect(() => {
+        const fetchCities = async () => {
+            try {
+                const response = await axios.get(`${GET_PROVINCE_LISTS}`); // Fetch the cities from the API
+                setProvinces(response.data.data); // Set the cities data
+                setLoadingProvinces(false); // Set loading to false after successful fetch
+            } catch (e) {
+                console.error("Error fetching cities:", e);
+                setErrorProvinces(e);
+                setLoadingProvinces(false);
+            }
+        };
+
+        fetchCities(); // Call the fetch function
+    }, []); // Empty dependency array to ensure it only runs once
+
+    return { provinces, loadingProvinces, errorProvinces };
+};
+
+export default useProvinces;