certificate generation

apps/portal/src/app/features/certificates/pages/CertificatesPage.tsx

@@ -7,6 +7,7 @@ import {
   Card,
   Divider,
   Group,
+  Loader,
   Modal,
   Paper,
   SimpleGrid,
@@ -17,6 +18,7 @@ import {
   Title,
   rem,
 } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
 import {
   IconArrowRight,
   IconBook2,
@@ -27,6 +29,8 @@ import {
   IconInfoCircle,
   IconShieldCheck,
 } from '@tabler/icons-react';
+import { authStorage } from '@ema-platform/auth';
+import { useAppSelector } from '../../../store/hooks';
 
 // ---------------------------------------------------------------------------
 // Mock data
@@ -65,18 +69,72 @@ const MOCK_CERTIFICATES = [
   },
 ];
 
-// blank PDF for demo
-const BLANK_PDF =
-  'data:application/pdf;base64,JVBERi0xLjQKJcfsj6IKMSAwIG9iago8PC9UeXBlL0NhdGFsb2cvUGFnZXMgMiAwIFI+PgplbmRvYmoKMiAwIG9iago8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDE+PgplbmRvYmoKMyAwIG9iago8PC9UeXBlL1BhZ2UvUGFyZW50IDIgMCBSL01lZGlhQm94WzAgMCA2MTIgNzkyXT4+CmVuZG9iagp4cmVmCjAgNAowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDAwMDkgMDAwMDAgbiAKMDAwMDAwMDA1OCAwMDAwMCBuIAowMDAwMDAwMTE1IDAwMDAwIG4gCnRyYWlsZXIKPDwvU2l6ZSA0L1Jvb3QgMSAwIFI+PgpzdGFydHhyZWYKMjE3CiUlRU9G';
+const API_BASE =
+  (import.meta as { env?: Record<string, string> }).env?.['VITE_BASE_API_URL'] ??
+  'http://localhost:3001/api';
+
+async function generateCertificate(profileId: string): Promise<Blob> {
+  const token = authStorage.getToken();
+  if (!token) throw new Error('No auth token found');
+  const res = await fetch(
+    `${API_BASE}/profiles/generate-seafarer-certificate/e04c4a7c-0feb-4af6-ab00-5ef6600ee2b4`,
+    { headers: { Authorization: `Bearer ${token}` } },
+  );
+  if (!res.ok) throw new Error(`Failed to generate certificate (${res.status})`);
+  return res.blob();
+}
+
+function downloadBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
 
 export function CertificatesPage() {
   const navigate = useNavigate();
+  const user = useAppSelector((state) => state.auth.user);
+  const profileId = user?.id ?? '';
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [previewTitle, setPreviewTitle] = useState('');
+  const [loading, setLoading] = useState(false);
 
-  const openPreview = (title: string) => {
-    setPreviewTitle(title);
-    setPreviewUrl(BLANK_PDF);
+  const openPreview = async (profileId: string, title: string) => {
+    setLoading(true);
+    try {
+      const blob = await generateCertificate(profileId);
+      const url = URL.createObjectURL(blob);
+      setPreviewTitle(title);
+      setPreviewUrl(url);
+    } catch (err) {
+      notifications.show({
+        color: 'red',
+        title: 'Error',
+        message: err instanceof Error ? err.message : 'Could not generate certificate',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDownload = async (profileId: string, title: string) => {
+    try {
+      const blob = await generateCertificate(profileId);
+      downloadBlob(blob, `certificate-${Date.now()}.pdf`);
+      notifications.show({
+        color: 'teal',
+        title: 'Downloaded',
+        message: 'Certificate PDF downloaded successfully',
+      });
+    } catch (err) {
+      notifications.show({
+        color: 'red',
+        title: 'Error',
+        message: err instanceof Error ? err.message : 'Could not download certificate',
+      });
+    }
   };
 
   return (
@@ -187,8 +245,8 @@ export function CertificatesPage() {
                   <div><Text fz="xs" c="dimmed">Expires</Text><Text fz="sm" fw={500}>{cert.expiry}</Text></div>
                 </SimpleGrid>
                 <Group mt="sm" gap="xs">
-                  <Button size="xs" variant="light" leftSection={<IconEye size={12} />} onClick={() => openPreview(cert.type)}>View</Button>
-                  <Button size="xs" variant="default" leftSection={<IconDownload size={12} />}>Download</Button>
+                  <Button size="xs" variant="light" leftSection={loading ? <Loader size={12} /> : <IconEye size={12} />} onClick={() => openPreview(profileId, cert.type)}>View</Button>
+                  <Button size="xs" variant="default" leftSection={<IconDownload size={12} />} onClick={() => handleDownload(profileId, cert.type)}>Download</Button>
                 </Group>
               </Card>
             ))}
@@ -201,12 +259,13 @@ export function CertificatesPage() {
         opened={!!previewUrl}
         onClose={() => setPreviewUrl(null)}
         title={<Text fw={700} fz="sm">{previewTitle}</Text>}
-        size="xl"
+        size="95vw"
         radius="lg"
+        fullScreen
       >
         <iframe
           src={previewUrl ?? ''}
-          style={{ width: '100%', height: '70vh', border: 'none', borderRadius: 8 }}
+          style={{ width: '100%', height: '90vh', border: 'none', borderRadius: 8 }}
           title={previewTitle}
         />
       </Modal>