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/certification/pages/CertificationPage/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 { Certification } from '../../types/certification';
+
+export function certificationColumnActions(
+  t: TFunction,
+  handlers: {
+    onEdit: (cert: Certification) => void;
+    onDelete: (cert: Certification) => void;
+  },
+): AdvancedTableAction<Certification>[] {
+  return [
+    {
+      key: 'edit',
+      label: t('certification.update'),
+      color: 'blue',
+      icon: <IconEdit size={14} />,
+      onClick: handlers.onEdit,
+    },
+    {
+      key: 'delete',
+      label: t('certification.delete'),
+      color: 'red',
+      icon: <IconTrash size={14} />,
+      onClick: handlers.onDelete,
+    },
+  ];
+}

apps/backoffice/src/app/features/certification/pages/CertificationPage/columns.tsx

@@ -0,0 +1,31 @@
+import { Badge, Text } from '@mantine/core';
+import type { TFunction } from 'i18next';
+import type { AdvancedTableColumn } from '@ema-platform/ui';
+import type { Certification } from '../../types/certification';
+
+export function certificationColumns(
+  t: TFunction,
+  locale: 'en' | 'am',
+): AdvancedTableColumn<Certification>[] {
+  return [
+    {
+      key: 'name',
+      header: t('certification.columns.name'),
+      render: (cert) => <Text fz="sm" fw={500}>{cert.name[locale]}</Text>,
+    },
+    {
+      key: 'description',
+      header: t('certification.columns.description'),
+      render: (cert) => <Text fz="sm" lineClamp={2} maw={250}>{cert.description[locale]}</Text>,
+    },
+    {
+      key: 'status',
+      header: t('certification.columns.status'),
+      render: (cert) => (
+        <Badge size="sm" variant="light" color={cert.isActive ? 'teal' : 'gray'}>
+          {cert.isActive ? t('certification.status.active') : t('certification.status.inactive')}
+        </Badge>
+      ),
+    },
+  ];
+}

apps/backoffice/src/app/features/certification/pages/CertificationPage/index.tsx

