implemented ComputePaymentForm modal

src/components/dashboard/inquiryPrivacy/privacy-office/RowActions/Forms/ComputePaymentForm.jsx

@@ -1,3 +1,129 @@
-export default function ComputePaymentForm({ mutate }) {
-    return <div>ComputePaymentForm</div>;
+import { Box, Button, DialogActions, FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material";
+import { useEffect, useState } from "react";
+import { Controller, useForm, useWatch } from "react-hook-form";
+
+export default function ComputePaymentForm({ mutate, onClose }) {
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const price_fee = 1; // TODO: Replace with value from .env
+
+    const { control, handleSubmit, setValue } = useForm({
+        defaultValues: {
+            expert_description: "",
+            traffic: "",
+            road_type: "",
+            position: "",
+            final_area_space: "",
+            payment_amount: "",
+        },
+    });
+
+    // Watch dependent fields for recalculation
+    const { traffic, road_type, position, final_area_space } = useWatch({
+        control,
+    });
+
+    useEffect(() => {
+        const t = parseFloat(traffic || "");
+        const r = parseFloat(road_type || "");
+        const p = parseFloat(position || "");
+        const area = parseFloat(final_area_space || "");
+
+        if (t && r && p && area) {
+            const result = t * r * p * area * price_fee;
+            setValue("payment_amount", result.toString());
+        } else {
+            setValue("payment_amount", "");
+        }
+    }, [traffic, road_type, position, final_area_space, price_fee, setValue]);
+
+    const onSubmit = (data) => {
+        console.log(data);
+        setIsSubmitting(true);
+        mutate();
+        onClose();
+    };
+
+    return (
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 3, mt: 1 }}>
+            <Box sx={{ display: "flex", gap: 1 }}>
+                <Controller
+                    name="traffic"
+                    control={control}
+                    render={({ field }) => (
+                        <FormControl fullWidth>
+                            <InputLabel>ترافیک</InputLabel>
+                            <Select {...field} label="ترافیک">
+                                <MenuItem value={1}>سبک</MenuItem>
+                                <MenuItem value={1.5}>متوسط</MenuItem>
+                                <MenuItem value={2}>سنگین</MenuItem>
+                            </Select>
+                        </FormControl>
+                    )}
+                />
+
+                <Controller
+                    name="road_type"
+                    control={control}
+                    render={({ field }) => (
+                        <FormControl fullWidth>
+                            <InputLabel>نوع راه</InputLabel>
+                            <Select {...field} label="نوع راه">
+                                <MenuItem value={1}>فرعی و راه‌آهن</MenuItem>
+                                <MenuItem value={1.5}>اصلی و بزرگراه</MenuItem>
+                                <MenuItem value={2}>آزادراه</MenuItem>
+                            </Select>
+                        </FormControl>
+                    )}
+                />
+            </Box>
+
+            <Box sx={{ display: "flex", gap: 1 }}>
+                <Controller
+                    name="position"
+                    control={control}
+                    render={({ field }) => (
+                        <FormControl fullWidth>
+                            <InputLabel>موقعیت اقتصادی</InputLabel>
+                            <Select {...field} label="موقعیت اقتصادی">
+                                <MenuItem value={2}>در شعاع ۱۰ کیلومتری از مراکز استان</MenuItem>
+                                <MenuItem value={1.5}>در شعاع ۵ کیلومتری از سایر شهرها</MenuItem>
+                            </Select>
+                        </FormControl>
+                    )}
+                />
+
+                <Controller
+                    name="final_area_space"
+                    control={control}
+                    render={({ field }) => (
+                        <TextField {...field} type="number" fullWidth label="مساحت نهایی (متر مربع)" />
+                    )}
+                />
+            </Box>
+
+            <Controller
+                name="payment_amount"
+                control={control}
+                render={({ field }) => (
+                    <TextField {...field} fullWidth label="مبلغ پرداختی" InputProps={{ readOnly: true }} />
+                )}
+            />
+
+            <Controller
+                name="expert_description"
+                control={control}
+                render={({ field }) => <TextField {...field} fullWidth multiline minRows={3} label="توضیحات" />}
+            />
+
+            <DialogActions>
+                <Button onClick={onClose} variant="outlined" disabled={isSubmitting}>
+                    انصراف
+                </Button>
+                <Button variant="contained" onClick={handleSubmit(onSubmit)} disabled={isSubmitting}>
+                    انجام عملیات
+                </Button>
+            </DialogActions>
+        </Box>
+    );
 }