From 90d1f6c462de0d3c85ad0c9560e72ac40ea5f199 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 2 Sep 2026 11:26:34 +0000
Subject: [PATCH] remove LicenseTypesTab component and associated creation
 logic from licensing configuration

---
 .../components/LicenseTypesTab.tsx            | 457 ------------------
 .../ConfigurationPage/LicenseTypesTab.tsx     | 112 ++++-
 .../pages/ConfigurationPage/index.tsx         |   9 +-
 apps/backoffice/src/app/i18n/locales/am.ts    | 100 ++--
 apps/backoffice/src/app/i18n/locales/en.ts    | 102 ++--
 .../lib/features/licensing/licensing-api.ts   |  36 --
 6 files changed, 177 insertions(+), 639 deletions(-)
 delete mode 100644 apps/backoffice/src/app/features/configuration/components/LicenseTypesTab.tsx

diff --git a/apps/backoffice/src/app/features/configuration/components/LicenseTypesTab.tsx b/apps/backoffice/src/app/features/configuration/components/LicenseTypesTab.tsx
deleted file mode 100644
index acc686d96..000000000
--- a/apps/backoffice/src/app/features/configuration/components/LicenseTypesTab.tsx
+++ /dev/null
@@ -1,457 +0,0 @@
-import { useMemo, useState } from 'react';
-import {
-  Alert,
-  Anchor,
-  Badge,
-  Button,
-  Card,
-  Checkbox,
-  Group,
-  Modal,
-  NumberInput,
-  Select,
-  SimpleGrid,
-  Stack,
-  Switch,
-  Text,
-  TextInput,
-  Textarea,
-} from '@mantine/core';
-import { useForm } from '@mantine/form';
-import { IconInfoCircle, IconPlus } from '@tabler/icons-react';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-import {
-  AdvancedTable,
-  ErrorState,
-  ModalFooter,
-  notify,
-  PageLoader,
-  useServerTable,
-  type AdvancedColumn,
-} from '@ema-platform/ui';
-import {
-  extractErrorMessage,
-  useCreateLicenseTypeMutation,
-  useGetLicenseCategoriesQuery,
-  useGetLicenseTypesQuery,
-  useLocalized,
-  useUpdateLicenseStatusMutation,
-  type CreateLicenseTypeInput,
-  type FamilyKind,
-  type LicenseCategory,
-  type LicenseType,
-  type ServiceKind,
-  type WorkflowProfile,
-} from '@ema-platform/api';
-import { LICENSE_PERMISSIONS, RequirePermission, usePermissions } from '@ema-platform/auth';
-
-/** Upper snake case, as the server normalises and then requires. */
-const KEY_PATTERN = /^[A-Z][A-Z0-9_]*$/;
-
-interface FormValues {
-  key: string;
-  nameEn: string;
-  nameAm: string;
-  descEn: string;
-  descAm: string;
-  category: LicenseCategory | '';
-  familyKind: FamilyKind;
-  serviceKind: ServiceKind;
-  workflowProfile: WorkflowProfile;
-  certificatePrefix: string;
-  feeNewApplication: number | '';
-  feeCurrency: string;
-  validityMonths: number;
-  issuesCertificate: boolean;
-  renewalEnabled: boolean;
-  inspectionRequired: boolean;
-}
-
-const INITIAL: FormValues = {
-  key: '',
-  nameEn: '',
-  nameAm: '',
-  descEn: '',
-  descAm: '',
-  category: '',
-  familyKind: 'LOGISTICS_LICENSE',
-  serviceKind: 'LICENSE',
-  workflowProfile: 'STANDARD',
-  certificatePrefix: '',
-  feeNewApplication: '',
-  feeCurrency: 'ETB',
-  validityMonths: 12,
-  issuesCertificate: true,
-  renewalEnabled: true,
-  inspectionRequired: true,
-};
-
-/**
- * The catalogue of licence types, with the one thing no other screen offers:
- * creating a new one, and switching one on or off.
- *
- * Deliberately thin. A type is created with only what it needs to exist and
- * be classified; its form, document slots, fees and behaviour rules each
- * have a dedicated screen, and this one links there rather than duplicating
- * them. Deactivating hides the type from the portal catalogue without
- * touching applications already in flight, which hold the type by id.
- */
-export function LicenseTypesTab() {
-  const { t } = useTranslation();
-  const localized = useLocalized();
-  const { can } = usePermissions();
-
-  const { data, isLoading, isFetching, isError, error, refetch } = useGetLicenseTypesQuery();
-  const { data: categoriesRes } = useGetLicenseCategoriesQuery();
-  const [createType, { isLoading: isCreating }] = useCreateLicenseTypeMutation();
-  const [updateStatus, { isLoading: isToggling }] = useUpdateLicenseStatusMutation();
-
-  const [showForm, setShowForm] = useState(false);
-  const [pendingToggle, setPendingToggle] = useState<LicenseType | null>(null);
-  const { setPageIndex, pageSize, setPageSize, paginate } = useServerTable();
-
-  const types = useMemo(
-    () => [...(data?.items ?? [])].sort((a, b) => a.sortOrder - b.sortOrder || a.key.localeCompare(b.key)),
-    [data],
-  );
-
-  const categoryOptions = useMemo(
-    () =>
-      [...(categoriesRes?.items ?? [])]
-        .sort((a, b) => a.sortOrder - b.sortOrder)
-        .map((c) => ({ value: c.key, label: localized(c.name) })),
-    [categoriesRes, localized],
-  );
-  const categoryLabel = (key: string) => categoryOptions.find((c) => c.value === key)?.label ?? key;
-
-  const familyOptions: { value: FamilyKind; label: string }[] = [
-    { value: 'LOGISTICS_LICENSE', label: t('licenseTypeConfig.family.LOGISTICS_LICENSE', 'Logistics licence') },
-    { value: 'CERTIFICATE', label: t('licenseTypeConfig.family.CERTIFICATE', 'Seafarer certificate') },
-    { value: 'DOCUMENT', label: t('licenseTypeConfig.family.DOCUMENT', 'Identity / statutory document') },
-  ];
-  const serviceOptions: { value: ServiceKind; label: string }[] = [
-    { value: 'LICENSE', label: t('licenseTypeConfig.service.LICENSE', 'Licence') },
-    { value: 'REGISTRATION', label: t('licenseTypeConfig.service.REGISTRATION', 'Registration') },
-  ];
-  const workflowOptions: { value: WorkflowProfile; label: string }[] = [
-    { value: 'STANDARD', label: t('licenseTypeConfig.workflow.STANDARD', 'Standard (review → evaluation → inspection → approval)') },
-    { value: 'REGISTRATION', label: t('licenseTypeConfig.workflow.REGISTRATION', 'Registration (review → approval)') },
-  ];
-
-  const form = useForm<FormValues>({
-    initialValues: INITIAL,
-    transformValues: (v) => ({ ...v, key: v.key.trim().toUpperCase(), certificatePrefix: v.certificatePrefix.trim() }),
-    validate: {
-      key: (v) => {
-        const key = v.trim().toUpperCase();
-        if (!key) return t('licenseTypeConfig.validation.keyRequired', 'Key is required');
-        if (key.length > 64) return t('licenseTypeConfig.validation.keyTooLong', 'Key must be at most 64 characters');
-        if (!KEY_PATTERN.test(key)) {
-          return t('licenseTypeConfig.validation.keyFormat', 'Use letters, digits and underscores, e.g. PORT_AGENT');
-        }
-        if (types.some((lt) => lt.key === key)) {
-          return t('licenseTypeConfig.validation.keyTaken', 'A licence type with this key already exists');
-        }
-        return null;
-      },
-      nameEn: (v) => (v.trim() ? null : t('configuration.validation.nameEnRequired')),
-      nameAm: (v) => (v.trim() ? null : t('configuration.validation.nameAmRequired')),
-      certificatePrefix: (v) => {
-        const prefix = v.trim();
-        if (!prefix) return t('licenseTypeConfig.validation.prefixRequired', 'Certificate prefix is required');
-        if (prefix.length > 12) return t('licenseTypeConfig.validation.prefixTooLong', 'Prefix must be at most 12 characters');
-        return null;
-      },
-      feeCurrency: (v) => (v.trim().length > 8 ? t('licenseTypeConfig.validation.currencyTooLong', 'Use a short currency code') : null),
-      validityMonths: (v) =>
-        v >= 6 && v <= 240 ? null : t('licenseTypeConfig.validation.validityRange', 'Validity must be between 6 and 240 months'),
-    },
-  });
-
-  const closeForm = () => {
-    form.reset();
-    setShowForm(false);
-  };
-
-  const submit = form.onSubmit(async (values) => {
-    const body: CreateLicenseTypeInput = {
-      key: values.key,
-      name: { en: values.nameEn.trim(), am: values.nameAm.trim() },
-      certificatePrefix: values.certificatePrefix,
-      familyKind: values.familyKind,
-      serviceKind: values.serviceKind,
-      workflowProfile: values.workflowProfile,
-      feeCurrency: values.feeCurrency.trim() || 'ETB',
-      validityMonths: values.validityMonths,
-      issuesCertificate: values.issuesCertificate,
-      renewalEnabled: values.renewalEnabled,
-      inspectionRequired: values.inspectionRequired,
-      // The last row by default; the seeded order is EMA's and stays put.
-      sortOrder: types.length,
-    };
-    if (values.descEn.trim() || values.descAm.trim()) {
-      body.description = { en: values.descEn.trim(), am: values.descAm.trim() };
-    }
-    if (values.category) body.category = values.category;
-    if (values.feeNewApplication !== '') body.feeNewApplication = values.feeNewApplication;
-
-    try {
-      await createType(body).unwrap();
-      notify.success(t('licenseTypeConfig.created', 'Licence type created. Configure its form, documents and fees next.'));
-      closeForm();
-    } catch (e) {
-      notify.error(extractErrorMessage(e, t('configuration.error')));
-    }
-  });
-
-  const confirmToggle = async () => {
-    if (!pendingToggle) return;
-    const next = !pendingToggle.isActive;
-    try {
-      await updateStatus({ id: pendingToggle.id, isActive: next }).unwrap();
-      notify.success(
-        next
-          ? t('licenseTypeConfig.activated', 'Licence type is now accepting applications')
-          : t('licenseTypeConfig.deactivated', 'Licence type is closed to new applications'),
-      );
-      setPendingToggle(null);
-    } catch (e) {
-      notify.error(extractErrorMessage(e, t('configuration.error')));
-    }
-  };
-
-  if (isError) {
-    return (
-      <ErrorState
-        title={t('certReq.loadFailed', 'Could not load licence types')}
-        description={extractErrorMessage(error)}
-        onRetry={() => refetch()}
-      />
-    );
-  }
-  if (isLoading) return <PageLoader label={t('certReq.loading', 'Loading licence types…')} height={300} />;
-
-  const canToggle = can([LICENSE_PERMISSIONS.UPDATE_LICENSE_TYPE]);
-
-  const columns: AdvancedColumn<LicenseType>[] = [
-    { header: t('configuration.name'), cell: ({ row }) => localized(row.original.name) },
-    { header: t('configuration.key', 'Key'), cell: ({ row }) => <Text ff="monospace" size="sm">{row.original.key}</Text> },
-    { header: t('licenseTypeConfig.columns.category', 'Category'), cell: ({ row }) => categoryLabel(row.original.category) },
-    {
-      header: t('licenseTypeConfig.columns.family', 'Family'),
-      cell: ({ row }) => familyOptions.find((f) => f.value === row.original.familyKind)?.label ?? row.original.familyKind,
-    },
-    { header: t('licenseTypeConfig.columns.prefix', 'Prefix'), cell: ({ row }) => row.original.certificatePrefix },
-    {
-      header: t('licenseTypeConfig.columns.status', 'Status'),
-      size: 110,
-      cell: ({ row }) => (
-        <Badge color={row.original.isActive ? 'green' : 'gray'} variant="light">
-          {row.original.isActive ? t('licenseTypeConfig.active', 'Active') : t('licenseTypeConfig.inactive', 'Inactive')}
-        </Badge>
-      ),
-    },
-    {
-      header: '',
-      label: t('licenseTypeConfig.columns.actions', 'Actions'),
-      size: 140,
-      cell: ({ row }) => (
-        <Switch
-          size="sm"
-          checked={row.original.isActive}
-          disabled={!canToggle || isToggling}
-          onChange={() => setPendingToggle(row.original)}
-          label={row.original.isActive ? t('licenseTypeConfig.deactivate', 'Deactivate') : t('licenseTypeConfig.activate', 'Activate')}
-          aria-label={t('licenseTypeConfig.toggleAria', 'Toggle whether this licence type accepts applications')}
-        />
-      ),
-    },
-  ];
-
-  const page = paginate(types);
-
-  return (
-    <Stack gap="md">
-      <Alert variant="light" color="blue" icon={<IconInfoCircle size={16} />}>
-        <Text size="sm">
-          {t(
-            'licenseTypeConfig.notice',
-            'A new type starts empty. After creating it, set up its form and document slots under Certificate Requirements, and its fees under Payment Configuration.',
-          )}{' '}
-          <Anchor component={Link} to="/certificate-requirements" size="sm">
-            {t('licenseTypeConfig.goToRequirements', 'Certificate requirements')}
-          </Anchor>
-          {' · '}
-          <Anchor component={Link} to="/payment-config" size="sm">
-            {t('licenseTypeConfig.goToFees', 'Payment configuration')}
-          </Anchor>
-        </Text>
-      </Alert>
-
-      <Group justify="flex-end">
-        <RequirePermission anyOf={[LICENSE_PERMISSIONS.CREATE_LICENSE_TYPE]} hideOnly>
-          <Button variant="light" size="sm" leftSection={<IconPlus size={16} />} onClick={() => setShowForm(true)}>
-            {t('licenseTypeConfig.add', 'Add licence type')}
-          </Button>
-        </RequirePermission>
-      </Group>
-
-      <Card withBorder padding={0}>
-        <AdvancedTable
-          columns={columns}
-          data={page.rows}
-          tableName="configuration-license-types"
-          itemCount={page.itemCount}
-          pageIndex={page.pageIndex}
-          onPageChange={setPageIndex}
-          pageSize={pageSize}
-          onPageSizeChange={setPageSize}
-          refresh={refetch}
-          isLoading={isFetching}
-          emptyText={t('licenseTypeConfig.empty', 'No licence types yet')}
-        />
-      </Card>
-
-      <Modal opened={showForm} onClose={closeForm} title={t('licenseTypeConfig.add', 'Add licence type')} size="lg">
-        <form onSubmit={submit}>
-          <Stack gap="sm">
-            <SimpleGrid cols={{ base: 1, sm: 2 }}>
-              <TextInput
-                label={t('configuration.key', 'Key')}
-                description={t('licenseTypeConfig.keyHint', 'Stable identifier, upper snake case. Cannot change once applications exist.')}
-                placeholder="PORT_AGENT"
-                required
-                {...form.getInputProps('key')}
-                onChange={(e) => form.setFieldValue('key', e.currentTarget.value.toUpperCase())}
-              />
-              <TextInput
-                label={t('licenseTypeConfig.prefix', 'Certificate number prefix')}
-                description={t('licenseTypeConfig.prefixHint', 'e.g. FF → FF-2026-000123')}
-                placeholder="PA"
-                required
-                maxLength={12}
-                {...form.getInputProps('certificatePrefix')}
-              />
-            </SimpleGrid>
-
-            <SimpleGrid cols={{ base: 1, sm: 2 }}>
-              <TextInput label={t('configuration.nameEn')} required {...form.getInputProps('nameEn')} />
-              <TextInput label={t('configuration.nameAm')} required {...form.getInputProps('nameAm')} />
-              <Textarea label={t('configuration.descEn')} autosize minRows={2} {...form.getInputProps('descEn')} />
-              <Textarea label={t('configuration.descAm')} autosize minRows={2} {...form.getInputProps('descAm')} />
-            </SimpleGrid>
-
-            <SimpleGrid cols={{ base: 1, sm: 2 }}>
-              <Select
-                label={t('licenseTypeConfig.columns.category', 'Category')}
-                description={t('licenseTypeConfig.categoryHint', 'The group the applicant browses by.')}
-                data={categoryOptions}
-                clearable
-                searchable
-                {...form.getInputProps('category')}
-              />
-              <Select
-                label={t('licenseTypeConfig.columns.family', 'Family')}
-                description={t('licenseTypeConfig.familyHint', 'Decides which desk owns it and which portal catalogue lists it.')}
-                data={familyOptions}
-                allowDeselect={false}
-                {...form.getInputProps('familyKind')}
-              />
-              <Select
-                label={t('certReq.behavior.serviceKind', 'Service kind')}
-                data={serviceOptions}
-                allowDeselect={false}
-                {...form.getInputProps('serviceKind')}
-              />
-              <Select
-                label={t('certReq.behavior.workflowProfile', 'Workflow profile')}
-                data={workflowOptions}
-                allowDeselect={false}
-                {...form.getInputProps('workflowProfile')}
-              />
-            </SimpleGrid>
-
-            <SimpleGrid cols={{ base: 1, sm: 3 }}>
-              <NumberInput
-                label={t('licenseTypeConfig.fee', 'New application fee')}
-                description={t('licenseTypeConfig.feeHint', 'Leave blank for no charge.')}
-                min={0}
-                decimalScale={2}
-                thousandSeparator=","
-                {...form.getInputProps('feeNewApplication')}
-              />
-              <TextInput label={t('licenseTypeConfig.currency', 'Currency')} maxLength={8} {...form.getInputProps('feeCurrency')} />
-              <NumberInput
-                label={t('licenseTypeConfig.validity', 'Validity (months)')}
-                min={6}
-                max={240}
-                allowDecimal={false}
-                required
-                {...form.getInputProps('validityMonths')}
-              />
-            </SimpleGrid>
-
-            <Group gap="lg">
-              <Checkbox
-                label={t('licenseTypeConfig.issuesCertificate', 'Issues a certificate')}
-                {...form.getInputProps('issuesCertificate', { type: 'checkbox' })}
-              />
-              <Checkbox
-                label={t('licenseTypeConfig.renewalEnabled', 'Renewable')}
-                {...form.getInputProps('renewalEnabled', { type: 'checkbox' })}
-              />
-              <Checkbox
-                label={t('licenseTypeConfig.inspectionRequired', 'Inspection required')}
-                {...form.getInputProps('inspectionRequired', { type: 'checkbox' })}
-              />
-            </Group>
-
-            <ModalFooter>
-              <Button variant="default" size="sm" onClick={closeForm}>
-                {t('configuration.cancel')}
-              </Button>
-              <Button type="submit" size="sm" loading={isCreating}>
-                {t('configuration.create')}
-              </Button>
-            </ModalFooter>
-          </Stack>
-        </form>
-      </Modal>
-
-      <Modal
-        opened={pendingToggle !== null}
-        onClose={() => setPendingToggle(null)}
-        title={
-          pendingToggle?.isActive
-            ? t('licenseTypeConfig.deactivateTitle', 'Deactivate licence type')
-            : t('licenseTypeConfig.activateTitle', 'Activate licence type')
-        }
-        size="sm"
-      >
-        <Text size="sm" mb="md">
-          {pendingToggle?.isActive
-            ? t('licenseTypeConfig.deactivateText', {
-                name: pendingToggle ? localized(pendingToggle.name) : '',
-                defaultValue:
-                  '{{name}} will disappear from the applicant catalogue. Applications already in progress continue unaffected.',
-              })
-            : t('licenseTypeConfig.activateText', {
-                name: pendingToggle ? localized(pendingToggle.name) : '',
-                defaultValue: '{{name}} will be offered to applicants again.',
-              })}
-        </Text>
-        <ModalFooter>
-          <Button variant="default" size="sm" onClick={() => setPendingToggle(null)}>
-            {t('configuration.cancel')}
-          </Button>
-          <Button size="sm" color={pendingToggle?.isActive ? 'red' : 'green'} loading={isToggling} onClick={confirmToggle}>
-            {pendingToggle?.isActive
-              ? t('licenseTypeConfig.deactivate', 'Deactivate')
-              : t('licenseTypeConfig.activate', 'Activate')}
-          </Button>
-        </ModalFooter>
-      </Modal>
-    </Stack>
-  );
-}
diff --git a/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage/LicenseTypesTab.tsx b/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage/LicenseTypesTab.tsx
index 0e82e5644..3827b9ab1 100644
--- a/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage/LicenseTypesTab.tsx
+++ b/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage/LicenseTypesTab.tsx
@@ -9,6 +9,7 @@ import {
   Select,
   Stack,
   Switch,
+  Text,
   Textarea,
   TextInput,
   Title,
@@ -26,9 +27,11 @@ import {
 } from "@ema-platform/ui";
 import { LICENSE_PERMISSIONS, usePermissions } from "@ema-platform/auth";
 import {
+  extractErrorMessage,
   useCreateLicenseTypeMutation,
   useGetLicenseTypesQuery,
   useLocalized,
+  useUpdateLicenseStatusMutation,
   useUpdateLicenseTypeMutation,
   type FamilyKind,
   type LicenseCategory,
@@ -109,9 +112,15 @@ export function LicenseTypesTab() {
     useCreateLicenseTypeMutation();
   const [updateLicenseType, { isLoading: isUpdating }] =
     useUpdateLicenseTypeMutation();
+  // The narrow `PATCH :id/status` rather than the whole-row PUT: switching a
+  // type off is the one change made in a hurry, and it must not carry every
+  // other field of the form along with it.
+  const [updateLicenseStatus, { isLoading: isToggling }] =
+    useUpdateLicenseStatusMutation();
 
   const [editing, setEditing] = useState<LicenseType | null>(null);
   const [showForm, setShowForm] = useState(false);
+  const [pendingToggle, setPendingToggle] = useState<LicenseType | null>(null);
 
   const form = useForm<FormValues>({
     initialValues: EMPTY,
@@ -200,6 +209,29 @@ export function LicenseTypesTab() {
     }
   });
 
+  const confirmToggle = useCallback(async () => {
+    if (!pendingToggle) return;
+    const next = !pendingToggle.isActive;
+    try {
+      await updateLicenseStatus({ id: pendingToggle.id, isActive: next }).unwrap();
+      notify.success(
+        next
+          ? t(
+              "configuration.licenseTypes.activated",
+              "Licence type is now accepting applications",
+            )
+          : t(
+              "configuration.licenseTypes.deactivated",
+              "Licence type is closed to new applications",
+            ),
+      );
+      setPendingToggle(null);
+    } catch (e) {
+      notify.error(extractErrorMessage(e, t("configuration.error")));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pendingToggle, updateLicenseStatus]);
+
   const items = [...(data?.items ?? [])].sort(
     (a, b) => a.sortOrder - b.sortOrder,
   );
@@ -245,16 +277,29 @@ export function LicenseTypesTab() {
     },
     {
       header: "actions",
-      size: 90,
+      size: 170,
       cell: ({ row }) => (
-        <Button
-          variant="subtle"
-          size="xs"
-          onClick={() => openEdit(row.original)}
-          disabled={!canEdit}
-        >
-          {t("configuration.edit", "Edit")}
-        </Button>
+        <Group gap="xs" wrap="nowrap">
+          <Button
+            variant="subtle"
+            size="xs"
+            onClick={() => openEdit(row.original)}
+            disabled={!canEdit}
+          >
+            {t("configuration.edit", "Edit")}
+          </Button>
+          <Button
+            variant="subtle"
+            size="xs"
+            color={row.original.isActive ? "red" : "teal"}
+            onClick={() => setPendingToggle(row.original)}
+            disabled={!canEdit || isToggling}
+          >
+            {row.original.isActive
+              ? t("configuration.licenseTypes.deactivate", "Deactivate")
+              : t("configuration.licenseTypes.activate", "Activate")}
+          </Button>
+        </Group>
       ),
     },
   ];
@@ -458,6 +503,55 @@ export function LicenseTypesTab() {
           </Stack>
         </form>
       </Modal>
+
+      <Modal
+        opened={pendingToggle !== null}
+        onClose={() => setPendingToggle(null)}
+        title={
+          pendingToggle?.isActive
+            ? t(
+                "configuration.licenseTypes.deactivateTitle",
+                "Deactivate licence type",
+              )
+            : t(
+                "configuration.licenseTypes.activateTitle",
+                "Activate licence type",
+              )
+        }
+        size="sm"
+      >
+        <Text size="sm" mb="md">
+          {pendingToggle?.isActive
+            ? t("configuration.licenseTypes.deactivateText", {
+                name: pendingToggle ? localized(pendingToggle.name) : "",
+                defaultValue:
+                  "{{name}} will disappear from the applicant catalogue. Applications already in progress continue unaffected.",
+              })
+            : t("configuration.licenseTypes.activateText", {
+                name: pendingToggle ? localized(pendingToggle.name) : "",
+                defaultValue: "{{name}} will be offered to applicants again.",
+              })}
+        </Text>
+        <ModalFooter>
+          <Button
+            variant="default"
+            size="sm"
+            onClick={() => setPendingToggle(null)}
+          >
+            {t("configuration.cancel")}
+          </Button>
+          <Button
+            size="sm"
+            color={pendingToggle?.isActive ? "red" : "teal"}
+            loading={isToggling}
+            onClick={confirmToggle}
+          >
+            {pendingToggle?.isActive
+              ? t("configuration.licenseTypes.deactivate", "Deactivate")
+              : t("configuration.licenseTypes.activate", "Activate")}
+          </Button>
+        </ModalFooter>
+      </Modal>
     </Stack>
   );
 }
diff --git a/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage/index.tsx b/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage/index.tsx
index a279bcb62..d2e913152 100644
--- a/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage/index.tsx
+++ b/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage/index.tsx
@@ -42,7 +42,7 @@ import { LocationPage } from "../../../location/pages/LocationPage";
 import { PersonalDocumentsCard } from "../../../certificate-requirements/components/PersonalDocumentsCard";
 import { CertificationPage } from "../../../certification/pages/CertificationPage";
 import { NumberFormatTab } from "../../components/NumberFormatTab";
-import { LicenseTypesTab } from "../../components/LicenseTypesTab";
+import { LicenseTypesTab } from "./LicenseTypesTab";
 import { RankDepartmentTab } from "./RankDepartmentTab";
 import {
   useGetOrganizationsQuery,
@@ -409,9 +409,6 @@ export function ConfigurationPage() {
           >
             {t("certification.title")}
           </Tabs.Tab>
-          <Tabs.Tab value="licenseTypes" leftSection={<IconLicense size={16} />}>
-            {t("configuration.licenseTypesTab", "Licence types")}
-          </Tabs.Tab>
           <Tabs.Tab value="numberFormats" leftSection={<IconHash size={16} />}>
             {t("numberFormat.title", "Number Formats")}
           </Tabs.Tab>
@@ -431,10 +428,6 @@ export function ConfigurationPage() {
           <LocationPage />
         </Tabs.Panel>
 
-        <Tabs.Panel value="licenseTypes" pt="md">
-          <LicenseTypesTab />
-        </Tabs.Panel>
-
         <Tabs.Panel value="certifications" pt="md">
           <CertificationPage />
         </Tabs.Panel>
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index a181064cf..084ff919e 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -885,8 +885,43 @@ export const am: Translations = {
   configuration: {
     title: "ውቅረት",
     licenseTypesTab: "የፈቃድ አይነቶች",
+    licenseTypes: {
+      add: "የፈቃድ ዓይነት ያክሉ",
+      edit: "የፈቃድ ዓይነት አስተካክል",
+      key: "ቁልፍ",
+      keyHint:
+        "ቋሚ መለያ፣ ለምሳሌ CUSTOMS_BROKER። ማመልከቻዎች ከጠቀሱት በኋላ ሊቀየር አይችልም።",
+      keyInvalid: "አቢይ ፊደላት፣ አሃዞችና ከስር መስመር፣ ከ3 እስከ 64 ቁምፊዎች",
+      category: "ምድብ",
+      categoryHint:
+        "እነማን ማመልከት እንደሚችሉና የትኞቹ የሹመት ደረጃዎች እርምጃ መውሰድ እንደሚችሉ ይወስናል።",
+      familyKind: "ዓይነት",
+      familyKindHint:
+        "ፈቃድ፣ የምስክር ወረቀት ወይም ሰነድ። አጠቃቀሙን፣ የአመልካች ካታሎጉንና ወረፋው ድርጅት እንደሚያሳይ ይወስናል።",
+      prefix: "የምስክር ወረቀት ቅድመ ቅጥያ",
+      prefixHint:
+        "የእያንዳንዱ ማመልከቻና የምስክር ወረቀት ቁጥር መጀመሪያ፣ ለምሳሌ CB → CB-2026-000042።",
+      prefixInvalid: "ያስፈልጋል፣ ቢበዛ 12 ቁምፊዎች",
+      status: "ሁኔታ",
+      active: "ንቁ",
+      inactive: "እንቅስቃሴ የሌለ",
+      isActive: "ለአመልካቾች ይታያል",
+      isActiveHint: "ቅጹና የሰነድ መስፈርቶቹ እስኪዘጋጁ ድረስ አጥፍተው ይተዉት።",
+      activate: "አንቃ",
+      deactivate: "አሰናክል",
+      activateTitle: "የፈቃድ ዓይነት አንቃ",
+      deactivateTitle: "የፈቃድ ዓይነት አሰናክል",
+      activateText: "{{name}} ለአመልካቾች እንደገና ይቀርባል።",
+      deactivateText:
+        "{{name}} ከአመልካች ካታሎግ ይጠፋል። በሂደት ላይ ያሉ ማመልከቻዎች ሳይነኩ ይቀጥላሉ።",
+      activated: "የፈቃድ ዓይነቱ አሁን ማመልከቻዎችን ይቀበላል",
+      deactivated: "የፈቃድ ዓይነቱ ለአዲስ ማመልከቻዎች ተዘግቷል",
+      noPermission: "የፈቃድ ዓይነት ለመፍጠር ፈቃድ የለዎትም።",
+      nextStepsTitle: "ዓይነቱን ከፈጠሩ በኋላ",
+      nextSteps:
+        "ቅጹን፣ የሰነድ መስፈርቶቹንና ባህሪውን በምስክር ወረቀት መስፈርቶች፣ ክፍያዎቹን በክፍያ ውቅረት፣ የምስክር ወረቀት ንድፉን ደግሞ በንድፍ ሰሪው ያዘጋጁ — ከዚያ እዚህ ንቁ ያድርጉት።",
+    },
     personalDocumentsTab: "የግል ሰነዶች",
-    licenseTypesTab: "የፈቃድ ዓይነቶች",
     departments: "ክፍሎች",
     professions: "ሙያዎች",
     departmentsList: "ክፍሎች",
@@ -921,69 +956,6 @@ export const am: Translations = {
     },
   },
 
-  licenseTypeConfig: {
-    add: "የፈቃድ አይነት ያክሉ",
-    empty: "እስካሁን ምንም የፈቃድ አይነቶች የሉም",
-    notice:
-      "አዲስ አይነት ባዶ ሆኖ ይጀምራል። ከፈጠሩ በኋላ ቅጹንና የሰነድ መስፈርቶቹን በምስክር ወረቀት መስፈርቶች ስር፣ ክፍያዎቹን ደግሞ በክፍያ ውቅረት ስር ያዘጋጁ።",
-    goToRequirements: "የምስክር ወረቀት መስፈርቶች",
-    goToFees: "የክፍያ ውቅረት",
-    created: "የፈቃድ አይነት ተፈጥሯል። በመቀጠል ቅጹን፣ ሰነዶቹንና ክፍያዎቹን ያዘጋጁ።",
-    activated: "የፈቃድ አይነቱ አሁን ማመልከቻዎችን ይቀበላል",
-    deactivated: "የፈቃድ አይነቱ ለአዲስ ማመልከቻዎች ተዘግቷል",
-    active: "ንቁ",
-    inactive: "እንቅስቃሴ የሌለ",
-    activate: "አንቃ",
-    deactivate: "አሰናክል",
-    activateTitle: "የፈቃድ አይነት አንቃ",
-    deactivateTitle: "የፈቃድ አይነት አሰናክል",
-    activateText: "{{name}} ለአመልካቾች እንደገና ይቀርባል።",
-    deactivateText:
-      "{{name}} ከአመልካች ካታሎግ ይጠፋል። በሂደት ላይ ያሉ ማመልከቻዎች ሳይነኩ ይቀጥላሉ።",
-    toggleAria: "ይህ የፈቃድ አይነት ማመልከቻ መቀበል አለመቀበሉን ይቀያይሩ",
-    keyHint: "ቋሚ መለያ፣ በትልቅ ፊደል እና ከስር መስመር ጋር። ማመልከቻዎች ከተፈጠሩ በኋላ ሊቀየር አይችልም።",
-    prefix: "የምስክር ወረቀት ቁጥር ቅድመ ቅጥያ",
-    prefixHint: "ለምሳሌ FF → FF-2026-000123",
-    categoryHint: "አመልካቹ የሚያስስበት ቡድን።",
-    familyHint: "የትኛው ክፍል እንደሚያስተዳድረው እና በየትኛው የፖርታል ካታሎግ እንደሚታይ ይወስናል።",
-    fee: "የአዲስ ማመልከቻ ክፍያ",
-    feeHint: "ክፍያ ከሌለው ባዶ ይተዉት።",
-    currency: "ምንዛሪ",
-    validity: "የአገልግሎት ጊዜ (በወራት)",
-    issuesCertificate: "የምስክር ወረቀት ይሰጣል",
-    renewalEnabled: "ሊታደስ የሚችል",
-    inspectionRequired: "ምርመራ ያስፈልጋል",
-    columns: {
-      category: "ምድብ",
-      family: "ቤተሰብ",
-      prefix: "ቅድመ ቅጥያ",
-      status: "ሁኔታ",
-      actions: "እርምጃዎች",
-    },
-    family: {
-      LOGISTICS_LICENSE: "የሎጂስቲክስ ፈቃድ",
-      CERTIFICATE: "የባህርተኛ የምስክር ወረቀት",
-      DOCUMENT: "የማንነት / ህጋዊ ሰነድ",
-    },
-    service: {
-      LICENSE: "ፈቃድ",
-      REGISTRATION: "ምዝገባ",
-    },
-    workflow: {
-      STANDARD: "መደበኛ (ግምገማ → ምዘና → ምርመራ → ማጽደቅ)",
-      REGISTRATION: "ምዝገባ (ግምገማ → ማጽደቅ)",
-    },
-    validation: {
-      keyRequired: "ቁልፍ ያስፈልጋል",
-      keyTooLong: "ቁልፍ ከ64 ቁምፊዎች መብለጥ የለበትም",
-      keyFormat: "ፊደላት፣ አሃዞችና ከስር መስመር ብቻ ይጠቀሙ፣ ለምሳሌ PORT_AGENT",
-      keyTaken: "በዚህ ቁልፍ የፈቃድ አይነት ቀድሞ አለ",
-      prefixRequired: "የምስክር ወረቀት ቅድመ ቅጥያ ያስፈልጋል",
-      prefixTooLong: "ቅድመ ቅጥያ ከ12 ቁምፊዎች መብለጥ የለበትም",
-      currencyTooLong: "አጭር የምንዛሪ ኮድ ይጠቀሙ",
-      validityRange: "የአገልግሎት ጊዜ በ6 እና 240 ወራት መካከል መሆን አለበት",
-    },
-  },
 
   queue: {
     title: "የፈቃድ ማመልከቻዎች",
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index 09adfa875..ceb10ae93 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -890,8 +890,44 @@ export const en = {
   configuration: {
     title: 'Configuration',
     licenseTypesTab: 'Licence Types',
+    licenseTypes: {
+      add: 'Add licence type',
+      edit: 'Edit licence type',
+      key: 'Key',
+      keyHint:
+        'Permanent identifier, e.g. CUSTOMS_BROKER. Cannot be changed once applications reference it.',
+      keyInvalid: 'Upper-case letters, digits and underscores, 3–64 characters',
+      category: 'Category',
+      categoryHint:
+        'Decides which applicants may apply and which officer positions can act on it.',
+      familyKind: 'Kind',
+      familyKindHint:
+        'Licence, certificate or document. Drives the wording, the applicant catalogue and whether the queue shows a company.',
+      prefix: 'Certificate prefix',
+      prefixHint:
+        'Front of every application and certificate number, e.g. CB → CB-2026-000042.',
+      prefixInvalid: 'Required, at most 12 characters',
+      status: 'Status',
+      active: 'Active',
+      inactive: 'Inactive',
+      isActive: 'Visible to applicants',
+      isActiveHint:
+        'Leave off until the form and document requirements are configured.',
+      activate: 'Activate',
+      deactivate: 'Deactivate',
+      activateTitle: 'Activate licence type',
+      deactivateTitle: 'Deactivate licence type',
+      activateText: '{{name}} will be offered to applicants again.',
+      deactivateText:
+        '{{name}} will disappear from the applicant catalogue. Applications already in progress continue unaffected.',
+      activated: 'Licence type is now accepting applications',
+      deactivated: 'Licence type is closed to new applications',
+      noPermission: 'You do not have permission to create licence types.',
+      nextStepsTitle: 'After creating a type',
+      nextSteps:
+        'Configure its form, document requirements and behaviour on Certificate requirements, its fees on Payment configuration, and its certificate design in the designer — then switch it active here.',
+    },
     personalDocumentsTab: 'Personal Documents',
-    licenseTypesTab: 'Licence types',
     departments: 'Departments',
     professions: 'Professions',
     departmentsList: 'Departments',
@@ -926,70 +962,6 @@ export const en = {
     },
   },
 
-  licenseTypeConfig: {
-    add: 'Add licence type',
-    empty: 'No licence types yet',
-    notice:
-      'A new type starts empty. After creating it, set up its form and document slots under Certificate Requirements, and its fees under Payment Configuration.',
-    goToRequirements: 'Certificate requirements',
-    goToFees: 'Payment configuration',
-    created: 'Licence type created. Configure its form, documents and fees next.',
-    activated: 'Licence type is now accepting applications',
-    deactivated: 'Licence type is closed to new applications',
-    active: 'Active',
-    inactive: 'Inactive',
-    activate: 'Activate',
-    deactivate: 'Deactivate',
-    activateTitle: 'Activate licence type',
-    deactivateTitle: 'Deactivate licence type',
-    activateText: '{{name}} will be offered to applicants again.',
-    deactivateText:
-      '{{name}} will disappear from the applicant catalogue. Applications already in progress continue unaffected.',
-    toggleAria: 'Toggle whether this licence type accepts applications',
-    keyHint: 'Stable identifier, upper snake case. Cannot change once applications exist.',
-    prefix: 'Certificate number prefix',
-    prefixHint: 'e.g. FF → FF-2026-000123',
-    categoryHint: 'The group the applicant browses by.',
-    familyHint: 'Decides which desk owns it and which portal catalogue lists it.',
-    fee: 'New application fee',
-    feeHint: 'Leave blank for no charge.',
-    currency: 'Currency',
-    validity: 'Validity (months)',
-    issuesCertificate: 'Issues a certificate',
-    renewalEnabled: 'Renewable',
-    inspectionRequired: 'Inspection required',
-    columns: {
-      category: 'Category',
-      family: 'Family',
-      prefix: 'Prefix',
-      status: 'Status',
-      actions: 'Actions',
-    },
-    family: {
-      LOGISTICS_LICENSE: 'Logistics licence',
-      CERTIFICATE: 'Seafarer certificate',
-      DOCUMENT: 'Identity / statutory document',
-    },
-    service: {
-      LICENSE: 'Licence',
-      REGISTRATION: 'Registration',
-    },
-    workflow: {
-      STANDARD: 'Standard (review → evaluation → inspection → approval)',
-      REGISTRATION: 'Registration (review → approval)',
-    },
-    validation: {
-      keyRequired: 'Key is required',
-      keyTooLong: 'Key must be at most 64 characters',
-      keyFormat: 'Use letters, digits and underscores, e.g. PORT_AGENT',
-      keyTaken: 'A licence type with this key already exists',
-      prefixRequired: 'Certificate prefix is required',
-      prefixTooLong: 'Prefix must be at most 12 characters',
-      currencyTooLong: 'Use a short currency code',
-      validityRange: 'Validity must be between 6 and 240 months',
-    },
-  },
-
   queue: {
     title: 'Licence applications',
     // {{family}} is "Certificate"/"Document"/"Licence" — used only on a
diff --git a/libs/api/src/lib/features/licensing/licensing-api.ts b/libs/api/src/lib/features/licensing/licensing-api.ts
index 006f363fd..f074087c1 100644
--- a/libs/api/src/lib/features/licensing/licensing-api.ts
+++ b/libs/api/src/lib/features/licensing/licensing-api.ts
@@ -29,8 +29,6 @@ import type {
   DocumentDecision,
   DocumentReview,
   ExportResult,
-  FamilyKind,
-  LicenseCategory,
   LicenseTemplate,
   Paginated,
   PickupAppointment,
@@ -113,28 +111,6 @@ const TAGS = [
 const listTag = (type: (typeof TAGS)[number]) => ({ type, id: 'LIST' }) as const;
 const itemTag = (type: (typeof TAGS)[number], id: string) => ({ type, id }) as const;
 
-/** What `POST /license-types` accepts. Mirrors the server's create DTO. */
-export interface CreateLicenseTypeInput {
-  key: string;
-  name: { en: string; am: string };
-  description?: { en: string; am: string };
-  category?: LicenseCategory;
-  familyKind?: FamilyKind;
-  serviceKind?: ServiceKind;
-  workflowProfile?: WorkflowProfile;
-  certificatePrefix: string;
-  feeNewApplication?: number;
-  feeRenewal?: number;
-  feeCurrency?: string;
-  capitalThreshold?: number;
-  validityMonths?: number;
-  inspectionRequired?: boolean;
-  issuesCertificate?: boolean;
-  renewalEnabled?: boolean;
-  sortOrder?: number;
-  isActive?: boolean;
-}
-
 /**
  * Typed licensing endpoints, shared by the portal and the backoffice.
  *
@@ -311,18 +287,6 @@ export const licensingApi = baseApi
           error ? [] : [listTag('LicenseType'), itemTag('LicenseType', id)],
       }),
 
-      /**
-       * Creates a licence type. The bare minimum a type needs to exist and
-       * be classified; its form, documents, fees and behaviour are configured
-       * afterwards on their own screens. The server upper-cases and trims the
-       * key, refuses a taken one with 409 `license_type_key_taken`, and lints
-       * a form schema if one is supplied.
-       */
-      createLicenseType: builder.mutation<LicenseType, CreateLicenseTypeInput>({
-        query: (body) => ({ url: '/license-types', method: 'POST', body }),
-        invalidatesTags: (_r, error) => (error ? [] : [listTag('LicenseType')]),
-      }),
-
       /**
        * Opens or closes a type to new applications. Applications already in
        * flight hold the type by id and keep running; only the portal