vesselRegistration review page ui imporvement

This commit is contained in:
estifanos
2026-07-24 09:22:20 +00:00
parent 8f7c163b9e
commit 9d202b0a12

View File

@@ -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,6 +234,13 @@ export function VesselRegistrationReviewPage() {
<Grid gutter="md">
{/* Left column */}
<Grid.Col span={{ base: 12, lg: 7 }}>
<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>
<Tabs.Panel value="information">
<Stack gap="md">
<Paper withBorder radius="lg" p="xl">
<Text fw={700} mb="md">Vessel Information</Text>
@@ -276,18 +285,22 @@ export function VesselRegistrationReviewPage() {
</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">