feat: enhance EndorsementPage with eligibility checks and application management

apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx

@@ -1,20 +1,251 @@
-import { Container } from '@mantine/core';
-import { FeatureUnavailable } from '@ema-platform/ui';
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  Group,
+  List,
+  Loader,
+  Stack,
+  Table,
+  Text,
+  ThemeIcon,
+  Title,
+} from '@mantine/core';
+import {
+  IconArrowRight,
+  IconCertificate,
+  IconCircleCheck,
+  IconCircleX,
+  IconInfoCircle,
+} from '@tabler/icons-react';
+import { useNavigate } from 'react-router-dom';
+import {
+  STATUS_COLORS,
+  STATUS_LABELS,
+  TERMINAL_STATUSES,
+  extractErrorMessage,
+  localized,
+  useGetCertificateUrlMutation,
+  useGetMyApplicationsQuery,
+  useGetMyLicensesQuery,
+} from '@ema-platform/api';
+import { useCurrentProfile } from '@ema-platform/auth';
+import { notify } from '@ema-platform/ui';
+
+const ENDORSEMENT_TYPE_KEYS = ['ENDORSEMENT_COC', 'ENDORSEMENT_GOC'];
+
+function EligibilityItem({ ok, label }: { ok: boolean; label: string }) {
+  return (
+    <List.Item
+      icon={
+        <ThemeIcon
+          color={ok ? 'teal' : 'red'}
+          variant="light"
+          size="sm"
+          radius="xl"
+        >
+          {ok ? <IconCircleCheck size={14} /> : <IconCircleX size={14} />}
+        </ThemeIcon>
+      }
+    >
+      {label}
+    </List.Item>
+  );
+}
 
 /**
- * Placeholder until this feature has a backend.
- *
- * This page previously rendered hardcoded sample records, which were
- * indistinguishable from real ones.
+ * Endorsements home, mirroring CertificatesPage: eligibility at a glance, the
+ * two application entry points (CoC / GOC), and the seafarer's endorsement
+ * applications and issued endorsements. The wizard itself is the
+ * config-driven licensing flow.
  */
 export function EndorsementPage() {
+  const navigate = useNavigate();
+  const { profile, isLoading: loadingProfile } = useCurrentProfile();
+  const { data: applications, isLoading: loadingApplications } =
+    useGetMyApplicationsQuery();
+  const { data: licenses } = useGetMyLicensesQuery();
+  const [getCertificateUrl] = useGetCertificateUrlMutation();
+
+  const registered =
+    Boolean(profile?.seafarerNumber) && profile?.seafarerStatus === 'ACTIVE';
+
+  const endorsementApplications = (applications?.items ?? []).filter((app) =>
+    ENDORSEMENT_TYPE_KEYS.includes(app.licenseType?.key ?? ''),
+  );
+  const inFlight = endorsementApplications.filter(
+    (app) => !TERMINAL_STATUSES.includes(app.status),
+  );
+  const issued = (licenses?.items ?? []).filter((license) =>
+    ENDORSEMENT_TYPE_KEYS.includes(license.licenseType?.key ?? ''),
+  );
+
+  async function download(licenseId: string) {
+    try {
+      const result = await getCertificateUrl(licenseId).unwrap();
+      window.open(result.url, '_blank', 'noopener');
+    } catch (error) {
+      notify.error(extractErrorMessage(error, 'Could not fetch endorsement'));
+    }
+  }
+
+  if (loadingProfile || loadingApplications) {
+    return (
+      <Group justify="center" py="xl">
+        <Loader />
+      </Group>
+    );
+  }
+
   return (
-    <Container size="lg" py="xl">
-      <FeatureUnavailable
-        title="Endorsements"
-        description="Endorsements are not connected to the backend yet."
-      />
-    </Container>
+    <Stack maw={860} mx="auto">
+      <Title order={2}>My Endorsements</Title>
+
+      <Card withBorder radius="md" p="lg">
+        <Group justify="space-between" align="flex-start">
+          <div>
+            <Text fw={600} mb={6}>
+              Eligibility
+            </Text>
+            <List spacing={4} size="sm">
+              <EligibilityItem
+                ok={registered}
+                label={
+                  registered
+                    ? `Registered seafarer (${profile?.seafarerNumber})`
+                    : 'Active seafarer registration required'
+                }
+              />
+            </List>
+          </div>
+          <Stack gap="xs">
+            <Button
+              rightSection={<IconArrowRight size={16} />}
+              onClick={() => navigate('/licensing/ENDORSEMENT_COC/apply')}
+            >
+              Endorse a CoC
+            </Button>
+            <Button
+              variant="light"
+              rightSection={<IconArrowRight size={16} />}
+              onClick={() => navigate('/licensing/ENDORSEMENT_GOC/apply')}
+            >
+              Endorse a GOC
+            </Button>
+          </Stack>
+        </Group>
+        {!registered && (
+          <Alert color="orange" mt="md" icon={<IconInfoCircle size={16} />}>
+            Complete your{' '}
+            <Text
+              component="span"
+              c="blue"
+              style={{ cursor: 'pointer' }}
+              onClick={() => navigate('/seafarer-registration')}
+            >
+              seafarer registration
+            </Text>{' '}
+            first — endorsement applications are refused without it.
+          </Alert>
+        )}
+      </Card>
+
+      {inFlight.length > 0 && (
+        <Stack gap="xs">
+          <Title order={4}>Applications in progress</Title>
+          {inFlight.map((app) => (
+            <Card key={app.id} withBorder radius="md" p="md">
+              <Group justify="space-between">
+                <div>
+                  <Text fw={600}>{app.applicationNumber}</Text>
+                  <Text size="xs" c="dimmed">
+                    {localized(app.licenseType?.name)}
+                  </Text>
+                </div>
+                <Group>
+                  <Badge color={STATUS_COLORS[app.status]}>
+                    {STATUS_LABELS[app.status]}
+                  </Badge>
+                  <Button
+                    size="compact-sm"
+                    variant="light"
+                    onClick={() =>
+                      navigate(
+                        `/licensing/${app.licenseType?.key}/applications/${app.id}`,
+                      )
+                    }
+                  >
+                    {app.status === 'DRAFT' || app.status === 'RESUBMIT_REQUIRED'
+                      ? 'Continue'
+                      : 'View'}
+                  </Button>
+                </Group>
+              </Group>
+            </Card>
+          ))}
+        </Stack>
+      )}
+
+      <Stack gap="xs">
+        <Title order={4}>Issued endorsements</Title>
+        {issued.length === 0 ? (
+          <Card withBorder radius="md" p="lg">
+            <Text size="sm" c="dimmed" ta="center">
+              No endorsements issued yet.
+            </Text>
+          </Card>
+        ) : (
+          <Table.ScrollContainer minWidth={640}>
+            <Table striped>
+              <Table.Thead>
+                <Table.Tr>
+                  <Table.Th>Certificate №</Table.Th>
+                  <Table.Th>Type</Table.Th>
+                  <Table.Th>Issued</Table.Th>
+                  <Table.Th>Expires</Table.Th>
+                  <Table.Th>Status</Table.Th>
+                  <Table.Th />
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {issued.map((license) => (
+                  <Table.Tr key={license.id}>
+                    <Table.Td>
+                      <Text ff="monospace" size="sm" fw={600}>
+                        {license.certificateNumber}
+                      </Text>
+                    </Table.Td>
+                    <Table.Td>{localized(license.licenseType?.name)}</Table.Td>
+                    <Table.Td>{license.issueDate?.slice(0, 10)}</Table.Td>
+                    <Table.Td>{license.expiryDate?.slice(0, 10)}</Table.Td>
+                    <Table.Td>
+                      <Badge
+                        size="sm"
+                        variant="light"
+                        color={license.status === 'ACTIVE' ? 'green' : 'red'}
+                      >
+                        {license.status}
+                      </Badge>
+                    </Table.Td>
+                    <Table.Td>
+                      <Button
+                        size="compact-xs"
+                        variant="subtle"
+                        leftSection={<IconCertificate size={14} />}
+                        onClick={() => download(license.id)}
+                      >
+                        Download
+                      </Button>
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          </Table.ScrollContainer>
+        )}
+      </Stack>
+    </Stack>
   );
 }
 

apps/portal/src/app/features/onboarding/components/RequireOperations.tsx

@@ -52,6 +52,8 @@ const MODE_FREE_TYPE_KEYS = [
   'VESSEL_OWNERSHIP_TRANSFER',
   'CERTIFICATE_OF_COMPETENCY',
   'CERTIFICATE_OF_PROFICIENCY',
+  'ENDORSEMENT_COC',
+  'ENDORSEMENT_GOC',
   'PRE_WAIVER',
   'POST_WAIVER',
 ];

apps/portal/src/app/layouts/PortalLayout.tsx

@@ -68,7 +68,7 @@ const NAV_SECTIONS: { label?: string; items: PortalNavItem[] }[] = [
       { to: '/seaman-book', label: 'Seaman Book', i18nKey: 'nav.myApplication', icon: IconSend, soon: true },
       { to: '/certificates', label: 'Certificates', i18nKey: 'nav.certificates', icon: IconShieldCheck },
       { to: '/exams', label: 'Examinations', i18nKey: 'nav.exams', icon: IconList },
-      { to: '/endorsements', label: 'Endorsements', i18nKey: 'nav.endorsements', icon: IconRubberStamp, soon: true },
+      { to: '/endorsements', label: 'Endorsements', i18nKey: 'nav.endorsements', icon: IconRubberStamp },
     ],
   },
   {