@hed-hog/core 0.0.399 → 0.0.401

package/hedhog/frontend/app/message-templates/page.tsx.ejs

@@ -0,0 +1,182 @@
+'use client';
+
+import { EmptyState, Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { MessageSquareText, Pencil, RotateCcw } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import { MessageTemplateSheet } from './_components/message-template-sheet';
+import type { MessageTemplate } from './_lib/types';
+
+/**
+ * Texto das mensagens que a plataforma manda fora do e-mail.
+ *
+ * A lista vem do REGISTRY, não de um `SELECT`: modelo declarado por uma library
+ * recém-instalada já aparece aqui, antes de existir qualquer linha no banco. A
+ * linha nasce na primeira edição, e é ela que acende o selo "personalizado" e
+ * habilita o "restaurar padrão".
+ *
+ * Sem criar nem apagar de propósito: cada modelo existe porque há código que o
+ * procura pelo slug — criar um pela tela geraria um registro que nada lê.
+ */
+export default function MessageTemplatesPage() {
+  const t = useTranslations('core.MessageTemplatesPage');
+  const { request } = useApp();
+  const [editing, setEditing] = useState<MessageTemplate | null>(null);
+
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: ['core-message-templates'],
+    queryFn: async () => {
+      const response = await request<{ data: MessageTemplate[] }>({
+        url: '/message-templates',
+        method: 'GET',
+      });
+      return response.data;
+    },
+  });
+
+  const templates = useMemo(() => data?.data ?? [], [data]);
+
+  /**
+   * Agrupado por módulo porque a lista passou a ser de todo mundo: sem isso, os
+   * avisos do atendimento e os do comércio ficariam intercalados por slug.
+   */
+  const porModulo = useMemo(() => {
+    const grupos = new Map<string, MessageTemplate[]>();
+
+    for (const template of templates) {
+      const atual = grupos.get(template.module) ?? [];
+      atual.push(template);
+      grupos.set(template.module, atual);
+    }
+
+    return [...grupos.entries()].sort(([a], [b]) => a.localeCompare(b));
+  }, [templates]);
+
+  /** Nome no idioma do painel, com o slug como último recurso. */
+  const nome = (template: MessageTemplate) =>
+    template.name?.pt ?? template.name?.en ?? template.slug;
+
+  const descricao = (template: MessageTemplate) =>
+    template.description?.pt ?? template.description?.en ?? null;
+
+  const restaurar = async (template: MessageTemplate) => {
+    await request({
+      url: `/message-templates/${template.slug}/restore`,
+      method: 'POST',
+    });
+    await refetch();
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: t('breadcrumbDashboard'), href: '/' },
+          { label: t('breadcrumbManagement'), href: '/core/management' },
+          { label: t('breadcrumbCurrent') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+      />
+
+      {isLoading ? (
+        <div className="space-y-3">
+          <Skeleton className="h-24 w-full" />
+          <Skeleton className="h-24 w-full" />
+        </div>
+      ) : templates.length === 0 ? (
+        <EmptyState
+          icon={<MessageSquareText className="h-10 w-10" />}
+          title={t('emptyTitle')}
+          description={t('emptyDescription')}
+        />
+      ) : (
+        <div className="space-y-6">
+          {porModulo.map(([modulo, doModulo]) => (
+            <section className="space-y-3" key={modulo}>
+              <h2 className="text-sm font-medium uppercase tracking-wide text-muted-foreground">
+                {modulo}
+              </h2>
+
+              {doModulo.map((template) => (
+                <Card
+                  key={template.slug}
+                  className="cursor-pointer transition-colors hover:border-primary/40"
+                  onClick={() => setEditing(template)}
+                >
+                  <CardContent className="flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="min-w-0 space-y-1">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <span className="font-medium">{nome(template)}</span>
+                        {template.customized ? (
+                          <Badge variant="outline">{t('customized')}</Badge>
+                        ) : null}
+                        {template.is_active ? null : (
+                          <Badge variant="secondary">{t('inactive')}</Badge>
+                        )}
+                        <code className="text-xs text-muted-foreground">
+                          {template.slug}
+                        </code>
+                      </div>
+                      {descricao(template) ? (
+                        <p className="text-sm text-muted-foreground">
+                          {descricao(template)}
+                        </p>
+                      ) : null}
+                    </div>
+
+                    <div className="flex shrink-0 gap-2">
+                      {template.customized ? (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          tooltip={t('restoreHint')}
+                          onClick={async (event) => {
+                            event.stopPropagation();
+                            await restaurar(template);
+                          }}
+                        >
+                          <RotateCcw className="mr-2 h-4 w-4" />
+                          {t('restore')}
+                        </Button>
+                      ) : null}
+
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          setEditing(template);
+                        }}
+                      >
+                        <Pencil className="mr-2 h-4 w-4" />
+                        {t('edit')}
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </section>
+          ))}
+        </div>
+      )}
+
+      <MessageTemplateSheet
+        open={Boolean(editing)}
+        template={editing}
+        onOpenChange={(open) => {
+          if (!open) setEditing(null);
+        }}
+        onSaved={async () => {
+          await refetch();
+          setEditing(null);
+        }}
+      />
+    </Page>
+  );
+}

