feat: move personal documents configuration to a dedicated tab in the global configuration page

apps/backoffice/src/app/features/certificate-requirements/pages/CertificateRequirementsPage.tsx

@@ -6,7 +6,6 @@ import { ErrorState, PageHeader, PageLoader } from '@ema-platform/ui';
 import { extractErrorMessage, useGetLicenseTypesQuery, useLocalized } from '@ema-platform/api';
 import { DocumentRequirementsTab } from '../components/DocumentRequirementsTab';
 import { FormSchemaTab } from '../components/FormSchemaTab';
-import { PersonalDocumentsCard } from '../components/PersonalDocumentsCard';
 
 /**
  * Where an administrator configures what an applicant must fill in and
@@ -59,11 +58,6 @@ export function CertificateRequirementsPage() {
           <PageLoader label={t('certReq.loading', 'Loading licence types…')} height={300} />
         ) : (
           <Stack gap="md">
-            {/* Above the licence-type picker on purpose: these documents
-                belong to no single type, so filing them under whichever one
-                happens to be selected would misread. */}
-            <PersonalDocumentsCard />
-
             <Select
               label={t('certReq.licenseType', 'Licence type')}
               placeholder={t('certReq.selectLicenseType', 'Select a licence type')}

apps/backoffice/src/app/features/configuration/pages/ConfigurationPage/index.tsx

@@ -24,6 +24,7 @@ import {
   IconHash,
   IconInfoCircle,
   IconAnchor,
+  IconId,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import {
@@ -35,6 +36,9 @@ import {
   PageLoader,
 } from "@ema-platform/ui";
 import { LocationPage } from "../../../location/pages/LocationPage";
+// Lives with the document-requirement editor it reuses; shown here because a
+// document required for every licence is configuration, not one type's form.
+import { PersonalDocumentsCard } from "../../../certificate-requirements/components/PersonalDocumentsCard";
 import { CertificationPage } from "../../../certification/pages/CertificationPage";
 import { NumberFormatTab } from "../../components/NumberFormatTab";
 import { RankDepartmentTab } from "./RankDepartmentTab";
@@ -406,6 +410,9 @@ export function ConfigurationPage() {
           <Tabs.Tab value="ranks" leftSection={<IconAnchor size={16} />}>
             {t("configuration.ranksTab", "Ranks & Departments")}
           </Tabs.Tab>
+          <Tabs.Tab value="personalDocuments" leftSection={<IconId size={16} />}>
+            {t("configuration.personalDocumentsTab", "Personal Documents")}
+          </Tabs.Tab>
         </Tabs.List>
 
         <Tabs.Panel value="professions" pt="md">
@@ -427,6 +434,10 @@ export function ConfigurationPage() {
         <Tabs.Panel value="ranks" pt="md">
           <RankDepartmentTab />
         </Tabs.Panel>
+
+        <Tabs.Panel value="personalDocuments" pt="md">
+          <PersonalDocumentsCard />
+        </Tabs.Panel>
       </Tabs>
     </Stack>
   );

apps/backoffice/src/app/i18n/locales/am.ts

@@ -818,6 +818,7 @@ export const am: Translations = {
 
   configuration: {
     title: "ውቅረት",
+    personalDocumentsTab: "የግል ሰነዶች",
     departments: "ክፍሎች",
     professions: "ሙያዎች",
     departmentsList: "ክፍሎች",

apps/backoffice/src/app/i18n/locales/en.ts

@@ -822,6 +822,7 @@ export const en = {
 
   configuration: {
     title: 'Configuration',
+    personalDocumentsTab: 'Personal Documents',
     departments: 'Departments',
     professions: 'Professions',
     departmentsList: 'Departments',