fix: issue in user profile

src/App.tsx

@@ -7,12 +7,18 @@ import {
   useColorScheme,
 } from '@mui/material';
 import './App.css';
+<<<<<<< HEAD
 import { useTranslation } from 'react-i18next';
 import { LanguageManager } from './components/LanguageManager';
+=======
+import { UserProfileForm } from './features/profile/components/UserProfileForm';
+
+>>>>>>> 3698cbf (feat: implement user profile form)
 function App() {
   const { t } = useTranslation();
 
   return (
+<<<<<<< HEAD
     <>
       <CssBaseline />
       <LanguageManager />
@@ -41,6 +47,11 @@ function App() {
         </Box>
       </div>
     </>
+=======
+    <div>
+      <UserProfileForm />
+    </div>
+>>>>>>> 3698cbf (feat: implement user profile form)
   );
 }
 

src/features/profile/components/UserProfileForm.tsx

@@ -0,0 +1,216 @@
+import {
+  Box,
+  Typography,
+  Button,
+  TextField,
+  Grid,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  type SelectChangeEvent,
+} from '@mui/material';
+import { useState, type ChangeEvent } from 'react';
+
+export function UserProfileForm() {
+  const [isEditing, setIsEditing] = useState(false);
+  const [gender, setGender] = useState('');
+  const [data, setData] = useState({
+    firstName: 'محمد حسین',
+    lastName: 'برزه‌گر',
+    gender: 'مرد',
+    nationalCode: '',
+  });
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setData((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
+  const toggleEdit = () => {
+    setIsEditing((prev) => !prev);
+  };
+  const handleChangeGender = (e: SelectChangeEvent) => {
+    setGender(e.target.value);
+  };
+  const displayValue = (value: string | null | undefined) => {
+    return value && value.trim() !== '' ? value : 'تعیین نشده';
+  };
+
+  return (
+    <div
+      dir="rtl"
+      style={{
+        backgroundColor: '#F5F5F5',
+        minHeight: '100vh',
+        minWidth: '100vw',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Box
+        sx={{
+          width: '500px',
+          backgroundColor: 'white',
+          border: '1px solid #ccc',
+          borderRadius: 2,
+          padding: 5,
+          margin: '40px auto',
+          boxShadow: 2,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            backgroundColor: isEditing ? '#ADD8E6' : '#F5F5F5',
+            p: 2,
+            borderRadius: 1,
+          }}
+        >
+          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+            <Typography
+              variant="h5"
+              sx={{ color: isEditing ? '#1976d2' : 'gray' }}
+            >
+              اطلاعات شخصی من
+            </Typography>
+            <Typography
+              sx={{ color: isEditing ? '#1976d2' : 'gray', fontSize: '13px' }}
+            >
+              این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی
+              می‌ماند
+            </Typography>
+          </Box>
+          <Button
+            onClick={toggleEdit}
+            sx={{
+              border: 0.5,
+              borderColor: '#1976d2',
+              borderRadius: '5px',
+              backgroundColor: isEditing ? '#1976d2' : 'white',
+              color: isEditing ? 'white' : '#1976d2',
+              width: '80px',
+              height: '30px',
+            }}
+          >
+            {isEditing ? 'ذخیره' : 'ویرایش'}
+          </Button>
+        </Box>
+
+        <Grid container spacing={0.5}>
+          <Grid item xs={12} sm={6}>
+            <Box sx={{ mb: 2 }}>
+              <Typography variant="subtitle2">نام</Typography>
+              {isEditing ? (
+                <TextField
+                  fullWidth
+                  name="firstName"
+                  label="نام"
+                  value={data.firstName}
+                  onChange={handleChange}
+                  sx={{ width: '230px' }}
+                  inputProps={{
+                    sx: {
+                      height: '12px',
+                    },
+                  }}
+                />
+              ) : (
+                <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
+                  {displayValue(data.firstName)}
+                </Typography>
+              )}
+            </Box>
+
+            <Box>
+              <Typography variant="subtitle2">جنسیت</Typography>
+              {isEditing ? (
+                <FormControl sx={{ width: '230px' }}>
+                  <InputLabel id="sex-label">جنسیت</InputLabel>
+                  <Select
+                    labelId="sex-label"
+                    id="sex"
+                    value={gender}
+                    label="جنسیت"
+                    onChange={handleChangeGender}
+                    sx={{
+                      height: '45px',
+                      '& .MuiSelect-select': {
+                        paddingY: '10px',
+                      },
+                    }}
+                  >
+                    <MenuItem value="female">زن</MenuItem>
+                    <MenuItem value="male">مرد</MenuItem>
+                  </Select>
+                </FormControl>
+              ) : (
+                <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
+                  {displayValue(data.gender)}
+                </Typography>
+              )}
+            </Box>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Box sx={{ mb: 2 }}>
+              <Typography variant="subtitle2" sx={{ width: '230px' }}>
+                نام خانوادگی
+              </Typography>
+              {isEditing ? (
+                <TextField
+                  fullWidth
+                  name="lastName"
+                  value={data.lastName}
+                  label="نام خانوادگی"
+                  onChange={handleChange}
+                  sx={{ width: '230px' }}
+                  inputProps={{
+                    sx: {
+                      height: '12px',
+                    },
+                  }}
+                />
+              ) : (
+                <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
+                  {displayValue(data.lastName)}
+                </Typography>
+              )}
+            </Box>
+
+            <Box>
+              <Typography variant="subtitle2">کد ملی</Typography>
+              {isEditing ? (
+                <TextField
+                  fullWidth
+                  name="nationalCode"
+                  label="کد ملی"
+                  value={data.nationalCode}
+                  onChange={handleChange}
+                  sx={{ width: '230px' }}
+                  inputProps={{
+                    sx: {
+                      height: '12px',
+                    },
+                  }}
+                />
+              ) : (
+                <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
+                  {displayValue(data.nationalCode)}
+                </Typography>
+              )}
+            </Box>
+          </Grid>
+        </Grid>
+      </Box>
+    </div>
+  );
+}