@hed-hog/core 0.0.387 → 0.0.393

package/hedhog/frontend/app/users/page.tsx.ejs

@@ -34,6 +34,9 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { formatDateTime } from '@/lib/format-date';
+import { PresenceDot } from '@/components/presence/presence-dot';
+import { usePresence } from '@/components/presence/use-presence';
 import { getPhotoUrl } from '@/lib/get-photo-url';
 import { getUserEmail } from '@/lib/get-user-email';
 import { PaginatedResult } from '@/types/pagination-result';
@@ -45,7 +48,10 @@ import {
   getCoreRowModel,
   useReactTable,
 } from '@tanstack/react-table';
+import { formatDistanceToNow } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
 import {
+  KeyRound,
   LayoutGrid,
   List,
   Mail,
@@ -53,9 +59,12 @@ import {
   ShieldCheck,
   UserPlus,
   Users,
+  VenetianMask,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useImpersonationAccess } from '../_lib/hooks/use-impersonation-access';
+import { SimulateAccessDialog } from './simulate-access-dialog';
 import { UserSheet } from './user-sheet';
 
 const USER_VIEW_STORAGE_KEY = 'core-user-view-mode';
@@ -74,12 +83,15 @@ const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 
 export default function UserPage() {
   const t = useTranslations('core.UserPage');
-  const { request, currentLocaleCode } = useApp();
+  const simulationT = useTranslations('core.AccessSimulation');
+  const { request, currentLocaleCode, getSettingValue, user: appUser } = useApp();
 
   const [searchQuery, setSearchQuery] = useState('');
   const [isSheetOpen, setIsSheetOpen] = useState(false);
   const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
   const [viewMode, setViewMode] = useState<UserViewMode>('table');
+  const [simulateTarget, setSimulateTarget] = useState<User | null>(null);
+  const { canSimulateAccess } = useImpersonationAccess();
 
   const [page, setPage] = useState(1);
   const { data: generalSettings } = useQuery<{
@@ -223,6 +235,50 @@ export default function UserPage() {
     [stats, t]
   );
 
+  const getLastLoginLabel = useCallback(
+    (user: User) => {
+      if (!user.last_login_at) return null;
+
+      const lastLoginDate = new Date(user.last_login_at);
+      if (Number.isNaN(lastLoginDate.getTime())) return null;
+
+      const locale = currentLocaleCode.startsWith('pt') ? ptBR : enUS;
+
+      return {
+        relativeLabel: formatDistanceToNow(lastLoginDate, {
+          addSuffix: true,
+          locale,
+        }),
+        absoluteLabel: formatDateTime(
+          lastLoginDate,
+          getSettingValue,
+          currentLocaleCode
+        ),
+      };
+    },
+    [currentLocaleCode, getSettingValue]
+  );
+
+  /**
+   * Esconde o botão nos dois casos que o backend recusaria de qualquer forma e
+   * que dá para saber daqui: o próprio usuário e conta desativada. Alvo com
+   * papel `admin` NÃO é filtrado aqui — o payload da listagem não traz papéis —,
+   * então essa recusa fica com o `POST /impersonation/start`.
+   */
+  const canSimulate = useCallback(
+    (user: User) =>
+      Number(user.id) !== Number((appUser as { id?: number } | null)?.id) &&
+      !(user as { deactivated_at?: string | null }).deactivated_at,
+    [appUser]
+  );
+
+  const pageUserIds = useMemo(
+    () =>
+      ((paginate as PaginatedResult<User>)?.data ?? []).map((u) => Number(u.id)),
+    [paginate]
+  );
+  const presenceMap = usePresence(pageUserIds);
+
   const columns = useMemo<ColumnDef<User>[]>(
     () => [
       {
@@ -232,16 +288,21 @@ export default function UserPage() {
           const user = row.original;
           return (
             <div className="flex items-center gap-3">
-              <Avatar className="h-8 w-8 rounded-full">
-                <AvatarImage
-                  src={getPhotoUrl(user.photo_id)}
-                  alt={user.name}
-                  className="rounded-full object-cover"
-                />
-                <AvatarFallback className="rounded-full bg-muted text-xs font-semibold uppercase">
-                  {(user.name ?? '?').slice(0, 2).toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
+              <div className="relative">
+                <Avatar className="h-8 w-8 rounded-full">
+                  <AvatarImage
+                    src={getPhotoUrl(user.photo_id)}
+                    alt={user.name}
+                    className="rounded-full object-cover"
+                  />
+                  <AvatarFallback className="rounded-full bg-muted text-xs font-semibold uppercase">
+                    {(user.name ?? '?').slice(0, 2).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <span className="absolute -bottom-0.5 -right-0.5">
+                  <PresenceDot status={presenceMap[Number(user.id)]} />
+                </span>
+              </div>
               <span className="font-medium">{user.name || '—'}</span>
             </div>
           );
@@ -278,11 +339,70 @@ export default function UserPage() {
           );
         },
       },
+      {
+        id: 'passwordReset',
+        header: t('columnPasswordReset'),
+        cell: ({ row }) =>
+          row.original.requires_password_reset ? (
+            <Badge
+              variant="outline"
+              className="border-amber-500/20 bg-amber-500/10 text-amber-600"
+            >
+              <KeyRound className="mr-1 h-3 w-3" />
+              {t('passwordResetPending')}
+            </Badge>
+          ) : (
+            <span className="text-sm text-muted-foreground">
+              {t('passwordResetNone')}
+            </span>
+          ),
+      },
+      {
+        id: 'lastLogin',
+        header: t('columnLastLogin'),
+        cell: ({ row }) => {
+          const lastLogin = getLastLoginLabel(row.original);
+
+          if (!lastLogin) {
+            return (
+              <span className="text-sm text-muted-foreground">
+                {t('neverLoggedIn')}
+              </span>
+            );
+          }
+
+          return (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="text-sm text-muted-foreground">
+                  {lastLogin.relativeLabel}
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>{lastLogin.absoluteLabel}</TooltipContent>
+            </Tooltip>
+          );
+        },
+      },
       {
         id: 'actions',
         header: '',
         cell: ({ row }) => (
-          <div className="flex justify-end">
+          <div className="flex justify-end gap-1">
+            {canSimulateAccess && canSimulate(row.original) && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 text-amber-600 hover:text-amber-700"
+                    onClick={() => setSimulateTarget(row.original)}
+                  >
+                    <VenetianMask className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>{simulationT('action')}</TooltipContent>
+              </Tooltip>
+            )}
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
@@ -300,7 +420,7 @@ export default function UserPage() {
         ),
       },
     ],
-    [t]
+    [t, simulationT, getLastLoginLabel, presenceMap, canSimulateAccess, canSimulate]
   );
 
   const tableData = useMemo(
@@ -354,6 +474,10 @@ export default function UserPage() {
                 { label: t('filterOptionAll'), value: 'all' },
                 { label: t('filterOptionNew'), value: 'new' },
                 { label: t('filterOptionBlocked'), value: 'blocked' },
+                {
+                  label: t('filterOptionPasswordReset'),
+                  value: 'password-reset',
+                },
               ],
             }}
           />
@@ -496,13 +620,30 @@ export default function UserPage() {
                       </div>
                     </div>
                     <div className="flex flex-col items-end gap-2">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => handleOpenEdit(user)}
-                      >
-                        {t('buttonEditUser')}
-                      </Button>
+                      <div className="flex items-center gap-1">
+                        {canSimulateAccess && canSimulate(user) && (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="outline"
+                                size="icon"
+                                className="h-8 w-8 text-amber-600 hover:text-amber-700"
+                                onClick={() => setSimulateTarget(user)}
+                              >
+                                <VenetianMask className="h-4 w-4" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>{simulationT('action')}</TooltipContent>
+                          </Tooltip>
+                        )}
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleOpenEdit(user)}
+                        >
+                          {t('buttonEditUser')}
+                        </Button>
+                      </div>
                       <div className="mt-1">
                         {user.suspended_until ? (
                           <Badge
@@ -522,6 +663,15 @@ export default function UserPage() {
                           </Badge>
                         )}
                       </div>
+                      {user.requires_password_reset && (
+                        <Badge
+                          variant="outline"
+                          className="border-amber-500/20 bg-amber-500/10 text-amber-600"
+                        >
+                          <KeyRound className="mr-1 h-3 w-3" />
+                          {t('passwordResetPending')}
+                        </Badge>
+                      )}
                     </div>
                   </CardHeader>
 
@@ -594,6 +744,13 @@ export default function UserPage() {
                         </span>
                       )}
                     </div>
+                    <div className="text-xs text-muted-foreground">
+                      <span className="font-medium text-foreground">
+                        {t('columnLastLogin')}:
+                      </span>{' '}
+                      {getLastLoginLabel(user)?.relativeLabel ??
+                        t('neverLoggedIn')}
+                    </div>
                     {user.suspended_reason && (
                       <div className="text-xs text-muted-foreground">
                         <span className="font-medium text-foreground">
@@ -639,6 +796,14 @@ export default function UserPage() {
           userId={selectedUserId}
           onSuccess={refetch}
         />
+
+        <SimulateAccessDialog
+          open={Boolean(simulateTarget)}
+          onOpenChange={(open) => {
+            if (!open) setSimulateTarget(null);
+          }}
+          user={simulateTarget}
+        />
       </div>
     </Page>
   );

package/hedhog/frontend/app/users/simulate-access-dialog.test.tsx.ejs

@@ -0,0 +1,202 @@
+import '@testing-library/jest-dom/vitest';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { type ReactNode } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const { appState, toastState } = vi.hoisted(() => ({
+  appState: { request: vi.fn() },
+  toastState: { error: vi.fn(), success: vi.fn() },
+}));
+
+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 };
+});
+
+vi.mock('sonner', () => ({ toast: toastState }));
+
+vi.mock('next-intl', () => ({
+  // Devolve a própria chave: o teste verifica comportamento, não tradução.
+  useTranslations: () => (key: string) => key,
+}));
+
+// O Select real é Radix e precisa de APIs de ponteiro que o jsdom não tem. O
+// stub vira um <select> nativo, mesmo padrão de commerce-form-sheet.test.tsx.
+vi.mock('@/components/ui/select', () => ({
+  Select: ({
+    children,
+    value,
+    onValueChange,
+  }: {
+    children: ReactNode;
+    value?: string;
+    onValueChange?: (value: string) => void;
+  }) => (
+    <select
+      aria-label="select-app"
+      value={value}
+      onChange={(event) => onValueChange?.(event.target.value)}
+    >
+      {children}
+    </select>
+  ),
+  SelectContent: ({ children }: { children: ReactNode }) => <>{children}</>,
+  SelectItem: ({ children, value }: { children: ReactNode; value: string }) => (
+    <option value={value}>{children}</option>
+  ),
+  SelectTrigger: ({ children }: { children: ReactNode }) => <>{children}</>,
+  SelectValue: ({ placeholder }: { placeholder?: string }) => (
+    <option value="" disabled>
+      {placeholder ?? 'Selecione'}
+    </option>
+  ),
+}));
+
+// O Dialog real também é Radix (portal + focus trap); aqui só interessa o
+// conteúdo renderizado.
+vi.mock('@/components/ui/dialog', () => ({
+  Dialog: ({ children, open }: { children: ReactNode; open?: boolean }) =>
+    open ? <div>{children}</div> : null,
+  DialogContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  DialogDescription: ({ children }: { children: ReactNode }) => <p>{children}</p>,
+  DialogFooter: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  DialogHeader: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  DialogTitle: ({ children }: { children: ReactNode }) => <h2>{children}</h2>,
+}));
+
+import { SimulateAccessDialog } from './simulate-access-dialog';
+
+const TARGET = { id: 42, name: 'Aluna' } as never;
+
+const renderDialog = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  return render(
+    <SimulateAccessDialog open onOpenChange={vi.fn()} user={TARGET} />,
+    { wrapper }
+  );
+};
+
+const chooseApp = async (value: string) => {
+  // Espera a lista de apps chegar: mudar o valor antes de a <option> existir é
+  // um no-op silencioso e o teste passaria a testar nada.
+  await screen.findByText(value);
+  fireEvent.change(screen.getByLabelText('select-app'), { target: { value } });
+};
+
+describe('SimulateAccessDialog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    appState.request = vi.fn(async (config: { url: string }) => {
+      if (config.url === '/impersonation/apps') {
+        return {
+          data: {
+            apps: [
+              { key: 'admin', url: 'https://admin.example.com' },
+              { key: 'class', url: 'https://class.example.com' },
+            ],
+          },
+        };
+      }
+      return { data: { url: 'https://class.example.com/simulacao#code=abc' } };
+    });
+  });
+
+  it('lista apenas os apps que o backend devolve', async () => {
+    renderDialog();
+
+    expect(await screen.findByText('admin')).toBeInTheDocument();
+    expect(screen.getByText('class')).toBeInTheDocument();
+    // `training` tem autenticação própria e ficou fora desta fase.
+    expect(screen.queryByText('training')).not.toBeInTheDocument();
+  });
+
+  it('exige escolher o app antes de confirmar', async () => {
+    renderDialog();
+
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: 'confirm' })).toBeDisabled()
+    );
+  });
+
+  it('abre a aba no gesto do clique, antes do await, e só depois aponta a URL', async () => {
+    // Abrir a aba depois do await cai no bloqueador de pop-up de todo navegador.
+    const tab = { location: { href: '' }, close: vi.fn() };
+    const openSpy = vi
+      .spyOn(window, 'open')
+      .mockReturnValue(tab as unknown as Window);
+
+    renderDialog();
+    await chooseApp('class');
+    fireEvent.click(screen.getByRole('button', { name: 'confirm' }));
+
+    expect(openSpy).toHaveBeenCalledWith('', '_blank', 'noopener');
+    await waitFor(() =>
+      expect(tab.location.href).toBe(
+        'https://class.example.com/simulacao#code=abc'
+      )
+    );
+  });
+
+  it('envia o alvo, o app e o motivo para o backend', async () => {
+    vi.spyOn(window, 'open').mockReturnValue({
+      location: { href: '' },
+      close: vi.fn(),
+    } as unknown as Window);
+
+    renderDialog();
+    await chooseApp('class');
+    fireEvent.change(screen.getByLabelText('reason'), {
+      target: { value: 'chamado 123' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'confirm' }));
+
+    await waitFor(() =>
+      expect(appState.request).toHaveBeenCalledWith(
+        expect.objectContaining({
+          url: '/impersonation/start',
+          method: 'POST',
+          data: { targetUserId: 42, app: 'class', reason: 'chamado 123' },
+        })
+      )
+    );
+  });
+
+  it('mostra a mensagem específica do backend e fecha a aba em branco', async () => {
+    const tab = { location: { href: '' }, close: vi.fn() };
+    vi.spyOn(window, 'open').mockReturnValue(tab as unknown as Window);
+
+    appState.request = vi.fn(async (config: { url: string }) => {
+      if (config.url === '/impersonation/apps') {
+        return {
+          data: { apps: [{ key: 'class', url: 'https://class.example.com' }] },
+        };
+      }
+      throw {
+        response: {
+          data: { message: 'Administradores não podem ser simulados.' },
+        },
+      };
+    });
+
+    renderDialog();
+    await chooseApp('class');
+    fireEvent.click(screen.getByRole('button', { name: 'confirm' }));
+
+    await waitFor(() =>
+      expect(toastState.error).toHaveBeenCalledWith(
+        'Administradores não podem ser simulados.'
+      )
+    );
+    expect(tab.close).toHaveBeenCalled();
+  });
+});

