@hed-hog/finance 0.0.235 → 0.0.237

package/hedhog/frontend/app/administration/audit-logs/page.tsx.ejs

@@ -0,0 +1,309 @@
+'use client';
+
+import { Page, PageHeader, PaginationFooter } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Search, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+
+type AuditLog = {
+  id: string;
+  actorUserId: string | null;
+  actorName: string;
+  actorEmail: string;
+  action: string;
+  entityTable: string;
+  entityId: string;
+  summary: string;
+  ipAddress: string;
+  createdAt: string | null;
+};
+
+type PaginatedAuditLogs = {
+  total: number;
+  lastPage: number;
+  page: number;
+  pageSize: number;
+  data: AuditLog[];
+};
+
+export default function AuditLogsPage() {
+  const t = useTranslations('finance.AdminAuditLogsPage');
+  const { request } = useApp();
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [search, setSearch] = useState('');
+  const [action, setAction] = useState('all');
+  const [entityTable, setEntityTable] = useState('all');
+  const [actorUserId, setActorUserId] = useState('');
+  const [from, setFrom] = useState('');
+  const [to, setTo] = useState('');
+
+  const { data, isLoading, refetch } = useQuery<PaginatedAuditLogs>({
+    queryKey: [
+      'finance-audit-logs',
+      page,
+      pageSize,
+      search,
+      action,
+      entityTable,
+      actorUserId,
+      from,
+      to,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', String(page));
+      params.set('pageSize', String(pageSize));
+      params.set('sortField', 'created_at');
+      params.set('sortOrder', 'desc');
+
+      if (search.trim()) params.set('search', search.trim());
+      if (action !== 'all') params.set('action', action);
+      if (entityTable !== 'all') params.set('entity_table', entityTable);
+      if (actorUserId.trim()) params.set('actor_user_id', actorUserId.trim());
+      if (from) params.set('from', from);
+      if (to) params.set('to', to);
+
+      const response = await request({
+        url: `/finance/audit-logs?${params.toString()}`,
+        method: 'GET',
+      });
+
+      return (response.data || {
+        total: 0,
+        lastPage: 1,
+        page: 1,
+        pageSize,
+        data: [],
+      }) as PaginatedAuditLogs;
+    },
+    placeholderData: (old) => old,
+  });
+
+  const rows = data?.data || [];
+
+  const entityOptions = useMemo(() => {
+    const unique = new Set(rows.map((row) => row.entityTable).filter(Boolean));
+    return ['all', ...Array.from(unique).sort()];
+  }, [rows]);
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('header.title')}
+        description={t('header.description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          {
+            label: t('breadcrumbs.administration'),
+            href: '/finance/administration',
+          },
+          { label: t('breadcrumbs.current') },
+        ]}
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('card.title')}</CardTitle>
+          <CardDescription>{t('card.description')}</CardDescription>
+        </CardHeader>
+
+        <CardContent className="space-y-4">
+          <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
+            <div className="relative lg:col-span-2">
+              <Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder={t('filters.searchPlaceholder')}
+                value={search}
+                onChange={(event) => {
+                  setSearch(event.target.value);
+                  setPage(1);
+                }}
+                className="pl-8"
+              />
+            </div>
+
+            <Select
+              value={action}
+              onValueChange={(value) => {
+                setAction(value);
+                setPage(1);
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder={t('filters.action')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">{t('filters.allActions')}</SelectItem>
+                <SelectItem value="create">create</SelectItem>
+                <SelectItem value="update">update</SelectItem>
+                <SelectItem value="delete">delete</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Input
+              placeholder={t('filters.userPlaceholder')}
+              value={actorUserId}
+              onChange={(event) => {
+                setActorUserId(event.target.value);
+                setPage(1);
+              }}
+            />
+
+            <Select
+              value={entityTable}
+              onValueChange={(value) => {
+                setEntityTable(value);
+                setPage(1);
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder={t('filters.entity')} />
+              </SelectTrigger>
+              <SelectContent>
+                {entityOptions.map((option) => (
+                  <SelectItem key={option} value={option}>
+                    {option === 'all' ? t('filters.allEntities') : option}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            <Input
+              type="date"
+              value={from}
+              onChange={(event) => {
+                setFrom(event.target.value);
+                setPage(1);
+              }}
+            />
+
+            <Input
+              type="date"
+              value={to}
+              onChange={(event) => {
+                setTo(event.target.value);
+                setPage(1);
+              }}
+            />
+
+            <Button
+              variant="outline"
+              className="gap-2"
+              onClick={() => {
+                setSearch('');
+                setAction('all');
+                setEntityTable('all');
+                setActorUserId('');
+                setFrom('');
+                setTo('');
+                setPage(1);
+                refetch();
+              }}
+            >
+              <X className="h-4 w-4" />
+              {t('filters.clear')}
+            </Button>
+          </div>
+
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('table.headers.date')}</TableHead>
+                  <TableHead>{t('table.headers.author')}</TableHead>
+                  <TableHead>{t('table.headers.action')}</TableHead>
+                  <TableHead>{t('table.headers.entity')}</TableHead>
+                  <TableHead>{t('table.headers.record')}</TableHead>
+                  <TableHead>{t('table.headers.summary')}</TableHead>
+                  <TableHead>IP</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {isLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={7} className="h-24 text-center">
+                      {t('table.loading')}
+                    </TableCell>
+                  </TableRow>
+                ) : rows.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={7} className="h-24 text-center">
+                      {t('table.empty')}
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  rows.map((row) => (
+                    <TableRow key={row.id}>
+                      <TableCell>
+                        {row.createdAt
+                          ? new Date(row.createdAt).toLocaleString('pt-BR')
+                          : '-'}
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex flex-col">
+                          <span>{row.actorName || '-'}</span>
+                          <span className="text-xs text-muted-foreground">
+                            {row.actorEmail || row.actorUserId || '-'}
+                          </span>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">{row.action}</Badge>
+                      </TableCell>
+                      <TableCell>{row.entityTable}</TableCell>
+                      <TableCell>{row.entityId}</TableCell>
+                      <TableCell className="max-w-[360px] truncate">
+                        {row.summary || '-'}
+                      </TableCell>
+                      <TableCell>{row.ipAddress || '-'}</TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </div>
+
+          <PaginationFooter
+            currentPage={data?.page || page}
+            pageSize={data?.pageSize || pageSize}
+            totalItems={data?.total || 0}
+            onPageChange={(newPage) => setPage(newPage)}
+            onPageSizeChange={(newPageSize) => {
+              setPageSize(newPageSize);
+              setPage(1);
+            }}
+            pageSizeOptions={[10, 20, 30, 40, 50]}
+          />
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}