@@ -0,0 +1,172 @@
+import { useState } from 'react';
+import {
+  Stack,
+  Title,
+  Group,
+  Button,
+  Modal,
+  Text,
+  TextInput,
+  Textarea,
+  Paper,
+  Loader,
+  Center,
+  Alert,
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { useTranslation } from 'react-i18next';
+import { IconPlus, IconInfoCircle } from '@tabler/icons-react';
+import { AdvancedTable, notify } from '@ema-platform/ui';
+import { certificationColumns } from './columns';
+import { certificationColumnActions } from './actions';
+import {
+  useGetCertificationsQuery,
+  useCreateCertificationMutation,
+  useUpdateCertificationMutation,
+  useDeleteCertificationMutation,
+} from '../../api/certification-api';
+import type { Certification } from '../../types/certification';
+
+function CertificationForm({
+  editing,
+  isSubmitting,
+  onSubmit,
+  onCancel,
+}: {
+  editing: Certification | null;
+  isSubmitting: boolean;
+  onSubmit: (values: { nameEn: string; nameAm: string; descEn: string; descAm: string }, isEdit: boolean) => void;
+  onCancel: () => void;
+}) {
+  const { t } = useTranslation();
+  const [nameEn, setNameEn] = useState(editing?.name?.en ?? '');
+  const [nameAm, setNameAm] = useState(editing?.name?.am ?? '');
+  const [descEn, setDescEn] = useState(editing?.description?.en ?? '');
+  const [descAm, setDescAm] = useState(editing?.description?.am ?? '');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!nameEn || !nameAm) {
+      notify.error('Name fields are required');
+      return;
+    }
+    onSubmit({ nameEn, nameAm, descEn, descAm }, !!editing);
+  };
+
+  return (
+    <Paper p="md" withBorder mb="md" radius="md">
+      <form onSubmit={handleSubmit}>
+        <Stack gap="sm">
+          <TextInput label={t('certification.form.nameEn')} placeholder={t('certification.form.nameEnPlaceholder')} value={nameEn} onChange={(e) => setNameEn(e.currentTarget.value)} size="sm" required />
+          <TextInput label={t('certification.form.nameAm')} placeholder={t('certification.form.nameAmPlaceholder')} value={nameAm} onChange={(e) => setNameAm(e.currentTarget.value)} size="sm" required />
+          <Textarea label={t('certification.form.descEn')} placeholder={t('certification.form.descEnPlaceholder')} value={descEn} onChange={(e) => setDescEn(e.currentTarget.value)} size="sm" autosize minRows={2} />
+          <Textarea label={t('certification.form.descAm')} placeholder={t('certification.form.descAmPlaceholder')} value={descAm} onChange={(e) => setDescAm(e.currentTarget.value)} size="sm" autosize minRows={2} />
+          <Group justify="flex-end">
+            <Button variant="default" onClick={onCancel} size="sm">{t('certification.cancel')}</Button>
+            <Button type="submit" size="sm" loading={isSubmitting}>{editing ? t('certification.update') : t('certification.create')}</Button>
+          </Group>
+        </Stack>
+      </form>
+    </Paper>
+  );
+}
+
+export function CertificationPage() {
+  const { t, i18n } = useTranslation();
+  const locale = i18n.language as 'en' | 'am';
+  const { data, isLoading, isError, refetch } = useGetCertificationsQuery();
+  const [createCert, { isLoading: isCreating }] = useCreateCertificationMutation();
+  const [updateCert, { isLoading: isUpdating }] = useUpdateCertificationMutation();
+  const [deleteCert] = useDeleteCertificationMutation();
+
+  const certifications = data?.items ?? [];
+
+  const [editing, setEditing] = useState<Certification | null>(null);
+  const [showForm, setShowForm] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<Certification | null>(null);
+  const [deleteOpened, { open: openDelete, close: closeDelete }] = useDisclosure(false);
+
+  const resetForm = () => {
+    setEditing(null);
+    setShowForm(false);
+  };
+
+  const handleSubmit = async (values: { nameEn: string; nameAm: string; descEn: string; descAm: string }, isEdit: boolean) => {
+    const name = { en: values.nameEn, am: values.nameAm };
+    const description = { en: values.descEn, am: values.descAm };
+    try {
+      if (isEdit && editing) {
+        await updateCert({ id: editing.id, name, description }).unwrap();
+        notify.success(t('certification.updated'));
+      } else {
+        await createCert({ name, description }).unwrap();
+        notify.success(t('certification.created'));
+      }
+      resetForm();
+    } catch {
+      notify.error(t('certification.error'));
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    try {
+      await deleteCert(deleteTarget.id).unwrap();
+      notify.success(t('certification.deleted'));
+      closeDelete();
+      setDeleteTarget(null);
+    } catch {
+      notify.error(t('certification.error'));
+    }
+  };
+
+  if (isLoading) return <Center py="xl"><Loader /></Center>;
+  if (isError) return <Alert icon={<IconInfoCircle size={16} />} color="red" title={t('certification.loadError')} />;
+
+  return (
+    <Stack gap="lg">
+      <Group justify="space-between" align="flex-end">
+        <div>
+          <Title order={2}>{t('certification.title')}</Title>
+          <Text fz="sm" c="dimmed">{t('certification.subtitle')}</Text>
+        </div>
+        {!showForm && (
+          <Button variant="light" leftSection={<IconPlus size={16} />} onClick={() => setShowForm(true)} size="sm">
+            {t('certification.add')}
+          </Button>
+        )}
+      </Group>
+
+      {showForm && (
+        <CertificationForm
+          editing={editing}
+          isSubmitting={isCreating || isUpdating}
+          onSubmit={handleSubmit}
+          onCancel={resetForm}
+        />
+      )}
+
+      <Paper withBorder radius="md">
+        <AdvancedTable
+          columns={certificationColumns(t, locale)}
+          data={certifications}
+          rowKey={(cert) => cert.id}
+          actions={certificationColumnActions(t, {
+            onEdit: (cert) => { setEditing(cert); setShowForm(true); },
+            onDelete: (cert) => { setDeleteTarget(cert); openDelete(); },
+          })}
+          onRefresh={refetch}
+          emptyTitle={t('certification.noItems')}
+        />
+      </Paper>
+
+      <Modal opened={deleteOpened} onClose={closeDelete} title={t('certification.confirmDelete')} size="sm">
+        <Text mb="md">{t('certification.deleteConfirmText', { name: deleteTarget?.name?.[locale] })}</Text>
+        <Group justify="flex-end">
+          <Button variant="default" onClick={closeDelete} size="sm">{t('certification.cancel')}</Button>
+          <Button color="red" onClick={handleDelete} size="sm">{t('certification.delete')}</Button>
+        </Group>
+      </Modal>
+    </Stack>
+  );
+}