package/hedhog/frontend/app/pages/_components/page-wizard-sheet.tsx.ejs

@@ -687,6 +687,7 @@ export function PageWizardSheet({ open, onOpenChange }: PageWizardSheetProps) {
                               ),
                             }))
                           }
+                          tooltip={t('removeColumn')}
                         >
                           <Trash2 className="h-4 w-4" />
                         </Button>

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

@@ -6,6 +6,7 @@ import {
   PageHeader,
   PaginationFooter,
   SearchBar,
+  SortableTableHead,
   ViewModeToggle,
   type SearchBarControl,
 } from '@/components/entity-list';
@@ -23,6 +24,7 @@ import {
 import { useDebounce } from '@/hooks/use-debounce';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { usePersistedViewMode } from '@/hooks/use-persisted-view-mode';
+import { useTableSort, type SortableColumn } from '@/hooks/use-table-sort';
 import { listLibraries } from '@/lib/pages-manifest';
 import { cn } from '@/lib/utils';
 import {
@@ -50,6 +52,35 @@ const PAGE_SIZE_OPTIONS = [12, 24, 48, 96] as const;
 const VIEW_MODES = ['list', 'cards'] as const;
 const ALL = 'all';
 
+/**
+ * Não há endpoint de backend para esta tela — `pages` vem inteiro de um
+ * manifesto estático de rotas do Next.js, cruzado no cliente com menu/role/
+ * route. Sem listagem paginada no servidor para acompanhar, a ordenação é
+ * local, sobre o array já filtrado (`filteredPages`), antes do `.slice()` de
+ * paginação — mesmo padrão de
+ * `finance/accounts-receivable/collections-default/page.tsx`.
+ */
+type SystemPageSortField =
+  | 'route'
+  | 'library'
+  | 'template'
+  | 'menuLabel'
+  | 'menuRoleCount'
+  | 'referencedByCount'
+  | 'endpointsCount';
+
+const SORT_COLUMNS: readonly SortableColumn<SystemPageSortField>[] = [
+  'route',
+  'library',
+  'template',
+  'menuLabel',
+  { field: 'menuRoleCount', initialOrder: 'desc' },
+  { field: 'referencedByCount', initialOrder: 'desc' },
+  { field: 'endpointsCount', initialOrder: 'desc' },
+];
+
+const DEFAULT_SORT = { field: 'route', order: 'asc' } as const;
+
 type MenuStatusFilter = 'all' | 'linked' | 'orphan' | 'residue';
 
 export default function SystemPagesPage() {
@@ -64,6 +95,11 @@ export default function SystemPagesPage() {
   const [menuStatusFilter, setMenuStatusFilter] =
     useState<MenuStatusFilter>(ALL);
   const [page, setPage] = useState(1);
+  const sort = useTableSort<SystemPageSortField>({
+    columns: SORT_COLUMNS,
+    defaultSort: DEFAULT_SORT,
+    onSortChange: () => setPage(1),
+  });
   const [selectedPage, setSelectedPage] = useState<SystemPage | null>(null);
   const [detailOpen, setDetailOpen] = useState(false);
   const [wizardOpen, setWizardOpen] = useState(false);
@@ -115,14 +151,42 @@ export default function SystemPagesPage() {
     });
   }, [debouncedSearch, libraryFilter, menuStatusFilter, pages]);
 
+  const sortedPages = useMemo(() => {
+    const { sortField, sortOrder } = sort;
+    const getValue = (entry: SystemPage): string | number => {
+      switch (sortField) {
+        case 'menuLabel':
+          return entry.menuLabel ?? '';
+        case 'menuRoleCount':
+          return entry.menuRoleCount;
+        case 'referencedByCount':
+          return entry.referencedBy.length;
+        case 'endpointsCount':
+          return entry.endpoints.length;
+        default:
+          return entry[sortField] ?? '';
+      }
+    };
+
+    return [...filteredPages].sort((a, b) => {
+      const aValue = getValue(a);
+      const bValue = getValue(b);
+      const comparison =
+        typeof aValue === 'number' && typeof bValue === 'number'
+          ? aValue - bValue
+          : String(aValue).localeCompare(String(bValue));
+      return sortOrder === 'asc' ? comparison : -comparison;
+    });
+  }, [filteredPages, sort.sortField, sort.sortOrder]);
+
   const totalPages = Math.max(1, Math.ceil(filteredPages.length / pageSize));
   // Paginação client-side: a página válida é derivada no render, sem efeito de
   // correção — filtrar nunca deixa o usuário preso numa página inexistente.
   const safePage = Math.min(page, totalPages);
 
   const visiblePages = useMemo(
-    () => filteredPages.slice((safePage - 1) * pageSize, safePage * pageSize),
-    [filteredPages, safePage, pageSize]
+    () => sortedPages.slice((safePage - 1) * pageSize, safePage * pageSize),
+    [sortedPages, safePage, pageSize]
   );
 
   const stats = useMemo(() => {
@@ -306,13 +370,34 @@ export default function SystemPagesPage() {
               <Table>
                 <TableHeader>
                   <TableRow>
-                    <TableHead>{t('columnRoute')}</TableHead>
-                    <TableHead>{t('columnLibrary')}</TableHead>
-                    <TableHead>{t('columnTemplate')}</TableHead>
-                    <TableHead>{t('columnMenu')}</TableHead>
-                    <TableHead>{t('columnRoles')}</TableHead>
-                    <TableHead>{t('columnReferences')}</TableHead>
-                    <TableHead>{t('columnEndpoints')}</TableHead>
+                    <SortableTableHead
+                      label={t('columnRoute')}
+                      {...sort.getSortProps('route')}
+                    />
+                    <SortableTableHead
+                      label={t('columnLibrary')}
+                      {...sort.getSortProps('library')}
+                    />
+                    <SortableTableHead
+                      label={t('columnTemplate')}
+                      {...sort.getSortProps('template')}
+                    />
+                    <SortableTableHead
+                      label={t('columnMenu')}
+                      {...sort.getSortProps('menuLabel')}
+                    />
+                    <SortableTableHead
+                      label={t('columnRoles')}
+                      {...sort.getSortProps('menuRoleCount')}
+                    />
+                    <SortableTableHead
+                      label={t('columnReferences')}
+                      {...sort.getSortProps('referencedByCount')}
+                    />
+                    <SortableTableHead
+                      label={t('columnEndpoints')}
+                      {...sort.getSortProps('endpointsCount')}
+                    />
                   </TableRow>
                 </TableHeader>
                 <TableBody>

package/hedhog/frontend/app/roles/menus.tsx.ejs

@@ -516,8 +516,8 @@ export function RoleMenusSection({
               size="icon"
               onClick={() => setPage(1)}
               disabled={page === 1}
+              tooltip={t('goToFirstPage')}
             >
-              <span className="sr-only">{t('goToFirstPage')}</span>
               <ChevronsLeft className="size-4" />
             </Button>
             <Button
@@ -526,8 +526,8 @@ export function RoleMenusSection({
               size="icon"
               onClick={() => setPage(page - 1)}
               disabled={page === 1}
+              tooltip={t('goToPreviousPage')}
             >
-              <span className="sr-only">{t('goToPreviousPage')}</span>
               <ChevronLeft className="size-4" />
             </Button>
             <Button
@@ -536,8 +536,8 @@ export function RoleMenusSection({
               size="icon"
               onClick={() => setPage(page + 1)}
               disabled={page >= totalPages}
+              tooltip={t('goToNextPage')}
             >
-              <span className="sr-only">{t('goToNextPage')}</span>
               <ChevronRight className="size-4" />
             </Button>
             <Button
@@ -546,8 +546,8 @@ export function RoleMenusSection({
               size="icon"
               onClick={() => setPage(totalPages)}
               disabled={page >= totalPages}
+              tooltip={t('goToLastPage')}
             >
-              <span className="sr-only">{t('goToLastPage')}</span>
               <ChevronsRight className="size-4" />
             </Button>
           </div>

package/hedhog/frontend/app/roles/routes.tsx.ejs

@@ -405,8 +405,8 @@ export function RoleRoutesSection({
               size="icon"
               onClick={() => setPage(1)}
               disabled={page === 1}
+              tooltip={t('goToFirstPage')}
             >
-              <span className="sr-only">{t('goToFirstPage')}</span>
               <ChevronsLeft className="size-4" />
             </Button>
             <Button
@@ -415,8 +415,8 @@ export function RoleRoutesSection({
               size="icon"
               onClick={() => setPage(page - 1)}
               disabled={page === 1}
+              tooltip={t('goToPreviousPage')}
             >
-              <span className="sr-only">{t('goToPreviousPage')}</span>
               <ChevronLeft className="size-4" />
             </Button>
             <Button
@@ -425,8 +425,8 @@ export function RoleRoutesSection({
               size="icon"
               onClick={() => setPage(page + 1)}
               disabled={page >= totalPages}
+              tooltip={t('goToNextPage')}
             >
-              <span className="sr-only">{t('goToNextPage')}</span>
               <ChevronRight className="size-4" />
             </Button>
             <Button
@@ -435,8 +435,8 @@ export function RoleRoutesSection({
               size="icon"
               onClick={() => setPage(totalPages)}
               disabled={page >= totalPages}
+              tooltip={t('goToLastPage')}
             >
-              <span className="sr-only">{t('goToLastPage')}</span>
               <ChevronsRight className="size-4" />
             </Button>
           </div>

package/hedhog/frontend/app/roles/users.tsx.ejs

@@ -309,8 +309,8 @@ export function RoleUsersSection({
               size="icon"
               onClick={() => setPage(1)}
               disabled={page === 1}
+              tooltip={t('goToFirstPage')}
             >
-              <span className="sr-only">{t('goToFirstPage')}</span>
               <ChevronsLeft className="size-4" />
             </Button>
             <Button
@@ -319,8 +319,8 @@ export function RoleUsersSection({
               size="icon"
               onClick={() => setPage(page - 1)}
               disabled={page === 1}
+              tooltip={t('goToPreviousPage')}
             >
-              <span className="sr-only">{t('goToPreviousPage')}</span>
               <ChevronLeft className="size-4" />
             </Button>
             <Button
@@ -329,8 +329,8 @@ export function RoleUsersSection({
               size="icon"
               onClick={() => setPage(page + 1)}
               disabled={page >= totalPages}
+              tooltip={t('goToNextPage')}
             >
-              <span className="sr-only">{t('goToNextPage')}</span>
               <ChevronRight className="size-4" />
             </Button>
             <Button
@@ -339,8 +339,8 @@ export function RoleUsersSection({
               size="icon"
               onClick={() => setPage(totalPages)}
               disabled={page >= totalPages}
+              tooltip={t('goToLastPage')}
             >
-              <span className="sr-only">{t('goToLastPage')}</span>
               <ChevronsRight className="size-4" />
             </Button>
           </div>

package/hedhog/frontend/app/setting-list/page.tsx.ejs

@@ -7,6 +7,7 @@ import {
   PageHeader,
   PaginationFooter,
   SearchBar,
+  SortableTableHead,
   ViewModeToggle,
 } from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
@@ -31,6 +32,7 @@ import {
 } from '@/components/ui/table';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { usePersistedViewMode } from '@/hooks/use-persisted-view-mode';
+import { useTableSort, type SortableColumn } from '@/hooks/use-table-sort';
 import { PaginatedResult } from '@/types/pagination-result';
 import {
   closestCenter,
@@ -92,11 +94,34 @@ const createEmptyPage = <T,>(pageSize: number): PaginatedResult<T> => ({
 
 const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 
+/**
+ * `/setting?page=1&pageSize=500` busca tudo de uma vez e a página filtra/
+ * pagina inteiramente no cliente (`.slice()`) — não há listagem paginada no
+ * servidor para acompanhar. A ordenação é local, sobre `filteredSettings`,
+ * antes do `.slice()`, mesmo padrão de
+ * `finance/accounts-receivable/collections-default/page.tsx`.
+ */
+type SettingListSortField = 'name' | 'group' | 'component' | 'itemCount';
+
+const SORT_COLUMNS: readonly SortableColumn<SettingListSortField>[] = [
+  'name',
+  'group',
+  'component',
+  { field: 'itemCount', initialOrder: 'desc' },
+];
+
+const DEFAULT_SORT = { field: 'name', order: 'asc' } as const;
+
 export default function CoreSettingListPage() {
   const t = useTranslations('core.SettingListPage');
   const { request, currentLocaleCode, showToastHandler } = useApp();
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(1);
+  const sort = useTableSort<SettingListSortField>({
+    columns: SORT_COLUMNS,
+    defaultSort: DEFAULT_SORT,
+    onSortChange: () => setPage(1),
+  });
   const { data: generalSettings } = useQuery<{
     data: Array<{ slug: string; value: string }>;
   }>({
@@ -221,9 +246,35 @@ export default function CoreSettingListPage() {
     setPage(1);
   }, [search]);
 
+  const sortedSettings = useMemo(() => {
+    const { sortField, sortOrder } = sort;
+    const getValue = (setting: SettingWithList): string | number => {
+      switch (sortField) {
+        case 'group':
+          return setting.setting_group?.name ?? setting.setting_group?.slug ?? '';
+        case 'itemCount':
+          return setting.setting_list?.length ?? 0;
+        case 'component':
+          return setting.component ?? '';
+        default:
+          return setting.name ?? setting.slug ?? '';
+      }
+    };
+
+    return [...filteredSettings].sort((a, b) => {
+      const aValue = getValue(a);
+      const bValue = getValue(b);
+      const comparison =
+        typeof aValue === 'number' && typeof bValue === 'number'
+          ? aValue - bValue
+          : String(aValue).localeCompare(String(bValue));
+      return sortOrder === 'asc' ? comparison : -comparison;
+    });
+  }, [filteredSettings, sort.sortField, sort.sortOrder]);
+
   const paginatedSettings = useMemo(
-    () => filteredSettings.slice((page - 1) * pageSize, page * pageSize),
-    [filteredSettings, page, pageSize]
+    () => sortedSettings.slice((page - 1) * pageSize, page * pageSize),
+    [sortedSettings, page, pageSize]
   );
 
   const editingSetting = useMemo(
@@ -394,12 +445,23 @@ export default function CoreSettingListPage() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>{t('columns.name')}</TableHead>
-                <TableHead>{t('columns.group')}</TableHead>
-                <TableHead>{t('columns.type')}</TableHead>
-                <TableHead className="text-right">
-                  {t('columns.items')}
-                </TableHead>
+                <SortableTableHead
+                  label={t('columns.name')}
+                  {...sort.getSortProps('name')}
+                />
+                <SortableTableHead
+                  label={t('columns.group')}
+                  {...sort.getSortProps('group')}
+                />
+                <SortableTableHead
+                  label={t('columns.type')}
+                  {...sort.getSortProps('component')}
+                />
+                <SortableTableHead
+                  label={t('columns.items')}
+                  align="right"
+                  {...sort.getSortProps('itemCount')}
+                />
                 <TableHead className="w-30" />
               </TableRow>
             </TableHeader>
@@ -679,7 +741,7 @@ function SortableOptionItem({
         size="icon"
         variant="ghost"
         onClick={() => onRemove(option.id)}
-        aria-label={removeLabel}
+        tooltip={removeLabel}
       >
         <Trash2 className="h-4 w-4" />
       </Button>