more fix and update

apps/frontend/app/data/page.tsx

@@ -13,13 +13,15 @@ import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { AvatarDisplay, AvatarUpload } from '@/components/id/avatar-upload';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
+import { PhoneInput, parseE164Phone, phoneCountries, toE164 } from '@/components/ui/phone-input';
 import { useRequireAuth } from '@/hooks/use-require-auth';
 import {
   getDocumentType,
   indexDocumentsByType,
   type DocumentTypeCode
 } from '@/lib/document-catalog';
-import { apiFetch, getApiErrorMessage, softDeleteProfile, UserDocument } from '@/lib/api';
+import { apiFetch, getApiErrorMessage, softDeleteProfile, UserDocument, UserProfileResponse } from '@/lib/api';
 
 function Row({
   icon: Icon,
@@ -72,6 +74,11 @@ export default function DataPage() {
   const [backupEmail, setBackupEmail] = useState('');
   const [phone, setPhone] = useState('');
   const [backupPhone, setBackupPhone] = useState('');
+  const [birthDate, setBirthDate] = useState<string | undefined>();
+  const [phoneCountry, setPhoneCountry] = useState(phoneCountries[0]);
+  const [phoneDigits, setPhoneDigits] = useState('');
+  const [backupPhoneCountry, setBackupPhoneCountry] = useState(phoneCountries[0]);
+  const [backupPhoneDigits, setBackupPhoneDigits] = useState('');
   const [documents, setDocuments] = useState<UserDocument[]>([]);
   const [isSaving, setIsSaving] = useState(false);
   const [activeDocumentType, setActiveDocumentType] = useState<DocumentTypeCode | null>(null);
@@ -94,10 +101,25 @@ export default function DataPage() {
     setDisplayName(user.displayName);
     setEmail(user.email ?? '');
     setBackupEmail(user.backupEmail ?? '');
-    setPhone(user.phone ?? '');
-    setBackupPhone(user.backupPhone ?? '');
+    const parsedPhone = parseE164Phone(user.phone ?? '');
+    setPhoneCountry(parsedPhone.country);
+    setPhoneDigits(parsedPhone.digits);
+    setPhone(parsedPhone.digits ? toE164(parsedPhone.country, parsedPhone.digits) : '');
+    const parsedBackupPhone = parseE164Phone(user.backupPhone ?? '');
+    setBackupPhoneCountry(parsedBackupPhone.country);
+    setBackupPhoneDigits(parsedBackupPhone.digits);
+    setBackupPhone(parsedBackupPhone.digits ? toE164(parsedBackupPhone.country, parsedBackupPhone.digits) : '');
   }, [user]);
 
+  useEffect(() => {
+    if (!user || !token || isPinLocked) return;
+    void apiFetch<UserProfileResponse>(`/profile/users/${user.id}`, {}, token)
+      .then((profile) => {
+        if (profile.birthDate) setBirthDate(profile.birthDate);
+      })
+      .catch(() => undefined);
+  }, [isPinLocked, token, user]);
+
   useEffect(() => {
     if (isReady && user && !isPinLocked) void loadDocuments();
   }, [isPinLocked, isReady, loadDocuments, user]);
@@ -116,14 +138,20 @@ export default function DataPage() {
     try {
       await apiFetch(`/profile/users/${user.id}`, {
         method: 'PATCH',
-        body: JSON.stringify({ firstName: firstName || undefined, lastName: rest.join(' ') || undefined })
+        body: JSON.stringify({
+          firstName: firstName || undefined,
+          lastName: rest.join(' ') || undefined,
+          birthDate: birthDate || undefined
+        })
       }, token);
 
       const contacts: Record<string, string> = {};
+      const nextPhone = phoneDigits ? toE164(phoneCountry, phoneDigits) : '';
+      const nextBackupPhone = backupPhoneDigits ? toE164(backupPhoneCountry, backupPhoneDigits) : '';
       if (email.trim() && email.trim() !== (user.email ?? '')) contacts.email = email.trim();
-      if (phone.trim() && phone.trim() !== (user.phone ?? '')) contacts.phone = phone.trim();
+      if (nextPhone && nextPhone !== (user.phone ?? '')) contacts.phone = nextPhone;
       if (backupEmail.trim() && backupEmail.trim() !== (user.backupEmail ?? '')) contacts.backupEmail = backupEmail.trim();
-      if (backupPhone.trim() && backupPhone.trim() !== (user.backupPhone ?? '')) contacts.backupPhone = backupPhone.trim();
+      if (nextBackupPhone && nextBackupPhone !== (user.backupPhone ?? '')) contacts.backupPhone = nextBackupPhone;
 
       if (Object.keys(contacts).length > 0) {
         await apiFetch(`/profile/users/${user.id}/contacts`, {
@@ -177,11 +205,31 @@ export default function DataPage() {
         <p className="mt-1 text-sm text-[#667085]">Эти данные помогают быстрее входить в сервисы и восстанавливать доступ.</p>
         <div className="mt-5 grid gap-3 sm:grid-cols-2">
           <Input placeholder="ФИО" value={displayName} onChange={(event) => setDisplayName(event.target.value)} />
-          <Input placeholder="Дата рождения" />
+          <DatePicker value={birthDate} onChange={setBirthDate} />
           <Input placeholder="Основная почта" value={email} onChange={(event) => setEmail(event.target.value)} />
           <Input placeholder="Резервная почта" value={backupEmail} onChange={(event) => setBackupEmail(event.target.value)} />
-          <Input placeholder="Основной телефон" value={phone} onChange={(event) => setPhone(event.target.value)} />
-          <Input placeholder="Резервный телефон" value={backupPhone} onChange={(event) => setBackupPhone(event.target.value)} />
+          <PhoneInput
+            variant="light"
+            country={phoneCountry}
+            value={phoneDigits}
+            onCountryChange={setPhoneCountry}
+            onValueChange={(digits) => {
+              setPhoneDigits(digits);
+              setPhone(digits ? toE164(phoneCountry, digits) : '');
+            }}
+            required={false}
+          />
+          <PhoneInput
+            variant="light"
+            country={backupPhoneCountry}
+            value={backupPhoneDigits}
+            onCountryChange={setBackupPhoneCountry}
+            onValueChange={(digits) => {
+              setBackupPhoneDigits(digits);
+              setBackupPhone(digits ? toE164(backupPhoneCountry, digits) : '');
+            }}
+            required={false}
+          />
         </div>
         <Button className="mt-4" onClick={updateProfile} disabled={isSaving}>
           {isSaving ? 'Сохраняем...' : 'Обновить профиль'}