update /search-sin and DataTable component (#333)

DTS-STN · Mar 5, 2025 · ac0efc3 · ac0efc3
1 parent dab6d2d
commit ac0efc3
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 21 deletions.
diff --git a/frontend/app/.server/locales/protected-en.json b/frontend/app/.server/locales/protected-en.json
@@ -362,14 +362,24 @@
     "parents-legal-guardians": "Parents/legal guardians",
     "other-last-names": "Other last names",
     "search": "Search",
-    "matches": "Matches"
+    "matches": "Matches",
+    "table": {
+      "headers": {
+        "full-name": "Full name",
+        "date-of-birth": "Date of birth",
+        "parent-surname": "Parent's birth surname",
+        "sin": "SIN",
+        "match": "Match"
+      }
+    }
   },
   "pid-verification": {
     "page-title": "Validation result",
     "status-passed": "Passed",
     "validation-passed": "Validation passed",
     "all-input-successful": "All inputs have been successfully validated and match the primary identity document.",
     "next": "Next",
-    "previous": "Previous"
+    "previous": "Previous",
+    "matches": "Matches"
   }
 }
diff --git a/frontend/app/.server/locales/protected-fr.json b/frontend/app/.server/locales/protected-fr.json
@@ -363,14 +363,24 @@
     "parents-legal-guardians": "Parents/legal guardians",
     "other-last-names": "Other last names",
     "search": "Search",
-    "matches": "Matches"
+    "matches": "Matches",
+    "table": {
+      "headers": {
+        "full-name": "Full name",
+        "date-of-birth": "Date of birth",
+        "parent-surname": "Parent's birth surname",
+        "sin": "SIN",
+        "match": "Match"
+      }
+    }
   },
   "pid-verification": {
     "page-title": "Validation result",
     "status-passed": "Passed",
     "validation-passed": "Validation passed",
     "all-input-successful": "All inputs have been successfully validated and match the primary identity document.",
     "next": "Next",
-    "previous": "Previous"
+    "previous": "Previous",
+    "matches": "Matches"
   }
 }
diff --git a/frontend/app/components/data-table.tsx b/frontend/app/components/data-table.tsx
@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react';
 
 type Row = (string | number | ReactNode)[];
-type Table = { data: Row[] };
 
 interface DataTableProps {
   /**
@@ -12,7 +11,7 @@ interface DataTableProps {
   /**
    * 2D array of table data where each inner array represents a row
    */
-  table: Table;
+  rows: Row[];
 
   /**
    * Whether to apply alternating background colors to rows
@@ -21,7 +20,7 @@ interface DataTableProps {
   striped?: boolean;
 }
 
-export function DataTable({ headers, table, striped = true }: DataTableProps) {
+export function DataTable({ headers, rows, striped = true }: DataTableProps) {
   return (
     <div className="overflow-x-auto rounded-lg shadow">
       <table className="min-w-full divide-y divide-gray-200">
@@ -35,7 +34,7 @@ export function DataTable({ headers, table, striped = true }: DataTableProps) {
           </tr>
         </thead>
         <tbody className="divide-y divide-gray-200 bg-white">
-          {table.data.map((row, rowIndex) => (
+          {rows.map((row, rowIndex) => (
             <tr key={rowIndex} className={striped && rowIndex % 2 === 1 ? 'bg-gray-50' : 'bg-white'}>
               {row.map((cell, cellIndex) => (
                 <td key={cellIndex} className="px-6 py-4 text-sm whitespace-nowrap text-gray-900">

diff --git a/frontend/app/routes/protected/multi-channel/search-sin.tsx b/frontend/app/routes/protected/multi-channel/search-sin.tsx
@@ -37,18 +37,16 @@ export function meta({ data }: Route.MetaArgs) {
 export function action({ context, request }: Route.ActionArgs) {
   requireAuth(context.session, new URL(request.url), ['user']);
 
-  //TODO: fetch and return mock table result data
-  const headers = ['Header 1', 'Header 2', 'Header 3', 'Header 4', 'Header 5'];
-  const data = [
-    ['Data 1-1', 'Data 1-2', 'Data 1-3', 'Data 1-4', 'Data 1-5'],
-    ['Data 2-1', 'Data 2-2', 'Data 2-3', 'Data 2-4', 'Data 2-5'],
-    ['Data 3-1', 'Data 3-2', 'Data 3-3', 'Data 3-4', 'Data 3-5'],
-    ['Data 4-1', 'Data 4-2', 'Data 4-3', 'Data 4-4', 'Data 4-5'],
-  ];
+  //TODO: fetch and return mock table data
   return {
-    tableResults: {
-      headers,
-      table: { data },
+    tableData: {
+      rows: [
+        ['John Doe', 'January 1, 1980', 'Doe', '*** *** 000', '98%'],
+        ['Johnathan Doe', 'February 10, 1985', 'Doe', '*** *** 000', '95%'],
+        ['John D', 'March 15, 1990', 'N/A', '*** *** 000', '88%'],
+        ['Johnny Doe', 'April 20, 1978', 'Doe', '*** *** 000', '92%'],
+        ['J. Doe', 'May 25, 1992', 'Doe', '*** *** 000', '90%'],
+      ],
     },
   };
 }
@@ -89,10 +87,19 @@ export default function SearchSin({ loaderData, actionData, params }: Route.Comp
               </div>
             </div>
 
-            {fetcher.data?.tableResults && (
+            {fetcher.data?.tableData && (
               <>
                 <h3 className="font-lato mb-4 text-xl font-semibold">{t('protected:search-sin.matches')}</h3>
-                <DataTable {...fetcher.data.tableResults} />
+                <DataTable
+                  headers={[
+                    t('protected:search-sin.table.headers.full-name'),
+                    t('protected:search-sin.table.headers.date-of-birth'),
+                    t('protected:search-sin.table.headers.parent-surname'),
+                    t('protected:search-sin.table.headers.sin'),
+                    t('protected:search-sin.table.headers.match'),
+                  ]}
+                  rows={fetcher.data.tableData.rows}
+                />
               </>
             )}
           </div>