@hed-hog/core 0.0.399 → 0.0.400

package/hedhog/frontend/app/dashboard/management/tabs/items-tab.tsx.ejs

@@ -1,5 +1,6 @@
 'use client';
 
+import { SortableTableHead } from '@/components/entity-list';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -45,6 +46,7 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { useDebounce } from '@/hooks/use-debounce';
+import { useTableSort, type SortableColumn } from '@/hooks/use-table-sort';
 import { useFormDraft } from '@/hooks/use-form-draft';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { formatDateTime } from '@/lib/format-date';
@@ -129,6 +131,22 @@ type ComponentListResponse = {
 
 const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 
+/**
+ * Espelha `DASHBOARD_ITEM_SORT`
+ * (`libraries/core/src/dashboard/dashboard-item/dashboard-item.sort.ts`). Os
+ * nomes localizados exibidos (dashboard/componente) ficam de fora — a
+ * ordenação usa o slug da relação to-one.
+ */
+type DashboardItemSortField = 'id' | 'dashboard_slug' | 'component_slug';
+
+const SORT_COLUMNS: readonly SortableColumn<DashboardItemSortField>[] = [
+  { field: 'id', initialOrder: 'desc' },
+  'dashboard_slug',
+  'component_slug',
+];
+
+const DEFAULT_SORT = { field: 'id', order: 'desc' } as const;
+
 export function ItemsTab() {
   const t = useTranslations('core.DashboardManagement');
   const { request, currentLocaleCode, getSettingValue } = useApp();
@@ -184,6 +202,12 @@ export function ItemsTab() {
   const searchQuery = '';
   const debouncedSearch = useDebounce(searchQuery, 500);
 
+  const sort = useTableSort<DashboardItemSortField>({
+    columns: SORT_COLUMNS,
+    defaultSort: DEFAULT_SORT,
+    onSortChange: () => setPage(1),
+  });
+
   const {
     data: paginatedData,
     isLoading,
@@ -195,11 +219,15 @@ export function ItemsTab() {
       pageSize,
       debouncedSearch,
       currentLocaleCode,
+      sort.sortField,
+      sort.sortOrder,
     ],
     queryFn: async () => {
       const params = new URLSearchParams();
       params.set('page', String(page));
       params.set('pageSize', String(pageSize));
+      params.set('sortField', sort.sortField);
+      params.set('sortOrder', sort.sortOrder);
       if (debouncedSearch) params.set('search', debouncedSearch);
 
       const response = await request<{ data: DashboardItem[]; total: number }>({
@@ -592,9 +620,15 @@ export function ItemsTab() {
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>{t('id')}</TableHead>
-              <TableHead>{t('dashboard')}</TableHead>
-              <TableHead>{t('component')}</TableHead>
+              <SortableTableHead label={t('id')} {...sort.getSortProps('id')} />
+              <SortableTableHead
+                label={t('dashboard')}
+                {...sort.getSortProps('dashboard_slug')}
+              />
+              <SortableTableHead
+                label={t('component')}
+                {...sort.getSortProps('component_slug')}
+              />
               <TableHead className="w-25">{t('actions')}</TableHead>
             </TableRow>
           </TableHeader>
@@ -635,6 +669,7 @@ export function ItemsTab() {
                         size="icon"
                         variant="ghost"
                         onClick={() => handleDeleteClick(item.id)}
+                        tooltip={t('delete')}
                       >
                         <IconTrash className="size-4" />
                       </Button>
@@ -697,6 +732,7 @@ export function ItemsTab() {
                 className="size-8"
                 onClick={() => setPage(1)}
                 disabled={page === 1}
+                tooltip={t('goToFirstPage')}
               >
                 <IconChevronsLeft className="size-4" />
               </Button>
@@ -706,6 +742,7 @@ export function ItemsTab() {
                 className="size-8"
                 onClick={() => setPage((p) => Math.max(1, p - 1))}
                 disabled={page === 1}
+                tooltip={t('goToPreviousPage')}
               >
                 <IconChevronLeft className="size-4" />
               </Button>
@@ -715,6 +752,7 @@ export function ItemsTab() {
                 className="size-8"
                 onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                 disabled={page === totalPages}
+                tooltip={t('goToNextPage')}
               >
                 <IconChevronRight className="size-4" />
               </Button>
@@ -724,6 +762,7 @@ export function ItemsTab() {
                 className="size-8"
                 onClick={() => setPage(totalPages)}
                 disabled={page === totalPages}
+                tooltip={t('goToLastPage')}
               >
                 <IconChevronsRight className="size-4" />
               </Button>

package/hedhog/frontend/app/incidents/page.tsx.ejs

@@ -10,6 +10,7 @@ import {
 } from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { DateRangePicker } from '@/components/ui/date-range-picker';
 import { Card, CardContent } from '@/components/ui/card';
 import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
 import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
@@ -23,7 +24,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import { useDebounce } from '@/hooks/use-debounce';
+import { useListUrlState } from '@/hooks/use-list-url-state';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { formatDateTime } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
@@ -73,11 +74,29 @@ export default function IncidentsPage() {
   const t = useTranslations('core.Incidents');
   const { request, getSettingValue } = useApp();
 
-  const [searchTerm, setSearchTerm] = useState('');
-  const [severity, setSeverity] = useState<Severity | 'all'>('all');
-  const [source, setSource] = useState('all');
-  const [status, setStatus] = useState<StatusFilter>('open');
-  const [page, setPage] = useState(1);
+  // Busca, filtros e página vivem na URL: voltar do detalhe de um incidente
+  // recupera a mesma consulta, e o link pode ser passado adiante.
+  const urlState = useListUrlState({
+    filters: {
+      severity: { param: 'severity', defaultValue: 'all' },
+      source: { param: 'source', defaultValue: 'all' },
+      status: { param: 'status', defaultValue: 'open' },
+      from: { param: 'from', defaultValue: '' },
+      to: { param: 'to', defaultValue: '' },
+    },
+  });
+  const {
+    search: searchTerm,
+    setSearch: setSearchTerm,
+    debouncedSearch,
+    page,
+    setPage,
+  } = urlState;
+  const severity = urlState.filters.severity as Severity | 'all';
+  const source = urlState.filters.source;
+  const status = urlState.filters.status as StatusFilter;
+  const dateFrom = urlState.filters.from;
+  const dateTo = urlState.filters.to;
   const [pageSize, setPageSize] = usePersistedPageSize({
     storageKey: 'core-incidents',
     defaultValue: 12,
@@ -86,8 +105,6 @@ export default function IncidentsPage() {
   const [selected, setSelected] = useState<Incident | null>(null);
   const [isDetailOpen, setIsDetailOpen] = useState(false);
 
-  const debouncedSearch = useDebounce(searchTerm);
-
   const { data: summary, refetch: refetchSummary } = useQuery<Summary>({
     queryKey: ['incident-summary'],
     queryFn: async () => {
@@ -102,7 +119,17 @@ export default function IncidentsPage() {
     isLoading,
     refetch,
   } = useQuery<PaginationResult<Incident>>({
-    queryKey: ['incident', debouncedSearch, severity, source, status, page, pageSize],
+    queryKey: [
+      'incident',
+      debouncedSearch,
+      severity,
+      source,
+      status,
+      dateFrom,
+      dateTo,
+      page,
+      pageSize,
+    ],
     queryFn: async () => {
       const response = await request({
         url: '/incident',
@@ -111,6 +138,8 @@ export default function IncidentsPage() {
           severity: severity !== 'all' ? severity : undefined,
           source: source !== 'all' ? source : undefined,
           status,
+          from: dateFrom || undefined,
+          to: dateTo || undefined,
           page,
           pageSize,
         },
@@ -184,10 +213,7 @@ export default function IncidentsPage() {
         id: 'status',
         type: 'select',
         value: status,
-        onChange: (value) => {
-          setStatus(value as StatusFilter);
-          setPage(1);
-        },
+        onChange: (value) => urlState.setFilter('status', value),
         placeholder: t('filterByStatus'),
         options: [
           { value: 'open', label: t('statusOpen') },
@@ -199,10 +225,7 @@ export default function IncidentsPage() {
         id: 'severity',
         type: 'select',
         value: severity,
-        onChange: (value) => {
-          setSeverity(value as Severity | 'all');
-          setPage(1);
-        },
+        onChange: (value) => urlState.setFilter('severity', value),
         placeholder: t('filterBySeverity'),
         options: [
           { value: 'all', label: t('severityAll') },
@@ -215,10 +238,7 @@ export default function IncidentsPage() {
         id: 'source',
         type: 'select',
         value: source,
-        onChange: (value) => {
-          setSource(value);
-          setPage(1);
-        },
+        onChange: (value) => urlState.setFilter('source', value),
         placeholder: t('filterBySource'),
         options: [
           { value: 'all', label: t('sourceAll') },
@@ -229,6 +249,7 @@ export default function IncidentsPage() {
         ],
       },
     ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [status, severity, source, summary, t],
   );
 
@@ -253,16 +274,24 @@ export default function IncidentsPage() {
 
       <KpiCardsGrid items={kpiCards} className="mb-1" />
 
-      <SearchBar
-        searchQuery={searchTerm}
-        onSearchChange={(v) => {
-          setSearchTerm(v);
-          setPage(1);
-        }}
-        onSearch={() => setPage(1)}
-        placeholder={t('searchPlaceholder')}
-        controls={searchControls}
-      />
+      <div className="flex flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex-1">
+          <SearchBar
+            searchQuery={searchTerm}
+            onSearchChange={setSearchTerm}
+            onSearch={() => setPage(1)}
+            placeholder={t('searchPlaceholder')}
+            controls={searchControls}
+          />
+        </div>
+
+        <DateRangePicker
+          fromDate={dateFrom}
+          toDate={dateTo}
+          onFromDateChange={(value) => urlState.setFilter('from', value)}
+          onToDateChange={(value) => urlState.setFilter('to', value)}
+        />
+      </div>
 
       {!isLoading && incidents.length === 0 ? (
         <EmptyState

package/hedhog/frontend/app/integration/profiles/page.tsx.ejs

@@ -2,12 +2,15 @@
 
 import type React from 'react';
 
+import type { SortableColumn } from '@/hooks/use-table-sort';
+
 import {
   EmptyState,
   Page,
   PageHeader,
   PaginationFooter,
   SearchBar,
+  SortableTableHead,
 } from '@/components/entity-list';
 import {
   AlertDialog,
@@ -132,6 +135,23 @@ type ImportValidationResponse = {
 
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 
+/**
+ * Espelha a allowlist de `integration_profile` no backend, conferida contra a
+ * API: um `sortField` inválido devolve 400 listando as colunas válidas.
+ *
+ * "Provedor" fica de fora de propósito. A coluna existe (`provider_id`), mas
+ * ordenaria pelo id do provedor e a tela mostra o nome dele — a seta prometeria
+ * ordem alfabética e entregaria outra coisa.
+ */
+type ProfileSortField = 'name' | 'slug' | 'is_active' | 'updated_at';
+
+const SORT_COLUMNS = [
+  'name',
+  'slug',
+  'is_active',
+  { field: 'updated_at', initialOrder: 'desc' },
+] as const satisfies readonly SortableColumn<ProfileSortField>[];
+
 function getLocaleName(locales: LocaleEntry[], code: string): string {
   return (
     locales.find((l) => l.locale.code === code)?.name ?? locales[0]?.name ?? ''
@@ -180,7 +200,13 @@ function TypeTab({
     search,
     setSearch,
     isLoading,
-  } = usePagination({ url: `/integration-profile?typeId=${typeId}` });
+    sort,
+  } = usePagination<ProfileSortField>({
+    url: `/integration-profile?typeId=${typeId}`,
+    orderField: 'name',
+    orderDirection: 'asc',
+    sortColumns: SORT_COLUMNS,
+  });
 
   useEffect(() => {
     if (refreshKey > 0) refetch();
@@ -277,8 +303,14 @@ function TypeTab({
                     aria-label={t('selectAllVisible')}
                   />
                 </TableHead>
-                <TableHead>{t('tableName')}</TableHead>
-                <TableHead>{t('tableSlug')}</TableHead>
+                <SortableTableHead
+                  label={t('tableName')}
+                  {...sort.getSortProps('name')}
+                />
+                <SortableTableHead
+                  label={t('tableSlug')}
+                  {...sort.getSortProps('slug')}
+                />
                 <TableHead>{t('tableProvider')}</TableHead>
                 <TableHead>
                   {currentLocaleCode.startsWith('pt')
@@ -286,9 +318,15 @@ function TypeTab({
                     : 'Configuration'}
                 </TableHead>
                 <TableHead>{t('tableValidation')}</TableHead>
-                <TableHead>{t('tableStatus')}</TableHead>
+                <SortableTableHead
+                  label={t('tableStatus')}
+                  {...sort.getSortProps('is_active')}
+                />
                 <TableHead className="text-right">{t('tableUses')}</TableHead>
-                <TableHead>{t('tableUpdated')}</TableHead>
+                <SortableTableHead
+                  label={t('tableUpdated')}
+                  {...sort.getSortProps('updated_at')}
+                />
                 <TableHead className="text-right">
                   {t('tableActions')}
                 </TableHead>
@@ -412,6 +450,7 @@ function TypeTab({
                             e.stopPropagation();
                             onEdit(profile);
                           }}
+                          tooltip={t('editProfile')}
                         >
                           <Pencil className="h-4 w-4" />
                         </Button>
@@ -422,6 +461,7 @@ function TypeTab({
                             e.stopPropagation();
                             onDelete(profile.id);
                           }}
+                          tooltip={t('delete')}
                         >
                           <Trash2 className="h-4 w-4 text-destructive" />
                         </Button>

package/hedhog/frontend/app/integrations-webhooks/page.tsx.ejs

@@ -7,7 +7,9 @@ import {
   PageHeader,
   PaginationFooter,
   SearchBar,
+  SortableTableHead,
 } from '@/components/entity-list';
+import type { SortableColumn } from '@/hooks/use-table-sort';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -320,6 +322,37 @@ const defaultMailProfileEditForm = {
   ses_region: '',
 };
 
+/**
+ * Allowlists conferidas contra a API — um `sortField` invalido responde 400
+ * listando as colunas validas — e cada campo verificado reordenando asc x desc
+ * antes de virar cabecalho clicavel.
+ *
+ * Nas entradas, "URL publica", "Seguranca" e "Acoes" ficam de fora: a primeira
+ * ordenaria pelo `public_uuid`, as outras duas sao composicoes de varias
+ * colunas e uma contagem de relacao. Nenhuma delas ordena pelo que mostra.
+ */
+type CatalogSortField =
+  | 'name'
+  | 'module'
+  | 'description'
+  | 'status'
+  | 'updated_at';
+
+const CATALOG_SORT_COLUMNS = [
+  'name',
+  'module',
+  'description',
+  'status',
+  { field: 'updated_at', initialOrder: 'desc' },
+] as const satisfies readonly SortableColumn<CatalogSortField>[];
+
+type IncomingSortField = 'name' | 'status';
+
+const INCOMING_SORT_COLUMNS = [
+  'name',
+  'status',
+] as const satisfies readonly SortableColumn<IncomingSortField>[];
+
 function trimString(value: unknown) {
   return String(value ?? '').trim();
 }
@@ -543,13 +576,19 @@ export default function IntegrationsWebhooksPage() {
     }
   }, [generalSettings]);
 
-  const catalog = usePagination({
+  const catalog = usePagination<CatalogSortField>({
     url: '/integration-event-catalog',
     paginationOptions: { pageSizeOptions },
+    orderField: 'name',
+    orderDirection: 'asc',
+    sortColumns: CATALOG_SORT_COLUMNS,
   });
-  const incoming = usePagination({
+  const incoming = usePagination<IncomingSortField>({
     url: '/webhook-integration',
     paginationOptions: { pageSizeOptions },
+    orderField: 'name',
+    orderDirection: 'asc',
+    sortColumns: INCOMING_SORT_COLUMNS,
   });
   const eventWebhooks = usePagination({
     url: '/event-webhook',
@@ -1750,11 +1789,26 @@ export default function IntegrationsWebhooksPage() {
               <Table>
                 <TableHeader>
                   <TableRow>
-                    <TableHead>{t('eventName')}</TableHead>
-                    <TableHead>{t('module')}</TableHead>
-                    <TableHead>{t('descriptionColumn')}</TableHead>
-                    <TableHead>{t('status')}</TableHead>
-                    <TableHead>{t('updatedAt')}</TableHead>
+                    <SortableTableHead
+                      label={t('eventName')}
+                      {...catalog.sort.getSortProps('name')}
+                    />
+                    <SortableTableHead
+                      label={t('module')}
+                      {...catalog.sort.getSortProps('module')}
+                    />
+                    <SortableTableHead
+                      label={t('descriptionColumn')}
+                      {...catalog.sort.getSortProps('description')}
+                    />
+                    <SortableTableHead
+                      label={t('status')}
+                      {...catalog.sort.getSortProps('status')}
+                    />
+                    <SortableTableHead
+                      label={t('updatedAt')}
+                      {...catalog.sort.getSortProps('updated_at')}
+                    />
                     <TableHead className="text-right">{t('actions')}</TableHead>
                   </TableRow>
                 </TableHeader>
@@ -1788,6 +1842,7 @@ export default function IntegrationsWebhooksPage() {
                           variant="ghost"
                           size="icon"
                           onClick={() => openCatalogEdit(item)}
+                          tooltip={t('editEvent')}
                         >
                           <Pencil className="h-4 w-4" />
                         </Button>
@@ -1801,6 +1856,7 @@ export default function IntegrationsWebhooksPage() {
                               name: item.name,
                             })
                           }
+                          tooltip={t('delete')}
                         >
                           <Trash2 className="h-4 w-4 text-destructive" />
                         </Button>
@@ -1848,11 +1904,17 @@ export default function IntegrationsWebhooksPage() {
               <Table>
                 <TableHeader>
                   <TableRow>
-                    <TableHead>{t('name')}</TableHead>
+                    <SortableTableHead
+                      label={t('name')}
+                      {...incoming.sort.getSortProps('name')}
+                    />
                     <TableHead>{t('publicUrl')}</TableHead>
                     <TableHead>{t('security')}</TableHead>
                     <TableHead>{t('actionsCount')}</TableHead>
-                    <TableHead>{t('status')}</TableHead>
+                    <SortableTableHead
+                      label={t('status')}
+                      {...incoming.sort.getSortProps('status')}
+                    />
                     <TableHead className="text-right">{t('actions')}</TableHead>
                   </TableRow>
                 </TableHeader>
@@ -1899,6 +1961,7 @@ export default function IntegrationsWebhooksPage() {
                           variant="ghost"
                           size="icon"
                           onClick={() => openIncomingEdit(item)}
+                          tooltip={t('editIncoming')}
                         >
                           <Pencil className="h-4 w-4" />
                         </Button>
@@ -1906,6 +1969,7 @@ export default function IntegrationsWebhooksPage() {
                           variant="ghost"
                           size="icon"
                           onClick={() => duplicateIncoming(item)}
+                          tooltip={t('duplicate')}
                         >
                           <Copy className="h-4 w-4" />
                         </Button>
@@ -1919,6 +1983,7 @@ export default function IntegrationsWebhooksPage() {
                               name: item.name,
                             })
                           }
+                          tooltip={t('delete')}
                         >
                           <Trash2 className="h-4 w-4 text-destructive" />
                         </Button>
@@ -2015,6 +2080,7 @@ export default function IntegrationsWebhooksPage() {
                           variant="ghost"
                           size="icon"
                           onClick={() => openEventWebhookEdit(item)}
+                          tooltip={t('editEventWebhook')}
                         >
                           <Pencil className="h-4 w-4" />
                         </Button>
@@ -2022,6 +2088,7 @@ export default function IntegrationsWebhooksPage() {
                           variant="ghost"
                           size="icon"
                           onClick={() => duplicateEventWebhook(item)}
+                          tooltip={t('duplicate')}
                         >
                           <Copy className="h-4 w-4" />
                         </Button>
@@ -2035,6 +2102,7 @@ export default function IntegrationsWebhooksPage() {
                               name: item.name,
                             })
                           }
+                          tooltip={t('delete')}
                         >
                           <Trash2 className="h-4 w-4 text-destructive" />
                         </Button>
@@ -2323,6 +2391,7 @@ export default function IntegrationsWebhooksPage() {
                                       variant="ghost"
                                       size="icon"
                                       onClick={() => removeAllowedIp(index)}
+                                      tooltip={t('removeIp')}
                                     >
                                       <Trash2 className="h-4 w-4" />
                                     </Button>
@@ -2836,8 +2905,7 @@ export default function IntegrationsWebhooksPage() {
                           size="icon"
                           className="h-10 w-10 shrink-0"
                           disabled={!actionForm.integration_profile_id}
-                          aria-label="Editar perfil de e-mail selecionado"
-                          title="Editar perfil de e-mail selecionado"
+                          tooltip={t('editSelectedMailProfile')}
                           onClick={() => {
                             if (actionForm.integration_profile_id) {
                               void openMailProfileEditor(
@@ -2925,8 +2993,7 @@ export default function IntegrationsWebhooksPage() {
                           size="icon"
                           className="h-10 w-10 shrink-0"
                           disabled={!actionForm.mail_id}
-                          aria-label="Editar template de e-mail selecionado"
-                          title="Editar template de e-mail selecionado"
+                          tooltip={t('editSelectedMailTemplate')}
                           onClick={() => {
                             if (actionForm.mail_id) {
                               void openMailTemplateEditor(actionForm.mail_id);
@@ -4306,10 +4373,20 @@ function SortableIncomingActionRow({
       </TableCell>
       <TableCell>{action.order}</TableCell>
       <TableCell className="text-right">
-        <Button variant="ghost" size="icon" onClick={() => onEdit(action)}>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => onEdit(action)}
+          tooltip={t('editAction')}
+        >
           <Pencil className="h-4 w-4" />
         </Button>
-        <Button variant="ghost" size="icon" onClick={onDelete}>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onDelete}
+          tooltip={t('deleteAction')}
+        >
           <Trash2 className="h-4 w-4 text-destructive" />
         </Button>
       </TableCell>