implemented privacy Office Actions modal structure

src/components/dashboard/inquiryPrivacy/privacy-office/PrivacyOfficeList.jsx

@@ -1,5 +1,6 @@
 import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { GET_PRIVACY_ADMIN_LIST } from "@/core/utils/routes";
 import useInquiryPrivacyState from "@/lib/hooks/useInquiryPrivacyState";
 import AutorenewIcon from "@mui/icons-material/Autorenew";
 import DangerousIcon from "@mui/icons-material/Dangerous";
@@ -11,9 +12,10 @@ import SecurityIcon from "@mui/icons-material/Security";
 import WindowIcon from "@mui/icons-material/Window";
 import { Box, Stack } from "@mui/material";
 import moment from "jalali-moment";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import RowActions from "./RowActions";
-import { GET_PRIVACY_ADMIN_LIST } from "@/core/utils/routes";
+
+import ActionDialog from "./RowActions/ActionsDialog";
 import ShowPrimaryArea from "./ShowPrimaryArea";
 
 const PrivacyOfficeList = () => {
@@ -28,6 +30,21 @@ const PrivacyOfficeList = () => {
         if (state_id === 10) return <DangerousIcon sx={{ color: "error.main" }} />;
         if (state_id === 12) return <AutorenewIcon sx={{ color: "#899878" }} />;
     };
+
+    const [modal, setModal] = useState({
+        open: false,
+        type: null, // "reject" | "confirm" | "referral"
+        row: null,
+    });
+
+    const handleOpenModal = (type, row) => {
+        setModal({ open: true, type, row });
+    };
+
+    const handleCloseModal = () => {
+        setModal({ open: false, type: null, row: null });
+    };
+
     const columns = useMemo(() => {
         return [
             {
@@ -233,9 +250,16 @@ const PrivacyOfficeList = () => {
                     table_name={"PrivacyOfficeList"}
                     enableRowActions
                     positionActionsColumn={"first"}
-                    RowActions={RowActions}
+                    RowActions={(props) => <RowActions {...props} onActionClick={handleOpenModal} />}
                 />
             </Box>
+
+            <ActionDialog
+                open={modal.open}
+                type={modal.type}
+                rowDataId={modal.row?.original.id}
+                onClose={handleCloseModal}
+            />
         </>
     );
 };

src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/ActionsDialog.jsx

@@ -0,0 +1,76 @@
+import {
+    Box,
+    Button,
+    Checkbox,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    FormControlLabel,
+    TextField,
+} from "@mui/material";
+import { useEffect, useState } from "react";
+
+const ActionDialog = ({ open, type, rowDataId, onClose }) => {
+    const [description, setDescription] = useState("");
+    const [checked, setChecked] = useState(false);
+
+    useEffect(() => {
+        if (open) {
+            setDescription("");
+            setChecked(false);
+        }
+    }, [open]);
+
+    const actionLabel = {
+        reject: "رد درخواست",
+        confirm: "تایید درخواست",
+        referral: "ارجاع درخواست",
+    }[type];
+
+    const handleSubmit = () => {
+        console.log("Row data id: ", rowDataId);
+        console.log("Action type: ", type);
+        console.log("Desctiption: ", description);
+        console.log("Checked: ", checked);
+
+        // TODO: Implement api call
+
+        onClose();
+    };
+
+    return (
+        <Dialog open={open} fullWidth maxWidth="xs" onClose={onClose}>
+            <DialogTitle>{actionLabel}</DialogTitle>
+
+            <DialogContent>
+                <Box sx={{ display: "flex", flexDirection: "column", gap: 2, mt: 1 }}>
+                    <TextField
+                        fullWidth
+                        multiline
+                        minRows={3}
+                        label="توضیحات"
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                    />
+
+                    <FormControlLabel
+                        control={<Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)} />}
+                        label="تایید انجام عملیات"
+                    />
+                </Box>
+            </DialogContent>
+
+            <DialogActions>
+                <Button onClick={onClose} variant="outlined">
+                    انصراف
+                </Button>
+                <Button variant="contained" onClick={handleSubmit} disabled={!description}>
+                    انجام عملیات
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default ActionDialog;

src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/ConfirmAction/index.jsx

@@ -1,13 +1,11 @@
 import ThumbUpIcon from "@mui/icons-material/ThumbUp";
 import { IconButton, Tooltip } from "@mui/material";
-import { useState } from "react";
 
-const ConfirmAction = ({ rowId, mutate }) => {
-    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+const ConfirmAction = ({ onClick }) => {
     return (
         <>
             <Tooltip title="تایید اقدام">
-                <IconButton color="success" onClick={() => setOpenConfirmDialog(true)}>
+                <IconButton color="success" onClick={onClick}>
                     <ThumbUpIcon />
                 </IconButton>
             </Tooltip>

src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/ReferralAction/index.jsx

@@ -0,0 +1,15 @@
+import { Reply } from "@mui/icons-material";
+import { IconButton, Tooltip } from "@mui/material";
+
+const ReferralAction = ({ onClick }) => {
+    return (
+        <>
+            <Tooltip title="مرجوع کردن درخواست">
+                <IconButton color="info" onClick={onClick}>
+                    <Reply />
+                </IconButton>
+            </Tooltip>
+        </>
+    );
+};
+export default ReferralAction;

src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/RejectAction/index.jsx

@@ -1,13 +1,11 @@
 import ThumbDownIcon from "@mui/icons-material/ThumbDown";
 import { IconButton, Tooltip } from "@mui/material";
-import { useState } from "react";
 
-const RejectAction = ({ rowId, mutate }) => {
-    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+const RejectAction = ({ onClick }) => {
     return (
         <>
             <Tooltip title="عدم تایید اقدام">
-                <IconButton color="error" onClick={() => setOpenRejectDialog(true)}>
+                <IconButton color="error" onClick={onClick}>
                     <ThumbDownIcon />
                 </IconButton>
             </Tooltip>

src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/index.jsx

@@ -1,13 +1,16 @@
 import { Box } from "@mui/material";
 import ConfirmAction from "./ConfirmAction";
+import ReferralAction from "./ReferralAction";
 import RejectAction from "./RejectAction";
 
-const RowActions = ({ row, mutate }) => {
+const RowActions = ({ row, onActionClick }) => {
     return (
-        <Box sx={{ display: "flex", gap: 1, justifyContent: "Center" }}>
-            <RejectAction />
-            <ConfirmAction />
+        <Box sx={{ display: "flex", gap: 1, justifyContent: "center" }}>
+            <ReferralAction onClick={() => onActionClick("referral", row)} />
+            <RejectAction onClick={() => onActionClick("reject", row)} />
+            <ConfirmAction onClick={() => onActionClick("confirm", row)} />
         </Box>
     );
 };
+
 export default RowActions;