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/configuration/pages/ConfigurationPage/actions.tsx

@@ -0,0 +1,29 @@
+import { IconEdit, IconTrash } from '@tabler/icons-react';
+import type { TFunction } from 'i18next';
+import type { AdvancedTableAction } from '@ema-platform/ui';
+import type { Profession } from '../../types/configuration';
+
+export function professionColumnActions(
+  t: TFunction,
+  handlers: {
+    onEdit: (prof: Profession) => void;
+    onDelete: (prof: Profession) => void;
+  },
+): AdvancedTableAction<Profession>[] {
+  return [
+    {
+      key: 'edit',
+      label: t('configuration.edit'),
+      color: 'blue',
+      icon: <IconEdit size={14} />,
+      onClick: handlers.onEdit,
+    },
+    {
+      key: 'delete',
+      label: t('configuration.delete'),
+      color: 'red',
+      icon: <IconTrash size={14} />,
+      onClick: handlers.onDelete,
+    },
+  ];
+}

apps/backoffice/src/app/features/configuration/pages/ConfigurationPage/columns.tsx

@@ -0,0 +1,30 @@
+import { Text } from '@mantine/core';
+import type { TFunction } from 'i18next';
+import type { AdvancedTableColumn } from '@ema-platform/ui';
+import type { Profession } from '../../types/configuration';
+
+export function professionColumns(
+  t: TFunction,
+  locale: 'en' | 'am',
+  getDeptName: (deptId: string) => string,
+): AdvancedTableColumn<Profession>[] {
+  return [
+    {
+      key: 'name',
+      header: t('configuration.name'),
+      render: (prof) => prof.name[locale],
+    },
+    {
+      key: 'description',
+      header: t('configuration.description'),
+      render: (prof) => (
+        <Text size="sm" lineClamp={2} maw={200}>{prof.description[locale]}</Text>
+      ),
+    },
+    {
+      key: 'department',
+      header: t('configuration.department'),
+      render: (prof) => getDeptName(prof.departmentId),
+    },
+  ];
+}

apps/backoffice/src/app/features/configuration/pages/ConfigurationPage/index.tsx

@@ -7,8 +7,6 @@ import {
   Button,
   TextInput,
   Textarea,
-  Table,
-  ActionIcon,
   Modal,
   Text,
   Select,
@@ -19,19 +17,21 @@ import {
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useDisclosure } from '@mantine/hooks';
-import { IconEdit, IconTrash, IconPlus, IconBriefcase, IconMap, IconCertificate, IconInfoCircle } from '@tabler/icons-react';
+import { IconPlus, IconBriefcase, IconMap, IconCertificate, IconInfoCircle } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
-import { notify } from '@ema-platform/ui';
-import { LocationPage } from '../../location/pages/LocationPage';
-import { CertificationPage } from '../../certification/pages/CertificationPage';
+import { AdvancedTable, notify } from '@ema-platform/ui';
+import { professionColumns } from './columns';
+import { professionColumnActions } from './actions';
+import { LocationPage } from '../../../location/pages/LocationPage';
+import { CertificationPage } from '../../../certification/pages/CertificationPage';
 import {
   useGetOrganizationsQuery,
   useGetProfessionsQuery,
   useCreateProfessionMutation,
   useUpdateProfessionMutation,
   useDeleteProfessionMutation,
-} from '../api/configuration-api';
-import type { Profession } from '../types/configuration';
+} from '../../api/configuration-api';
+import type { Profession } from '../../types/configuration';
 
 interface ProfFormValues {
   nameEn: string;
@@ -132,7 +132,7 @@ function ProfessionTab() {
   const { t, i18n } = useTranslation();
   const locale = i18n.language as 'en' | 'am';
   const { data: deptRes } = useGetOrganizationsQuery();
-  const { data: profRes, isLoading, isError } = useGetProfessionsQuery();
+  const { data: profRes, isLoading, isError, refetch } = useGetProfessionsQuery();
   const [createProfession, { isLoading: isCreating }] = useCreateProfessionMutation();
   const [updateProfession, { isLoading: isUpdating }] = useUpdateProfessionMutation();
   const [deleteProfession] = useDeleteProfessionMutation();
@@ -243,46 +243,17 @@ function ProfessionTab() {
         />
       )}
 
-      <Table striped highlightOnHover>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>{t('configuration.name')}</Table.Th>
-            <Table.Th>{t('configuration.description')}</Table.Th>
-            <Table.Th>{t('configuration.department')}</Table.Th>
-            <Table.Th />
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {professions.filter((p) => p.isActive).map((prof) => (
-            <Table.Tr key={prof.id}>
-              <Table.Td>{prof.name[locale]}</Table.Td>
-              <Table.Td>
-                <Text size="sm" lineClamp={2} maw={200}>{prof.description[locale]}</Text>
-              </Table.Td>
-              <Table.Td>{getDeptName(prof.departmentId)}</Table.Td>
-              <Table.Td>
-                <Group gap="xs">
-                  <ActionIcon variant="subtle" color="blue" size="sm" onClick={() => handleEditProf(prof)}>
-                    <IconEdit size={14} />
-                  </ActionIcon>
-                  <ActionIcon variant="subtle" color="red" size="sm" onClick={() => handleDeleteProf(prof)}>
-                    <IconTrash size={14} />
-                  </ActionIcon>
-                </Group>
-              </Table.Td>
-            </Table.Tr>
-          ))}
-          {professions.length === 0 && (
-            <Table.Tr>
-              <Table.Td colSpan={4}>
-                <Text c="dimmed" ta="center" py="xl">
-                  {t('configuration.noProfessions')}
-                </Text>
-              </Table.Td>
-            </Table.Tr>
-          )}
-        </Table.Tbody>
-      </Table>
+      <AdvancedTable
+        columns={professionColumns(t, locale, getDeptName)}
+        data={professions.filter((p) => p.isActive)}
+        rowKey={(prof) => prof.id}
+        actions={professionColumnActions(t, {
+          onEdit: handleEditProf,
+          onDelete: handleDeleteProf,
+        })}
+        onRefresh={refetch}
+        emptyTitle={t('configuration.noProfessions')}
+      />
 
       <Modal opened={deleteOpened} onClose={closeDelete} title={t('configuration.confirmDelete')} size="sm">
         <Text mb="md">