fix/styles

src/App.tsx

@@ -9,6 +9,7 @@ import {
 import './App.css';
 import { useTranslation } from 'react-i18next';
 import { LanguageManager } from './components/LanguageManager';
+import { UserCompletionForm } from './features/authentication/components/UserCompletionForm';
 
 function App() {
   const { t } = useTranslation();
@@ -18,6 +19,7 @@ function App() {
     <>
       <CssBaseline />
       <LanguageManager />
+      <UserCompletionForm />
       <div style={{ padding: '16px' }}>
         <Typography variant="h3">{t('helloWorld')}</Typography>
         <Box

src/features/authentication/components/UserCompletionForm.tsx

@@ -180,6 +180,7 @@ export function UserCompletionForm() {
               checked={showPassword}
               onChange={handleTogglePassword}
               sx={{
+                color: '#2979FF',
                 transform: 'scaleX(-1)',
                 '& .MuiSwitch-thumb': {
                   transform: 'scaleX(-1)',
@@ -299,7 +300,7 @@ export function UserCompletionForm() {
               <Button
                 variant="text"
                 onClick={onClickCodeSent}
-                sx={{ width: '200px' }}
+                sx={{ width: '200px', color: '#2979FF' }}
                 disabled={buttonState === 'sent' || buttonState === 'counting'}
               >
                 {getButtonLabel()}
@@ -343,7 +344,10 @@ export function UserCompletionForm() {
             </Link>{' '}
             می باشد.
           </Typography>
-          <Button variant="contained" sx={{ width: '250px', height: '40px' }}>
+          <Button
+            variant="contained"
+            sx={{ width: '250px', height: '40px', backgroundColor: '#2979FF' }}
+          >
             تایید و ثبت نام
           </Button>
         </Box>

src/features/profile/components/PersonalInformation.tsx

@@ -0,0 +1,230 @@
+import {
+  Box,
+  Typography,
+  Button,
+  TextField,
+  FormControl,
+  Select,
+  MenuItem,
+  type SelectChangeEvent,
+} from '@mui/material';
+import { useState, type ChangeEvent } from 'react';
+import { CardContainer } from '@/components/CardContainer';
+
+export function PersonalInformation() {
+  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);
+    if (isEditing) {
+      setData((prev) => ({
+        ...prev,
+        gender: gender === 'male' ? 'مرد' : gender === 'female' ? 'زن' : '',
+      }));
+    } else {
+      setGender(
+        data.gender === 'مرد' ? 'male' : data.gender === 'زن' ? 'female' : '',
+      );
+    }
+  };
+
+  const handleChangeGender = (e: SelectChangeEvent) => {
+    setGender(e.target.value);
+  };
+
+  const displayValue = (value: string | null | undefined) => {
+    return value && value.trim() !== '' ? value : 'تعیین نشده';
+  };
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        backgroundColor: '#F5F5F5',
+        justifyContent: 'center',
+        alignItems: 'center',
+        p: 2,
+        overflow: 'hidden',
+      }}
+    >
+      <CardContainer
+        title="اطلاعات شخصی من"
+        subtitle="این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی می‌ماند"
+        highlighted={isEditing}
+        action={
+          <Box sx={{ display: 'flex', gap: 1 }}>
+            {isEditing && (
+              <Button
+                variant="text"
+                onClick={() => setIsEditing(false)}
+                size="large"
+                sx={{
+                  color: '#2979FF',
+                  width: '43px',
+                }}
+              >
+                لغو
+              </Button>
+            )}
+            <Button
+              onClick={toggleEdit}
+              size="large"
+              sx={{
+                border: '1px solid',
+                borderColor: '#2979FF',
+                borderRadius: '4px',
+                backgroundColor: isEditing ? '#2979FF' : 'white',
+                color: isEditing ? 'white' : '#2979FF',
+                px: '22px',
+                py: '8px',
+                width: isEditing ? '85px' : '93px',
+              }}
+            >
+              {isEditing ? 'ذخیره' : 'ویرایش'}
+            </Button>
+          </Box>
+        }
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 4,
+            p: 2,
+          }}
+        >
+          <Box sx={{ width: 'calc(50% - 16px)' }}>
+            {isEditing ? (
+              <TextField
+                fullWidth
+                name="firstName"
+                value={data.firstName}
+                onChange={handleChange}
+                label="نام"
+              />
+            ) : (
+              <Box
+                sx={{
+                  height: '48px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  px: 4,
+                }}
+              >
+                <Typography variant="caption" color="text.secondary">
+                  نام
+                </Typography>
+                <Typography variant="body1" color="text.primary">
+                  {displayValue(data.firstName)}
+                </Typography>
+              </Box>
+            )}
+          </Box>
+
+          <Box sx={{ width: 'calc(50% - 16px)' }}>
+            {isEditing ? (
+              <TextField
+                fullWidth
+                name="lastName"
+                value={data.lastName}
+                onChange={handleChange}
+                label="نام خانوادگی"
+              />
+            ) : (
+              <Box
+                sx={{
+                  height: '48px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                }}
+              >
+                <Typography variant="caption" color="text.secondary">
+                  نام خانوادگی
+                </Typography>
+                <Typography variant="body1" color="text.primary">
+                  {displayValue(data.lastName)}
+                </Typography>
+              </Box>
+            )}
+          </Box>
+
+          <Box sx={{ width: 'calc(50% - 16px)' }}>
+            {isEditing ? (
+              <FormControl fullWidth>
+                <Select
+                  value={gender}
+                  onChange={handleChangeGender}
+                  displayEmpty
+                >
+                  <MenuItem value="female">زن</MenuItem>
+                  <MenuItem value="male">مرد</MenuItem>
+                </Select>
+              </FormControl>
+            ) : (
+              <Box
+                sx={{
+                  height: '48px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  px: 4,
+                }}
+              >
+                <Typography variant="caption" color="text.secondary">
+                  جنسیت
+                </Typography>
+                <Typography variant="body1" color="text.primary">
+                  {displayValue(data.gender)}
+                </Typography>
+              </Box>
+            )}
+          </Box>
+
+          <Box sx={{ width: 'calc(50% - 16px)' }}>
+            {isEditing ? (
+              <TextField
+                fullWidth
+                name="nationalCode"
+                value={data.nationalCode}
+                onChange={handleChange}
+                label="کد ملی"
+              />
+            ) : (
+              <Box
+                sx={{
+                  height: '48px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                }}
+              >
+                <Typography variant="caption" color="text.secondary">
+                  کد ملی
+                </Typography>
+                <Typography variant="body1" color="text.primary">
+                  {displayValue(data.nationalCode)}
+                </Typography>
+              </Box>
+            )}
+          </Box>
+        </Box>
+      </CardContainer>
+    </Box>
+  );
+}