From 7c3a25245f645f89e3a13a3200a6b2544e778089 Mon Sep 17 00:00:00 2001 From: estifanos Date: Tue, 11 Aug 2026 11:48:09 +0000 Subject: [PATCH] UI fixes --- .../certification/pages/CertificationPage.tsx | 3 +- .../src/app/features/exam/pages/ExamPage.tsx | 3 +- .../license-review/pages/LicenseQueuePage.tsx | 18 +++++++---- .../pages/MedicalVerificationPage.tsx | 30 ++++++++++++++----- .../features/question/pages/QuestionPage.tsx | 3 +- .../app/features/result/pages/ResultPage.tsx | 3 +- .../pages/SeafarerRegistryPage.tsx | 3 +- .../licensing/pages/MyApplicationsPage.tsx | 12 ++++++-- .../seafarer/pages/MySeaRecordsPage.tsx | 6 ++-- 9 files changed, 57 insertions(+), 24 deletions(-) diff --git a/apps/backoffice/src/app/features/certification/pages/CertificationPage.tsx b/apps/backoffice/src/app/features/certification/pages/CertificationPage.tsx index bd6163ae1..77a2579ed 100644 --- a/apps/backoffice/src/app/features/certification/pages/CertificationPage.tsx +++ b/apps/backoffice/src/app/features/certification/pages/CertificationPage.tsx @@ -75,7 +75,7 @@ export function CertificationPage() { const locale = i18n.language as 'en' | 'am'; const { handleError } = useErrorHandler(); const { data, isFetching, isError, refetch } = useGetCertificationsQuery(); - const { setPageIndex, pageSize, paginate } = useServerTable(); + const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable(); const [createCert, { isLoading: isCreating }] = useCreateCertificationMutation(); const [updateCert, { isLoading: isUpdating }] = useUpdateCertificationMutation(); const [deleteCert] = useDeleteCertificationMutation(); @@ -191,6 +191,7 @@ export function CertificationPage() { pageIndex={page.pageIndex} onPageChange={setPageIndex} pageSize={pageSize} + onPageSizeChange={setPageSize} refresh={refetch} isLoading={isFetching} emptyText={t('certification.noItems')} diff --git a/apps/backoffice/src/app/features/exam/pages/ExamPage.tsx b/apps/backoffice/src/app/features/exam/pages/ExamPage.tsx index ed0a50c69..8991aa4b4 100644 --- a/apps/backoffice/src/app/features/exam/pages/ExamPage.tsx +++ b/apps/backoffice/src/app/features/exam/pages/ExamPage.tsx @@ -353,7 +353,7 @@ export function ExamPage() { const locale = i18n.language as "en" | "am"; const { data: certRes } = useGetCertificationsQuery(); const { data, isFetching, isError, refetch } = useGetExamsQuery(); - const { setPageIndex, pageSize, paginate } = useServerTable(); + const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable(); const [createExam, { isLoading: isCreating }] = useCreateExamMutation(); const [updateExam, { isLoading: isUpdating }] = useUpdateExamMutation(); const [deleteExam] = useDeleteExamMutation(); @@ -580,6 +580,7 @@ export function ExamPage() { pageIndex={page.pageIndex} onPageChange={setPageIndex} pageSize={pageSize} + onPageSizeChange={setPageSize} refresh={refetch} isLoading={isFetching} emptyText={t("exam.noItems")} diff --git a/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage.tsx b/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage.tsx index bddd9d442..16b49e6d1 100644 --- a/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage.tsx +++ b/apps/backoffice/src/app/features/license-review/pages/LicenseQueuePage.tsx @@ -130,6 +130,7 @@ export function LicenseQueuePage() { () => (searchParams.get("view") as SavedViewId) || readLastView(), ); const [page, setPage] = useState(() => Number(searchParams.get("page")) || 1); + const [pageSize, setPageSize] = useState(PAGE_SIZE); const [selected, setSelected] = useState([]); const [searchInput, setSearchInput] = useState(searchParams.get("q") ?? ""); const [cursor, setCursor] = useState(0); @@ -166,10 +167,10 @@ export function LicenseQueuePage() { urlFilter.sortBy ?? (activeView.id === "mine" ? "submittedAt" : "submittedAt"), sortDir: urlFilter.sortDir ?? "DESC", - take: PAGE_SIZE, - skip: (page - 1) * PAGE_SIZE, + take: pageSize, + skip: (page - 1) * pageSize, }), - [activeView, urlFilter, debouncedSearch, pinnedTypeId, page], + [activeView, urlFilter, debouncedSearch, pinnedTypeId, page, pageSize], ); // One query per source; the two inactive ones are skipped, so switching @@ -688,8 +689,8 @@ export function LicenseQueuePage() { {t("queue.showing", { - from: (page - 1) * PAGE_SIZE + 1, - to: Math.min(page * PAGE_SIZE, total), + from: (page - 1) * pageSize + 1, + to: Math.min(page * pageSize, total), total, defaultValue: "Showing {{from}}–{{to}} of {{total}}", })} @@ -706,7 +707,12 @@ export function LicenseQueuePage() { setPage(next); updateUrl({}, view, next); }} - pageSize={PAGE_SIZE} + pageSize={pageSize} + onPageSizeChange={(next) => { + setPageSize(next); + setPage(1); + updateUrl({}, view, 1); + }} refresh={() => active.refetch()} isLoading={active.isFetching} verticalSpacing={density === "compact" ? 4 : "sm"} diff --git a/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage.tsx b/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage.tsx index 44bb9123e..c69a9db76 100644 --- a/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage.tsx +++ b/apps/backoffice/src/app/features/medical-verification/pages/MedicalVerificationPage.tsx @@ -218,6 +218,8 @@ export function MedicalVerificationPage() { const [medicalPage, setMedicalPage] = useState(0); const [seaServicePage, setSeaServicePage] = useState(0); + const [medicalPageSize, setMedicalPageSize] = useState(PAGE_SIZE); + const [seaServicePageSize, setSeaServicePageSize] = useState(PAGE_SIZE); const rule = useCallback( async (run: () => Promise, done: string): Promise => { @@ -241,14 +243,24 @@ export function MedicalVerificationPage() { ); const pagedMedical = useMemo(() => { - const start = medicalPage * PAGE_SIZE; - return pendingMedicalList.slice(start, start + PAGE_SIZE); - }, [pendingMedicalList, medicalPage]); + const start = medicalPage * medicalPageSize; + return pendingMedicalList.slice(start, start + medicalPageSize); + }, [pendingMedicalList, medicalPage, medicalPageSize]); const pagedSeaService = useMemo(() => { - const start = seaServicePage * PAGE_SIZE; - return pendingSeaServiceList.slice(start, start + PAGE_SIZE); - }, [pendingSeaServiceList, seaServicePage]); + const start = seaServicePage * seaServicePageSize; + return pendingSeaServiceList.slice(start, start + seaServicePageSize); + }, [pendingSeaServiceList, seaServicePage, seaServicePageSize]); + + const handleMedicalPageSizeChange = useCallback((size: number) => { + setMedicalPageSize(size); + setMedicalPage(0); + }, []); + + const handleSeaServicePageSizeChange = useCallback((size: number) => { + setSeaServicePageSize(size); + setSeaServicePage(0); + }, []); const medicalColumns: AdvancedColumn[] = useMemo( () => [ @@ -491,7 +503,8 @@ export function MedicalVerificationPage() { itemCount={pendingMedicalList.length} pageIndex={medicalPage} onPageChange={setMedicalPage} - pageSize={PAGE_SIZE} + pageSize={medicalPageSize} + onPageSizeChange={handleMedicalPageSizeChange} refresh={refetchMedical} isLoading={loadingMedical || fetchingMedical} emptyText="Nothing awaiting verification." @@ -506,7 +519,8 @@ export function MedicalVerificationPage() { itemCount={pendingSeaServiceList.length} pageIndex={seaServicePage} onPageChange={setSeaServicePage} - pageSize={PAGE_SIZE} + pageSize={seaServicePageSize} + onPageSizeChange={handleSeaServicePageSizeChange} refresh={refetchSeaService} isLoading={loadingSeaService || fetchingSeaService} emptyText="Nothing awaiting verification." diff --git a/apps/backoffice/src/app/features/question/pages/QuestionPage.tsx b/apps/backoffice/src/app/features/question/pages/QuestionPage.tsx index a317523e9..88297739f 100644 --- a/apps/backoffice/src/app/features/question/pages/QuestionPage.tsx +++ b/apps/backoffice/src/app/features/question/pages/QuestionPage.tsx @@ -123,7 +123,7 @@ export function QuestionPage() { const { handleError } = useErrorHandler(); const { data: certRes } = useGetCertificationsQuery(); const { data, isFetching, isError, refetch } = useGetQuestionsQuery(); - const { setPageIndex, pageSize, paginate } = useServerTable(); + const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable(); const [createQ, { isLoading: isCreating }] = useCreateQuestionMutation(); const [updateQ, { isLoading: isUpdating }] = useUpdateQuestionMutation(); const [deleteQ] = useDeleteQuestionMutation(); @@ -341,6 +341,7 @@ export function QuestionPage() { pageIndex={page.pageIndex} onPageChange={setPageIndex} pageSize={pageSize} + onPageSizeChange={setPageSize} refresh={refetch} isLoading={isFetching} emptyText={t('question.noQuestions')} diff --git a/apps/backoffice/src/app/features/result/pages/ResultPage.tsx b/apps/backoffice/src/app/features/result/pages/ResultPage.tsx index e735081d7..74480c8b7 100644 --- a/apps/backoffice/src/app/features/result/pages/ResultPage.tsx +++ b/apps/backoffice/src/app/features/result/pages/ResultPage.tsx @@ -120,7 +120,7 @@ export function ResultPage() { const { handleError } = useErrorHandler(); const { data: examRes } = useGetExamsQuery(); const { data, isFetching, isError, refetch } = useGetResultsQuery(); - const { setPageIndex, pageSize, paginate } = useServerTable(); + const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable(); const [fetchDetail, { data: detailResult, isFetching: isDetailLoading }] = useLazyGetResultQuery(); const exams = examRes?.items ?? []; @@ -452,6 +452,7 @@ export function ResultPage() { pageIndex={page.pageIndex} onPageChange={setPageIndex} pageSize={pageSize} + onPageSizeChange={setPageSize} refresh={refetch} isLoading={isFetching} emptyText={t('result.noItems')} diff --git a/apps/backoffice/src/app/features/seafarer-registry/pages/SeafarerRegistryPage.tsx b/apps/backoffice/src/app/features/seafarer-registry/pages/SeafarerRegistryPage.tsx index 7b6d1e481..e1288e9e3 100644 --- a/apps/backoffice/src/app/features/seafarer-registry/pages/SeafarerRegistryPage.tsx +++ b/apps/backoffice/src/app/features/seafarer-registry/pages/SeafarerRegistryPage.tsx @@ -334,7 +334,7 @@ export function SeafarerRegistryPage() { method: 'GET', params: { q: 'i=profession,address&t=200' }, }); - const { setPageIndex, pageSize, paginate } = useServerTable(); + const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable(); const items = (data?.items ?? []).filter((p) => { if (!search.trim()) return true; @@ -446,6 +446,7 @@ export function SeafarerRegistryPage() { pageIndex={page.pageIndex} onPageChange={setPageIndex} pageSize={pageSize} + onPageSizeChange={setPageSize} refresh={refetch} isLoading={isLoading} emptyText={search ? 'No profiles match that search.' : 'No seafarers registered yet.'} diff --git a/apps/portal/src/app/features/licensing/pages/MyApplicationsPage.tsx b/apps/portal/src/app/features/licensing/pages/MyApplicationsPage.tsx index ba16e14fb..a28886878 100644 --- a/apps/portal/src/app/features/licensing/pages/MyApplicationsPage.tsx +++ b/apps/portal/src/app/features/licensing/pages/MyApplicationsPage.tsx @@ -104,8 +104,12 @@ export function MyApplicationsPage() { const items = data?.items ?? []; const licenceItems = licences?.items ?? []; - const { setPageIndex: setLicencePage, pageSize: licencePageSize, paginate: paginateLicences } = - useServerTable({ pageSize: 10 }); + const { + setPageIndex: setLicencePage, + pageSize: licencePageSize, + setPageSize: setLicencePageSize, + paginate: paginateLicences, + } = useServerTable({ pageSize: 10 }); const licencePage = paginateLicences(licenceItems); const licenceColumns: AdvancedColumn[] = [ @@ -154,7 +158,7 @@ export function MyApplicationsPage() { }, ]; - const { setPageIndex, pageSize, paginate } = useServerTable({ pageSize: 10 }); + const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable({ pageSize: 10 }); const page = paginate(items); const applicationColumns: AdvancedColumn[] = [ @@ -284,6 +288,7 @@ export function MyApplicationsPage() { pageIndex={licencePage.pageIndex} onPageChange={setLicencePage} pageSize={licencePageSize} + onPageSizeChange={setLicencePageSize} refresh={refetchLicences} isLoading={isFetchingLicences} /> @@ -324,6 +329,7 @@ export function MyApplicationsPage() { pageIndex={page.pageIndex} onPageChange={setPageIndex} pageSize={pageSize} + onPageSizeChange={setPageSize} refresh={refetch} isLoading={isFetching} /> diff --git a/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage.tsx b/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage.tsx index a928162c3..fa7071fb8 100644 --- a/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage.tsx +++ b/apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage.tsx @@ -237,7 +237,7 @@ function SeaServiceTab() { form.dischargeDate && form.engagementDate < form.dischargeDate; - const { setPageIndex, pageSize, paginate } = useServerTable({ pageSize: 10 }); + const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable({ pageSize: 10 }); const page = paginate(records ?? []); const columns: AdvancedColumn[] = [ @@ -348,6 +348,7 @@ function SeaServiceTab() { pageIndex={page.pageIndex} onPageChange={setPageIndex} pageSize={pageSize} + onPageSizeChange={setPageSize} isLoading={isLoading} refresh={refetch} /> @@ -537,7 +538,7 @@ function MedicalTab() { const today = new Date().toISOString().slice(0, 10); - const { setPageIndex, pageSize, paginate } = useServerTable({ pageSize: 10 }); + const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable({ pageSize: 10 }); const page = paginate(certificates ?? []); const columns: AdvancedColumn[] = [ @@ -654,6 +655,7 @@ function MedicalTab() { pageIndex={page.pageIndex} onPageChange={setPageIndex} pageSize={pageSize} + onPageSizeChange={setPageSize} isLoading={isLoading} refresh={refetch} />