@hed-hog/core 0.0.399 → 0.0.401

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

@@ -1,7 +1,9 @@
 'use client';
 
 import {
+  ColumnsVisibilityMenu,
   EmptyState,
+  EntityTable,
   Page,
   PageHeader,
   PaginationFooter,
@@ -19,21 +21,18 @@ import {
 } from '@/components/ui/card';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Skeleton } from '@/components/ui/skeleton';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
+import {
+  useEntityColumnTable,
+  type EntityColumnMeta,
+} from '@/hooks/use-entity-column-table';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { useTableSort, type SortableColumn } from '@/hooks/use-table-sort';
 import { formatDateTime } from '@/lib/format-date';
 import { PresenceDot } from '@/components/presence/presence-dot';
 import { usePresence } from '@/components/presence/use-presence';
@@ -42,12 +41,7 @@ import { getUserEmail } from '@/lib/get-user-email';
 import { PaginatedResult } from '@/types/pagination-result';
 import { User, UserMfa } from '@hed-hog/api-types';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  type ColumnDef,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
+import { type ColumnDef } from '@tanstack/react-table';
 import { formatDistanceToNow } from 'date-fns';
 import { enUS, ptBR } from 'date-fns/locale';
 import {
@@ -81,6 +75,22 @@ type RequestResponse<T> = {
 
 const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 
+/**
+ * Reaproveita o `USER_SORT` do backend. `email` fica de fora: mora em
+ * `user_identifier` (relação to-many filtrada por tipo), sem coluna própria em
+ * `user` para ordenar. `passwordReset` também fica de fora: é booleano
+ * calculado no service, não uma coluna.
+ */
+type UserSortField = 'name' | 'suspended_until' | 'last_login_at';
+
+const SORT_COLUMNS: readonly SortableColumn<UserSortField>[] = [
+  'name',
+  'suspended_until',
+  { field: 'last_login_at', initialOrder: 'desc' },
+];
+
+const DEFAULT_SORT = { field: 'name', order: 'asc' } as const;
+
 export default function UserPage() {
   const t = useTranslations('core.UserPage');
   const simulationT = useTranslations('core.AccessSimulation');
@@ -94,6 +104,11 @@ export default function UserPage() {
   const { canSimulateAccess } = useImpersonationAccess();
 
   const [page, setPage] = useState(1);
+  const sort = useTableSort<UserSortField>({
+    columns: SORT_COLUMNS,
+    defaultSort: DEFAULT_SORT,
+    onSortChange: () => setPage(1),
+  });
   const { data: generalSettings } = useQuery<{
     data: Array<{ slug: string; value: string }>;
   }>({
@@ -132,12 +147,21 @@ export default function UserPage() {
   const [statusFilter, setStatusFilter] = useState('all');
 
   useEffect(() => {
-    try {
-      const saved = window.localStorage.getItem(USER_VIEW_STORAGE_KEY);
-      if (saved === 'table' || saved === 'cards') setViewMode(saved);
-    } catch {
-      // Ignore storage read failures.
-    }
+    // Deferred via setTimeout, not called synchronously in the effect body:
+    // reading the persisted mode after mount (never during the render that
+    // produced the SSR-consistent 'table' default) is what avoids a
+    // hydration mismatch here — see the same technique in
+    // `usePersistedViewMode`.
+    const timeout = window.setTimeout(() => {
+      try {
+        const saved = window.localStorage.getItem(USER_VIEW_STORAGE_KEY);
+        if (saved === 'table' || saved === 'cards') setViewMode(saved);
+      } catch {
+        // Ignore storage read failures.
+      }
+    }, 0);
+
+    return () => window.clearTimeout(timeout);
   }, []);
 
   const handleViewModeChange = (value: string) => {
@@ -165,6 +189,8 @@ export default function UserPage() {
       searchQuery,
       statusFilter,
       currentLocaleCode,
+      sort.sortField,
+      sort.sortOrder,
     ],
     queryFn: async () => {
       const params = new URLSearchParams();
@@ -173,6 +199,8 @@ export default function UserPage() {
       if (searchQuery) params.set('search', searchQuery);
       if (statusFilter && statusFilter !== 'all')
         params.set('filter', statusFilter);
+      params.set('sortField', sort.sortField);
+      params.set('sortOrder', sort.sortOrder);
 
       const response = await request<RequestResponse<User>>({
         url: `/user?${params.toString()}`,
@@ -283,7 +311,10 @@ export default function UserPage() {
     () => [
       {
         accessorKey: 'name',
-        header: t('columnName'),
+        meta: {
+          label: t('columnName'),
+          sortField: 'name',
+        } satisfies EntityColumnMeta,
         cell: ({ row }) => {
           const user = row.original;
           return (
@@ -310,7 +341,7 @@ export default function UserPage() {
       },
       {
         accessorKey: 'email',
-        header: t('columnEmail'),
+        meta: { label: t('columnEmail') } satisfies EntityColumnMeta,
         cell: ({ row }) => (
           <span className="text-sm text-muted-foreground">
             {getUserEmail(row.original)}
@@ -319,7 +350,10 @@ export default function UserPage() {
       },
       {
         accessorKey: 'status',
-        header: t('columnStatus'),
+        meta: {
+          label: t('columnStatus'),
+          sortField: 'suspended_until',
+        } satisfies EntityColumnMeta,
         cell: ({ row }) => {
           const user = row.original;
           return user.suspended_until ? (
@@ -341,7 +375,7 @@ export default function UserPage() {
       },
       {
         id: 'passwordReset',
-        header: t('columnPasswordReset'),
+        meta: { label: t('columnPasswordReset') } satisfies EntityColumnMeta,
         cell: ({ row }) =>
           row.original.requires_password_reset ? (
             <Badge
@@ -359,7 +393,10 @@ export default function UserPage() {
       },
       {
         id: 'lastLogin',
-        header: t('columnLastLogin'),
+        meta: {
+          label: t('columnLastLogin'),
+          sortField: 'last_login_at',
+        } satisfies EntityColumnMeta,
         cell: ({ row }) => {
           const lastLogin = getLastLoginLabel(row.original);
 
@@ -385,7 +422,6 @@ export default function UserPage() {
       },
       {
         id: 'actions',
-        header: '',
         cell: ({ row }) => (
           <div className="flex justify-end gap-1">
             {canSimulateAccess && canSimulate(row.original) && (
@@ -428,10 +464,10 @@ export default function UserPage() {
     [paginate]
   );
 
-  const table = useReactTable({
-    data: tableData,
+  const { table, columnPrefs, visibilityMenuProps } = useEntityColumnTable({
+    storageKey: 'core-users-columns-v1',
     columns,
-    getCoreRowModel: getCoreRowModel(),
+    data: tableData,
   });
 
   const users: User[] = tableData;
@@ -484,6 +520,9 @@ export default function UserPage() {
         </div>
 
         <div className="flex items-center gap-3 xl:justify-end">
+          {viewMode === 'table' && (
+            <ColumnsVisibilityMenu {...visibilityMenuProps} />
+          )}
           <span className="text-xs font-medium text-muted-foreground">
             {t('viewMode')}
           </span>
@@ -551,44 +590,15 @@ export default function UserPage() {
             onAction={handleOpenCreate}
           />
         ) : viewMode === 'table' ? (
-          <div className="overflow-x-auto">
-            <Table>
-              <TableHeader>
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => (
-                      <TableHead key={header.id}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
-                      </TableHead>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableHeader>
-              <TableBody>
-                {table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    className="cursor-pointer"
-                    onDoubleClick={() => handleOpenEdit(row.original)}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
+          <EntityTable
+            table={table}
+            columnPrefs={columnPrefs}
+            getSortProps={sort.getSortProps}
+            rowProps={(row) => ({
+              className: 'cursor-pointer',
+              onDoubleClick: () => handleOpenEdit(row.original),
+            })}
+          />
         ) : (
           <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
             {users.map((user: User) => (