From 664558146df2a9eaed4888498978168383cdc3b8 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Fri, 28 Aug 2026 11:28:41 +0000
Subject: [PATCH] feat: add debounced search input and clear filter
 functionality to PersonalDocumentsCard

---
 .../components/PersonalDocumentsCard.tsx      | 85 ++++++++++++++-----
 apps/backoffice/src/app/i18n/locales/am.ts    |  3 +-
 apps/backoffice/src/app/i18n/locales/en.ts    |  3 +-
 3 files changed, 66 insertions(+), 25 deletions(-)

diff --git a/apps/backoffice/src/app/features/certificate-requirements/components/PersonalDocumentsCard.tsx b/apps/backoffice/src/app/features/certificate-requirements/components/PersonalDocumentsCard.tsx
index 220729868..dfaa16175 100644
--- a/apps/backoffice/src/app/features/certificate-requirements/components/PersonalDocumentsCard.tsx
+++ b/apps/backoffice/src/app/features/certificate-requirements/components/PersonalDocumentsCard.tsx
@@ -6,13 +6,16 @@ import {
   Button,
   Group,
   Modal,
+  Paper,
   Select,
   Stack,
   Text,
+  TextInput,
   Title,
   Tooltip,
 } from '@mantine/core';
-import { IconEdit, IconPlus, IconTrash } from '@tabler/icons-react';
+import { useDebouncedValue } from '@mantine/hooks';
+import { IconEdit, IconPlus, IconSearch, IconTrash, IconX } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
 import {
   AdvancedTable,
@@ -41,6 +44,8 @@ type DraftRequirement = Omit<DocumentRequirement, 'id' | 'licenseTypeId' | 'isAc
 /** Filter value for "the documents every licence asks for". */
 const GLOBAL_ONLY = 'GLOBAL';
 
+const SEARCH_DEBOUNCE_MS = 300;
+
 /** `application/vnd.openxmlformats-…-document` is nobody's idea of a column. */
 const MIME_LABELS: Record<string, string> = {
   'application/pdf': 'PDF',
@@ -93,14 +98,17 @@ export function PersonalDocumentsCard() {
   /** null = any licence, GLOBAL_ONLY = the all-licence ones, else a type id. */
   const [licenseTypeFilter, setLicenseTypeFilter] = useState<string | null>(null);
 
-  const { q, setQ, pageIndex, setPageIndex, pageSize, setPageSize } = useServerTable({
+  const { pageIndex, setPageIndex, pageSize, setPageSize } = useServerTable({
     pageSize: 10,
   });
+  const [searchInput, setSearchInput] = useState('');
+  // Typing must not fire a request per keystroke; same 300ms as the queue.
+  const [search] = useDebouncedValue(searchInput, SEARCH_DEBOUNCE_MS);
 
   // Every facet goes to the server: it filters and searches in SQL, groups the
   // rows into documents, then pages the documents.
   const { data, isFetching, refetch } = useGetPersonalDocumentsQuery({
-    search: q.trim() || undefined,
+    search: search.trim() || undefined,
     licenseTypeId:
       licenseTypeFilter && licenseTypeFilter !== GLOBAL_ONLY
         ? licenseTypeFilter
@@ -126,7 +134,13 @@ export function PersonalDocumentsCard() {
   );
 
   /** Filters are the server's business now; an empty page is its answer. */
-  const isFiltered = q.trim() !== '' || licenseTypeFilter !== null;
+  const isFiltered = search.trim() !== '' || licenseTypeFilter !== null;
+
+  function clearFilters() {
+    setSearchInput('');
+    setLicenseTypeFilter(null);
+    setPageIndex(0);
+  }
 
   const typeName = (id: string) => {
     const found = (licenseTypes?.items ?? []).find((lt) => lt.id === id);
@@ -298,25 +312,24 @@ export function PersonalDocumentsCard() {
         </Button>
       </Group>
 
-      <AdvancedTable
-        tableName={t('certReq.personal.title', 'Personal documents')}
-        columns={columns}
-        data={groups}
-        itemCount={data?.total ?? 0}
-        pageIndex={pageIndex}
-        onPageChange={setPageIndex}
-        pageSize={pageSize}
-        onPageSizeChange={setPageSize}
-        onSearchChange={setQ}
-        refresh={refetch}
-        isLoading={isFetching}
-        emptyText={
-          isFiltered
-            ? t('certReq.personal.noMatch', 'No personal document matches those filters.')
-            : t('certReq.personal.empty', 'No personal documents configured yet.')
-        }
-        toolbar={
+      {/* Facets, in the shape the licence-review queue uses. No date range:
+          a configuration row has no submission date to filter on. */}
+      <Paper withBorder p="sm">
+        <Group gap="sm" align="flex-end" wrap="wrap">
+          <TextInput
+            label={t('certReq.personal.search', 'Search')}
+            placeholder={t('certReq.personal.searchPlaceholder', 'Search by name or key')}
+            leftSection={<IconSearch size={14} />}
+            value={searchInput}
+            onChange={(e) => {
+              const { value } = e.currentTarget;
+              setSearchInput(value);
+              setPageIndex(0);
+            }}
+            w={240}
+          />
           <Select
+            label={t('certReq.doc.scope', 'Applies to')}
             placeholder={t('certReq.personal.filterAny', 'Any licence type')}
             data={[
               {
@@ -336,9 +349,35 @@ export function PersonalDocumentsCard() {
             }}
             searchable
             clearable
-            size="sm"
             w={240}
           />
+          {isFiltered && (
+            <Button
+              variant="subtle"
+              leftSection={<IconX size={14} />}
+              onClick={clearFilters}
+            >
+              {t('certReq.personal.clearFilters', 'Clear')}
+            </Button>
+          )}
+        </Group>
+      </Paper>
+
+      <AdvancedTable
+        tableName={t('certReq.personal.title', 'Personal documents')}
+        columns={columns}
+        data={groups}
+        itemCount={data?.total ?? 0}
+        pageIndex={pageIndex}
+        onPageChange={setPageIndex}
+        pageSize={pageSize}
+        onPageSizeChange={setPageSize}
+        refresh={refetch}
+        isLoading={isFetching}
+        emptyText={
+          isFiltered
+            ? t('certReq.personal.noMatch', 'No personal document matches those filters.')
+            : t('certReq.personal.empty', 'No personal documents configured yet.')
         }
       />
 
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index 6761af0d8..dcfd129cc 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -1374,6 +1374,7 @@ export const am: Translations = {
         "አመልካቹ በእያንዳንዱ ማመልከቻ ላይ ከመስቀል ይልቅ በ\u2018ሰነዶቼ\u2019 ውስጥ አንድ ጊዜ የሚያስቀምጣቸው የማንነትና የትምህርት ሰነዶች። ለተወሰኑ የፈቃድ አይነቶች ከወሰኑት፣ እነዚያን የሥራ ዘርፍ ያሳወቁ አመልካቾች ብቻ ይጠየቃሉ።",
       add: "የግል ሰነድ ጨምር",
       empty: "እስካሁን የተዋቀረ የግል ሰነድ የለም።",
+      search: "ፍለጋ",
       searchPlaceholder: "በስም ወይም በቁልፍ ይፈልጉ",
       moreTypes: " +{{count}} ተጨማሪ",
       columns: {
@@ -1383,7 +1384,7 @@ export const am: Translations = {
       filterAny: "ማንኛውም የፈቃድ አይነት",
       filterGlobal: "ለሁሉም ፈቃዶች የሚሆኑ ብቻ",
       noMatch: "በእነዚህ ማጣሪያዎች የሚመጣጠን የግል ሰነድ የለም።",
-      clearFilters: "ማጣሪያዎችን አጽዳ",
+      clearFilters: "አጽዳ",
       fileCount_one: "{{count}} ፋይል",
       fileCount_other: "{{count}} ፋይሎች",
       deleteWarning:
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index 829496b0b..03e7d053e 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -1380,6 +1380,7 @@ export const en = {
         'Identity and education documents an applicant keeps once, in My Documents, instead of uploading with every application. Scope one to licence types and only applicants who declared those modes of operation are asked for it.',
       add: 'Add personal document',
       empty: 'No personal documents configured yet.',
+      search: 'Search',
       searchPlaceholder: 'Search by name or key',
       moreTypes: ' +{{count}} more',
       columns: {
@@ -1389,7 +1390,7 @@ export const en = {
       filterAny: 'Any licence type',
       filterGlobal: 'All-licence documents only',
       noMatch: 'No personal document matches those filters.',
-      clearFilters: 'Clear filters',
+      clearFilters: 'Clear',
       fileCount_one: '{{count}} file',
       fileCount_other: '{{count}} files',
       deleteWarning: