@hed-hog/core 0.0.390 → 0.0.393

package/hedhog/frontend/app/_lib/hooks/use-impersonation-access.test.ts.ejs

@@ -0,0 +1,71 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+import { createElement, type ReactNode } from 'react';
+
+const { appState } = vi.hoisted(() => ({
+  appState: {
+    request: vi.fn(),
+    accessToken: 'token-123',
+    impersonation: null as unknown,
+  },
+}));
+
+vi.mock('@hed-hog/next-app-provider', async () => {
+  const actual =
+    await vi.importActual<typeof import('@tanstack/react-query')>(
+      '@tanstack/react-query'
+    );
+  return {
+    useApp: () => appState,
+    useQuery: actual.useQuery,
+  };
+});
+
+import { useImpersonationAccess } from './use-impersonation-access';
+
+const renderWithRoles = async (slugs: string[]) => {
+  appState.request = vi.fn().mockResolvedValue({
+    data: { roles: slugs.map((slug) => ({ slug })) },
+  });
+
+  // Um client por render: cache compartilhado vazaria papéis de um teste para
+  // o outro.
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  const wrapper = ({ children }: { children: ReactNode }) =>
+    createElement(QueryClientProvider, { client: queryClient }, children);
+
+  const { result } = renderHook(() => useImpersonationAccess(), { wrapper });
+  await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+  return result;
+};
+
+describe('useImpersonationAccess', () => {
+  beforeEach(() => {
+    appState.impersonation = null;
+  });
+
+  it('libera para admin', async () => {
+    const result = await renderWithRoles(['admin']);
+    expect(result.current.canSimulateAccess).toBe(true);
+  });
+
+  it('libera para admin-impersonation', async () => {
+    const result = await renderWithRoles(['admin-impersonation']);
+    expect(result.current.canSimulateAccess).toBe(true);
+  });
+
+  it('nega para admin-user, que administra o cadastro mas não simula acesso', async () => {
+    const result = await renderWithRoles(['admin-user']);
+    expect(result.current.canSimulateAccess).toBe(false);
+  });
+
+  it('nega dentro de uma simulação — não existe simulação aninhada', async () => {
+    appState.impersonation = { target: { id: 1, name: 'Aluna' } };
+    const result = await renderWithRoles(['admin']);
+    expect(result.current.canSimulateAccess).toBe(false);
+  });
+});

package/hedhog/frontend/app/_lib/hooks/use-impersonation-access.ts.ejs

@@ -0,0 +1,32 @@
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+
+type Role = { slug?: string };
+
+/**
+ * Quem pode abrir uma simulação de acesso. Só decide a VISIBILIDADE do botão —
+ * a autorização de verdade é o RoleGuard sobre `POST /impersonation/start`.
+ */
+export function useImpersonationAccess() {
+  const { request, accessToken, impersonation } = useApp();
+
+  const { data, isLoading } = useQuery<{ roles: Role[] }>({
+    queryKey: ['impersonation-roles', accessToken],
+    enabled: !!accessToken,
+    queryFn: async () => {
+      const response = await request<{ roles: Role[] }>({ url: '/auth/roles' });
+      return response.data;
+    },
+  });
+
+  const roleSlugs = (data?.roles ?? []).map((r) => r.slug || '').filter(Boolean);
+
+  return {
+    isLoading,
+    roleSlugs,
+    canSimulateAccess:
+      // Dentro de uma simulação não se abre outra: o backend recusa e o botão
+      // só criaria uma expectativa falsa.
+      !impersonation &&
+      (roleSlugs.includes('admin') || roleSlugs.includes('admin-impersonation')),
+  };
+}

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/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/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/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 },
   ];