feat: implement permission-based access control across various pages and components

- Added RequirePermission component to manage access based on user permissions.
- Integrated permission checks in MySeaRecordsPage, SeafarerRegistrationPage, VesselRegistrationPage, WaiverPage, and PortalLayout.
- Updated router to enforce permissions for specific routes.
- Introduced PORTAL_PERMISSIONS and LICENSE_PERMISSIONS constants for consistent permission management.
- Enhanced usePermissions hook to fetch permissions from the server and determine access rights.
- Refactored UI components to conditionally render based on user permissions, improving security and user experience.

apps/backoffice/src/app/features/question/pages/QuestionPage/actions.tsx

@@ -2,6 +2,7 @@ import { ActionIcon, Button, Group } from '@mantine/core';
 import { IconEdit, IconGavel, IconSend, IconTrash } from '@tabler/icons-react';
 import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
+import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
 import type { Question } from '../../types/question';
 
 export function questionActionsColumn(
@@ -22,43 +23,49 @@ export function questionActionsColumn(
       return (
         <Group gap="xs">
           {(q.status === 'DRAFT' || q.status === 'REJECTED') && (
-            <Button
-              size="compact-xs"
-              variant="light"
-              leftSection={<IconSend size={12} />}
-              loading={handlers.isSubmittingReview}
-              onClick={() => handlers.onSubmitForApproval(q)}
-            >
-              {t('question.qc.submit')}
-            </Button>
+            <RequirePermission anyOf={[LICENSE_PERMISSIONS.AUTHOR_QUESTION]} hideOnly>
+              <Button
+                size="compact-xs"
+                variant="light"
+                leftSection={<IconSend size={12} />}
+                loading={handlers.isSubmittingReview}
+                onClick={() => handlers.onSubmitForApproval(q)}
+              >
+                {t('question.qc.submit')}
+              </Button>
+            </RequirePermission>
           )}
           {q.status === 'PENDING_APPROVAL' && (
-            <>
+            <RequirePermission anyOf={[LICENSE_PERMISSIONS.APPROVE_QUESTION]} hideOnly>
               <Button size="compact-xs" variant="light" color="teal" onClick={() => handlers.onReview(q, 'APPROVED')}>
                 {t('question.qc.approve')}
               </Button>
               <Button size="compact-xs" variant="light" color="red" onClick={() => handlers.onReview(q, 'REJECTED')}>
                 {t('question.qc.reject')}
               </Button>
-            </>
+            </RequirePermission>
           )}
           {q.status === 'APPROVED' && (
-            <Button
-              size="compact-xs"
-              variant="subtle"
-              color="dark"
-              leftSection={<IconGavel size={12} />}
-              onClick={() => handlers.onReview(q, 'RETIRED')}
-            >
-              {t('question.qc.retire')}
-            </Button>
+            <RequirePermission anyOf={[LICENSE_PERMISSIONS.APPROVE_QUESTION]} hideOnly>
+              <Button
+                size="compact-xs"
+                variant="subtle"
+                color="dark"
+                leftSection={<IconGavel size={12} />}
+                onClick={() => handlers.onReview(q, 'RETIRED')}
+              >
+                {t('question.qc.retire')}
+              </Button>
+            </RequirePermission>
           )}
-          <ActionIcon variant="subtle" color="blue" size="sm" onClick={() => handlers.onEdit(q)}>
-            <IconEdit size={14} />
-          </ActionIcon>
-          <ActionIcon variant="subtle" color="red" size="sm" onClick={() => handlers.onDelete(q)}>
-            <IconTrash size={14} />
-          </ActionIcon>
+          <RequirePermission anyOf={[LICENSE_PERMISSIONS.AUTHOR_QUESTION]} hideOnly>
+            <ActionIcon variant="subtle" color="blue" size="sm" onClick={() => handlers.onEdit(q)}>
+              <IconEdit size={14} />
+            </ActionIcon>
+            <ActionIcon variant="subtle" color="red" size="sm" onClick={() => handlers.onDelete(q)}>
+              <IconTrash size={14} />
+            </ActionIcon>
+          </RequirePermission>
         </Group>
       );
     },

apps/backoffice/src/app/features/question/pages/QuestionPage/index.tsx

@@ -19,6 +19,7 @@ import { useTranslation } from 'react-i18next';
 import { IconPlus, IconInfoCircle } from '@tabler/icons-react';
 import { AdvancedColumn, AdvancedTable, ModalFooter, notify, useErrorHandler, useServerTable } from '@ema-platform/ui';
 import { extractErrorMessage } from '@ema-platform/api';
+import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
 import { useGetCertificationsQuery } from '../../../certification/api/certification-api';
 import {
   useGetQuestionsQuery,
@@ -219,9 +220,11 @@ export function QuestionPage() {
       <Group justify="space-between" align="flex-end">
         <Title order={2}>{t('question.title')}</Title>
         {!showForm && (
-          <Button variant="light" leftSection={<IconPlus size={16} />} onClick={() => setShowForm(true)} size="sm">
-            {t('question.addQuestion')}
-          </Button>
+          <RequirePermission anyOf={[LICENSE_PERMISSIONS.AUTHOR_QUESTION]} hideOnly>
+            <Button variant="light" leftSection={<IconPlus size={16} />} onClick={() => setShowForm(true)} size="sm">
+              {t('question.addQuestion')}
+            </Button>
+          </RequirePermission>
         )}
       </Group>