@hed-hog/core 0.0.386 → 0.0.390

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,
@@ -55,7 +61,7 @@ import {
   Users,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { UserSheet } from './user-sheet';
 
 const USER_VIEW_STORAGE_KEY = 'core-user-view-mode';
@@ -74,7 +80,7 @@ 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 { request, currentLocaleCode, getSettingValue } = useApp();
 
   const [searchQuery, setSearchQuery] = useState('');
   const [isSheetOpen, setIsSheetOpen] = useState(false);
@@ -223,6 +229,37 @@ 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]
+  );
+
+  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 +269,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,6 +320,50 @@ 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: '',
@@ -300,7 +386,7 @@ export default function UserPage() {
         ),
       },
     ],
-    [t]
+    [t, getLastLoginLabel, presenceMap]
   );
 
   const tableData = useMemo(
@@ -354,6 +440,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',
+                },
               ],
             }}
           />
@@ -522,6 +612,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 +693,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">

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

@@ -0,0 +1,231 @@
+'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,
+} 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 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',
+  },
+};
+
+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.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>
+  );
+}