package/hedhog/frontend/app/users/simulate-access-dialog.tsx.ejs

@@ -0,0 +1,170 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { User } from '@hed-hog/api-types';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { VenetianMask } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+
+type AppOption = { key: string; url: string };
+
+export function SimulateAccessDialog({
+  open,
+  onOpenChange,
+  user,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  user: User | null;
+}) {
+  const t = useTranslations('core.AccessSimulation');
+  const { request } = useApp();
+
+  const [app, setApp] = useState('');
+  const [reason, setReason] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  // Os apps de destino vêm do backend (chaves de `app-urls` que têm tela de
+  // resgate), e não de uma lista fixa aqui: o admin não sabe o que está
+  // configurado nesta instalação.
+  const { data: apps, isLoading: isLoadingApps } = useQuery<{ apps: AppOption[] }>({
+    queryKey: ['impersonation-apps'],
+    enabled: open,
+    queryFn: async () => {
+      const response = await request<{ apps: AppOption[] }>({
+        url: '/impersonation/apps',
+      });
+      return response.data;
+    },
+  });
+
+  const options = apps?.apps ?? [];
+
+  useEffect(() => {
+    if (!open) {
+      setApp('');
+      setReason('');
+      setSubmitting(false);
+    }
+  }, [open]);
+
+  const handleConfirm = async () => {
+    if (!user || !app) return;
+
+    // A aba precisa ser aberta AGORA, no gesto do clique. Abrir depois do await
+    // cai no bloqueador de pop-up de todo navegador.
+    const tab = window.open('', '_blank', 'noopener');
+
+    setSubmitting(true);
+    try {
+      const { data } = await request<{ url: string }>({
+        url: '/impersonation/start',
+        method: 'POST',
+        data: { targetUserId: Number(user.id), app, reason: reason.trim() || undefined },
+        showErrors: false,
+      });
+
+      if (tab) {
+        tab.location.href = data.url;
+      } else {
+        // Pop-up bloqueado apesar do gesto: o código vale 60s, então mandar o
+        // operador clicar num link é melhor do que perdê-lo.
+        window.location.href = data.url;
+      }
+
+      onOpenChange(false);
+    } catch (error: any) {
+      tab?.close();
+      // A mensagem do backend é específica (alvo administrador, conta
+      // desativada, app sem URL...) e vale mais que um texto genérico.
+      const message =
+        typeof error?.response?.data?.message === 'string'
+          ? error.response.data.message
+          : t('startFailure');
+      toast.error(message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <VenetianMask className="h-4 w-4 text-amber-600" />
+            {t('dialogTitle')}
+          </DialogTitle>
+          <DialogDescription>
+            {t('dialogDescription', { name: user?.name ?? '' })}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="impersonation-app">{t('targetApp')}</Label>
+            <Select value={app} onValueChange={setApp} disabled={isLoadingApps}>
+              <SelectTrigger id="impersonation-app" className="w-full">
+                <SelectValue placeholder={t('targetAppPlaceholder')} />
+              </SelectTrigger>
+              <SelectContent>
+                {options.map((option) => (
+                  <SelectItem key={option.key} value={option.key}>
+                    {option.key}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {!isLoadingApps && options.length === 0 && (
+              <p className="text-xs text-destructive">{t('noAppsConfigured')}</p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="impersonation-reason">{t('reason')}</Label>
+            <Textarea
+              id="impersonation-reason"
+              value={reason}
+              onChange={(event) => setReason(event.target.value)}
+              placeholder={t('reasonPlaceholder')}
+              maxLength={255}
+              rows={3}
+            />
+          </div>
+
+          <div className="rounded-md border border-amber-200 bg-amber-50 p-3 text-xs text-amber-800">
+            {t('auditWarning')}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('cancel')}
+          </Button>
+          <Button onClick={handleConfirm} disabled={!app || submitting}>
+            {submitting ? t('opening') : t('confirm')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}