@hed-hog/core 0.0.398 → 0.0.400

package/hedhog/frontend/app/dashboard/dashboard-home-tabs.tsx.ejs

@@ -46,6 +46,11 @@ import {
 import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { useDebounce } from '@/hooks/use-debounce';
 import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
@@ -1078,30 +1083,36 @@ export function DashboardHomeTabs() {
                                 {tabContent}
                               </TabsTrigger>
                               <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                  <Button
-                                    type="button"
-                                    variant="ghost"
-                                    size="icon"
-                                    className={cn(
-                                      'absolute top-1/2 right-1 z-10 size-7 -translate-y-1/2 rounded-md text-muted-foreground hover:text-foreground',
-                                      isActiveTab
-                                        ? 'bg-background/80'
-                                        : 'bg-transparent hover:bg-background/60'
-                                    )}
-                                    onClick={(event) => {
-                                      event.stopPropagation();
-                                      setActiveSlug(dashboard.slug);
-                                    }}
-                                    onPointerDown={(event) =>
-                                      event.stopPropagation()
-                                    }
-                                    aria-label={t('tabActions')}
-                                    title={t('tabActions')}
-                                  >
-                                    <MoreHorizontal className="size-4" />
-                                  </Button>
-                                </DropdownMenuTrigger>
+                                <Tooltip>
+                                  <TooltipTrigger asChild>
+                                    <DropdownMenuTrigger asChild>
+                                      <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        className={cn(
+                                          'absolute top-1/2 right-1 z-10 size-7 -translate-y-1/2 rounded-md text-muted-foreground hover:text-foreground',
+                                          isActiveTab
+                                            ? 'bg-background/80'
+                                            : 'bg-transparent hover:bg-background/60'
+                                        )}
+                                        onClick={(event) => {
+                                          event.stopPropagation();
+                                          setActiveSlug(dashboard.slug);
+                                        }}
+                                        onPointerDown={(event) =>
+                                          event.stopPropagation()
+                                        }
+                                        aria-label={t('tabActions')}
+                                      >
+                                        <MoreHorizontal className="size-4" />
+                                      </Button>
+                                    </DropdownMenuTrigger>
+                                  </TooltipTrigger>
+                                  <TooltipContent>
+                                    {t('tabActions')}
+                                  </TooltipContent>
+                                </Tooltip>
                                 <DropdownMenuContent
                                   align="end"
                                   className="w-56"
@@ -1473,12 +1484,9 @@ export function DashboardHomeTabs() {
                 className="w-full"
                 onClick={handleCreateDashboard}
                 disabled={isCreating}
+                loading={isCreating}
               >
-                {isCreating ? (
-                  <Loader2 className="size-4 animate-spin" />
-                ) : (
-                  <Plus className="size-4" />
-                )}
+                <Plus className="size-4" />
                 {t('createDashboard')}
               </Button>
             </div>
@@ -1590,12 +1598,9 @@ export function DashboardHomeTabs() {
                 className="w-full"
                 onClick={() => void handleSaveDashboardIcon()}
                 disabled={isSavingIcon || Boolean(iconValue.trim()) === false}
+                loading={isSavingIcon}
               >
-                {isSavingIcon ? (
-                  <Loader2 className="size-4 animate-spin" />
-                ) : (
-                  <Palette className="size-4" />
-                )}
+                <Palette className="size-4" />
                 {t('saveIcon')}
               </Button>
             </div>
@@ -1705,12 +1710,9 @@ export function DashboardHomeTabs() {
                               className="cursor-pointer"
                               onClick={() => void handleRevokeShare(user.id)}
                               disabled={revokingUserId === user.id}
+                              loading={revokingUserId === user.id}
                             >
-                              {revokingUserId === user.id ? (
-                                <Loader2 className="size-4 animate-spin" />
-                              ) : (
-                                <Trash2 className="size-4" />
-                              )}
+                              <Trash2 className="size-4" />
                             </Button>
                           ) : null}
                         </div>
@@ -1886,12 +1888,9 @@ export function DashboardHomeTabs() {
                       disabled={
                         isSharingUsers || selectedShareUserIds.length === 0
                       }
+                      loading={isSharingUsers}
                     >
-                      {isSharingUsers ? (
-                        <Loader2 className="size-4 animate-spin" />
-                      ) : (
-                        <UserPlus className="size-4" />
-                      )}
+                      <UserPlus className="size-4" />
                       {t('shareSelectedUsers', {
                         count: selectedShareUserIds.length,
                       })}

package/hedhog/frontend/app/dashboard/management/tabs/component-roles-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';
@@ -136,6 +138,21 @@ type RequestError = {
 
 const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 
+/**
+ * Espelha `DASHBOARD_COMPONENT_ROLE_SORT`
+ * (`libraries/core/src/dashboard/dashboard-component-role/dashboard-component-role.sort.ts`).
+ * Nomes localizados ficam de fora — a ordenação usa o slug da relação to-one.
+ */
+type ComponentRoleSortField = 'id' | 'component_slug' | 'role_slug';
+
+const SORT_COLUMNS: readonly SortableColumn<ComponentRoleSortField>[] = [
+  { field: 'id', initialOrder: 'desc' },
+  'component_slug',
+  'role_slug',
+];
+
+const DEFAULT_SORT = { field: 'id', order: 'desc' } as const;
+
 export function ComponentRolesTab() {
   const t = useTranslations('core.DashboardManagement');
   const { request, currentLocaleCode, getSettingValue } = useApp();
@@ -187,6 +204,12 @@ export function ComponentRolesTab() {
   const searchQuery = '';
   const debouncedSearch = useDebounce(searchQuery, 500);
 
+  const sort = useTableSort<ComponentRoleSortField>({
+    columns: SORT_COLUMNS,
+    defaultSort: DEFAULT_SORT,
+    onSortChange: () => setPage(1),
+  });
+
   const {
     data: paginatedData,
     isLoading,
@@ -198,11 +221,15 @@ export function ComponentRolesTab() {
       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: ComponentRole[]; total: number }>({
@@ -483,9 +510,15 @@ export function ComponentRolesTab() {
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>ID</TableHead>
-              <TableHead>{t('component')}</TableHead>
-              <TableHead>{t('role')}</TableHead>
+              <SortableTableHead label="ID" {...sort.getSortProps('id')} />
+              <SortableTableHead
+                label={t('component')}
+                {...sort.getSortProps('component_slug')}
+              />
+              <SortableTableHead
+                label={t('role')}
+                {...sort.getSortProps('role_slug')}
+              />
               <TableHead className="w-25">{t('actions')}</TableHead>
             </TableRow>
           </TableHeader>
@@ -528,6 +561,7 @@ export function ComponentRolesTab() {
                         size="icon"
                         variant="ghost"
                         onClick={() => handleDeleteClick(role.id)}
+                        tooltip={t('delete')}
                       >
                         <IconTrash className="size-4" />
                       </Button>
@@ -590,6 +624,7 @@ export function ComponentRolesTab() {
                 className="size-8"
                 onClick={() => setPage(1)}
                 disabled={page === 1}
+                tooltip={t('goToFirstPage')}
               >
                 <IconChevronsLeft className="size-4" />
               </Button>
@@ -599,6 +634,7 @@ export function ComponentRolesTab() {
                 className="size-8"
                 onClick={() => setPage((p) => Math.max(1, p - 1))}
                 disabled={page === 1}
+                tooltip={t('goToPreviousPage')}
               >
                 <IconChevronLeft className="size-4" />
               </Button>
@@ -608,6 +644,7 @@ export function ComponentRolesTab() {
                 className="size-8"
                 onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                 disabled={page === totalPages}
+                tooltip={t('goToNextPage')}
               >
                 <IconChevronRight className="size-4" />
               </Button>
@@ -617,6 +654,7 @@ export function ComponentRolesTab() {
                 className="size-8"
                 onClick={() => setPage(totalPages)}
                 disabled={page === totalPages}
+                tooltip={t('goToLastPage')}
               >
                 <IconChevronsRight className="size-4" />
               </Button>

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { SortableTableHead } from '@/components/entity-list';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -54,6 +55,7 @@ import {
 } from '@/components/ui/tooltip';
 import { useDebounce } from '@/hooks/use-debounce';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { useTableSort, type SortableColumn } from '@/hooks/use-table-sort';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import * as TablerIcons from '@tabler/icons-react';
 import {
@@ -113,6 +115,22 @@ interface RoleOption {
 
 const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 
+/**
+ * `DashboardComponentService.getAllComponents` não passa `options.sort` ao
+ * `paginate()`, então `slug`/`is_resizable` (colunas flat) já são aceitos em
+ * `sortField` sem allowlist própria. Nome (`dashboard_component_locale`,
+ * relação), tamanho (largura×altura combinados) e papel (multi-valorado)
+ * ficam de fora.
+ */
+type ComponentSortField = 'slug' | 'is_resizable';
+
+const SORT_COLUMNS: readonly SortableColumn<ComponentSortField>[] = [
+  'slug',
+  'is_resizable',
+];
+
+const DEFAULT_SORT = { field: 'slug', order: 'asc' } as const;
+
 export function ComponentsTab() {
   const t = useTranslations('core.DashboardManagement');
   const { request, locales, currentLocaleCode } = useApp();
@@ -201,6 +219,12 @@ export function ComponentsTab() {
     return <TablerIcons.IconBox className="h-4 w-4" />;
   };
 
+  const sort = useTableSort<ComponentSortField>({
+    columns: SORT_COLUMNS,
+    defaultSort: DEFAULT_SORT,
+    onSortChange: () => setPage(1),
+  });
+
   const {
     data: paginatedData,
     isLoading,
@@ -212,11 +236,15 @@ export function ComponentsTab() {
       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: Component[]; total: number }>({
@@ -752,10 +780,16 @@ export function ComponentsTab() {
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>{t('slug')}</TableHead>
+              <SortableTableHead
+                label={t('slug')}
+                {...sort.getSortProps('slug')}
+              />
               <TableHead>{t('name')}</TableHead>
               <TableHead>{t('size')}</TableHead>
-              <TableHead>{t('resizable')}</TableHead>
+              <SortableTableHead
+                label={t('resizable')}
+                {...sort.getSortProps('is_resizable')}
+              />
               <TableHead>{t('role')}</TableHead>
               <TableHead style={{ width: 100 }}>{t('actions')}</TableHead>
             </TableRow>
@@ -889,6 +923,7 @@ export function ComponentsTab() {
                           size="icon"
                           variant="ghost"
                           onClick={() => handleEdit(component)}
+                          tooltip={t('editComponent')}
                         >
                           <IconEdit className="size-4" />
                         </Button>
@@ -896,6 +931,7 @@ export function ComponentsTab() {
                           size="icon"
                           variant="ghost"
                           onClick={() => handleDeleteClick(component.id)}
+                          tooltip={t('delete')}
                         >
                           <IconTrash className="size-4" />
                         </Button>
@@ -959,6 +995,7 @@ export function ComponentsTab() {
                 className="size-8"
                 onClick={() => setPage(1)}
                 disabled={page === 1}
+                tooltip={t('goToFirstPage')}
               >
                 <IconChevronsLeft className="size-4" />
               </Button>
@@ -968,6 +1005,7 @@ export function ComponentsTab() {
                 className="size-8"
                 onClick={() => setPage((p) => Math.max(1, p - 1))}
                 disabled={page === 1}
+                tooltip={t('goToPreviousPage')}
               >
                 <IconChevronLeft className="size-4" />
               </Button>
@@ -977,6 +1015,7 @@ export function ComponentsTab() {
                 className="size-8"
                 onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                 disabled={page === totalPages}
+                tooltip={t('goToNextPage')}
               >
                 <IconChevronRight className="size-4" />
               </Button>
@@ -986,6 +1025,7 @@ export function ComponentsTab() {
                 className="size-8"
                 onClick={() => setPage(totalPages)}
                 disabled={page === totalPages}
+                tooltip={t('goToLastPage')}
               >
                 <IconChevronsRight className="size-4" />
               </Button>

package/hedhog/frontend/app/dashboard/management/tabs/dashboard-roles-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';
@@ -135,6 +137,21 @@ type RequestError = {
 
 const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 
+/**
+ * Espelha `DASHBOARD_ROLE_SORT`
+ * (`libraries/core/src/dashboard/dashboard-role/dashboard-role.sort.ts`).
+ * Nomes localizados ficam de fora — a ordenação usa o slug da relação to-one.
+ */
+type DashboardRoleSortField = 'id' | 'dashboard_slug' | 'role_slug';
+
+const SORT_COLUMNS: readonly SortableColumn<DashboardRoleSortField>[] = [
+  { field: 'id', initialOrder: 'desc' },
+  'dashboard_slug',
+  'role_slug',
+];
+
+const DEFAULT_SORT = { field: 'id', order: 'desc' } as const;
+
 export function DashboardRolesTab() {
   const t = useTranslations('core.DashboardManagement');
   const { request, currentLocaleCode, getSettingValue } = useApp();
@@ -186,6 +203,12 @@ export function DashboardRolesTab() {
   const searchQuery = '';
   const debouncedSearch = useDebounce(searchQuery, 500);
 
+  const sort = useTableSort<DashboardRoleSortField>({
+    columns: SORT_COLUMNS,
+    defaultSort: DEFAULT_SORT,
+    onSortChange: () => setPage(1),
+  });
+
   const {
     data: paginatedData,
     isLoading,
@@ -197,11 +220,15 @@ export function DashboardRolesTab() {
       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: DashboardRole[]; total: number }>({
@@ -482,9 +509,15 @@ export function DashboardRolesTab() {
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>ID</TableHead>
-              <TableHead>{t('dashboard')}</TableHead>
-              <TableHead>{t('role')}</TableHead>
+              <SortableTableHead label="ID" {...sort.getSortProps('id')} />
+              <SortableTableHead
+                label={t('dashboard')}
+                {...sort.getSortProps('dashboard_slug')}
+              />
+              <SortableTableHead
+                label={t('role')}
+                {...sort.getSortProps('role_slug')}
+              />
               <TableHead className="w-25">{t('actions')}</TableHead>
             </TableRow>
           </TableHeader>
@@ -527,6 +560,7 @@ export function DashboardRolesTab() {
                         size="icon"
                         variant="ghost"
                         onClick={() => handleDeleteClick(role.id)}
+                        tooltip={t('delete')}
                       >
                         <IconTrash className="size-4" />
                       </Button>
@@ -589,6 +623,7 @@ export function DashboardRolesTab() {
                 className="size-8"
                 onClick={() => setPage(1)}
                 disabled={page === 1}
+                tooltip={t('goToFirstPage')}
               >
                 <IconChevronsLeft className="size-4" />
               </Button>
@@ -598,6 +633,7 @@ export function DashboardRolesTab() {
                 className="size-8"
                 onClick={() => setPage((p) => Math.max(1, p - 1))}
                 disabled={page === 1}
+                tooltip={t('goToPreviousPage')}
               >
                 <IconChevronLeft className="size-4" />
               </Button>
@@ -607,6 +643,7 @@ export function DashboardRolesTab() {
                 className="size-8"
                 onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                 disabled={page === totalPages}
+                tooltip={t('goToNextPage')}
               >
                 <IconChevronRight className="size-4" />
               </Button>
@@ -616,6 +653,7 @@ export function DashboardRolesTab() {
                 className="size-8"
                 onClick={() => setPage(totalPages)}
                 disabled={page === totalPages}
+                tooltip={t('goToLastPage')}
               >
                 <IconChevronsRight className="size-4" />
               </Button>

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { SortableTableHead } from '@/components/entity-list';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -54,6 +55,7 @@ import {
 } from '@/components/ui/tooltip';
 import { useDebounce } from '@/hooks/use-debounce';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { useTableSort, type SortableColumn } from '@/hooks/use-table-sort';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
   IconChevronLeft,
@@ -100,6 +102,23 @@ interface RoleOption {
 
 const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 
+/**
+ * `DashboardService.getAllDashboards` não passa `options.sort` ao
+ * `paginate()`, então qualquer coluna flat do model já é aceita em
+ * `sortField` sem allowlist própria. Nome (`dashboard_locale`, relação) e
+ * papel (multi-valorado) ficam de fora: o primeiro exigiria filtrar o
+ * `include` por idioma (e adicionar `@Locale()` ao endpoint, uma mudança
+ * maior que esta tarefa pede), o segundo não é um valor único por linha.
+ */
+type DashboardSortField = 'id' | 'slug';
+
+const SORT_COLUMNS: readonly SortableColumn<DashboardSortField>[] = [
+  { field: 'id', initialOrder: 'desc' },
+  'slug',
+];
+
+const DEFAULT_SORT = { field: 'id', order: 'desc' } as const;
+
 export function DashboardsTab() {
   const t = useTranslations('core.DashboardManagement');
   const { request, locales, currentLocaleCode } = useApp();
@@ -160,6 +179,11 @@ export function DashboardsTab() {
   const [searchQuery, setSearchQuery] = useState('');
   const [roleSearchQuery, setRoleSearchQuery] = useState('');
   const debouncedSearch = useDebounce(searchQuery, 500);
+  const sort = useTableSort<DashboardSortField>({
+    columns: SORT_COLUMNS,
+    defaultSort: DEFAULT_SORT,
+    onSortChange: () => setPage(1),
+  });
 
   const {
     data: paginatedData,
@@ -172,11 +196,15 @@ export function DashboardsTab() {
       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: Dashboard[]; total: number }>({
@@ -513,8 +541,11 @@ export function DashboardsTab() {
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>{t('id')}</TableHead>
-              <TableHead>{t('slug')}</TableHead>
+              <SortableTableHead label={t('id')} {...sort.getSortProps('id')} />
+              <SortableTableHead
+                label={t('slug')}
+                {...sort.getSortProps('slug')}
+              />
               <TableHead>{t('name')}</TableHead>
               <TableHead>{t('role')}</TableHead>
               <TableHead className="w-25">{t('actions')}</TableHead>
@@ -631,7 +662,7 @@ export function DashboardsTab() {
                           size="icon"
                           variant="ghost"
                           onClick={() => handleEdit(dashboard)}
-                          title={t('editDashboardTitle')}
+                          tooltip={t('editDashboardTitle')}
                         >
                           <IconEdit className="size-4" />
                         </Button>
@@ -639,7 +670,7 @@ export function DashboardsTab() {
                           size="icon"
                           variant="ghost"
                           onClick={() => handleDeleteClick(dashboard.id)}
-                          title={t('deleteDashboardTitle')}
+                          tooltip={t('deleteDashboardTitle')}
                         >
                           <IconTrash className="size-4" />
                         </Button>
@@ -703,6 +734,7 @@ export function DashboardsTab() {
                 className="size-8"
                 onClick={() => setPage(1)}
                 disabled={page === 1}
+                tooltip={t('goToFirstPage')}
               >
                 <IconChevronsLeft className="size-4" />
               </Button>
@@ -712,6 +744,7 @@ export function DashboardsTab() {
                 className="size-8"
                 onClick={() => setPage((p) => Math.max(1, p - 1))}
                 disabled={page === 1}
+                tooltip={t('goToPreviousPage')}
               >
                 <IconChevronLeft className="size-4" />
               </Button>
@@ -721,6 +754,7 @@ export function DashboardsTab() {
                 className="size-8"
                 onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                 disabled={page === totalPages}
+                tooltip={t('goToNextPage')}
               >
                 <IconChevronRight className="size-4" />
               </Button>
@@ -730,6 +764,7 @@ export function DashboardsTab() {
                 className="size-8"
                 onClick={() => setPage(totalPages)}
                 disabled={page === totalPages}
+                tooltip={t('goToLastPage')}
               >
                 <IconChevronsRight className="size-4" />
               </Button>