Tria/emaui
1
0
Fork 0
mirror of https://github.com/Tria-plc/emaui.git synced 2026-08-26 19:12:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

vesselRegistration review page ui imporvement

Browse Source
This commit is contained in:
estifanos
2026-07-24 09:22:20 +00:00
parent 8f7c163b9e
commit 9d202b0a12
1 changed files with 62 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationReviewPage.tsx
View File

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