implemented ActionsDialog forms logic

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

@@ -34,15 +34,15 @@ const PrivacyOfficeList = () => {
     const [modal, setModal] = useState({
         open: false,
         type: null, // "reject" | "confirm" | "referral"
-        row: null,
+        rowId: null,
     });
 
-    const handleOpenModal = (type, row) => {
-        setModal({ open: true, type, row });
+    const handleOpenModal = (type, rowId) => {
+        setModal({ open: true, type, rowId });
     };
 
     const handleCloseModal = () => {
-        setModal({ open: false, type: null, row: null });
+        setModal({ open: false, type: null, rowId: null });
     };
 
     const columns = useMemo(() => {
@@ -254,12 +254,7 @@ const PrivacyOfficeList = () => {
                 />
             </Box>
 
-            <ActionDialog
-                open={modal.open}
-                type={modal.type}
-                rowDataId={modal.row?.original.id}
-                onClose={handleCloseModal}
-            />
+            <ActionDialog open={modal.open} type={modal.type} rowDataId={modal.rowId} onClose={handleCloseModal} />
         </>
     );
 };

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

@@ -10,17 +10,30 @@ import {
     TextField,
 } from "@mui/material";
 import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
 
 const ActionDialog = ({ open, type, rowDataId, onClose }) => {
-    const [description, setDescription] = useState("");
-    const [checked, setChecked] = useState(false);
+    const [needsAccessRoad, setNeedsAccessRoad] = useState(false);
+    const {
+        control,
+        handleSubmit,
+        reset,
+        formState: { isSubmitting },
+    } = useForm({
+        defaultValues: {
+            expert_description: "",
+            need_payment: false,
+        },
+    });
 
     useEffect(() => {
         if (open) {
-            setDescription("");
-            setChecked(false);
+            reset({
+                expert_description: "",
+                need_payment: false,
+            });
         }
-    }, [open]);
+    }, [open, reset]);
 
     const actionLabel = {
         reject: "رد درخواست",
@@ -28,13 +41,12 @@ const ActionDialog = ({ open, type, rowDataId, onClose }) => {
         referral: "ارجاع درخواست",
     }[type];
 
-    const handleSubmit = () => {
-        console.log("Row data id: ", rowDataId);
-        console.log("Action type: ", type);
-        console.log("Desctiption: ", description);
-        console.log("Checked: ", checked);
+    const onSubmit = (formData) => {
+        console.log("Row data id:", rowDataId);
+        console.log("Action type:", type);
+        console.log("Form data:", formData);
 
-        // TODO: Implement api call
+        // TODO: Implement the API call here
 
         onClose();
     };
@@ -44,28 +56,43 @@ const ActionDialog = ({ open, type, rowDataId, 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 sx={{ display: "flex", flexDirection: "column", mt: 1 }}>
+                    <Controller
+                        name="expert_description"
+                        control={control}
+                        render={({ field }) => <TextField {...field} fullWidth multiline minRows={3} label="توضیحات" />}
                     />
+                    {type === "confirm" && (
+                        <>
+                            <Controller
+                                name="need_payment"
+                                control={control}
+                                render={({ field }) => (
+                                    <FormControlLabel
+                                        control={<Checkbox {...field} checked={field.value} />}
+                                        label="نیاز به پرداخت"
+                                    />
+                                )}
+                            />
+                            <FormControlLabel
+                                control={
+                                    <Checkbox
+                                        checked={needsAccessRoad}
+                                        onChange={(e) => setNeedsAccessRoad(e.target.checked)}
+                                    />
+                                }
+                                label="به راه دسترسی نیاز دارد"
+                            />
+                        </>
+                    )}
                 </Box>
             </DialogContent>
 
             <DialogActions>
-                <Button onClick={onClose} variant="outlined">
+                <Button onClick={onClose} variant="outlined" disabled={isSubmitting}>
                     انصراف
                 </Button>
-                <Button variant="contained" onClick={handleSubmit} disabled={!description}>
+                <Button variant="contained" onClick={handleSubmit(onSubmit)} disabled={isSubmitting}>
                     انجام عملیات
                 </Button>
             </DialogActions>

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

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

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

@@ -3,12 +3,17 @@ import ConfirmAction from "./ConfirmAction";
 import ReferralAction from "./ReferralAction";
 import RejectAction from "./RejectAction";
 
-const RowActions = ({ row, onActionClick }) => {
+const RowActions = ({
+    row: {
+        original: { id },
+    },
+    onActionClick,
+}) => {
     return (
         <Box sx={{ display: "flex", gap: 1, justifyContent: "center" }}>
-            <ReferralAction onClick={() => onActionClick("referral", row)} />
-            <RejectAction onClick={() => onActionClick("reject", row)} />
-            <ConfirmAction onClick={() => onActionClick("confirm", row)} />
+            <ReferralAction onClick={() => onActionClick("referral", id)} />
+            <RejectAction onClick={() => onActionClick("reject", id)} />
+            <ConfirmAction onClick={() => onActionClick("confirm", id)} />
         </Box>
     );
 };