@hed-hog/core 0.0.387 → 0.0.393

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>
+  );
+}