Tria/emaui
1
0
Fork 0
mirror of https://github.com/Tria-plc/emaui.git synced 2026-08-29 16:28:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add CountrySelect component and integrate country selection in endorsement, seafarer, and waiver pages

Browse Source
This commit is contained in:
estifanos
2026-07-30 12:11:53 +00:00
parent 06eb9eca4f
commit 0db451bdec
7 changed files with 125 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx
View File

@@ -1,5 +1,6 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { CountrySelect, getCountryName } from '@ema-platform/ui';
import {
Alert,
Badge,
@@ -84,7 +85,7 @@ function ApplicationWizard({ onDone }: { onDone: () => void }) {
const [step, setStep] = useState(0);
const [cocNo, setCocNo] = useState('');
const [issuer, setIssuer] = useState('');
const [country, setCountry] = useState('');
const [country, setCountry] = useState<string | null>(null);
const [cocType, setCocType] = useState('');
const [issueDate, setIssueDate] = useState('');
const [expiryDate, setExpiryDate] = useState('');
@@ -129,7 +130,7 @@ function ApplicationWizard({ onDone }: { onDone: () => void }) {
</Alert>
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
<TextInput label="Foreign CoC Number" placeholder="e.g. PHL-COC-2022-0045" value={cocNo} onChange={(e) => setCocNo(e.currentTarget.value)} required />
<TextInput label="Issuing Country" placeholder="e.g. Philippines" value={country} onChange={(e) => setCountry(e.currentTarget.value)} required />
<CountrySelect label="Issuing Country" value={country} onChange={setCountry} required />
<TextInput label="Issuing Authority / Administration" placeholder="e.g. Maritime Industry Authority (MARINA)" value={issuer} onChange={(e) => setIssuer(e.currentTarget.value)} required />
<TextInput label="Certificate Type" placeholder="e.g. Officer in Charge of a Navigational Watch" value={cocType} onChange={(e) => setCocType(e.currentTarget.value)} required />
<TextInput label="Issue Date" type="date" value={issueDate} onChange={(e) => setIssueDate(e.currentTarget.value)} required />
@@ -231,7 +232,7 @@ function ApplicationWizard({ onDone }: { onDone: () => void }) {
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md" mb="lg">
{[
['CoC Number', cocNo],
['Country', country],
['Country', getCountryName(country)],
['Issuer', issuer],
['CoC Type', cocType],
['Issue Date', issueDate],

6
apps/portal/src/app/features/seafarer/pages/SeafarerProfilePage.tsx
View File

@@ -45,7 +45,7 @@ import {
IconX,
} from '@tabler/icons-react';
import { useNavigate, useParams } from 'react-router-dom';
import { notify, useErrorHandler } from '@ema-platform/ui';
import { CountrySelect, notify, useErrorHandler } from '@ema-platform/ui';
import type { Seafarer } from './SeafarerRegistryPage';
// ---------------------------------------------------------------------------
@@ -506,6 +506,8 @@ function AddMedicalModal({ opened, onClose }: { opened: boolean; onClose: () =>
}
function AddSeaServiceModal({ opened, onClose }: { opened: boolean; onClose: () => void }) {
const [flag, setFlag] = useState<string | null>(null);
return (
<Modal opened={opened} onClose={onClose} title="Add Sea Service Record" size="lg">
<Stack gap="sm">
@@ -515,7 +517,7 @@ function AddSeaServiceModal({ opened, onClose }: { opened: boolean; onClose: ()
</SimpleGrid>
<SimpleGrid cols={2} spacing="sm">
<TextInput label="Rank" placeholder="e.g. Able Seaman" />
<TextInput label="Flag" placeholder="Country" />
<CountrySelect label="Flag" value={flag} onChange={setFlag} />
</SimpleGrid>
<SimpleGrid cols={2} spacing="sm">
<TextInput label="From" type="date" />

8
apps/portal/src/app/features/waiver/pages/WaiverApplicationPage.tsx
View File

@@ -34,7 +34,7 @@ import {
IconShieldOff,
IconShip,
} from '@tabler/icons-react';
import { notify } from '@ema-platform/ui';
import { CountrySelect, getCountryName, notify } from '@ema-platform/ui';
const STEPS = [
{ label: 'Waiver Type & Applicant' },
@@ -200,7 +200,7 @@ export function WaiverApplicationPage() {
const [invoiceNumber, setInvoiceNumber] = useState('');
const [invoiceDate, setInvoiceDate] = useState('');
const [invoiceAmount, setInvoiceAmount] = useState<string | number>('');
const [countryOfOrigin, setCountryOfOrigin] = useState('');
const [countryOfOrigin, setCountryOfOrigin] = useState<string | null>(null);
const [supplierName, setSupplierName] = useState('');
const [portOfLoading, setPortOfLoading] = useState('');
@@ -266,7 +266,7 @@ export function WaiverApplicationPage() {
businessLicenseNumber, applicantAddress, reasonNonEsl, bankName, bankBranch,
letterRecipient, letterLanguage,
productName, productDescription, quantity, unitOfMeasurement,
invoiceNumber, invoiceDate, invoiceAmount, countryOfOrigin, supplierName,
invoiceNumber, invoiceDate, invoiceAmount, countryOfOrigin: getCountryName(countryOfOrigin), supplierName,
portOfLoading, portOfDischarge, fromPortName, toPortName, vesselName, carrierName,
billOfLadingNumber, estimatedArrivalDate, actualArrivalDate,
},
@@ -366,7 +366,7 @@ export function WaiverApplicationPage() {
<TextInput label="Product Description" required value={productDescription} onChange={(e) => setProductDescription(e.currentTarget.value)} />
<NumberInput label="Quantity" required min={0} value={quantity} onChange={setQuantity} />
<TextInput label="Unit of Measurement" required value={unitOfMeasurement} onChange={(e) => setUnitOfMeasurement(e.currentTarget.value)} />
<TextInput label="Country of Origin" value={countryOfOrigin} onChange={(e) => setCountryOfOrigin(e.currentTarget.value)} />
<CountrySelect label="Country of Origin" value={countryOfOrigin} onChange={setCountryOfOrigin} />
<TextInput label="Supplier / Exporter Name" value={supplierName} onChange={(e) => setSupplierName(e.currentTarget.value)} />
</SimpleGrid>
<SectionHead title="Invoice Information" />