fixes

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

@@ -1,4 +1,4 @@
-import { ReactNode, useState } from 'react';
+import { ReactNode, useState } from "react";
 import {
   Table,
   Button,
@@ -11,9 +11,9 @@ import {
   Center,
   Paper,
   Badge,
-} from '@mantine/core';
-import { IconRefresh, IconEye, IconInbox } from '@tabler/icons-react';
-import { useTranslation } from 'react-i18next';
+} from "@mantine/core";
+import { IconRefresh, IconEye, IconInbox } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
 
 export interface AdvancedColumn<T> {
   header: ReactNode;
@@ -21,7 +21,7 @@ export interface AdvancedColumn<T> {
   accessorKey?: string;
   cell?: (ctx: { row: { original: T }; value: unknown }) => ReactNode;
   size?: number;
-  align?: 'left' | 'center' | 'right';
+  align?: "left" | "center" | "right";
   /** Whether column starts visible. Default true. */
   enabled?: boolean;
 }
@@ -45,10 +45,15 @@ interface AdvancedTableProps<T> {
 
 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,
-  );
+  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 }>({
@@ -64,7 +69,9 @@ export function AdvancedTable<T extends { id?: string | number }>({
   emptyText,
 }: AdvancedTableProps<T>) {
   const { t } = useTranslation();
-  const [visible, setVisible] = useState<boolean[]>(columns.map((c) => c.enabled ?? true));
+  const [visible, setVisible] = useState<boolean[]>(
+    columns.map((c) => c.enabled ?? true),
+  );
   const toggleColumn = (i: number) =>
     setVisible((prev) => {
       if (prev[i] && prev.filter(Boolean).length === 1) return prev; // keep at least one column visible
@@ -73,57 +80,80 @@ export function AdvancedTable<T extends { id?: string | number }>({
   const shownColumns = columns.filter((_, i) => visible[i] ?? true);
 
   return (
-    <Paper withBorder radius="md" p="md">
+    <Paper radius="md" p="md">
       <Group justify="space-between" mb="md">
         <Group gap="xs">
-          <Text fw={600}>{tableName}</Text>
-          <Badge variant="light" size="sm" radius="sm">
-            {itemCount}
-          </Badge>
+          <Text fw={600}>{""}</Text>
         </Group>
         <Group gap="xs">
-          <Menu closeOnItemClick={false} shadow="md" position="bottom-end" width={220}>
+          <Menu
+            closeOnItemClick={false}
+            shadow="md"
+            position="bottom-end"
+            width={220}
+          >
+            {refresh && (
+              <Button
+                variant="default"
+                size="sm"
+                leftSection={<IconRefresh size={16} />}
+                onClick={refresh}
+                loading={isLoading}
+              >
+                {t("common.refresh", "Refresh")}
+              </Button>
+            )}
             <Menu.Target>
-              <Button variant="default" size="sm" leftSection={<IconEye size={16} />}>
-                {t('common.view', 'View')}
+              <Button
+                variant="default"
+                size="sm"
+                leftSection={<IconEye size={16} />}
+              >
+                {t("common.view", "View")}
               </Button>
             </Menu.Target>
             <Menu.Dropdown>
-              <Menu.Label>{t('common.toggleColumns', 'Toggle columns')}</Menu.Label>
+              <Menu.Label>
+                {t("common.toggleColumns", "Toggle columns")}
+              </Menu.Label>
               {columns.map((col, i) => (
                 <Menu.Item key={i} onClick={() => toggleColumn(i)}>
                   <Checkbox
                     label={col.header}
                     checked={visible[i] ?? true}
-                    disabled={visible.filter(Boolean).length === 1 && (visible[i] ?? true)}
+                    disabled={
+                      visible.filter(Boolean).length === 1 &&
+                      (visible[i] ?? true)
+                    }
                     readOnly
                     tabIndex={-1}
-                    styles={{ input: { cursor: 'pointer' }, label: { cursor: 'pointer' } }}
+                    styles={{
+                      input: { cursor: "pointer" },
+                      label: { cursor: "pointer" },
+                    }}
                   />
                 </Menu.Item>
               ))}
             </Menu.Dropdown>
           </Menu>
-          {refresh && (
-            <Button
-              variant="default"
-              size="sm"
-              leftSection={<IconRefresh size={16} />}
-              onClick={refresh}
-              loading={isLoading}
-            >
-              {t('common.refresh', 'Refresh')}
-            </Button>
-          )}
         </Group>
       </Group>
 
       <Table.ScrollContainer minWidth={480}>
-        <Table striped highlightOnHover withTableBorder withColumnBorders verticalSpacing="sm">
+        <Table
+          striped
+          highlightOnHover
+          withTableBorder
+          withColumnBorders
+          verticalSpacing="sm"
+        >
           <Table.Thead>
             <Table.Tr>
               {shownColumns.map((col, i) => (
-                <Table.Th key={i} style={{ width: col.size, textAlign: col.align }}>
+                <Table.Th
+                  key={i}
+                  style={{ width: col.size, textAlign: col.align }}
+                >
                   {col.header}
                 </Table.Th>
               ))}
@@ -144,7 +174,9 @@ export function AdvancedTable<T extends { id?: string | number }>({
                   <Center py="xl">
                     <Group gap="xs" c="dimmed">
                       <IconInbox size={18} />
-                      <Text c="dimmed">{emptyText ?? t('common.noResult', 'No results')}</Text>
+                      <Text c="dimmed">
+                        {emptyText ?? t("common.noResult", "No results")}
+                      </Text>
                     </Group>
                   </Center>
                 </Table.Td>
@@ -156,7 +188,9 @@ export function AdvancedTable<T extends { id?: string | number }>({
                     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) ?? '-'}
+                        {col.cell
+                          ? col.cell({ row: { original: row }, value })
+                          : ((value as ReactNode) ?? "-")}
                       </Table.Td>
                     );
                   })}