mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-26 13:02:50 +00:00
Merge branch 'WorkflowChange' of https://github.com/Tria-plc/emaui into feature/exam-attempt-domain
This commit is contained in:
nati14575
@@ -198,20 +198,21 @@ export type VerificationKind = 'medical' | 'sea-service';
|
||||
*/
|
||||
export function MedicalVerificationPage({ kind = 'medical' }: { kind?: VerificationKind }) {
|
||||
const { t } = useTranslation();
|
||||
const isMedical = kind === 'medical';
|
||||
const [filter, setFilter] = useState<RecordQueueFilter>('SUBMITTED');
|
||||
const {
|
||||
data: pendingMedical,
|
||||
isLoading: loadingMedical,
|
||||
isFetching: fetchingMedical,
|
||||
refetch: refetchMedical,
|
||||
} = useGetPendingMedicalQuery(filter);
|
||||
} = useGetPendingMedicalQuery(filter, { skip: !isMedical });
|
||||
|
||||
const {
|
||||
data: pendingSeaService,
|
||||
isLoading: loadingSeaService,
|
||||
isFetching: fetchingSeaService,
|
||||
refetch: refetchSeaService,
|
||||
} = useGetPendingSeaServiceQuery(filter);
|
||||
} = useGetPendingSeaServiceQuery(filter, { skip: isMedical });
|
||||
|
||||
const [verifyMedical, { isLoading: rulingMedical }] =
|
||||
useVerifyMedicalCertificateMutation();
|
||||
@@ -372,8 +373,6 @@ export function MedicalVerificationPage({ kind = 'medical' }: { kind?: Verificat
|
||||
[rulingSeaService, rule, verifySeaService, showDate, t],
|
||||
);
|
||||
|
||||
const isMedical = kind === 'medical';
|
||||
|
||||
return (
|
||||
<Container size="xl" py="md">
|
||||
<Title order={3} mb={4}>
|
||||
@@ -393,6 +392,8 @@ export function MedicalVerificationPage({ kind = 'medical' }: { kind?: Verificat
|
||||
)}
|
||||
</Text>
|
||||
|
||||
{statusFilter}
|
||||
|
||||
{isMedical ? (
|
||||
<AdvancedTable
|
||||
columns={medicalTableColumns}
|
||||
@@ -408,7 +409,7 @@ export function MedicalVerificationPage({ kind = 'medical' }: { kind?: Verificat
|
||||
onPageSizeChange={handleMedicalPageSizeChange}
|
||||
refresh={refetchMedical}
|
||||
isLoading={loadingMedical || fetchingMedical}
|
||||
emptyText={t('recordVerification.emptyText', 'Nothing awaiting verification.')}
|
||||
emptyText={emptyText}
|
||||
/>
|
||||
) : (
|
||||
<AdvancedTable
|
||||
@@ -425,7 +426,7 @@ export function MedicalVerificationPage({ kind = 'medical' }: { kind?: Verificat
|
||||
onPageSizeChange={handleSeaServicePageSizeChange}
|
||||
refresh={refetchSeaService}
|
||||
isLoading={loadingSeaService || fetchingSeaService}
|
||||
emptyText={t('recordVerification.emptyText', 'Nothing awaiting verification.')}
|
||||
emptyText={emptyText}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
@@ -31,7 +31,6 @@ import {
|
||||
IconLock,
|
||||
IconMail,
|
||||
IconMoon,
|
||||
IconPhone,
|
||||
IconSettings,
|
||||
IconShieldLock,
|
||||
IconSun,
|
||||
@@ -42,7 +41,7 @@ import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { notify, PageHeader, useErrorHandler, passwordSchema as strongPasswordSchema, PasswordRequirements, phoneNumber } from '@ema-platform/ui';
|
||||
import { notify, PageHeader, useErrorHandler, passwordSchema as strongPasswordSchema, PasswordRequirements, phoneNumber, PhoneInput } from '@ema-platform/ui';
|
||||
import { useApiMutation } from '@ema-platform/api';
|
||||
import { ActiveSessions, setUser } from '@ema-platform/auth';
|
||||
import type { AuthUser } from '@ema-platform/auth';
|
||||
@@ -136,6 +135,9 @@ export function ProfilePage() {
|
||||
register: registerProfile,
|
||||
handleSubmit: handleProfileSubmit,
|
||||
reset: resetProfile,
|
||||
watch: watchProfile,
|
||||
setValue: setValueProfile,
|
||||
trigger: triggerProfile,
|
||||
formState: { errors: profileErrors },
|
||||
} = useForm<ProfileValues>({
|
||||
resolver: zodResolver(profileSchema),
|
||||
@@ -372,11 +374,12 @@ export function ProfilePage() {
|
||||
error={profileErrors.email?.message}
|
||||
{...registerProfile('email')}
|
||||
/>
|
||||
<TextInput
|
||||
<PhoneInput
|
||||
label={t('profile.fields.phone')}
|
||||
leftSection={<IconPhone size={18} />}
|
||||
value={watchProfile('phoneNumber') || ''}
|
||||
onChange={(val) => setValueProfile('phoneNumber', val, { shouldValidate: !!profileErrors.phoneNumber })}
|
||||
onBlur={() => triggerProfile('phoneNumber')}
|
||||
error={profileErrors.phoneNumber?.message}
|
||||
{...registerProfile('phoneNumber')}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { AppShell, Drawer } from '@mantine/core';
|
||||
import { AppShell, Box, Drawer, Group, Text } from '@mantine/core';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
@@ -26,6 +26,14 @@ const BADGE_POLL_MS = 60_000;
|
||||
|
||||
const HEADER_HEIGHT = 116;
|
||||
|
||||
/**
|
||||
* Horizontal inset of the header chrome. `AppHeader` adds its own `px="lg"`
|
||||
* inside this, so the nav strip below needs the sum to line up with the
|
||||
* controls above it — it used to start 20px to their left.
|
||||
*/
|
||||
const CHROME_PAD_X = 32;
|
||||
const NAV_STRIP_PAD_X = CHROME_PAD_X + 20;
|
||||
|
||||
/**
|
||||
* A desk left unlocked with a license-review or medical-record screen open is
|
||||
* the actual threat model here, not a slow token. 15 minutes of no mouse,
|
||||
@@ -144,7 +152,9 @@ export function BackofficeLayout() {
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
header={{ height: isSidebar ? 74 : HEADER_HEIGHT }}
|
||||
// The top layout drops its nav strip on small screens — the drawer is
|
||||
// the nav there — so the header shrinks back to a single row with it.
|
||||
header={{ height: isSidebar ? 74 : { base: 74, sm: HEADER_HEIGHT } }}
|
||||
navbar={
|
||||
isSidebar
|
||||
? {
|
||||
@@ -162,13 +172,28 @@ export function BackofficeLayout() {
|
||||
<AppShell.Header
|
||||
style={{
|
||||
background: "var(--mantine-color-body)",
|
||||
borderBottom: "1px solid var(--mantine-color-gray-2)",
|
||||
borderBottom: "1px solid var(--mantine-color-default-border)",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<div style={{ height: 74, flexShrink: 0, padding: "0 32px" }}>
|
||||
<div
|
||||
style={{ height: 74, flexShrink: 0, padding: `0 ${CHROME_PAD_X}px` }}
|
||||
>
|
||||
<AppHeader
|
||||
brand={
|
||||
isSidebar ? undefined : (
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<BrandMark size={28} />
|
||||
<Text fw={700} size="sm" lh={1.1} visibleFrom="xs">
|
||||
{t('app.name')}
|
||||
</Text>
|
||||
</Group>
|
||||
)
|
||||
}
|
||||
// Nothing to toggle on a desktop top bar; on mobile it opens the
|
||||
// drawer below.
|
||||
burgerHiddenFrom={isSidebar ? undefined : 'sm'}
|
||||
onToggleNav={toggleNav}
|
||||
onToggleSidebar={isSidebar ? handleToggleCollapse : toggleNav}
|
||||
navOpened={opened}
|
||||
@@ -182,13 +207,14 @@ export function BackofficeLayout() {
|
||||
</div>
|
||||
|
||||
{!isSidebar && (
|
||||
<div
|
||||
<Box
|
||||
visibleFrom="sm"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '0 32px',
|
||||
padding: `0 ${NAV_STRIP_PAD_X}px`,
|
||||
height: 42,
|
||||
borderTop: '1px solid var(--mantine-color-gray-1)',
|
||||
borderTop: '1px solid var(--mantine-color-default-border)',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
@@ -199,7 +225,7 @@ export function BackofficeLayout() {
|
||||
activePath={location.pathname}
|
||||
onNavigate={go}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
)}
|
||||
</AppShell.Header>
|
||||
|
||||
@@ -210,7 +236,7 @@ export function BackofficeLayout() {
|
||||
overflow: "hidden",
|
||||
transition: "width 200ms ease",
|
||||
background: "var(--mantine-color-body)",
|
||||
borderRight: "1px solid var(--mantine-color-gray-2)",
|
||||
borderRight: "1px solid var(--mantine-color-default-border)",
|
||||
}}
|
||||
>
|
||||
<AppSidebar
|
||||
@@ -238,30 +264,28 @@ export function BackofficeLayout() {
|
||||
{/* Mobile nav: a proper Drawer (sized, backdrop, closes on outside
|
||||
click) instead of AppShell's full-width mobile navbar. Mirrors the
|
||||
landing page's mobile menu. */}
|
||||
{isSidebar && (
|
||||
<Drawer
|
||||
opened={opened}
|
||||
onClose={closeNav}
|
||||
hiddenFrom="sm"
|
||||
size="75%"
|
||||
padding={0}
|
||||
withCloseButton={false}
|
||||
>
|
||||
<AppSidebar
|
||||
navItems={sections}
|
||||
collapsed={false}
|
||||
activePath={location.pathname}
|
||||
onToggleCollapse={handleToggleCollapse}
|
||||
onNavigate={(item) => {
|
||||
go(item);
|
||||
closeNav();
|
||||
}}
|
||||
brandName={t('app.name')}
|
||||
brandSubtitle={t('app.authority')}
|
||||
brandLogo={<BrandMark size={32} />}
|
||||
/>
|
||||
</Drawer>
|
||||
)}
|
||||
<Drawer
|
||||
opened={opened}
|
||||
onClose={closeNav}
|
||||
hiddenFrom="sm"
|
||||
size="75%"
|
||||
padding={0}
|
||||
withCloseButton={false}
|
||||
>
|
||||
<AppSidebar
|
||||
navItems={sections}
|
||||
collapsed={false}
|
||||
activePath={location.pathname}
|
||||
onToggleCollapse={handleToggleCollapse}
|
||||
onNavigate={(item) => {
|
||||
go(item);
|
||||
closeNav();
|
||||
}}
|
||||
brandName={t('app.name')}
|
||||
brandSubtitle={t('app.authority')}
|
||||
brandLogo={<BrandMark size={32} />}
|
||||
/>
|
||||
</Drawer>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -30,7 +30,12 @@ import {
|
||||
IconShieldCheck,
|
||||
} from '@tabler/icons-react';
|
||||
import { authStorage, useCurrentProfile } from '@ema-platform/auth';
|
||||
import { useApiQuery } from '@ema-platform/api';
|
||||
import {
|
||||
extractErrorMessage,
|
||||
useApiQuery,
|
||||
useBypassPaymentMutation,
|
||||
useGetPaymentCapabilitiesQuery,
|
||||
} from '@ema-platform/api';
|
||||
import {
|
||||
useGetMySeaServiceRecordsQuery,
|
||||
useGetMyMedicalCertificatesQuery,
|
||||
@@ -146,11 +151,32 @@ export function CertificatesPage() {
|
||||
const [previewTitle, setPreviewTitle] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { pay, isPaying } = useApplicationPayment();
|
||||
// Dev/test only — the API reports false in production and the button is
|
||||
// never rendered. Same shortcut My Applications offers.
|
||||
const { data: capabilities } = useGetPaymentCapabilitiesQuery();
|
||||
const [bypassPayment, { isLoading: bypassing }] = useBypassPaymentMutation();
|
||||
|
||||
const { data } = useApiQuery<CertificatesOverview>({
|
||||
const { data, refetch } = useApiQuery<CertificatesOverview>({
|
||||
url: '/certificates/my',
|
||||
method: 'GET',
|
||||
});
|
||||
|
||||
const handleBypass = async (applicationId: string) => {
|
||||
try {
|
||||
const result = await bypassPayment(applicationId).unwrap();
|
||||
notifications.show({
|
||||
color: 'teal',
|
||||
title: 'Payment bypassed',
|
||||
message: result.certificateIssued
|
||||
? 'The certificate has been issued.'
|
||||
: `Application is now ${humanStatus(result.status)}.`,
|
||||
});
|
||||
// Generic query, not tag-driven: refresh it by hand.
|
||||
refetch();
|
||||
} catch (err) {
|
||||
notifications.show({ color: 'red', title: 'Bypass failed', message: extractErrorMessage(err) });
|
||||
}
|
||||
};
|
||||
const certificates = data?.certificates ?? [];
|
||||
const applications = data?.applications ?? [];
|
||||
|
||||
@@ -331,6 +357,17 @@ export function CertificatesPage() {
|
||||
Pay {app.feeAmount.toLocaleString()} {app.feeCurrency}
|
||||
</Button>
|
||||
)}
|
||||
{app.feeAmount !== null && capabilities?.bypassEnabled && (
|
||||
<Button
|
||||
size="xs"
|
||||
variant="default"
|
||||
loading={bypassing}
|
||||
onClick={() => handleBypass(app.applicationId)}
|
||||
title="Testing only — marks the fee paid without a provider"
|
||||
>
|
||||
Bypass payment
|
||||
</Button>
|
||||
)}
|
||||
<Text
|
||||
fz="xs"
|
||||
c="blue"
|
||||
|
||||
@@ -164,6 +164,13 @@ function EvidenceField({
|
||||
|
||||
// ---------------------------------------------------------------- sea service
|
||||
|
||||
/** Today as a `yyyy-mm-dd` key — same shape the pickers emit, so plain
|
||||
* string comparison is a valid date comparison. Taken in the authority's
|
||||
* timezone, matching the server's check, so a seafarer logging in from a
|
||||
* zone ahead of Addis isn't offered a day the server then rejects. */
|
||||
const todayKey = () =>
|
||||
new Date().toLocaleDateString('en-CA', { timeZone: 'Africa/Addis_Ababa' });
|
||||
|
||||
const EMPTY_SEA_SERVICE = {
|
||||
vesselName: '',
|
||||
imoNumber: '',
|
||||
@@ -276,12 +283,27 @@ function SeaServiceTab() {
|
||||
}
|
||||
};
|
||||
|
||||
// Service already served — neither end of an engagement can be in the future.
|
||||
const today = todayKey();
|
||||
const dateError =
|
||||
form.engagementDate > today || form.dischargeDate > today
|
||||
? t('seaRecords.seaService.dateFuture', {
|
||||
defaultValue: 'Engagement and discharge dates cannot be in the future.',
|
||||
})
|
||||
: form.engagementDate &&
|
||||
form.dischargeDate &&
|
||||
form.engagementDate >= form.dischargeDate
|
||||
? t('seaRecords.seaService.dateOrder', {
|
||||
defaultValue: 'Discharge date must be after the engagement date.',
|
||||
})
|
||||
: null;
|
||||
|
||||
const valid =
|
||||
form.vesselName.trim().length > 1 &&
|
||||
form.rank.trim().length > 1 &&
|
||||
form.engagementDate &&
|
||||
form.dischargeDate &&
|
||||
form.engagementDate < form.dischargeDate;
|
||||
!dateError;
|
||||
|
||||
// Shown under the date pickers as they are filled: the seafarer sees what
|
||||
// the engagement is worth before saving it.
|
||||
@@ -408,6 +430,7 @@ function SeaServiceTab() {
|
||||
onChange={(val) =>
|
||||
setForm({ ...form, engagementDate: val })
|
||||
}
|
||||
maxDate={form.dischargeDate || today}
|
||||
dateFormat="date"
|
||||
/>
|
||||
<AmharicDatePicker
|
||||
@@ -417,24 +440,23 @@ function SeaServiceTab() {
|
||||
onChange={(val) =>
|
||||
setForm({ ...form, dischargeDate: val })
|
||||
}
|
||||
minDate={form.engagementDate || undefined}
|
||||
maxDate={today}
|
||||
dateFormat="date"
|
||||
/>
|
||||
</Group>
|
||||
{form.engagementDate && form.dischargeDate && (
|
||||
{(dateError || (form.engagementDate && form.dischargeDate)) && (
|
||||
<Alert
|
||||
variant="light"
|
||||
color={formDays === null ? 'red' : 'teal'}
|
||||
color={dateError ? 'red' : 'teal'}
|
||||
icon={<IconInfoCircle size={16} />}
|
||||
py={6}
|
||||
>
|
||||
{formDays === null
|
||||
? t('seaRecords.seaService.dateOrder', {
|
||||
defaultValue: 'Discharge date must be after the engagement date.',
|
||||
})
|
||||
: t('seaRecords.seaService.daysServed', {
|
||||
days: formDays,
|
||||
defaultValue: 'Days served on this engagement: {{days}} (both days counted)',
|
||||
})}
|
||||
{dateError ??
|
||||
t('seaRecords.seaService.daysServed', {
|
||||
days: formDays,
|
||||
defaultValue: 'Days served on this engagement: {{days}} (both days counted)',
|
||||
})}
|
||||
</Alert>
|
||||
)}
|
||||
<Textarea
|
||||
@@ -581,10 +603,12 @@ function MedicalTab() {
|
||||
}
|
||||
};
|
||||
|
||||
const today = todayKey();
|
||||
const valid =
|
||||
form.issuerName.trim().length > 1 &&
|
||||
form.issueDate &&
|
||||
form.expiryDate &&
|
||||
form.issueDate <= today &&
|
||||
form.issueDate < form.expiryDate;
|
||||
|
||||
const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable({ pageSize: 10 });
|
||||
@@ -664,6 +688,7 @@ function MedicalTab() {
|
||||
required
|
||||
value={form.issueDate}
|
||||
onChange={(val) => setForm({ ...form, issueDate: val })}
|
||||
maxDate={today}
|
||||
dateFormat="date"
|
||||
/>
|
||||
<AmharicDatePicker
|
||||
@@ -671,6 +696,7 @@ function MedicalTab() {
|
||||
required
|
||||
value={form.expiryDate}
|
||||
onChange={(val) => setForm({ ...form, expiryDate: val })}
|
||||
minDate={form.issueDate || undefined}
|
||||
dateFormat="date"
|
||||
/>
|
||||
</Group>
|
||||
|
||||
Reference in New Issue
Block a user