mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-09-08 04:15:44 +00:00
merge fixes
This commit is contained in:
Estifo77
@@ -1,156 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import {
|
||||
Alert,
|
||||
Badge,
|
||||
Button,
|
||||
Divider,
|
||||
Group,
|
||||
Paper,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Stepper,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
Title,
|
||||
} from '@mantine/core';
|
||||
import {
|
||||
IconAlertTriangle,
|
||||
IconArrowLeft,
|
||||
IconCircleCheck,
|
||||
IconClock,
|
||||
IconDownload,
|
||||
IconInfoCircle,
|
||||
IconShip,
|
||||
} from '@tabler/icons-react';
|
||||
import { notify } from '@ema-platform/ui';
|
||||
import { MOCK_REGISTRATIONS, recordDownload, STATUS_COLOR } from '../mock';
|
||||
|
||||
// ponytail: placeholder PDF blob; wire real cert endpoint when backend lands.
|
||||
const BLANK_PDF = 'data:application/pdf;base64,JVBERi0xLjQKJcfsj6IKMSAwIG9iago8PC9UeXBlL0NhdGFsb2cvUGFnZXMgMiAwIFI+PgplbmRvYmoKMiAwIG9iago8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDE+PgplbmRvYmoKMyAwIG9iago8PC9UeXBlL1BhZ2UvUGFyZW50IDIgMCBSL01lZGlhQm94WzAgMCA2MTIgNzkyXT4+CmVuZG9iagp4cmVmCjAgNAowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDAwMDkgMDAwMDAgbiAKMDAwMDAwMDA1OCAwMDAwMCBuIAowMDAwMDAwMTE1IDAwMDAwIG4gCnRyYWlsZXIKPDwvU2l6ZSA0L1Jvb3QgMSAwIFI+PgpzdGFydHhyZWYKMjE3CiUlRU9G';
|
||||
|
||||
function downloadCertificate(filename: string) {
|
||||
const a = document.createElement('a');
|
||||
a.href = BLANK_PDF;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
}
|
||||
|
||||
export function VesselRegistrationStatusPage() {
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams();
|
||||
const [reg] = useState(() => MOCK_REGISTRATIONS.find((r) => r.id === id) ?? null);
|
||||
const [, forceUpdate] = useState(0);
|
||||
|
||||
if (!reg) {
|
||||
return (
|
||||
<Stack gap="md">
|
||||
<Button variant="subtle" leftSection={<IconArrowLeft size={14} />} onClick={() => navigate('/vessel-registrations')}>Back</Button>
|
||||
<Alert variant="light" color="red" icon={<IconInfoCircle size={15} />}>Registration not found.</Alert>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
const activeStep = reg.timeline.filter((t) => t.done).length - 1;
|
||||
const needsCorrection = reg.status === 'Correction Required' || reg.status === 'Rejected';
|
||||
|
||||
const handleDownload = (certName: string, certNumber: string) => {
|
||||
downloadCertificate(`${certName.replace(/\s+/g, '-')}-${certNumber}.pdf`);
|
||||
recordDownload(reg.id, certName);
|
||||
forceUpdate((n) => n + 1);
|
||||
notify.success(`${certName} downloaded.`);
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack gap="md">
|
||||
<Group gap="sm">
|
||||
<Button variant="subtle" leftSection={<IconArrowLeft size={14} />} onClick={() => navigate('/vessel-registrations')}>Back</Button>
|
||||
<div>
|
||||
<Title order={3}>{reg.vesselName}</Title>
|
||||
<Text fz="sm" c="dimmed">{reg.id} — {reg.category}</Text>
|
||||
</div>
|
||||
</Group>
|
||||
|
||||
<Paper withBorder radius="lg" p="xl">
|
||||
<Group justify="space-between" mb="md" wrap="wrap" gap="sm">
|
||||
<Group gap="sm">
|
||||
<ThemeIcon size={36} radius="md" color="blue" variant="light"><IconShip size={18} /></ThemeIcon>
|
||||
<div>
|
||||
<Text fw={700} fz="sm">Registration Status</Text>
|
||||
<Text fz="xs" c="dimmed">Submitted {reg.submitted}</Text>
|
||||
</div>
|
||||
</Group>
|
||||
<Badge color={STATUS_COLOR[reg.status]} variant="light" size="lg">{reg.status}</Badge>
|
||||
</Group>
|
||||
|
||||
{reg.renewal && reg.renewal !== 'OK' && (
|
||||
<Alert
|
||||
variant="light"
|
||||
color={reg.renewal === 'Overdue' ? 'red' : 'orange'}
|
||||
icon={<IconAlertTriangle size={15} />}
|
||||
mb="md"
|
||||
p="sm"
|
||||
>
|
||||
<Text fz="sm">
|
||||
Registration {reg.renewal === 'Overdue' ? 'is overdue for renewal' : 'is due for renewal soon'}
|
||||
{reg.expiryDate ? ` — expires ${reg.expiryDate}` : ''}.
|
||||
</Text>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{reg.remarks && (
|
||||
<Alert variant="light" color={needsCorrection ? 'orange' : 'blue'} icon={<IconInfoCircle size={15} />} mb="md" p="sm">
|
||||
<Text fz="sm" fw={600} mb={2}>Officer Remarks</Text>
|
||||
<Text fz="sm">{reg.remarks}</Text>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Stepper active={activeStep} size="sm" color="teal">
|
||||
{reg.timeline.map((step, i) => (
|
||||
<Stepper.Step
|
||||
key={i}
|
||||
label={step.event}
|
||||
description={step.date ?? 'Pending'}
|
||||
icon={step.done ? <IconCircleCheck size={16} /> : <IconClock size={16} />}
|
||||
/>
|
||||
))}
|
||||
</Stepper>
|
||||
|
||||
{needsCorrection && (
|
||||
<Group justify="flex-end" mt="md">
|
||||
<Button color="orange" onClick={() => navigate('/vessel-registrations/apply')}>Resubmit Application</Button>
|
||||
</Group>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
{reg.status === 'Approved' && reg.certificates && (
|
||||
<Paper withBorder radius="lg" p="xl">
|
||||
<Text fw={700} mb="md">Certificates</Text>
|
||||
<Stack gap="sm">
|
||||
{reg.certificates.map((cert) => (
|
||||
<div key={cert.name}>
|
||||
<Group justify="space-between" wrap="wrap" gap="sm">
|
||||
<div>
|
||||
<Text fw={600} fz="sm">{cert.name}</Text>
|
||||
<Text fz="xs" c="dimmed">Certificate No. {cert.number} — Issued {cert.issueDate}</Text>
|
||||
{cert.downloads > 0 && (
|
||||
<Text fz="xs" c="dimmed">Downloaded {cert.downloads} time{cert.downloads === 1 ? '' : 's'}</Text>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
size="xs"
|
||||
leftSection={<IconDownload size={14} />}
|
||||
onClick={() => handleDownload(cert.name, cert.number)}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</Group>
|
||||
<Divider mt="sm" />
|
||||
</div>
|
||||
))}
|
||||
</Stack>
|
||||
</Paper>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
// ponytail: in-memory mock array, resets on reload — swap for RTK Query endpoint when backend lands.
|
||||
|
||||
import type { UploadFileInfo } from '@ema-platform/api';
|
||||
|
||||
export interface Vessel {
|
||||
id: string;
|
||||
name: string;
|
||||
regNo: string;
|
||||
approved: boolean;
|
||||
}
|
||||
|
||||
export const MOCK_VESSELS: Vessel[] = [
|
||||
{ id: 'v1', name: 'MV Abay', regNo: 'ET-VSL-2021-014', approved: true },
|
||||
{ id: 'v2', name: 'MV Tana', regNo: 'ET-VSL-2022-031', approved: true },
|
||||
{ id: 'v3', name: 'MV Awash', regNo: 'ET-VSL-2023-009', approved: false }, // pending registration — not selectable
|
||||
];
|
||||
|
||||
export const TRANSFER_REASONS = [
|
||||
'Sale',
|
||||
'Inheritance',
|
||||
'Gift',
|
||||
'Corporate Restructuring',
|
||||
'Court Order',
|
||||
'Other',
|
||||
] as const;
|
||||
|
||||
export type TransferReason = (typeof TRANSFER_REASONS)[number];
|
||||
|
||||
export type TransferStatus = 'Pending' | 'Under Review' | 'Approved' | 'Rejected';
|
||||
|
||||
export const STATUS_COLOR: Record<TransferStatus, string> = {
|
||||
Pending: 'gray',
|
||||
'Under Review': 'blue',
|
||||
Approved: 'teal',
|
||||
Rejected: 'red',
|
||||
};
|
||||
|
||||
export interface TransferRequest {
|
||||
id: string;
|
||||
vesselName: string;
|
||||
vesselRegNo: string;
|
||||
currentOwner: string;
|
||||
newOwnerName: string;
|
||||
reason: TransferReason;
|
||||
status: TransferStatus;
|
||||
submitted: string;
|
||||
approvedOn?: string;
|
||||
rejectionReason?: string;
|
||||
documentFileInfo?: UploadFileInfo;
|
||||
}
|
||||
|
||||
export const MOCK_REQUESTS: TransferRequest[] = [
|
||||
{
|
||||
id: 'VT-2025-0001',
|
||||
vesselName: 'MV Abay',
|
||||
vesselRegNo: 'ET-VSL-2021-014',
|
||||
currentOwner: 'Solomon Bekele',
|
||||
newOwnerName: 'Bahir Dar Shipping PLC',
|
||||
reason: 'Corporate Restructuring',
|
||||
status: 'Under Review',
|
||||
submitted: '2025-06-30',
|
||||
},
|
||||
{
|
||||
id: 'VT-2025-0002',
|
||||
vesselName: 'MV Tana',
|
||||
vesselRegNo: 'ET-VSL-2022-031',
|
||||
currentOwner: 'Solomon Bekele',
|
||||
newOwnerName: 'Hana Girma',
|
||||
reason: 'Sale',
|
||||
status: 'Approved',
|
||||
submitted: '2025-05-12',
|
||||
approvedOn: '2025-05-28',
|
||||
},
|
||||
{
|
||||
id: 'VT-2025-0003',
|
||||
vesselName: 'MV Abay',
|
||||
vesselRegNo: 'ET-VSL-2021-014',
|
||||
currentOwner: 'Solomon Bekele',
|
||||
newOwnerName: 'Dawit Alemu',
|
||||
reason: 'Gift',
|
||||
status: 'Rejected',
|
||||
submitted: '2025-04-02',
|
||||
rejectionReason: 'Bill of Sale document illegible — please resubmit a clearer scan.',
|
||||
},
|
||||
];
|
||||
|
||||
export function addTransferRequest(req: Omit<TransferRequest, 'id' | 'status' | 'submitted'>): TransferRequest {
|
||||
const created: TransferRequest = {
|
||||
...req,
|
||||
id: `VT-2025-${String(MOCK_REQUESTS.length + 1).padStart(4, '0')}`,
|
||||
status: 'Pending',
|
||||
submitted: new Date().toISOString().slice(0, 10),
|
||||
};
|
||||
MOCK_REQUESTS.unshift(created);
|
||||
return created;
|
||||
}
|
||||
@@ -1,209 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Alert,
|
||||
Badge,
|
||||
Button,
|
||||
Divider,
|
||||
FileInput,
|
||||
Group,
|
||||
Paper,
|
||||
Select,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
Textarea,
|
||||
TextInput,
|
||||
Title,
|
||||
} from '@mantine/core';
|
||||
import { IconArrowLeft, IconArrowRight, IconCheck, IconInfoCircle, IconUpload } from '@tabler/icons-react';
|
||||
import { notify } from '@ema-platform/ui';
|
||||
import { isStorageUploadError, useDocumentUpload } from '@ema-platform/api';
|
||||
import { addTransferRequest, MOCK_VESSELS, TRANSFER_REASONS } from '../mock';
|
||||
import { useAppSelector } from '../../../store/hooks';
|
||||
|
||||
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
export function VesselTransferApplicationPage() {
|
||||
const navigate = useNavigate();
|
||||
const user = useAppSelector((state) => state.auth.user);
|
||||
const currentOwner = user?.name?.en || user?.username || 'Current Owner';
|
||||
|
||||
const [step, setStep] = useState(0);
|
||||
|
||||
// Step 0
|
||||
const [vesselId, setVesselId] = useState<string | null>(null);
|
||||
const vessel = MOCK_VESSELS.find((v) => v.id === vesselId) ?? null;
|
||||
|
||||
// Step 1 — new owner
|
||||
const [newOwnerName, setNewOwnerName] = useState('');
|
||||
const [newOwnerIdOrTin, setNewOwnerIdOrTin] = useState('');
|
||||
const [newOwnerPhone, setNewOwnerPhone] = useState('');
|
||||
const [newOwnerEmail, setNewOwnerEmail] = useState('');
|
||||
const [newOwnerAddress, setNewOwnerAddress] = useState('');
|
||||
|
||||
// Step 2 — reason + document
|
||||
const [reason, setReason] = useState<string | null>(null);
|
||||
const [document, setDocument] = useState<File | null>(null);
|
||||
|
||||
const { upload, isUploading } = useDocumentUpload();
|
||||
|
||||
const step0Ok = !!vessel;
|
||||
const step1Ok = !!newOwnerName && !!newOwnerIdOrTin && !!newOwnerPhone
|
||||
&& EMAIL_RE.test(newOwnerEmail) && !!newOwnerAddress;
|
||||
const step2Ok = !!reason && !!document;
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!vessel || !reason || !document) return;
|
||||
try {
|
||||
const { fileInfo } = await upload(document, '/documents/get-file-upload-key');
|
||||
addTransferRequest({
|
||||
vesselName: vessel.name,
|
||||
vesselRegNo: vessel.regNo,
|
||||
currentOwner,
|
||||
newOwnerName,
|
||||
reason: reason as (typeof TRANSFER_REASONS)[number],
|
||||
documentFileInfo: fileInfo,
|
||||
});
|
||||
notify.success('Transfer request submitted. SMS and email confirmation sent.');
|
||||
navigate('/vessel-transfers');
|
||||
} catch (error) {
|
||||
const tooLarge = isStorageUploadError(error) && error.message === 'STORAGE_UPLOAD_TOO_LARGE';
|
||||
notify.error(tooLarge ? 'File is too large to upload.' : 'Failed to upload document. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack gap="md">
|
||||
<Group gap="sm">
|
||||
<Button variant="subtle" leftSection={<IconArrowLeft size={14} />} onClick={() => navigate('/vessel-transfers')}>Back</Button>
|
||||
<div>
|
||||
<Title order={3}>Request Ownership Transfer</Title>
|
||||
<Text fz="sm" c="dimmed">Submit a request to transfer your vessel to a new owner.</Text>
|
||||
</div>
|
||||
</Group>
|
||||
|
||||
{/* Step 0 — Select vessel */}
|
||||
{step === 0 && (
|
||||
<Paper withBorder radius="lg" p="xl">
|
||||
<Stack gap="md">
|
||||
<Text fw={700}>Select Vessel</Text>
|
||||
<Alert variant="light" color="blue" icon={<IconInfoCircle size={15} />}>
|
||||
<Text fz="sm">Only approved vessels are available for transfer.</Text>
|
||||
</Alert>
|
||||
<Select
|
||||
label="Vessel"
|
||||
placeholder="Select a vessel…"
|
||||
data={MOCK_VESSELS.filter((v) => v.approved).map((v) => ({ value: v.id, label: `${v.name} — ${v.regNo}` }))}
|
||||
value={vesselId}
|
||||
onChange={setVesselId}
|
||||
required
|
||||
/>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)}
|
||||
|
||||
{/* Step 1 — New owner details */}
|
||||
{step === 1 && (
|
||||
<Paper withBorder radius="lg" p="xl">
|
||||
<Stack gap="md">
|
||||
<Text fw={700}>New Owner Details</Text>
|
||||
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
|
||||
<TextInput label="Full Name / Company Name" value={newOwnerName} onChange={(e) => setNewOwnerName(e.currentTarget.value)} required />
|
||||
<TextInput label="National ID / TIN" value={newOwnerIdOrTin} onChange={(e) => setNewOwnerIdOrTin(e.currentTarget.value)} required />
|
||||
<TextInput label="Phone Number" value={newOwnerPhone} onChange={(e) => setNewOwnerPhone(e.currentTarget.value)} required />
|
||||
<TextInput
|
||||
label="Email Address"
|
||||
value={newOwnerEmail}
|
||||
onChange={(e) => setNewOwnerEmail(e.currentTarget.value)}
|
||||
error={newOwnerEmail && !EMAIL_RE.test(newOwnerEmail) ? 'Enter a valid email' : undefined}
|
||||
required
|
||||
/>
|
||||
</SimpleGrid>
|
||||
<Textarea label="Address" value={newOwnerAddress} onChange={(e) => setNewOwnerAddress(e.currentTarget.value)} required />
|
||||
</Stack>
|
||||
</Paper>
|
||||
)}
|
||||
|
||||
{/* Step 2 — Reason + document */}
|
||||
{step === 2 && (
|
||||
<Paper withBorder radius="lg" p="xl">
|
||||
<Stack gap="md">
|
||||
<Text fw={700}>Transfer Reason & Document</Text>
|
||||
<Select
|
||||
label="Transfer Reason"
|
||||
placeholder="Select a reason…"
|
||||
data={[...TRANSFER_REASONS]}
|
||||
value={reason}
|
||||
onChange={setReason}
|
||||
required
|
||||
/>
|
||||
<FileInput
|
||||
label={<Group gap={4}><Text fz="sm" fw={500}>Bill of Sale / Transfer Document</Text><Badge size="xs" color="red" variant="light">Required</Badge></Group>}
|
||||
placeholder="Click to upload"
|
||||
leftSection={<IconUpload size={14} />}
|
||||
value={document}
|
||||
onChange={setDocument}
|
||||
accept=".pdf,.jpg,.jpeg,.png"
|
||||
clearable
|
||||
/>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)}
|
||||
|
||||
{/* Step 3 — Review */}
|
||||
{step === 3 && vessel && (
|
||||
<Paper withBorder radius="lg" p="xl">
|
||||
<Stack gap="lg">
|
||||
<Text fw={700}>Review & Submit</Text>
|
||||
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
|
||||
{[
|
||||
['Vessel', `${vessel.name} — ${vessel.regNo}`],
|
||||
['Current Owner', currentOwner],
|
||||
['New Owner', newOwnerName],
|
||||
['National ID / TIN', newOwnerIdOrTin],
|
||||
['Phone', newOwnerPhone],
|
||||
['Email', newOwnerEmail],
|
||||
['Address', newOwnerAddress],
|
||||
['Transfer Reason', reason ?? ''],
|
||||
].map(([label, value]) => (
|
||||
<div key={label}>
|
||||
<Text fz="xs" c="dimmed" tt="uppercase" fw={600}>{label}</Text>
|
||||
<Text fz="sm" fw={500}>{value || '—'}</Text>
|
||||
</div>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
<Divider />
|
||||
<Group gap="xs">
|
||||
<Text fz="xs" fw={700} tt="uppercase" c="dimmed">Document:</Text>
|
||||
<Text fz="sm" c="blue.7">{document?.name}</Text>
|
||||
</Group>
|
||||
<Alert variant="light" color="blue" icon={<IconInfoCircle size={14} />}>
|
||||
<Text fz="xs">By submitting you confirm the new owner details are accurate and the uploaded document is genuine.</Text>
|
||||
</Alert>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)}
|
||||
|
||||
{/* Navigation */}
|
||||
<Group justify="space-between" mt="md">
|
||||
<Button variant="default" leftSection={<IconArrowLeft size={14} />} onClick={() => setStep((s) => s - 1)} disabled={step === 0}>
|
||||
Back
|
||||
</Button>
|
||||
{step < 3 ? (
|
||||
<Button
|
||||
rightSection={<IconArrowRight size={14} />}
|
||||
disabled={(step === 0 && !step0Ok) || (step === 1 && !step1Ok) || (step === 2 && !step2Ok)}
|
||||
onClick={() => setStep((s) => s + 1)}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
) : (
|
||||
<Button color="teal" leftSection={<IconCheck size={14} />} onClick={handleSubmit} loading={isUploading}>
|
||||
Submit Request
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Alert,
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
Divider,
|
||||
Group,
|
||||
Paper,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
Title,
|
||||
} from '@mantine/core';
|
||||
import { IconAnchor, IconArrowRight, IconInfoCircle, IconShip } from '@tabler/icons-react';
|
||||
import { MOCK_REQUESTS, STATUS_COLOR } from '../mock';
|
||||
|
||||
export function VesselTransferPage() {
|
||||
const navigate = useNavigate();
|
||||
// MOCK_REQUESTS is mutated in place by addTransferRequest — copy so React notices the change on navigation back.
|
||||
const [requests] = useState(() => [...MOCK_REQUESTS]);
|
||||
|
||||
return (
|
||||
<Stack gap="md">
|
||||
<Group justify="space-between" align="flex-start" wrap="wrap" gap="sm">
|
||||
<div>
|
||||
<Title order={3}>Vessel Ownership Transfers</Title>
|
||||
<Text fz="sm" c="dimmed">Request and track the transfer of a vessel's registered ownership.</Text>
|
||||
</div>
|
||||
<Button leftSection={<IconShip size={15} />} rightSection={<IconArrowRight size={15} />} onClick={() => navigate('/vessel-transfers/apply')}>
|
||||
Request Ownership Transfer
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<Paper withBorder radius="lg" p="xl">
|
||||
<Text fw={700} mb="md">My Transfer Requests</Text>
|
||||
{requests.length === 0 ? (
|
||||
<Alert variant="light" color="gray" icon={<IconInfoCircle size={15} />}>
|
||||
No transfer requests yet.
|
||||
</Alert>
|
||||
) : (
|
||||
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
|
||||
{requests.map((req) => (
|
||||
<Card key={req.id} withBorder radius="md" p="md">
|
||||
<Group justify="space-between" mb="sm">
|
||||
<Group gap="sm">
|
||||
<ThemeIcon size={36} radius="md" color="blue" variant="light"><IconAnchor size={18} /></ThemeIcon>
|
||||
<div>
|
||||
<Text fw={700} fz="sm">{req.vesselName}</Text>
|
||||
<Text fz="xs" c="dimmed">{req.vesselRegNo}</Text>
|
||||
</div>
|
||||
</Group>
|
||||
<Badge color={STATUS_COLOR[req.status]} variant="light">{req.status}</Badge>
|
||||
</Group>
|
||||
<Divider mb="sm" />
|
||||
<SimpleGrid cols={2} spacing="xs" mb="sm">
|
||||
<div><Text fz="xs" c="dimmed">Current Owner</Text><Text fz="sm" fw={500}>{req.currentOwner}</Text></div>
|
||||
<div><Text fz="xs" c="dimmed">New Owner</Text><Text fz="sm" fw={500}>{req.newOwnerName}</Text></div>
|
||||
<div><Text fz="xs" c="dimmed">Reason</Text><Text fz="sm" fw={500}>{req.reason}</Text></div>
|
||||
<div><Text fz="xs" c="dimmed">Submitted</Text><Text fz="sm" fw={500}>{req.submitted}</Text></div>
|
||||
</SimpleGrid>
|
||||
{req.status === 'Approved' && (
|
||||
<Alert variant="light" color="teal" icon={<IconInfoCircle size={13} />} p="xs">
|
||||
<Text fz="xs">Transfer approved on {req.approvedOn}. New certificates issued to {req.newOwnerName}.</Text>
|
||||
</Alert>
|
||||
)}
|
||||
{req.status === 'Rejected' && (
|
||||
<Alert variant="light" color="red" icon={<IconInfoCircle size={13} />} p="xs">
|
||||
<Text fz="xs">{req.rejectionReason}</Text>
|
||||
</Alert>
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
)}
|
||||
</Paper>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user