@hed-hog/core 0.0.387 → 0.0.393

package/hedhog/frontend/app/access-log/page.tsx.ejs

@@ -47,6 +47,7 @@ import {
   Play,
   Terminal,
   Users,
+  VenetianMask,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useMemo, useState } from 'react';
@@ -69,8 +70,16 @@ type AccessLog = {
   os_version: string | null;
   country: string | null;
   city: string | null;
+  /**
+   * Operador por trás de um acesso simulado. `user` continua sendo o ALVO — sem
+   * este campo o registro seria indistinguível de um acesso genuíno dele.
+   */
+  impersonator_user_id: number | null;
+  impersonator: { id: number; name: string; photo_id: number | null } | null;
 };
 
+type SimulatedFilter = 'all' | 'only' | 'exclude';
+
 type PaginationResult<T> = {
   data: T[];
   total: number;
@@ -118,6 +127,7 @@ export default function AccessLogPage() {
   const [searchTerm, setSearchTerm] = useState('');
   const [filterUserId, setFilterUserId] = useState<number | null>(null);
   const [typeFilter, setTypeFilter] = useState<TypeFilter>('all');
+  const [simulatedFilter, setSimulatedFilter] = useState<SimulatedFilter>('all');
   const [createdAtFrom, setCreatedAtFrom] = useState('');
   const [createdAtTo, setCreatedAtTo] = useState('');
   const [viewMode, setViewMode] = useState<ViewMode>('table');
@@ -171,6 +181,7 @@ export default function AccessLogPage() {
       debouncedSearch,
       filterUserId,
       typeFilter,
+      simulatedFilter,
       createdAtFrom,
       createdAtTo,
       page,
@@ -183,6 +194,7 @@ export default function AccessLogPage() {
           search: debouncedSearch || undefined,
           userId: filterUserId || undefined,
           type: typeFilter !== 'all' ? typeFilter : undefined,
+          simulated: simulatedFilter !== 'all' ? simulatedFilter : undefined,
           createdAtFrom: createdAtFrom || undefined,
           createdAtTo: createdAtTo || undefined,
           page,
@@ -200,6 +212,7 @@ export default function AccessLogPage() {
     searchTerm.length > 0 ||
     filterUserId !== null ||
     typeFilter !== 'all' ||
+    simulatedFilter !== 'all' ||
     createdAtFrom.length > 0 ||
     createdAtTo.length > 0;
 
@@ -207,6 +220,7 @@ export default function AccessLogPage() {
     setSearchTerm('');
     setFilterUserId(null);
     setTypeFilter('all');
+    setSimulatedFilter('all');
     setCreatedAtFrom('');
     setCreatedAtTo('');
     setPage(1);
@@ -229,6 +243,21 @@ export default function AccessLogPage() {
           { value: 'mcp', label: t('typeMcp') },
         ],
       },
+      {
+        id: 'simulated',
+        type: 'select',
+        value: simulatedFilter,
+        onChange: (value) => {
+          setSimulatedFilter(value as SimulatedFilter);
+          setPage(1);
+        },
+        placeholder: t('filterBySimulated'),
+        options: [
+          { value: 'all', label: t('simulatedAll') },
+          { value: 'only', label: t('simulatedOnly') },
+          { value: 'exclude', label: t('simulatedExclude') },
+        ],
+      },
       {
         id: 'created-at-from',
         type: 'date',
@@ -250,7 +279,7 @@ export default function AccessLogPage() {
         min: createdAtFrom || undefined,
       },
     ],
-    [createdAtFrom, createdAtTo, typeFilter, t]
+    [createdAtFrom, createdAtTo, typeFilter, simulatedFilter, t]
   );
 
   const kpiCards = useMemo<KpiCardItem[]>(() => {
@@ -320,33 +349,60 @@ export default function AccessLogPage() {
     setIsUserSheetOpen(true);
   };
 
+  /**
+   * Marca de acesso simulado. Fica ao lado do usuário, e não numa coluna
+   * própria, porque o ponto é justamente qualificar de quem é aquele acesso.
+   */
+  const renderSimulatedBadge = (log: AccessLog) => {
+    if (!log.impersonator_user_id) return null;
+
+    const operatorName = log.impersonator?.name || `#${log.impersonator_user_id}`;
+
+    return (
+      <Badge
+        variant="outline"
+        className="shrink-0 border-amber-500/30 bg-amber-500/10 text-amber-700"
+        title={t('simulatedBy', { name: operatorName })}
+      >
+        <VenetianMask className="mr-1 h-3 w-3" />
+        {t('simulated')}
+      </Badge>
+    );
+  };
+
   const renderUserCell = (log: AccessLog) => {
     if (!log.user) {
       return (
-        <span className="text-xs text-muted-foreground">{t('anonymous')}</span>
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground">{t('anonymous')}</span>
+          {renderSimulatedBadge(log)}
+        </div>
       );
     }
     return (
-      <button
-        type="button"
-        className="flex items-center gap-2 hover:opacity-80"
-        onClick={(e) => {
-          e.stopPropagation();
-          handleOpenUser(log.user!.id);
-        }}
-        title={log.user.name}
-      >
-        <Avatar className="h-6 w-6 shrink-0 overflow-hidden rounded-full">
-          <AvatarImage
-            src={getPhotoUrl(log.user.photo_id)}
-            alt={log.user.name}
-          />
-          <AvatarFallback className="flex h-full w-full items-center justify-center bg-muted text-[10px] font-medium">
-            {getUserInitials(log.user.name)}
-          </AvatarFallback>
-        </Avatar>
-        <span className="max-w-30 truncate text-sm">{log.user.name}</span>
-      </button>
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          className="flex items-center gap-2 hover:opacity-80"
+          onClick={(e) => {
+            e.stopPropagation();
+            handleOpenUser(log.user!.id);
+          }}
+          title={log.user.name}
+        >
+          <Avatar className="h-6 w-6 shrink-0 overflow-hidden rounded-full">
+            <AvatarImage
+              src={getPhotoUrl(log.user.photo_id)}
+              alt={log.user.name}
+            />
+            <AvatarFallback className="flex h-full w-full items-center justify-center bg-muted text-[10px] font-medium">
+              {getUserInitials(log.user.name)}
+            </AvatarFallback>
+          </Avatar>
+          <span className="max-w-30 truncate text-sm">{log.user.name}</span>
+        </button>
+        {renderSimulatedBadge(log)}
+      </div>
     );
   };
 
@@ -828,6 +884,24 @@ export default function AccessLogPage() {
                   </div>
                 </div>
 
+                {selectedLog.impersonator_user_id && (
+                  <div>
+                    <h4 className="mb-1 text-sm font-semibold">
+                      {t('simulatedAccess')}
+                    </h4>
+                    <div className="flex items-center gap-2 rounded-md border border-amber-500/30 bg-amber-500/10 p-2 text-sm text-amber-800">
+                      <VenetianMask className="h-4 w-4 shrink-0" />
+                      <span>
+                        {t('simulatedBy', {
+                          name:
+                            selectedLog.impersonator?.name ||
+                            `#${selectedLog.impersonator_user_id}`,
+                        })}
+                      </span>
+                    </div>
+                  </div>
+                )}
+
                 <div className="grid grid-cols-2 gap-4">
                   <div>
                     <h4 className="mb-1 text-sm font-semibold">{t('ip')}</h4>

package/hedhog/frontend/app/account/components/active-sessions.tsx.ejs

@@ -33,7 +33,7 @@ import { formatDate, formatDateTime } from '@/lib/format-date';
 import { parseBrowser, parseDeviceType, parseOS } from '@/lib/session';
 import { UserSession } from '@hed-hog/api-types';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { Calendar, Clock, LogOut, MapPin } from 'lucide-react';
+import { Calendar, Clock, LogOut, MapPin, VenetianMask } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
@@ -294,6 +294,22 @@ function SessionRow({
             <p className="text-xs text-muted-foreground">
               {parseOS(session.user_agent)}
             </p>
+            {/* Esta é a tela de segurança do próprio usuário: é aqui que ele
+                precisa enxergar que alguém entrou na conta dele por simulação
+                de acesso, e quem foi. */}
+            {session.impersonator_user_id && (
+              <Badge
+                variant="outline"
+                className="mt-1 border-amber-500/30 bg-amber-500/10 text-xs text-amber-700"
+              >
+                <VenetianMask className="mr-1 size-3" />
+                {t('simulatedBy', {
+                  name:
+                    session.impersonator?.name ||
+                    `#${session.impersonator_user_id}`,
+                })}
+              </Badge>
+            )}
           </div>
         </div>
       </TableCell>

package/hedhog/frontend/app/account/components/known-devices.tsx.ejs

@@ -0,0 +1,89 @@
+'use client';
+
+import { PaginationFooter } from '@/components/entity-list/pagination-footer';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { usePagination } from '@/hooks/use-pagination';
+import { useApp } from '@hed-hog/next-app-provider';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import {
+  DEVICE_PAGE_SIZES,
+  UserDevice,
+  UserDevicesList,
+} from './user-devices-list';
+
+/**
+ * Dispositivos conhecidos do proprio usuario.
+ *
+ * Irma de ActiveSessions, mas responde outra pergunta: sessao e conexao viva e
+ * expira sozinha; dispositivo e o aparelho que a conta ja reconhece e so sai
+ * daqui se alguem mandar. Esquecer um faz o proximo login vindo dele voltar a
+ * disparar o alerta de dispositivo desconhecido.
+ */
+export function KnownDevices() {
+  const { request } = useApp();
+  const t = useTranslations('core.KnownDevices');
+
+  const {
+    items: devices,
+    refetch,
+    page,
+    setPage,
+    totalItems,
+    pageSize,
+    setPageSize,
+  } = usePagination({
+    url: '/user-device',
+    paginationOptions: { pageSizeOptions: [...DEVICE_PAGE_SIZES] },
+  });
+
+  const handleForget = async (deviceId: number) => {
+    try {
+      await request({ url: `/user-device/${deviceId}`, method: 'DELETE' });
+      await refetch();
+      toast.success(t('forgetSuccess'));
+    } catch {
+      toast.error(t('forgetFailure'));
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader className="pb-4">
+        <CardTitle>{t('title')}</CardTitle>
+        <CardDescription>{t('description')}</CardDescription>
+        {/* Ver a nota equivalente em core/users/user-devices.tsx. */}
+        <CardDescription>{t('simulatedNotRecorded')}</CardDescription>
+      </CardHeader>
+      <CardContent className="px-6 pb-6">
+        <UserDevicesList
+          devices={devices as UserDevice[]}
+          onForget={handleForget}
+          emptyLabel={t('noDevices')}
+          t={t}
+        />
+        {totalItems > pageSize ? (
+          <div className="mt-4">
+            <PaginationFooter
+              currentPage={page}
+              pageSize={pageSize}
+              totalItems={totalItems}
+              onPageChange={setPage}
+              onPageSizeChange={(newSize) => {
+                setPageSize(newSize);
+                setPage(1);
+              }}
+              pageSizeOptions={[...DEVICE_PAGE_SIZES]}
+            />
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}

package/hedhog/frontend/app/account/components/mfa-setup-dialog.tsx.ejs

@@ -17,13 +17,25 @@ import {
 import { Label } from '@/components/ui/label';
 import { UserMfaTypeEnum } from '@hed-hog/api-types/UserMfaTypeEnum';
 import { useApp } from '@hed-hog/next-app-provider';
+import { Copy } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { getMethodName } from '../lib/mfa-utils';
 
+/** Extrai o segredo base32 da URL otpauth:// para digitação manual (quando não dá pra escanear o QR code), formatado em blocos de 4 caracteres. */
+function getTotpManualEntryCode(otpauthUrl?: string): string | null {
+  if (!otpauthUrl) return null;
+  const match = otpauthUrl.match(/[?&]secret=([^&]+)/);
+  if (!match) return null;
+  return decodeURIComponent(match[1]!)
+    .replace(/(.{4})/g, '$1 ')
+    .trim();
+}
+
 interface MfaSetupDialogProps {
   open: boolean;
   selectedMethod: UserMfaTypeEnum | null;
   qrCode: string;
+  otpauthUrl?: string;
   verificationCode: string;
   name: string;
   onNameChange: (name: string) => void;
@@ -42,6 +54,7 @@ export function MfaSetupDialog({
   open,
   selectedMethod,
   qrCode,
+  otpauthUrl,
   verificationCode,
   name,
   onNameChange,
@@ -59,6 +72,7 @@ export function MfaSetupDialog({
   const { getSettingValue } = useApp();
   const pinCodeLength = getSettingValue('mfa-email-code-length') || 6;
   const methodName = getMethodName(String(selectedMethod));
+  const totpManualEntryCode = getTotpManualEntryCode(otpauthUrl);
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -78,6 +92,28 @@ export function MfaSetupDialog({
               <div className="bg-muted p-4 rounded-lg flex justify-center">
                 <img src={qrCode} alt="QR Code" />
               </div>
+              {totpManualEntryCode && (
+                <div className="flex flex-col items-center gap-2 text-center">
+                  <p className="text-xs text-muted-foreground">
+                    {t('manualCodeHint')}
+                  </p>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="font-mono tracking-wider"
+                    title={t('manualCodeCopy')}
+                    onClick={() =>
+                      navigator.clipboard?.writeText(
+                        totpManualEntryCode.replace(/\s+/g, '')
+                      )
+                    }
+                  >
+                    {totpManualEntryCode}
+                    <Copy className="size-3.5" />
+                  </Button>
+                </div>
+              )}
             </div>
           )}
           <div className="space-y-4">

package/hedhog/frontend/app/account/components/profile-form.tsx.ejs

@@ -18,6 +18,7 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { NameInput } from '@/components/ui/name-input';
 import { useFormDraft } from '@/hooks/use-form-draft';
 import { formatDateTime } from '@/lib/format-date';
 import { getPhotoUrl } from '@/lib/get-photo-url';
@@ -263,7 +264,7 @@ export function ProfileForm() {
                 <FormItem>
                   <FormLabel>{t('formNameLabel')}</FormLabel>
                   <FormControl>
-                    <Input placeholder={t('formNamePlaceholder')} {...field} />
+                    <NameInput placeholder={t('formNamePlaceholder')} {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>

package/hedhog/frontend/app/account/components/two-factor-auth.tsx.ejs

@@ -90,6 +90,7 @@ export function TwoFactorAuth() {
   const { mfaMethods, refetchMfaMethods } = useMfaMethods();
   const {
     qrCode,
+    otpauthUrl,
     verifyEmailMFA,
     verifyTOTPMFA,
     removeMfaUnified,
@@ -331,6 +332,7 @@ export function TwoFactorAuth() {
         open={showAddDialog}
         selectedMethod={selectedMethod}
         qrCode={qrCode}
+        otpauthUrl={otpauthUrl}
         verificationCode={verificationCode}
         onOpenChange={setShowAddDialog}
         name={name}

package/hedhog/frontend/app/account/components/user-devices-list.tsx.ejs

@@ -0,0 +1,186 @@
+'use client';
+
+import { BrowserIcon, OsIcon } from '@/components/browser-os-icon';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { formatDateTime } from '@/lib/format-date';
+import { parseDeviceType } from '@/lib/session';
+import { useApp } from '@hed-hog/next-app-provider';
+import { Calendar, Clock, MapPin, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+
+/**
+ * Precisa ir tanto para o `usePagination` quanto para o `PaginationFooter`: o
+ * hook usa `pageSizeOptions[0]` como tamanho inicial e o rodape tem uma lista
+ * propria por padrao. Passando so para um, o seletor mostra um numero e a
+ * tabela renderiza outro.
+ */
+export const DEVICE_PAGE_SIZES = [10, 25, 50, 100] as const;
+
+/**
+ * Um dispositivo conhecido. A `device_key` nao vem da API de proposito: e
+ * derivada do browser_id, entao expo-la entregaria o valor que identifica o
+ * dispositivo nas requisicoes.
+ */
+export type UserDevice = {
+  id: number;
+  browser_name: string | null;
+  os_name: string | null;
+  user_agent: string | null;
+  last_ip: string | null;
+  last_seen_at: string;
+  created_at: string;
+};
+
+type Props = {
+  devices: UserDevice[];
+  /** Ausente deixa a lista somente leitura (sem coluna de acao). */
+  onForget?: (deviceId: number) => Promise<void> | void;
+  emptyLabel: string;
+  t: (key: string) => string;
+};
+
+/**
+ * Lista de dispositivos, compartilhada entre a aba de Conta (o proprio usuario)
+ * e o sheet de usuarios do admin. So apresentacao: quem busca os dados e quem
+ * remove fica com quem usa, porque as duas telas leem de origens diferentes —
+ * a Conta chama /user-device, o sheet recebe embutido no detalhe do usuario.
+ */
+export function UserDevicesList({ devices, onForget, emptyLabel, t }: Props) {
+  const { currentLocaleCode, getSettingValue } = useApp();
+  const [deviceToForget, setDeviceToForget] = useState<number | null>(null);
+
+  if (!devices.length) {
+    return (
+      <div className="rounded-md border py-8 text-center text-sm text-muted-foreground">
+        {emptyLabel}
+      </div>
+    );
+  }
+
+  const stamp = (value: string) =>
+    formatDateTime(String(value), getSettingValue, currentLocaleCode);
+
+  return (
+    <>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t('device')}</TableHead>
+              <TableHead>{t('browser')}</TableHead>
+              <TableHead>{t('lastIp')}</TableHead>
+              <TableHead>{t('lastSeen')}</TableHead>
+              <TableHead>{t('firstSeen')}</TableHead>
+              {onForget ? (
+                <TableHead className="text-right">{t('action')}</TableHead>
+              ) : null}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {devices.map((device) => (
+              <TableRow key={device.id}>
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <OsIcon name={device.os_name} size={16} />
+                    <div>
+                      <p className="font-medium capitalize">
+                        {parseDeviceType(device.user_agent ?? '')}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {device.os_name || t('unknown')}
+                      </p>
+                    </div>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <BrowserIcon name={device.browser_name} size={16} />
+                    <span>{device.browser_name || t('unknown')}</span>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <MapPin className="size-4 text-muted-foreground" />
+                    <span className="text-sm">
+                      {device.last_ip === '::1'
+                        ? '127.0.0.1'
+                        : device.last_ip || '—'}
+                    </span>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <Clock className="size-4 text-muted-foreground" />
+                    <span className="text-sm">{stamp(device.last_seen_at)}</span>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <Calendar className="size-4 text-muted-foreground" />
+                    <span className="text-sm">{stamp(device.created_at)}</span>
+                  </div>
+                </TableCell>
+                {onForget ? (
+                  <TableCell className="text-right">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="cursor-pointer"
+                      onClick={() => setDeviceToForget(device.id)}
+                    >
+                      <Trash2 className="mr-2 size-4" />
+                      {t('forget')}
+                    </Button>
+                  </TableCell>
+                ) : null}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <AlertDialog
+        open={deviceToForget !== null}
+        onOpenChange={(open) => !open && setDeviceToForget(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('forgetTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('forgetDescription')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={async () => {
+                if (deviceToForget !== null) await onForget?.(deviceToForget);
+                setDeviceToForget(null);
+              }}
+            >
+              {t('forget')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/hedhog/frontend/app/account/devices/page.tsx.ejs

@@ -0,0 +1,5 @@
+import { KnownDevices } from '../components/known-devices';
+
+export default function DevicesPage() {
+  return <KnownDevices />;
+}

package/hedhog/frontend/app/account/hooks/use-mfa-setup.ts.ejs

@@ -9,6 +9,7 @@ export function useMfaSetup() {
   const [secret, setSecret] = useState('');
   const [codeHash, setCodeHash] = useState('');
   const [qrCode, setQrCode] = useState('');
+  const [otpauthUrl, setOtpauthUrl] = useState('');
   const [challengeId, setChallengeId] = useState<number | null>(null);
   const [resendLoading, setResendLoading] = useState(false);
   const [resendCooldown, setResendCooldown] = useState(0);
@@ -97,6 +98,7 @@ export function useMfaSetup() {
 
       setSecret(data.secret);
       setQrCode(data.qrCode);
+      setOtpauthUrl(data.otpauthUrl ?? '');
       showToastHandler('success', t('scanQrCode'));
     } catch (error) {
       console.error(error);
@@ -215,17 +217,17 @@ export function useMfaSetup() {
       const assertion = await startAuthentication({
         optionsJSON: optionsResponse.data,
       });
-      await request({
-        url: '/profile/webauthn/authenticate/verify',
-        method: 'POST',
-        data: {
-          assertionResponse: assertion,
-        },
-      });
 
+      // A asserção é verificada pelo próprio endpoint de remoção (o backend
+      // exige e confere `assertionResponse` antes de excluir a chave). Não
+      // chamar /authenticate/verify antes: o desafio só pode ser verificado
+      // uma vez, e chamá-lo aqui o consumiria antes da remoção poder usá-lo.
       await request({
         url: `/profile/webauthn/${methodId}/remove`,
         method: 'DELETE',
+        data: {
+          assertionResponse: assertion,
+        },
       });
       showToastHandler('success', t('securityKeyRemovedSuccess'));
     } catch (error: any) {
@@ -443,6 +445,7 @@ export function useMfaSetup() {
 
   return {
     qrCode,
+    otpauthUrl,
     userEmail,
     verifyEmailMFA,
     verifyTOTPMFA,

package/hedhog/frontend/app/account/layout.tsx.ejs

@@ -8,6 +8,7 @@ import {
   Lock,
   LucideIcon,
   Mail,
+  MonitorSmartphone,
   Shield,
   Smartphone,
   User,
@@ -38,6 +39,7 @@ export default function AccountLayout({ children }: LayoutProps) {
     { value: '2fa', label: t('tab2fa'), icon: Shield },
     { value: 'accounts', label: t('tabAccounts'), icon: LinkIcon },
     { value: 'sessions', label: t('tabSessions'), icon: Smartphone },
+    { value: 'devices', label: t('tabDevices'), icon: MonitorSmartphone },
     { value: 'tokens', label: t('tabTokens'), icon: KeyRound },
   ];