change some files

ui/forms/relation/InnerRelationForm.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import React from "react";
+import {
+  Box,
+  Paper,
+  TextField,
+  Typography,
+  Alert,
+  AlertTitle,
+  Divider,
+  Button,
+} from "@mui/material";
+import { FieldArray, Form, getIn, type FormikProps } from "formik";
+import type { RelationFormProps, RelationFormValues } from "./types";
+
+type Props = FormikProps<RelationFormValues> & RelationFormProps;
+
+export default function InnerRelationForm(props: Props) {
+  const {
+    values,
+    errors,
+    touched,
+    handleChange,
+    setFieldValue,
+    isSubmitting,
+  } = props;
+
+  const handleBack = () => {
+    props.update({ relations: values.relations });
+    props.setStep(props.step - 1);
+  };
+
+  return (
+    <Form>
+      <Paper
+        elevation={0}
+        sx={{
+          p: { xs: 2, md: 3 },
+          borderRadius: "24px",
+          border: "1px solid #e2e8f0",
+          backgroundColor: "#fff",
+        }}
+      >
+        <Alert severity="warning" sx={{ mb: 3, borderRadius: "12px" }}>
+          <AlertTitle sx={{ fontWeight: 800 }}>توجه</AlertTitle>
+          مشخصات دو نفر از آشنایان را وارد کنید و از درج بستگان درجه یک (پدر،
+          مادر، همسر، برادر و خواهر) خودداری نمایید.
+        </Alert>
+
+        <FieldArray name="relations">
+          {() => (
+            <Box>
+              {values.relations.map((item, index) => {
+                const itemErrors = getIn(errors, `relations.${index}`) || {};
+                const itemTouched = getIn(touched, `relations.${index}`) || {};
+
+                return (
+                  <Box key={item.id || index} sx={{ mb: index === 0 ? 4 : 0 }}>
+                    <Typography
+                      variant="subtitle1"
+                      sx={{ fontWeight: 800, mb: 2, color: "#1e293b" }}
+                    >
+                      آشنای {index === 0 ? "اول" : "دوم"}
+                    </Typography>
+
+                    <Box
+                      sx={{
+                        display: "grid",
+                        gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" },
+                        gap: 2.5,
+                      }}
+                    >
+                      <TextField
+                        label="نام*"
+                        name={`relations.${index}.firstName`}
+                        value={item.firstName}
+                        onChange={handleChange}
+                        fullWidth
+                        error={!!itemTouched.firstName && !!itemErrors.firstName}
+                        helperText={itemTouched.firstName ? itemErrors.firstName : ""}
+                      />
+
+                      <TextField
+                        label="نام خانوادگی*"
+                        name={`relations.${index}.lastName`}
+                        value={item.lastName}
+                        onChange={handleChange}
+                        fullWidth
+                        error={!!itemTouched.lastName && !!itemErrors.lastName}
+                        helperText={itemTouched.lastName ? itemErrors.lastName : ""}
+                      />
+
+                      <TextField
+                        label="نسبت*"
+                        name={`relations.${index}.relationship`}
+                        value={item.relationship}
+                        onChange={handleChange}
+                        fullWidth
+                        placeholder="مثلاً: همکار، دوست"
+                        error={!!itemTouched.relationship && !!itemErrors.relationship}
+                        helperText={
+                          itemTouched.relationship ? itemErrors.relationship : ""
+                        }
+                      />
+
+                      <TextField
+                        label="تلفن تماس*"
+                        name={`relations.${index}.phoneNumber`}
+                        value={item.phoneNumber}
+                        onChange={(e) => {
+                          const val = e.target.value.replace(/[^\d]/g, "");
+                          setFieldValue(`relations.${index}.phoneNumber`, val);
+                        }}
+                        fullWidth
+                        inputMode="tel"
+                        error={!!itemTouched.phoneNumber && !!itemErrors.phoneNumber}
+                        helperText={
+                          itemTouched.phoneNumber ? itemErrors.phoneNumber : ""
+                        }
+                      />
+
+                      <TextField
+                        label="شغل*"
+                        name={`relations.${index}.jobTitle`}
+                        value={item.jobTitle}
+                        onChange={handleChange}
+                        fullWidth
+                        error={!!itemTouched.jobTitle && !!itemErrors.jobErrors}
+                        helperText={itemTouched.jobTitle ? itemErrors.jobTitle : ""}
+                      />
+
+                      <TextField
+                        label="نام محل کار*"
+                        name={`relations.${index}.workplaceName`}
+                        value={item.workplaceName}
+                        onChange={handleChange}
+                        fullWidth
+                        error={
+                          !!itemTouched.workplaceName && !!itemErrors.workplaceName
+                        }
+                        helperText={
+                          itemTouched.workplaceName ? itemErrors.workplaceName : ""
+                        }
+                      />
+                    </Box>
+
+                    {index === 0 && <Divider sx={{ mt: 4 }} />}
+                  </Box>
+                );
+              })}
+            </Box>
+          )}
+        </FieldArray>
+
+        {/* دکمه‌های ناوبری */}
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            mt: 4,
+          }}
+        >
+          <Button
+            disabled={props.step === 1 || isSubmitting}
+            onClick={handleBack}
+            sx={{ borderRadius: "12px", color: "#64748b", fontWeight: 700 }}
+          >
+            بازگشت
+          </Button>
+
+          <Button
+            variant="contained"
+            type="submit"
+            disabled={isSubmitting}
+            sx={{
+              borderRadius: "12px",
+              px: 4,
+              py: 1.5,
+              bgcolor: props.step === 12 ? "green" : "#2563eb",
+              fontWeight: 700,
+            }}
+          >
+            {props.step === 12 ? "اتمام و ثبت نهایی" : "گام بعدی"}
+          </Button>
+        </Box>
+      </Paper>
+    </Form>
+  );
+}