From 9d202b0a12816f92eeebd8dd0cf986832bca19b0 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Fri, 24 Jul 2026 09:22:20 +0000
Subject: [PATCH] vesselRegistration review page ui imporvement

---
 .../pages/VesselRegistrationReviewPage.tsx    | 111 ++++++++++--------
 1 file changed, 62 insertions(+), 49 deletions(-)

diff --git a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReviewPage.tsx b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReviewPage.tsx
index e522b9efd..5c4ea09a3 100644
--- a/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReviewPage.tsx
+++ b/apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReviewPage.tsx
@@ -16,6 +16,7 @@ import {
   SimpleGrid,
   Stack,
   Stepper,
+  Tabs,
   Text,
   Textarea,
   ThemeIcon,
@@ -31,6 +32,7 @@ import {
   IconExternalLink,
   IconEye,
   IconFileDescription,
+  IconFiles,
   IconInfoCircle,
   IconUserQuestion,
   IconX,
@@ -232,62 +234,73 @@ export function VesselRegistrationReviewPage() {
       <Grid gutter="md">
         {/* Left column */}
         <Grid.Col span={{ base: 12, lg: 7 }}>
-          <Stack gap="md">
-            <Paper withBorder radius="lg" p="xl">
-              <Text fw={700} mb="md">Vessel Information</Text>
-              <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
-                <InfoRow label="Vessel Name" value={record.vesselName} />
-                <InfoRow label="Vessel Type" value={record.vesselType} />
-                <InfoRow label="Category" value={record.category} />
-                <InfoRow label="Registration Area" value={record.registrationArea} />
-                <InfoRow label="Flag State" value={record.flagState} />
-                <InfoRow
-                  label={record.category === 'Sea-going' ? 'Gross Tonnage (GT)' : 'Passenger Capacity'}
-                  value={(record.category === 'Sea-going' ? record.grossTonnage : record.passengerCapacity) ?? ''}
-                />
-                <InfoRow label="Length / Breadth / Depth" value={`${record.length} / ${record.breadth} / ${record.depth}`} />
-              </SimpleGrid>
-            </Paper>
+          <Tabs defaultValue="information" variant="outline">
+            <Tabs.List mb="md">
+              <Tabs.Tab value="information" leftSection={<IconInfoCircle size={15} />}>Information</Tabs.Tab>
+              <Tabs.Tab value="documents" leftSection={<IconFiles size={15} />}>Documents</Tabs.Tab>
+            </Tabs.List>
 
-            <Paper withBorder radius="lg" p="xl">
-              <Text fw={700} mb="md">Technical Specifications</Text>
-              <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
-                <InfoRow
-                  label={record.category === 'Sea-going' ? 'IMO Number' : 'Hull Number'}
-                  value={(record.category === 'Sea-going' ? record.imoNumber : record.hullNumber) ?? ''}
-                />
-                <InfoRow label="Shipyard" value={record.shipyard} />
-                <InfoRow label="Year Built" value={record.yearBuilt} />
-                <InfoRow label="Engine Type" value={record.engineType} />
-                <InfoRow label="Engine Number" value={record.engineNumber} />
-                <InfoRow label="Engine Power" value={record.enginePower} />
-                <InfoRow label="Hull Material" value={record.hullMaterial} />
-              </SimpleGrid>
-            </Paper>
+            <Tabs.Panel value="information">
+              <Stack gap="md">
+                <Paper withBorder radius="lg" p="xl">
+                  <Text fw={700} mb="md">Vessel Information</Text>
+                  <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
+                    <InfoRow label="Vessel Name" value={record.vesselName} />
+                    <InfoRow label="Vessel Type" value={record.vesselType} />
+                    <InfoRow label="Category" value={record.category} />
+                    <InfoRow label="Registration Area" value={record.registrationArea} />
+                    <InfoRow label="Flag State" value={record.flagState} />
+                    <InfoRow
+                      label={record.category === 'Sea-going' ? 'Gross Tonnage (GT)' : 'Passenger Capacity'}
+                      value={(record.category === 'Sea-going' ? record.grossTonnage : record.passengerCapacity) ?? ''}
+                    />
+                    <InfoRow label="Length / Breadth / Depth" value={`${record.length} / ${record.breadth} / ${record.depth}`} />
+                  </SimpleGrid>
+                </Paper>
 
-            <Paper withBorder radius="lg" p="xl">
-              <Text fw={700} mb="md">Ownership Information</Text>
-              <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
-                <InfoRow label="Owner Name" value={record.owner.name} />
-                <InfoRow label="National ID / TIN" value={record.owner.idOrTin} />
-                <InfoRow label="Phone Number" value={record.owner.phone} />
-                <InfoRow label="Email Address" value={record.owner.email} />
-                <InfoRow label="Address" value={record.owner.address} />
-              </SimpleGrid>
-            </Paper>
-          </Stack>
+                <Paper withBorder radius="lg" p="xl">
+                  <Text fw={700} mb="md">Technical Specifications</Text>
+                  <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
+                    <InfoRow
+                      label={record.category === 'Sea-going' ? 'IMO Number' : 'Hull Number'}
+                      value={(record.category === 'Sea-going' ? record.imoNumber : record.hullNumber) ?? ''}
+                    />
+                    <InfoRow label="Shipyard" value={record.shipyard} />
+                    <InfoRow label="Year Built" value={record.yearBuilt} />
+                    <InfoRow label="Engine Type" value={record.engineType} />
+                    <InfoRow label="Engine Number" value={record.engineNumber} />
+                    <InfoRow label="Engine Power" value={record.enginePower} />
+                    <InfoRow label="Hull Material" value={record.hullMaterial} />
+                  </SimpleGrid>
+                </Paper>
+
+                <Paper withBorder radius="lg" p="xl">
+                  <Text fw={700} mb="md">Ownership Information</Text>
+                  <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
+                    <InfoRow label="Owner Name" value={record.owner.name} />
+                    <InfoRow label="National ID / TIN" value={record.owner.idOrTin} />
+                    <InfoRow label="Phone Number" value={record.owner.phone} />
+                    <InfoRow label="Email Address" value={record.owner.email} />
+                    <InfoRow label="Address" value={record.owner.address} />
+                  </SimpleGrid>
+                </Paper>
+              </Stack>
+            </Tabs.Panel>
+
+            <Tabs.Panel value="documents">
+              <Paper withBorder radius="lg" p="xl">
+                <Text fw={700} mb="md">Documents</Text>
+                <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="sm">
+                  {record.documents.map((doc) => <DocViewer key={doc.key} label={doc.label} fileName={doc.fileName} fileType={doc.fileType} />)}
+                </SimpleGrid>
+              </Paper>
+            </Tabs.Panel>
+          </Tabs>
         </Grid.Col>
 
         {/* Right column */}
         <Grid.Col span={{ base: 12, lg: 5 }}>
           <Stack gap="md">
-            <Paper withBorder radius="lg" p="xl">
-              <Text fw={700} mb="md">Documents</Text>
-              <Stack gap="sm">
-                {record.documents.map((doc) => <DocViewer key={doc.key} label={doc.label} fileName={doc.fileName} fileType={doc.fileType} />)}
-              </Stack>
-            </Paper>
-
             <Paper withBorder radius="lg" p="xl">
               <Text fw={700} mb="md">Timeline</Text>
               <Stepper active={record.timeline.filter((t) => t.done).length - 1} size="sm" color="teal" orientation="vertical">