feat: enhance professions management with server-side pagination and advanced table component

libs/ui/src/lib/data/AdvancedTable.tsx

@@ -0,0 +1,163 @@
+import { ReactNode, useEffect, useState } from 'react';
+import {
+  Table,
+  TextInput,
+  ActionIcon,
+  Group,
+  Text,
+  Pagination,
+  Loader,
+  Center,
+} from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
+import { IconSearch, IconRefresh } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
+
+export interface AdvancedColumn<T> {
+  header: ReactNode;
+  /** Dot-path into the row, used when no `cell` is given (e.g. "expectation.name"). */
+  accessorKey?: string;
+  cell?: (ctx: { row: { original: T }; value: unknown }) => ReactNode;
+  size?: number;
+  align?: 'left' | 'center' | 'right';
+}
+
+interface AdvancedTableProps<T> {
+  columns: AdvancedColumn<T>[];
+  data: T[];
+  tableName: string;
+  /** Total item count on the server (drives pagination), not data.length. */
+  itemCount: number;
+  /** 0-based current page. */
+  pageIndex: number;
+  onPageChange: (pageIndex: number) => void;
+  pageSize?: number;
+  refresh?: () => void;
+  /** Server-side search — debounced internally. Omit to hide the search box. */
+  onSearchChange?: (q: string) => void;
+  isLoading?: boolean;
+  emptyText?: string;
+}
+
+function getByPath(obj: unknown, path?: string): unknown {
+  if (!path) return undefined;
+  return path.split('.').reduce<unknown>(
+    (acc, key) => (acc && typeof acc === 'object' ? (acc as Record<string, unknown>)[key] : undefined),
+    obj,
+  );
+}
+
+export function AdvancedTable<T extends { id?: string | number }>({
+  columns,
+  data,
+  tableName,
+  itemCount,
+  pageIndex,
+  onPageChange,
+  pageSize = 10,
+  refresh,
+  onSearchChange,
+  isLoading = false,
+  emptyText,
+}: AdvancedTableProps<T>) {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <Group justify="space-between" mb="sm">
+        <Text fw={600}>{tableName}</Text>
+        <Group gap="xs">
+          {onSearchChange && (
+            <SearchBox tableName={tableName} onSearchChange={onSearchChange} />
+          )}
+          {refresh && (
+            <ActionIcon variant="subtle" onClick={refresh} title={t('common.refresh', 'Refresh')}>
+              <IconRefresh size={16} />
+            </ActionIcon>
+          )}
+        </Group>
+      </Group>
+
+      <Table striped highlightOnHover>
+        <Table.Thead>
+          <Table.Tr>
+            {columns.map((col, i) => (
+              <Table.Th key={i} style={{ width: col.size, textAlign: col.align }}>
+                {col.header}
+              </Table.Th>
+            ))}
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {isLoading ? (
+            <Table.Tr>
+              <Table.Td colSpan={columns.length}>
+                <Center py="xl">
+                  <Loader size="sm" />
+                </Center>
+              </Table.Td>
+            </Table.Tr>
+          ) : data.length === 0 ? (
+            <Table.Tr>
+              <Table.Td colSpan={columns.length}>
+                <Text c="dimmed" ta="center" py="xl">
+                  {emptyText ?? t('common.noResult', 'No results')}
+                </Text>
+              </Table.Td>
+            </Table.Tr>
+          ) : (
+            data.map((row, rowIndex) => (
+              <Table.Tr key={row.id ?? rowIndex}>
+                {columns.map((col, i) => {
+                  const value = getByPath(row, col.accessorKey);
+                  return (
+                    <Table.Td key={i} style={{ textAlign: col.align }}>
+                      {col.cell ? col.cell({ row: { original: row }, value }) : (value as ReactNode) ?? '-'}
+                    </Table.Td>
+                  );
+                })}
+              </Table.Tr>
+            ))
+          )}
+        </Table.Tbody>
+      </Table>
+
+      {itemCount > pageSize && (
+        <Group justify="flex-end" mt="md">
+          <Pagination
+            total={Math.ceil(itemCount / pageSize)}
+            value={pageIndex + 1}
+            onChange={(page) => onPageChange(page - 1)}
+            size="sm"
+          />
+        </Group>
+      )}
+    </div>
+  );
+}
+
+function SearchBox({
+  tableName,
+  onSearchChange,
+}: {
+  tableName: string;
+  onSearchChange: (q: string) => void;
+}) {
+  const { t } = useTranslation();
+  const [value, setValue] = useState('');
+  const [debounced] = useDebouncedValue(value, 300);
+
+  useEffect(() => {
+    onSearchChange(debounced);
+  }, [debounced, onSearchChange]);
+
+  return (
+    <TextInput
+      placeholder={t('common.filterPlaceholder', { name: tableName, defaultValue: `Filter ${tableName}...` })}
+      leftSection={<IconSearch size={14} />}
+      size="sm"
+      value={value}
+      onChange={(e) => setValue(e.currentTarget.value)}
+    />
+  );
+}