feat(vessel-registration): add vessel registration page with incident reporting and certificate download functionality

feat(waiver): implement waiver page with application tracking and letter download feature

feat(ui): introduce AdvancedTable component for enhanced table functionality across the application

chore: update package-lock.json to remove unnecessary dependencies

apps/backoffice/src/app/features/dashboard/pages/DashboardPage/columns.tsx

@@ -0,0 +1,34 @@
+import { Badge, Text } from '@mantine/core';
+import type { AdvancedTableColumn } from '@ema-platform/ui';
+import {
+  STATUS_COLORS,
+  STATUS_LABELS,
+  type LicenseApplication,
+  type LicenseStatus,
+} from '@ema-platform/api';
+
+export const dashboardQueueColumns: AdvancedTableColumn<LicenseApplication>[] = [
+  {
+    key: 'applicationNumber',
+    header: 'Number',
+    render: (app) => (
+      <Text size="sm" fw={500}>
+        {app.applicationNumber}
+      </Text>
+    ),
+  },
+  {
+    key: 'companyName',
+    header: 'Company',
+    render: (app) => <Text size="sm">{app.companyName ?? '—'}</Text>,
+  },
+  {
+    key: 'status',
+    header: 'Status',
+    render: (app) => (
+      <Badge variant="light" color={STATUS_COLORS[app.status as LicenseStatus]}>
+        {STATUS_LABELS[app.status as LicenseStatus]}
+      </Badge>
+    ),
+  },
+];

apps/backoffice/src/app/features/dashboard/pages/DashboardPage/index.tsx

@@ -1,24 +1,18 @@
 import { useNavigate } from 'react-router-dom';
 import {
-  Badge,
   Card,
   Center,
   Container,
   Group,
   Loader,
   SimpleGrid,
-  Table,
   Text,
   Title,
 } from '@mantine/core';
 import { IconChevronRight } from '@tabler/icons-react';
-import {
-  STATUS_COLORS,
-  STATUS_LABELS,
-  useGetAssignedToMeQuery,
-  useGetQueueQuery,
-  type LicenseStatus,
-} from '@ema-platform/api';
+import { useGetAssignedToMeQuery, useGetQueueQuery } from '@ema-platform/api';
+import { AdvancedTable } from '@ema-platform/ui';
+import { dashboardQueueColumns } from './columns';
 
 /**
  * Backoffice home.
@@ -95,49 +89,14 @@ export function DashboardPage() {
             Open queue <IconChevronRight size={11} style={{ verticalAlign: -1 }} />
           </Text>
         </Group>
-        {unclaimed.length === 0 ? (
-          <Center py="xl">
-            <Text size="sm" c="dimmed">
-              Nothing waiting to be claimed.
-            </Text>
-          </Center>
-        ) : (
-          <Table highlightOnHover>
-            <Table.Thead>
-              <Table.Tr>
-                <Table.Th>Number</Table.Th>
-                <Table.Th>Company</Table.Th>
-                <Table.Th>Status</Table.Th>
-              </Table.Tr>
-            </Table.Thead>
-            <Table.Tbody>
-              {unclaimed.slice(0, 8).map((app) => (
-                <Table.Tr
-                  key={app.id}
-                  style={{ cursor: 'pointer' }}
-                  onClick={() => navigate('/licence-review')}
-                >
-                  <Table.Td>
-                    <Text size="sm" fw={500}>
-                      {app.applicationNumber}
-                    </Text>
-                  </Table.Td>
-                  <Table.Td>
-                    <Text size="sm">{app.companyName ?? '—'}</Text>
-                  </Table.Td>
-                  <Table.Td>
-                    <Badge
-                      variant="light"
-                      color={STATUS_COLORS[app.status as LicenseStatus]}
-                    >
-                      {STATUS_LABELS[app.status as LicenseStatus]}
-                    </Badge>
-                  </Table.Td>
-                </Table.Tr>
-              ))}
-            </Table.Tbody>
-          </Table>
-        )}
+        <AdvancedTable
+          columns={dashboardQueueColumns}
+          data={unclaimed.slice(0, 8)}
+          rowKey={(app) => app.id}
+          onRowClick={() => navigate('/licence-review')}
+          onRefresh={queue.refetch}
+          emptyTitle="Nothing waiting to be claimed."
+        />
       </Card>
     </Container>
   );