@hed-hog/core 0.0.387 → 0.0.390

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

@@ -0,0 +1,399 @@
+'use client';
+
+import {
+  EmptyState,
+  PaginationFooter,
+  SearchBar,
+  type SearchBarControl,
+} from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Sheet,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { useDebounce } from '@/hooks/use-debounce';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { formatDateTime } from '@/lib/format-date';
+import { User } from '@hed-hog/api-types';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  AlertCircle,
+  CheckCircle2,
+  Clock,
+  Eye,
+  Loader2,
+  Mail,
+  TriangleAlert,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+
+type UserMailStatus = 'received' | 'read' | 'error';
+type StatusFilter = 'all' | UserMailStatus;
+
+type UserMail = {
+  id: number;
+  mailId: number;
+  mailSlug: string | null;
+  subject: string;
+  from: string;
+  to: string | null;
+  cc: string | null;
+  bcc: string | null;
+  body: string;
+  createdAt: string | null;
+  tracked: boolean;
+  recipientEmail: string | null;
+  status: UserMailStatus | null;
+  readAt: string | null;
+  errorCode: string | null;
+  errorMessage: string | null;
+};
+
+type UserMailStats = {
+  total: number;
+  received: number;
+  read: number;
+  error: number;
+};
+
+type UserMailsResponse = {
+  data: UserMail[];
+  total: number;
+  stats: UserMailStats;
+};
+
+const PAGE_SIZE_OPTIONS = [5, 10, 20, 50] as const;
+
+export function UserMails({ editingUser }: { editingUser: User }) {
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const t = useTranslations('core.UserMails');
+  const userId = editingUser?.id;
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
+  const [page, setPage] = useState(1);
+  const [selectedMail, setSelectedMail] = useState<UserMail | null>(null);
+  const [isDetailOpen, setIsDetailOpen] = useState(false);
+  const debouncedSearch = useDebounce(searchTerm);
+
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:core-user-mails:pageSize',
+    defaultValue: 10,
+    allowedValues: PAGE_SIZE_OPTIONS,
+  });
+
+  const { data, isLoading } = useQuery<UserMailsResponse>({
+    queryKey: [
+      'user-mails',
+      userId,
+      page,
+      pageSize,
+      debouncedSearch,
+      statusFilter,
+      currentLocaleCode,
+    ],
+    queryFn: async () => {
+      const response = await request<UserMailsResponse>({
+        url: `/user/${userId}/mail`,
+        method: 'GET',
+        params: {
+          page,
+          pageSize,
+          search: debouncedSearch || undefined,
+          status: statusFilter !== 'all' ? statusFilter : undefined,
+        },
+      });
+      return response.data;
+    },
+    enabled: !!userId,
+  });
+
+  const mails = data?.data ?? [];
+  const total = data?.total ?? 0;
+  const stats = data?.stats;
+
+  const kpiCards = useMemo<KpiCardItem[]>(
+    () => [
+      {
+        key: 'total',
+        title: t('kpiTotal'),
+        value: stats?.total ?? 0,
+        icon: Mail,
+        layout: 'compact',
+        accentClassName: 'from-purple-500/20 via-purple-400/10 to-transparent',
+        iconContainerClassName: 'bg-purple-50 text-purple-600',
+      },
+      {
+        key: 'read',
+        title: t('kpiRead'),
+        value: stats?.read ?? 0,
+        icon: Eye,
+        layout: 'compact',
+        accentClassName: 'from-green-500/20 via-emerald-400/10 to-transparent',
+        iconContainerClassName: 'bg-green-50 text-green-600',
+      },
+      {
+        key: 'error',
+        title: t('kpiError'),
+        value: stats?.error ?? 0,
+        icon: TriangleAlert,
+        layout: 'compact',
+        accentClassName: 'from-rose-500/20 via-rose-400/10 to-transparent',
+        iconContainerClassName: 'bg-rose-50 text-rose-600',
+      },
+    ],
+    [stats, t]
+  );
+
+  const searchControls = useMemo<SearchBarControl[]>(
+    () => [
+      {
+        id: 'status',
+        type: 'select',
+        value: statusFilter,
+        onChange: (value) => {
+          setStatusFilter(value as StatusFilter);
+          setPage(1);
+        },
+        placeholder: t('filterByStatus'),
+        options: [
+          { value: 'all', label: t('statusAll') },
+          { value: 'received', label: t('statusReceived') },
+          { value: 'read', label: t('statusRead') },
+          { value: 'error', label: t('statusError') },
+        ],
+      },
+    ],
+    [statusFilter, t]
+  );
+
+  const handleViewDetails = (mail: UserMail) => {
+    setSelectedMail(mail);
+    setIsDetailOpen(true);
+  };
+
+  const renderStatusBadge = (mail: UserMail) => {
+    if (!mail.tracked || !mail.status) {
+      return <Badge variant="outline">{t('statusUntracked')}</Badge>;
+    }
+
+    return (
+      <Badge variant={mail.status === 'error' ? 'destructive' : 'outline'}>
+        {t(`status_${mail.status}` as never)}
+      </Badge>
+    );
+  };
+
+  return (
+    <div className="space-y-3">
+      <KpiCardsGrid items={kpiCards} columns={3} />
+
+      <SearchBar
+        searchQuery={searchTerm}
+        onSearchChange={(value) => {
+          setSearchTerm(value);
+          setPage(1);
+        }}
+        onSearch={() => setPage(1)}
+        placeholder={t('searchPlaceholder')}
+        controls={searchControls}
+      />
+
+      {isLoading ? (
+        <div className="flex items-center justify-center py-8 text-muted-foreground">
+          <Loader2 className="h-5 w-5 animate-spin" />
+        </div>
+      ) : mails.length === 0 ? (
+        <EmptyState
+          icon={<Mail className="h-6 w-6" />}
+          title={t('emptyTitle')}
+          description={t('emptyDescription')}
+        />
+      ) : (
+        <div className="space-y-2">
+          {mails.map((mail) => (
+            <div
+              key={mail.id}
+              onDoubleClick={() => handleViewDetails(mail)}
+              className="cursor-pointer rounded-lg border p-3 transition-colors hover:border-border hover:bg-muted/40"
+            >
+              <div className="flex items-start gap-3">
+                <div className="rounded-md bg-slate-50 p-2">
+                  <Mail className="h-5 w-5 text-muted-foreground" />
+                </div>
+                <div className="flex-1">
+                  <div className="flex flex-wrap items-center justify-between gap-2">
+                    <p className="text-sm font-medium">{mail.subject}</p>
+                    {renderStatusBadge(mail)}
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    {mail.recipientEmail || mail.to}
+                  </p>
+                  <div className="mt-1 flex flex-wrap items-center gap-3 text-[11px] text-muted-foreground">
+                    {mail.createdAt && (
+                      <span className="flex items-center gap-1">
+                        <Clock className="h-3 w-3" />
+                        {formatDateTime(
+                          mail.createdAt,
+                          getSettingValue,
+                          currentLocaleCode
+                        )}
+                      </span>
+                    )}
+                    {mail.readAt && (
+                      <span className="flex items-center gap-1">
+                        <CheckCircle2 className="h-3 w-3" />
+                        {t('readAt')}:{' '}
+                        {formatDateTime(
+                          mail.readAt,
+                          getSettingValue,
+                          currentLocaleCode
+                        )}
+                      </span>
+                    )}
+                    {mail.errorMessage && (
+                      <span className="flex items-center gap-1 text-red-600 dark:text-red-400">
+                        <AlertCircle className="h-3 w-3" />
+                        {mail.errorMessage}
+                        {mail.errorCode ? ` (${mail.errorCode})` : ''}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={total}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(1);
+        }}
+        pageSizeOptions={PAGE_SIZE_OPTIONS}
+      />
+
+      {selectedMail && (
+        <Sheet open={isDetailOpen} onOpenChange={setIsDetailOpen}>
+          <ResizableSheetContent
+            sheetId="core-users-mail-detail"
+            defaultWidth={672}
+          >
+            <SheetHeader>
+              <SheetTitle>{t('detailsTitle')}</SheetTitle>
+              <SheetDescription>{t('detailsDescription')}</SheetDescription>
+            </SheetHeader>
+            <ScrollArea className="h-[calc(100vh-9rem)] px-4 pb-4">
+              <div className="space-y-4 py-2">
+                <div>
+                  <h4 className="mb-2 text-sm font-semibold">{t('subject')}</h4>
+                  <p className="rounded-md bg-muted p-3 text-sm">
+                    {selectedMail.subject}
+                  </p>
+                </div>
+                <div>
+                  <h4 className="mb-2 text-sm font-semibold">{t('from')}</h4>
+                  <p className="rounded-md bg-muted p-3 text-sm">
+                    {selectedMail.from}
+                  </p>
+                </div>
+                <div>
+                  <h4 className="mb-2 text-sm font-semibold">{t('to')}</h4>
+                  <p className="rounded-md bg-muted p-3 text-sm">
+                    {selectedMail.recipientEmail || selectedMail.to}
+                  </p>
+                </div>
+                {selectedMail.cc && (
+                  <div>
+                    <h4 className="mb-2 text-sm font-semibold">{t('cc')}</h4>
+                    <p className="rounded-md bg-muted p-3 text-sm">
+                      {selectedMail.cc}
+                    </p>
+                  </div>
+                )}
+                {selectedMail.bcc && (
+                  <div>
+                    <h4 className="mb-2 text-sm font-semibold">{t('bcc')}</h4>
+                    <p className="rounded-md bg-muted p-3 text-sm">
+                      {selectedMail.bcc}
+                    </p>
+                  </div>
+                )}
+
+                <div>
+                  <h4 className="mb-2 text-sm font-semibold">{t('delivery')}</h4>
+                  <div className="space-y-2 rounded-md border p-3">
+                    <div className="flex flex-wrap items-center gap-2">
+                      {renderStatusBadge(selectedMail)}
+                      {selectedMail.mailSlug && (
+                        <Badge variant="outline">{selectedMail.mailSlug}</Badge>
+                      )}
+                    </div>
+                    <div className="space-y-1 text-xs text-muted-foreground">
+                      {selectedMail.createdAt && (
+                        <div className="flex items-center gap-1.5">
+                          <Clock className="h-3.5 w-3.5" />
+                          <span>
+                            {t('createdAt')}:{' '}
+                            {formatDateTime(
+                              selectedMail.createdAt,
+                              getSettingValue,
+                              currentLocaleCode
+                            )}
+                          </span>
+                        </div>
+                      )}
+                      {selectedMail.readAt && (
+                        <div className="flex items-center gap-1.5">
+                          <CheckCircle2 className="h-3.5 w-3.5" />
+                          <span>
+                            {t('readAt')}:{' '}
+                            {formatDateTime(
+                              selectedMail.readAt,
+                              getSettingValue,
+                              currentLocaleCode
+                            )}
+                          </span>
+                        </div>
+                      )}
+                      {selectedMail.errorMessage && (
+                        <div className="flex items-start gap-1.5 text-red-600 dark:text-red-400">
+                          <AlertCircle className="mt-0.5 h-3.5 w-3.5" />
+                          <span>
+                            {t('errorMessage')}: {selectedMail.errorMessage}
+                            {selectedMail.errorCode
+                              ? ` (${selectedMail.errorCode})`
+                              : ''}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                <div>
+                  <h4 className="mb-2 text-sm font-semibold">{t('body')}</h4>
+                  <div
+                    className="rounded-md bg-muted p-3 text-sm"
+                    dangerouslySetInnerHTML={{ __html: selectedMail.body }}
+                  />
+                </div>
+              </div>
+            </ScrollArea>
+          </ResizableSheetContent>
+        </Sheet>
+      )}
+    </div>
+  );
+}

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

@@ -11,10 +11,10 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
   Card,
-  CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
@@ -61,9 +61,6 @@ import {
   EyeOff,
   Fingerprint,
   Key,
-  KeyRound,
-  LogOut,
-  LucideIcon,
   Mail,
   Monitor,
   ScrollText,
@@ -71,10 +68,8 @@ import {
   Save,
   Shield,
   ShieldCheck,
-  ShieldOff,
   Trash2,
   UserCircle,
-  UserIcon,
   Users,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
@@ -85,7 +80,12 @@ import { z } from 'zod';
 import { ActiveSessions } from './active-session';
 import { UserIdentifiersSection } from './identifiers';
 import { PermissionsSection } from './permissions';
+import {
+  MAX_RECENT_ACTIVITIES,
+  UserActivityTimeline,
+} from './user-activity-timeline';
 import { UserLogs } from './user-logs';
+import { UserMails } from './user-mails';
 
 export type UserSheetProps = {
   open: boolean;
@@ -414,8 +414,19 @@ function UserEditSheet({
 }) {
   const t = useTranslations('core.UserPage');
   const userActivityT = useTranslations('core.UserActivity');
-  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const {
+    request,
+    currentLocaleCode,
+    getSettingValue,
+    user: currentUser,
+  } = useApp();
   const minPasswordLength = Number(getSettingValue('password-min-length')) || 6;
+  // Resetar a própria senha por aqui força `requires_reset` na conta logada
+  // sem passar pelo fluxo de troca (que exige a senha atual). Como o admin
+  // não sabe essa senha nova gerada, ele fica preso na tela de troca forçada
+  // assim que a sessão revalidar — por isso essa ação some para a própria conta.
+  const isSelf =
+    !!currentUser?.id && !!userId && Number(currentUser.id) === Number(userId);
   const enabledOAuthProviders = useMemo(
     () =>
       OAUTH_PROVIDER_TOGGLE_MAP.filter(
@@ -775,6 +786,10 @@ function UserEditSheet({
                 <Monitor className="h-4 w-4" />
                 <span>{t('tabSessions')}</span>
               </TabsTrigger>
+              <TabsTrigger value="emails">
+                <Mail className="h-4 w-4" />
+                <span>{t('tabEmails')}</span>
+              </TabsTrigger>
               <TabsTrigger value="logs">
                 <ScrollText className="h-4 w-4" />
                 <span>{t('tabLogs')}</span>
@@ -1003,65 +1018,22 @@ function UserEditSheet({
             <div className="space-y-3">
               <div className="flex items-center justify-between">
                 <h4 className="text-sm font-semibold flex items-center gap-2">
-                  <Shield className="h-4 w-4" />
+                  <Activity className="h-4 w-4" />
                   {t('recentActivityTitle')}
                 </h4>
+                {Boolean(editingUser.user_activity?.length) && (
+                  <Badge variant="secondary" className="text-[10px]">
+                    {t('activityEventsCount', {
+                      count: Math.min(
+                        editingUser.user_activity?.length ?? 0,
+                        MAX_RECENT_ACTIVITIES
+                      ),
+                    })}
+                  </Badge>
+                )}
               </div>
 
-              <Card className="rounded-md p-0">
-                <CardContent className="p-4 gap-2 flex flex-col">
-                  {editingUser.user_activity?.length ? (
-                    <div className="space-y-3">
-                      {editingUser.user_activity
-                        ?.slice(0, 5)
-                        .map((activity, index) => {
-                          const actionIcons: Record<string, LucideIcon> = {
-                            login: UserIcon,
-                            forgotPassword: KeyRound,
-                            logout: LogOut,
-                            resetPassword: RefreshCcw,
-                            revokeAllSessions: ShieldOff,
-                            revokeSession: Shield,
-                          };
-                          const Icon = actionIcons[activity.action] || UserIcon;
-
-                          return (
-                            <div
-                              key={index}
-                              className="flex items-start gap-3 border-b pb-3 last:border-none"
-                            >
-                              <div className="rounded-md bg-blue-50 p-2">
-                                <Icon className="w-4 h-4 text-gray-600" />
-                              </div>
-                              <div className="flex-1">
-                                <p className="text-sm font-medium">
-                                  {userActivityT(activity.action)}
-                                </p>
-                                <p className="text-[11px] text-gray-500 mt-1">
-                                  {activity.created_at &&
-                                    formatDistanceToNow(
-                                      new Date(activity.created_at),
-                                      {
-                                        addSuffix: true,
-                                        locale:
-                                          currentLocaleCode === 'en'
-                                            ? enUS
-                                            : ptBR,
-                                      }
-                                    )}
-                                </p>
-                              </div>
-                            </div>
-                          );
-                        })}
-                    </div>
-                  ) : (
-                    <span className="text-sm text-muted-foreground">
-                      {t('noRecentActivity')}
-                    </span>
-                  )}
-                </CardContent>
-              </Card>
+              <UserActivityTimeline activities={editingUser.user_activity} />
             </div>
 
             <div className="flex justify-end">
@@ -1165,19 +1137,27 @@ function UserEditSheet({
                   {t('passwordLastChangedUnavailable')}
                 </p>
               )}
-              <p className="text-xs text-muted-foreground">
-                {t('passwordResetNotice')}
-              </p>
-              <div className="flex flex-col gap-2">
-                <Button
-                  type="button"
-                  onClick={openResetPasswordDialog}
-                  className="w-full sm:w-fit"
-                >
-                  <RefreshCcw className="mr-2 h-4 w-4" />
-                  {t('buttonResetPassword')}
-                </Button>
-              </div>
+              {isSelf ? (
+                <p className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900">
+                  {t('passwordResetSelfNotice')}
+                </p>
+              ) : (
+                <>
+                  <p className="text-xs text-muted-foreground">
+                    {t('passwordResetNotice')}
+                  </p>
+                  <div className="flex flex-col gap-2">
+                    <Button
+                      type="button"
+                      onClick={openResetPasswordDialog}
+                      className="w-full sm:w-fit"
+                    >
+                      <RefreshCcw className="mr-2 h-4 w-4" />
+                      {t('buttonResetPassword')}
+                    </Button>
+                  </div>
+                </>
+              )}
             </div>
 
             <div className="space-y-3">
@@ -1496,6 +1476,11 @@ function UserEditSheet({
             />
           </TabsContent>
 
+          {/* Emails Tab */}
+          <TabsContent value="emails" className="space-y-4 mt-4 p-4 pt-0">
+            <UserMails editingUser={editingUser} />
+          </TabsContent>
+
           {/* Logs Tab */}
           <TabsContent value="logs" className="space-y-4 mt-4 p-4 pt-0">
             <UserLogs editingUser={editingUser} />