fix and update

2026-06-25 16:01:41 +03:00
parent ce58e6f4c1
commit 3880c68d59
40 changed files with 1715 additions and 215 deletions
--- a/apps/frontend/app/admin/users/page.tsx
+++ b/apps/frontend/app/admin/users/page.tsx
@@ -2,7 +2,8 @@

 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { Ban, Crown, FileText, KeyRound, Loader2, Search, ShieldPlus, UserCheck, UserCog } from 'lucide-react';
+import { Ban, BadgeCheck, Crown, FileText, KeyRound, Loader2, Search, ShieldPlus, UserCheck, UserCog } from 'lucide-react';
+import { VerificationBadge } from '@/components/id/verification-badge';
 import { UserDocumentsDialog } from '@/components/documents/user-documents-dialog';
 import { AdminShell } from '@/components/id/admin-shell';
 import { useAuth } from '@/components/id/auth-provider';
@@ -13,6 +14,7 @@ import { Input } from '@/components/ui/input';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { AdminPermission, AdminRole, AdminUser, apiFetch } from '@/lib/api';
 import { getAdminLandingPath } from '@/lib/admin-access';
+import { DEFAULT_VERIFICATION_ICON, VERIFICATION_ICON_OPTIONS } from '@/lib/verification-icons';

 const statusLabels: Record<string, string> = {
  ACTIVE: 'Активен',
@@ -42,8 +44,9 @@ export default function AdminUsersPage() {
  const [selectedUser, setSelectedUser] = useState<AdminUser | null>(null);
  const [password, setPassword] = useState('');
  const [actionLoading, setActionLoading] = useState(false);
-  const [dialog, setDialog] = useState<'password' | 'roles' | null>(null);
+  const [dialog, setDialog] = useState<'password' | 'roles' | 'verification' | null>(null);
  const [documentsUser, setDocumentsUser] = useState<AdminUser | null>(null);
+  const [verificationIcon, setVerificationIcon] = useState(DEFAULT_VERIFICATION_ICON);

  const loadUsers = useCallback(async () => {
    if (!token) return;
@@ -224,6 +227,53 @@ export default function AdminUsersPage() {
    }
  }

+  async function handleSaveVerification() {
+    if (!token || !selectedUser) return;
+    setActionLoading(true);
+    try {
+      const updated = await apiFetch<AdminUser>(`/admin/users/${selectedUser.id}/verification`, {
+        method: 'PATCH',
+        body: JSON.stringify({
+          isVerified: true,
+          verificationIcon
+        })
+      }, token);
+      showToast('Пользователь верифицирован');
+      setSelectedUser(updated);
+      setDialog(null);
+      await loadUsers();
+    } catch (error) {
+      showToast(error instanceof Error ? error.message : 'Не удалось верифицировать пользователя');
+    } finally {
+      setActionLoading(false);
+    }
+  }
+
+  async function handleRemoveVerification() {
+    if (!token || !selectedUser) return;
+    setActionLoading(true);
+    try {
+      await apiFetch<AdminUser>(`/admin/users/${selectedUser.id}/verification`, {
+        method: 'PATCH',
+        body: JSON.stringify({ isVerified: false })
+      }, token);
+      showToast('Верификация снята');
+      setSelectedUser({ ...selectedUser, isVerified: false, verificationIcon: undefined });
+      setDialog(null);
+      await loadUsers();
+    } catch (error) {
+      showToast(error instanceof Error ? error.message : 'Не удалось снять верификацию');
+    } finally {
+      setActionLoading(false);
+    }
+  }
+
+  function openVerificationDialog(user: AdminUser) {
+    setSelectedUser(user);
+    setVerificationIcon(user.verificationIcon ?? DEFAULT_VERIFICATION_ICON);
+    setDialog('verification');
+  }
+
  function renderRoles(user: AdminUser) {
    const userRoles = user.roles ?? [];
    const extraRoles = userRoles.filter((role) => role !== DEFAULT_USER_ROLE);
@@ -271,7 +321,10 @@ export default function AdminUsersPage() {
              {users.map((user) => (
                <TableRow key={user.id}>
                  <TableCell>
-                    <div className="font-medium">{user.displayName}</div>
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium">{user.displayName}</span>
+                      {user.isVerified ? <VerificationBadge verificationIcon={user.verificationIcon} size="xs" /> : null}
+                    </div>
                    <div className="text-sm text-[#667085]">{user.email ?? user.username ?? '—'}</div>
                  </TableCell>
                  <TableCell>{user.phone ?? '—'}</TableCell>
@@ -315,6 +368,17 @@ export default function AdminUsersPage() {
                          <FileText className="h-4 w-4" />
                        </Button>
                      ) : null}
+                      {currentUser?.canVerifyUsers ? (
+                        <Button
+                          variant={user.isVerified ? 'default' : 'secondary'}
+                          size="icon"
+                          aria-label="Верификация"
+                          disabled={actionLoading}
+                          onClick={() => openVerificationDialog(user)}
+                        >
+                          <BadgeCheck className="h-4 w-4" />
+                        </Button>
+                      ) : null}
                      {currentUser?.canManageRoles ? (
                        <>
                          <Button
@@ -432,6 +496,49 @@ export default function AdminUsersPage() {
        </DialogContent>
      </Dialog>

+      <Dialog open={dialog === 'verification'} onOpenChange={(open) => !open && setDialog(null)}>
+        <DialogContent className="max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Верификация пользователя</DialogTitle>
+          </DialogHeader>
+          <p className="mb-4 text-sm text-[#667085]">{selectedUser?.displayName}</p>
+          {selectedUser?.isVerified ? (
+            <div className="mb-4 flex items-center gap-2 rounded-xl bg-[#eef4ff] px-3 py-2 text-sm">
+              <VerificationBadge verificationIcon={selectedUser.verificationIcon} size="sm" />
+              <span>Пользователь уже верифицирован</span>
+            </div>
+          ) : null}
+          <div className="space-y-3">
+            <p className="text-sm font-medium">Выберите значок</p>
+            <div className="grid grid-cols-5 gap-2">
+              {VERIFICATION_ICON_OPTIONS.map((option) => (
+                <button
+                  key={option.slug}
+                  type="button"
+                  className={`flex flex-col items-center gap-1 rounded-xl border px-2 py-3 text-xs transition ${
+                    verificationIcon === option.slug ? 'border-[#3390ec] bg-[#eef4ff]' : 'border-[#eceef4] bg-[#fafbfd] hover:bg-[#f4f5f8]'
+                  }`}
+                  onClick={() => setVerificationIcon(option.slug)}
+                >
+                  <option.Icon className="h-5 w-5 text-[#3390ec]" />
+                  <span className="text-center leading-tight">{option.name}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="mt-4 flex flex-col gap-2">
+            <Button className="w-full" disabled={actionLoading} onClick={() => void handleSaveVerification()}>
+              {actionLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : selectedUser?.isVerified ? 'Обновить значок' : 'Верифицировать'}
+            </Button>
+            {selectedUser?.isVerified ? (
+              <Button variant="secondary" className="w-full text-red-600" disabled={actionLoading} onClick={() => void handleRemoveVerification()}>
+                Снять верификацию
+              </Button>
+            ) : null}
+          </div>
+        </DialogContent>
+      </Dialog>
+
      {documentsUser ? (
        <UserDocumentsDialog
          open={Boolean(documentsUser)}
--- a/apps/frontend/app/data/page.tsx
+++ b/apps/frontend/app/data/page.tsx
@@ -235,7 +235,17 @@ export default function DataPage() {
    <IdShell active="/data">
      <div className="mb-8 flex items-center gap-4 rounded-[24px] border border-[#20212b] p-4">
        {user ? (
-          <AvatarUpload userId={user.id} displayName={user.displayName} hasAvatar={user.hasAvatar} token={token} onUpdated={refreshProfile} />
+          <AvatarUpload
+            userId={user.id}
+            displayName={user.displayName}
+            hasAvatar={user.hasAvatar}
+            token={token}
+            isVerified={user.isVerified}
+            verificationIcon={user.verificationIcon}
+            className="h-14 w-14"
+            badgeSize="sm"
+            onUpdated={refreshProfile}
+          />
        ) : (
          <AvatarDisplay userId="" displayName="" hasAvatar={false} token={null} className="h-14 w-14" />
        )}
--- a/apps/frontend/app/family/[groupId]/page.tsx
+++ b/apps/frontend/app/family/[groupId]/page.tsx
@@ -1,11 +1,18 @@
 'use client';

-import { use } from 'react';
-import { IdShell } from '@/components/id/shell';
+import { use, useEffect } from 'react';
 import { FamilyGroupView } from '@/components/family/family-group-view';
+import { useFamilyOverlay } from '@/components/family/family-overlay-provider';
+import { IdShell } from '@/components/id/shell';

 export default function FamilyGroupPage({ params }: { params: Promise<{ groupId: string }> }) {
  const { groupId } = use(params);
+  const { setSelectedGroupId } = useFamilyOverlay();
+
+  useEffect(() => {
+    setSelectedGroupId(groupId);
+  }, [groupId, setSelectedGroupId]);
+
  return (
    <IdShell active="/family" wide>
      <FamilyGroupView groupId={groupId} />
--- a/apps/frontend/app/family/page.tsx
+++ b/apps/frontend/app/family/page.tsx
@@ -10,6 +10,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { useRequireAuth } from '@/hooks/use-require-auth';
 import { apiFetch, FamilyGroup, fetchFamilyGroups, getApiErrorMessage } from '@/lib/api';
+import { defaultFamilyGroupName } from '@/lib/family-defaults';

 export default function FamilyPage() {
  const router = useRouter();
@@ -17,9 +18,15 @@ export default function FamilyPage() {
  const { isReady, isPinLocked } = useRequireAuth();
  const { showToast } = useToast();
  const [groups, setGroups] = useState<FamilyGroup[]>([]);
-  const [name, setName] = useState('Моя семья');
+  const [name, setName] = useState('');
  const [creating, setCreating] = useState(false);

+  useEffect(() => {
+    if (user?.displayName) {
+      setName(defaultFamilyGroupName(user.displayName));
+    }
+  }, [user?.displayName]);
+
  useEffect(() => {
    if (!user || !token || isPinLocked) return;
    fetchFamilyGroups(user.id, token)
@@ -63,7 +70,7 @@ export default function FamilyPage() {

      <div className="mt-8 flex gap-3">
        <Input value={name} onChange={(event) => setName(event.target.value)} placeholder="Название семьи" />
-        <Button onClick={() => void createGroup()} disabled={creating}>
+        <Button onClick={() => void createGroup()} disabled={creating || !name.trim()}>
          {creating ? 'Создаём...' : (<><Plus className="h-4 w-4" />Создать</>)}
        </Button>
      </div>
--- a/apps/frontend/app/page.tsx
+++ b/apps/frontend/app/page.tsx
@@ -7,7 +7,7 @@ import { AddressQuickSection } from '@/components/addresses/address-quick-sectio
 import { DocumentFormDialog } from '@/components/documents/document-form-dialog';
 import { ActionTile, SectionTitle } from '@/components/id/action-tile';
 import { AdminBadge } from '@/components/id/admin-badge';
-import { AvatarUpload } from '@/components/id/avatar-upload';
+import { AvatarDisplay } from '@/components/id/avatar-upload';
 import { useAuth } from '@/components/id/auth-provider';
 import { IdShell } from '@/components/id/shell';
 import { Button } from '@/components/ui/button';
@@ -17,7 +17,7 @@ import { apiFetch, UserDocument } from '@/lib/api';

 export default function HomePage() {
  const router = useRouter();
-  const { user, token, refreshProfile, isPinLocked } = useAuth();
+  const { user, token, isPinLocked } = useAuth();
  const { isReady } = useRequireAuth();
  const contactLine = [user?.phone, user?.username ?? user?.email].filter(Boolean).join(' · ');
  const [documents, setDocuments] = useState<UserDocument[]>([]);
@@ -55,12 +55,15 @@ export default function HomePage() {
    <IdShell active="/" wide>
      <div className="flex flex-col items-center">
        {user ? (
-          <AvatarUpload
+          <AvatarDisplay
            userId={user.id}
            displayName={user.displayName}
            hasAvatar={user.hasAvatar}
            token={token}
-            onUpdated={refreshProfile}
+            isVerified={user.isVerified}
+            verificationIcon={user.verificationIcon}
+            className="h-24 w-24 border-4 border-white shadow-xl"
+            badgeSize="md"
          />
        ) : (
          <div className="h-24 w-24 rounded-full bg-[#f4f5f8]" />