@hed-hog/core 0.0.185 → 0.0.190

package/hedhog/frontend/app/mail/log/page.tsx.ejs

@@ -0,0 +1,312 @@
+'use client';
+
+import { PageHeader, PaginationFooter } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { useDebounce } from '@/hooks/use-debounce';
+import { formatDate } from '@/lib/format-date';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Clock, Mail, Search, User } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+
+type PaginationResult<T> = {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+
+type MailSent = {
+  id: number;
+  mail_id: number;
+  subject: string;
+  from: string;
+  to: string;
+  cc?: string;
+  bcc?: string;
+  body: string;
+  created_at: string;
+  updated_at: string;
+};
+
+export default function MailLogPage() {
+  const t = useTranslations('core.MailLog');
+  const [logs, setLogs] = useState<MailSent[]>([]);
+  const [selectedLog, setSelectedLog] = useState<MailSent | null>(null);
+  const [isDetailDialogOpen, setIsDetailDialogOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearch = useDebounce(searchTerm);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const { request, getSettingValue } = useApp();
+
+  const {
+    data: { data, total },
+    refetch: refetchLogs,
+  } = useQuery<PaginationResult<MailSent>>({
+    queryKey: ['mail-sent', debouncedSearch, page, pageSize],
+    queryFn: async () => {
+      const response = await request({
+        url: '/mail-sent',
+        params: {
+          search: debouncedSearch,
+          page,
+          pageSize,
+        },
+      });
+      return response.data as PaginationResult<MailSent>;
+    },
+    initialData: {
+      data: [],
+      total: 0,
+      page: 1,
+      pageSize: 10,
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      setLogs(data);
+    }
+  }, [data]);
+
+  const handleViewDetails = (log: MailSent): void => {
+    setSelectedLog(log);
+    setIsDetailDialogOpen(true);
+  };
+
+  const handleSearchChange = (value: string): void => {
+    setSearchTerm(value);
+    setPage(1);
+  };
+
+  const truncateText = (text: string, maxLength: number = 100): string => {
+    if (!text) return '';
+    return text.length > maxLength
+      ? text.substring(0, maxLength) + '...'
+      : text;
+  };
+
+  useEffect(() => {
+    refetchLogs();
+  }, [debouncedSearch, page, pageSize]);
+
+  return (
+    <div className="flex flex-col h-screen px-4">
+      <PageHeader
+        breadcrumbs={[
+          { label: t('breadcrumbHome'), href: '/' },
+          { label: t('breadcrumbTitle') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+      />
+
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <Card className="transition-shadow hover:shadow-md p-0">
+          <CardContent className="p-4">
+            <div className="flex items-center space-x-3">
+              <div className="rounded-full bg-blue-100 p-2 dark:bg-blue-900">
+                <Mail className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+              </div>
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">
+                  {t('totalEmails')}
+                </p>
+                <p className="text-2xl font-bold">{total || 0}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="transition-shadow hover:shadow-md p-0">
+          <CardContent className="p-4">
+            <div className="flex items-center space-x-3">
+              <div className="rounded-full bg-green-100 p-2 dark:bg-green-900">
+                <Clock className="h-6 w-6 text-green-600 dark:text-green-400" />
+              </div>
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">
+                  {t('onThisPage')}
+                </p>
+                <p className="text-2xl font-bold">{logs.length}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="relative my-4">
+        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          placeholder={t('searchPlaceholder')}
+          value={searchTerm}
+          onChange={(e) => handleSearchChange(e.target.value)}
+          className="pl-10"
+        />
+      </div>
+
+      <div className="space-y-3 mb-4">
+        {logs.length === 0 ? (
+          <Card>
+            <CardContent className="flex flex-col items-center justify-center p-12">
+              <Mail className="mb-4 h-12 w-12 text-muted-foreground" />
+              <p className="text-lg font-medium text-muted-foreground">
+                {t('noLogsFound')}
+              </p>
+              <p className="text-sm text-muted-foreground">
+                {searchTerm ? t('adjustSearch') : t('noEmailsSent')}
+              </p>
+            </CardContent>
+          </Card>
+        ) : (
+          logs.map((log) => (
+            <Card
+              key={log.id}
+              onDoubleClick={() => handleViewDetails(log)}
+              className="cursor-pointer transition-shadow hover:shadow-md"
+            >
+              <CardContent className="p-6">
+                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                  <div className="flex-1 space-y-2">
+                    <div className="flex items-center gap-2">
+                      <h3 className="text-lg font-semibold">{log.subject}</h3>
+                      <Badge variant="outline">#{log.id}</Badge>
+                    </div>
+                    <div className="flex flex-col gap-1 text-sm text-muted-foreground">
+                      <div className="flex items-center gap-2">
+                        <User className="h-4 w-4" />
+                        <span>
+                          {t('from')}: {log.from}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Mail className="h-4 w-4" />
+                        <span>
+                          {t('to')}: {truncateText(log.to, 50)}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Clock className="h-4 w-4" />
+                        <span>
+                          {formatDate(log.created_at, getSettingValue)}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleViewDetails(log);
+                    }}
+                  >
+                    {t('viewDetails')}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </div>
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={total}
+        onPageChange={setPage}
+        onPageSizeChange={(newSize) => {
+          setPageSize(newSize);
+          setPage(1);
+        }}
+        pageSizeOptions={[10, 20, 30, 40, 50]}
+      />
+
+      {selectedLog && (
+        <Dialog open={isDetailDialogOpen} onOpenChange={setIsDetailDialogOpen}>
+          <DialogContent className="max-w-2xl max-h-[80vh]">
+            <DialogHeader>
+              <DialogTitle>{t('emailDetails')}</DialogTitle>
+              <DialogDescription>{t('detailsDescription')}</DialogDescription>
+            </DialogHeader>
+            <ScrollArea className="max-h-[60vh]">
+              <div className="space-y-4">
+                <div>
+                  <h4 className="mb-2 text-sm font-semibold">{t('subject')}</h4>
+                  <p className="rounded-md bg-muted p-3 text-sm">
+                    {selectedLog.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">
+                    {selectedLog.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">
+                    {selectedLog.to}
+                  </p>
+                </div>
+                {selectedLog.cc && (
+                  <div>
+                    <h4 className="mb-2 text-sm font-semibold">{t('cc')}</h4>
+                    <p className="rounded-md bg-muted p-3 text-sm">
+                      {selectedLog.cc}
+                    </p>
+                  </div>
+                )}
+                {selectedLog.bcc && (
+                  <div>
+                    <h4 className="mb-2 text-sm font-semibold">{t('bcc')}</h4>
+                    <p className="rounded-md bg-muted p-3 text-sm">
+                      {selectedLog.bcc}
+                    </p>
+                  </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: selectedLog.body }}
+                  />
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <h4 className="mb-2 text-sm font-semibold">
+                      {t('createdAt')}
+                    </h4>
+                    <p className="rounded-md bg-muted p-3 text-sm">
+                      {formatDate(selectedLog.created_at, getSettingValue)}
+                    </p>
+                  </div>
+                  <div>
+                    <h4 className="mb-2 text-sm font-semibold">
+                      {t('updatedAt')}
+                    </h4>
+                    <p className="rounded-md bg-muted p-3 text-sm">
+                      {formatDate(selectedLog.updated_at, getSettingValue)}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </ScrollArea>
+          </DialogContent>
+        </Dialog>
+      )}
+    </div>
+  );
+}