@hed-hog/core 0.0.387 → 0.0.393

package/hedhog/frontend/app/users/user-activity-timeline.tsx.ejs

@@ -0,0 +1,250 @@
+'use client';
+
+import { EmptyState } from '@/components/entity-list';
+import { Card, CardContent } from '@/components/ui/card';
+import { formatDate, formatDateTime } from '@/lib/format-date';
+import { UserActivity } from '@hed-hog/api-types';
+import { useApp } from '@hed-hog/next-app-provider';
+import { formatDistanceToNow } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
+import {
+  Activity,
+  KeyRound,
+  LogOut,
+  LucideIcon,
+  RefreshCcw,
+  Shield,
+  ShieldOff,
+  UserIcon,
+  UserPlus,
+  VenetianMask,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo } from 'react';
+
+export const MAX_RECENT_ACTIVITIES = 8;
+
+type ActivityConfig = {
+  icon: LucideIcon;
+  color: string;
+  bg: string;
+  dot: string;
+};
+
+const IMPERSONATION_CONFIG: ActivityConfig = {
+  icon: VenetianMask,
+  color: 'text-amber-600 dark:text-amber-400',
+  bg: 'bg-amber-50 dark:bg-amber-950/40',
+  dot: 'ring-amber-200 dark:ring-amber-900',
+};
+
+const ACTION_CONFIG: Record<string, ActivityConfig> = {
+  login: {
+    icon: UserIcon,
+    color: 'text-blue-600 dark:text-blue-400',
+    bg: 'bg-blue-50 dark:bg-blue-950/40',
+    dot: 'ring-blue-200 dark:ring-blue-900',
+  },
+  logout: {
+    icon: LogOut,
+    color: 'text-muted-foreground',
+    bg: 'bg-muted',
+    dot: 'ring-border',
+  },
+  register: {
+    icon: UserPlus,
+    color: 'text-emerald-600 dark:text-emerald-400',
+    bg: 'bg-emerald-50 dark:bg-emerald-950/40',
+    dot: 'ring-emerald-200 dark:ring-emerald-900',
+  },
+  forgotPassword: {
+    icon: KeyRound,
+    color: 'text-amber-600 dark:text-amber-400',
+    bg: 'bg-amber-50 dark:bg-amber-950/40',
+    dot: 'ring-amber-200 dark:ring-amber-900',
+  },
+  resetPassword: {
+    icon: RefreshCcw,
+    color: 'text-amber-600 dark:text-amber-400',
+    bg: 'bg-amber-50 dark:bg-amber-950/40',
+    dot: 'ring-amber-200 dark:ring-amber-900',
+  },
+  revokeSession: {
+    icon: Shield,
+    color: 'text-rose-600 dark:text-rose-400',
+    bg: 'bg-rose-50 dark:bg-rose-950/40',
+    dot: 'ring-rose-200 dark:ring-rose-900',
+  },
+  revokeAllSessions: {
+    icon: ShieldOff,
+    color: 'text-rose-600 dark:text-rose-400',
+    bg: 'bg-rose-50 dark:bg-rose-950/40',
+    dot: 'ring-rose-200 dark:ring-rose-900',
+  },
+  // Simulação de acesso. As duas primeiras aparecem na linha do tempo do ALVO;
+  // as duas últimas, na do OPERADOR.
+  impersonationStarted: IMPERSONATION_CONFIG,
+  impersonationEnded: IMPERSONATION_CONFIG,
+  impersonationPerformed: IMPERSONATION_CONFIG,
+  impersonationPerformedEnded: IMPERSONATION_CONFIG,
+};
+
+const FALLBACK_CONFIG: ActivityConfig = {
+  icon: Activity,
+  color: 'text-muted-foreground',
+  bg: 'bg-muted',
+  dot: 'ring-border',
+};
+
+const KNOWN_ACTIONS = Object.keys(ACTION_CONFIG);
+
+function toTime(value?: string) {
+  if (!value) return 0;
+  const time = new Date(value).getTime();
+  return Number.isNaN(time) ? 0 : time;
+}
+
+function isSameDay(a: Date, b: Date) {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+export function UserActivityTimeline({
+  activities,
+}: {
+  activities?: UserActivity[];
+}) {
+  const t = useTranslations('core.UserPage');
+  const userActivityT = useTranslations('core.UserActivity');
+  const { currentLocaleCode, getSettingValue } = useApp();
+
+  const dateLocale = currentLocaleCode?.startsWith('en') ? enUS : ptBR;
+
+  const groups = useMemo(() => {
+    const getDayLabel = (value?: string) => {
+      if (!value) return '';
+      const date = new Date(value);
+      if (Number.isNaN(date.getTime())) return '';
+
+      const now = new Date();
+      if (isSameDay(date, now)) return t('activityToday');
+
+      const yesterday = new Date(now);
+      yesterday.setDate(yesterday.getDate() - 1);
+      if (isSameDay(date, yesterday)) return t('activityYesterday');
+
+      return formatDate(value, getSettingValue, currentLocaleCode);
+    };
+
+    const recent = [...(activities ?? [])]
+      .sort((a, b) => toTime(b.created_at) - toTime(a.created_at))
+      .slice(0, MAX_RECENT_ACTIVITIES);
+
+    return recent.reduce<Array<{ label: string; items: UserActivity[] }>>(
+      (acc, activity) => {
+        const label = getDayLabel(activity.created_at);
+        const current = acc[acc.length - 1];
+
+        if (current && current.label === label) {
+          current.items.push(activity);
+        } else {
+          acc.push({ label, items: [activity] });
+        }
+
+        return acc;
+      },
+      []
+    );
+  }, [activities, currentLocaleCode, getSettingValue, t]);
+
+  if (!groups.length) {
+    return (
+      <EmptyState
+        icon={<Activity className="h-6 w-6" />}
+        title={t('noRecentActivity')}
+      />
+    );
+  }
+
+  return (
+    <Card className="rounded-md p-0">
+      <CardContent className="p-4">
+        <div className="max-h-70 overflow-y-auto pr-3">
+          <div className="relative flex flex-col">
+            <div className="absolute bottom-1 left-4 top-1 w-px bg-linear-to-b from-transparent via-border to-transparent" />
+
+            {groups.map((group) => (
+              <div key={group.label || group.items[0]?.id}>
+                {group.label && (
+                  <div className="relative z-10 mb-1 ml-11 mt-4 first:mt-0">
+                    <span className="inline-block rounded-md border bg-muted px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+                      {group.label}
+                    </span>
+                  </div>
+                )}
+
+                {group.items.map((activity, index) => {
+                  const config =
+                    ACTION_CONFIG[activity.action] ?? FALLBACK_CONFIG;
+                  const Icon = config.icon;
+                  const label = KNOWN_ACTIONS.includes(activity.action)
+                    ? userActivityT(activity.action as never)
+                    : activity.action;
+
+                  return (
+                    <div
+                      key={activity.id ?? `${group.label}-${index}`}
+                      className="group relative flex items-start gap-3 py-1"
+                    >
+                      <div
+                        className={`relative z-10 mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ring-4 ring-background ${config.bg}`}
+                      >
+                        <Icon className={`h-3.5 w-3.5 ${config.color}`} />
+                      </div>
+
+                      <div className="flex min-w-0 flex-1 flex-col gap-0.5 rounded-lg px-2 py-1.5 transition-colors group-hover:bg-muted/40">
+                        <div className="flex items-center justify-between gap-2">
+                          <span className="min-w-0 text-sm font-medium leading-snug wrap-break-word">
+                            {label}
+                          </span>
+                          {activity.created_at && (
+                            <span className="shrink-0 text-[11px] tabular-nums text-muted-foreground">
+                              {formatDateTime(
+                                activity.created_at,
+                                getSettingValue,
+                                currentLocaleCode
+                              )}
+                            </span>
+                          )}
+                        </div>
+                        {activity.actor?.name && (
+                          <span className="text-[11px] font-medium text-amber-700 dark:text-amber-400">
+                            {t('activityByActor', { name: activity.actor.name })}
+                          </span>
+                        )}
+                        {activity.created_at && (
+                          <span className="text-[11px] text-muted-foreground">
+                            {formatDistanceToNow(
+                              new Date(activity.created_at),
+                              {
+                                addSuffix: true,
+                                locale: dateLocale,
+                              }
+                            )}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/hedhog/frontend/app/users/user-devices.tsx.ejs

@@ -0,0 +1,89 @@
+'use client';
+
+import { PaginationFooter } from '@/components/entity-list/pagination-footer';
+import { usePagination } from '@/hooks/use-pagination';
+import { User } from '@hed-hog/api-types';
+import { useApp } from '@hed-hog/next-app-provider';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import {
+  DEVICE_PAGE_SIZES,
+  UserDevice,
+  UserDevicesList,
+} from '../account/components/user-devices-list';
+
+interface IProps {
+  editingUser: User;
+}
+
+/**
+ * Dispositivos conhecidos do usuario sendo editado.
+ *
+ * Busca propria e paginada em vez de vir embutido no detalhe do usuario: uma
+ * conta antiga acumula dezenas de dispositivos, e embutir a lista pesaria em
+ * todo GET /user/:id, inclusive nas abas que nem olham para isso.
+ */
+export function UserDevices({ editingUser }: IProps) {
+  const { request } = useApp();
+  const t = useTranslations('core.KnownDevices');
+
+  const {
+    items: devices,
+    refetch,
+    page,
+    setPage,
+    totalItems,
+    pageSize,
+    setPageSize,
+  } = usePagination({
+    url: `/user-device/user/${editingUser?.id}`,
+    paginationOptions: { pageSizeOptions: [...DEVICE_PAGE_SIZES] },
+  });
+
+  const handleForget = async (deviceId: number) => {
+    try {
+      await request({
+        url: `/user-device/user/${editingUser.id}/${deviceId}`,
+        method: 'DELETE',
+      });
+      await refetch();
+      toast.success(t('forgetSuccess'));
+    } catch {
+      toast.error(t('forgetFailure'));
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <div>
+        <h4 className="text-sm font-medium">{t('title')}</h4>
+        <p className="text-xs text-muted-foreground">{t('adminDescription')}</p>
+        {/* Um acesso simulado NÃO registra dispositivo de propósito: o
+            navegador do operador não pode virar dispositivo confiável do
+            usuário, senão o alerta de novo dispositivo dele perde o valor. */}
+        <p className="mt-1 text-xs text-muted-foreground">
+          {t('simulatedNotRecorded')}
+        </p>
+      </div>
+      <UserDevicesList
+        devices={devices as UserDevice[]}
+        onForget={handleForget}
+        emptyLabel={t('noDevices')}
+        t={t}
+      />
+      {totalItems > pageSize ? (
+        <PaginationFooter
+          currentPage={page}
+          pageSize={pageSize}
+          totalItems={totalItems}
+          onPageChange={setPage}
+          onPageSizeChange={(newSize) => {
+            setPageSize(newSize);
+            setPage(1);
+          }}
+          pageSizeOptions={[...DEVICE_PAGE_SIZES]}
+        />
+      ) : null}
+    </div>
+  );
+}

package/hedhog/frontend/app/users/user-logs.tsx.ejs

@@ -12,6 +12,7 @@ import {
   ScrollText,
   ShieldMinus,
   ShieldPlus,
+  VenetianMask,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 
@@ -40,6 +41,10 @@ function getActionIcon(action: string) {
       return ShieldMinus;
     case 'avatar_changed':
       return ImageIcon;
+    case 'impersonation_requested':
+    case 'impersonation_started':
+    case 'impersonation_ended':
+      return VenetianMask;
     default:
       return ScrollText;
   }
@@ -104,8 +109,11 @@ export function UserLogs({ editingUser }: { editingUser: User }) {
   const { data: logs = [], isLoading } = useQuery<UserChangeLog[]>({
     queryKey: ['user-change-logs', userId, currentLocaleCode],
     queryFn: async () => {
+      // `sortOrder=desc` é obrigatório: o @Pagination() assume ordem crescente,
+      // então sem isto a primeira página traz as alterações mais ANTIGAS e o
+      // que acabou de acontecer some na última página.
       const response = await request<{ data: UserChangeLog[] }>({
-        url: `/user/${userId}/log`,
+        url: `/user/${userId}/log?sortField=created_at&sortOrder=desc`,
         method: 'GET',
       });
       return response.data?.data || [];
@@ -119,6 +127,9 @@ export function UserLogs({ editingUser }: { editingUser: User }) {
     'role_assigned',
     'role_removed',
     'avatar_changed',
+    'impersonation_requested',
+    'impersonation_started',
+    'impersonation_ended',
   ];
   const getActionLabel = (action: string) =>
     knownActions.includes(action) ? t(action as never) : action;
@@ -165,6 +176,7 @@ export function UserLogs({ editingUser }: { editingUser: User }) {
                     </div>
                     <p className="text-xs text-muted-foreground">
                       {t('byActor')} {actor}
+                      {log.ipAddress ? ` · ${log.ipAddress}` : ''}
                     </p>
                     {log.summary && (
                       <p className="mt-1 text-xs text-muted-foreground">