first commit

ui/forms/RelationForm.tsx

@@ -0,0 +1,141 @@
+import React from "react";
+import {
+  Box,
+  Paper,
+  TextField,
+  Typography,
+  Grid,
+  Alert,
+  AlertTitle,
+  Divider,
+} from "@mui/material";
+
+export interface ReferenceFormData {
+  firstName: string;
+  lastName: string;
+  relationship: string;
+  jobTitle: string;
+  workplaceName: string;
+  phoneNumber: string;
+}
+
+type ValueType = [ReferenceFormData, ReferenceFormData];
+
+const emptyRef = (): ReferenceFormData => ({
+  firstName: "",
+  lastName: "",
+  relationship: "",
+  jobTitle: "",
+  workplaceName: "",
+  phoneNumber: "",
+});
+
+interface Props {
+  value?: ValueType; // ✅ optional
+  onChange?: (next: ValueType) => void; // ✅ optional
+}
+
+export default function RelationForm({ value, onChange }: Props) {
+  // ✅ همیشه یک آرایه 2تایی معتبر داریم
+  const safeValue: ValueType = value ?? [emptyRef(), emptyRef()];
+
+  const safeOnChange = onChange ?? (() => {});
+
+  const updateField =
+    (index: 0 | 1, key: keyof ReferenceFormData) =>
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const next: ValueType = [
+        { ...safeValue[0] },
+        { ...safeValue[1] },
+      ];
+
+      next[index] = { ...next[index], [key]: e.target.value };
+      safeOnChange(next);
+    };
+
+  const renderPersonFields = (index: 0 | 1) => (
+    <Box sx={{ mt: 2 }}>
+      <Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 2 }}>
+        آشنای {index === 0 ? "اول" : "دوم"}
+      </Typography>
+
+      <Grid container spacing={2}>
+        <Grid>
+          <TextField
+            label="نام *"
+            fullWidth
+            required
+            value={safeValue[index].firstName}
+            onChange={updateField(index, "firstName")}
+          />
+        </Grid>
+
+        <Grid>
+          <TextField
+            label="نام خانوادگی *"
+            fullWidth
+            required
+            value={safeValue[index].lastName}
+            onChange={updateField(index, "lastName")}
+          />
+        </Grid>
+
+        <Grid>
+          <TextField
+            label="نسبت *"
+            fullWidth
+            required
+            value={safeValue[index].relationship}
+            onChange={updateField(index, "relationship")}
+            placeholder="مثلاً: همکار، دوست"
+          />
+        </Grid>
+
+        <Grid>
+          <TextField
+            label="تلفن تماس *"
+            fullWidth
+            required
+            inputMode="tel"
+            value={safeValue[index].phoneNumber}
+            onChange={updateField(index, "phoneNumber")}
+          />
+        </Grid>
+
+        <Grid >
+          <TextField
+            label="شغل *"
+            fullWidth
+            required
+            value={safeValue[index].jobTitle}
+            onChange={updateField(index, "jobTitle")}
+          />
+        </Grid>
+
+        <Grid>
+          <TextField
+            label="نام محل کار *"
+            fullWidth
+            required
+            value={safeValue[index].workplaceName}
+            onChange={updateField(index, "workplaceName")}
+          />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+
+  return (
+    <Paper elevation={0} >
+
+      <Alert severity="warning" sx={{ mb: 3 }}>
+        <AlertTitle>توجه</AlertTitle>
+        مشخصات دو نفر از آشنایان را وارد کنید و از درج بستگان درجه یک (پدر، مادر، همسر، برادر و خواهر) خودداری نمایید.
+      </Alert>
+
+      {renderPersonFields(0)}
+      <Divider sx={{ my: 3 }} />
+      {renderPersonFields(1)}
+    </Paper>
+  );
+}