From a3b5e5970304ae1a1231727caa4dae3bd1bb5267 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?= <c@ssidyjam.es>
Date: Fri, 21 Aug 2026 16:33:45 +0100
Subject: [PATCH] Fix oldest task age sorting (#990)

Co-authored-by: Amp
Amp-Thread-ID: https://ampcode.com/threads/T-019fec69-19ab-77e8-b6f0-85af1ed67eed

Co-authored-by: Amp <amp@ampcode.com>
---
 .../dashboard/components/table/Table.test.tsx | 46 ++++++++++++++++++-
 .../dashboard/components/table/sort.tsx       |  8 ++--
 2 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/client/src/webpages/dashboard/components/table/Table.test.tsx b/client/src/webpages/dashboard/components/table/Table.test.tsx
index eae7063..4f371f5 100644
--- a/client/src/webpages/dashboard/components/table/Table.test.tsx
+++ b/client/src/webpages/dashboard/components/table/Table.test.tsx
@@ -8,7 +8,7 @@ import {
   DefaultColumnFilter,
   NumberRangeColumnFilter,
 } from './filters';
-import { stringSort } from './sort';
+import { dateSort, stringSort } from './sort';
 import Table, { TableColumnDef } from './Table';
 
 type TableRow = {
@@ -130,6 +130,50 @@ describe('Table behavior', () => {
     ]);
   });
 
+  it('sorts a rendered age column by its nested raw date value', () => {
+    type QueueRow = {
+      oldestTaskAge: ReactNode;
+      values: { oldestJobCreatedAt: string };
+    };
+    const queueColumns = [
+      {
+        header: 'Oldest Task Age',
+        accessorKey: 'oldestTaskAge',
+        sortFn: dateSort('oldestJobCreatedAt'),
+        sortDescFirst: false,
+      },
+    ] satisfies TableColumnDef<QueueRow>[];
+    const queueData: QueueRow[] = [
+      {
+        oldestTaskAge: <span>Newest task</span>,
+        values: { oldestJobCreatedAt: '2026-08-11T00:00:00Z' },
+      },
+      {
+        oldestTaskAge: <span>Oldest task</span>,
+        values: { oldestJobCreatedAt: '2026-08-01T00:00:00Z' },
+      },
+      {
+        oldestTaskAge: <span>Middle task</span>,
+        values: { oldestJobCreatedAt: '2026-08-06T00:00:00Z' },
+      },
+    ];
+    render(
+      <MemoryRouter>
+        <Table columns={queueColumns} data={queueData} />
+      </MemoryRouter>,
+    );
+
+    fireEvent.click(
+      screen.getByRole('columnheader', { name: /Oldest Task Age/ }),
+    );
+
+    expect(
+      within(screen.getAllByRole('rowgroup')[1])
+        .getAllByRole('row')
+        .map((row) => within(row).getByRole('cell').textContent),
+    ).toEqual(['Oldest task', 'Middle task', 'Newest task']);
+  });
+
   it('does not offer filtering unless a column supplies a filter renderer', () => {
     renderTable();
     expect(screen.queryByRole('button', { name: /filter/i })).toBeNull();
diff --git a/client/src/webpages/dashboard/components/table/sort.tsx b/client/src/webpages/dashboard/components/table/sort.tsx
index 9719b5e..5006d13 100644
--- a/client/src/webpages/dashboard/components/table/sort.tsx
+++ b/client/src/webpages/dashboard/components/table/sort.tsx
@@ -181,8 +181,8 @@ export function userPenaltySeveritySort<TData extends RowWithValues>(
 }
 
 /**
- * Creates a date sort function that sorts by a raw date field from the original row data
- * @param dateKey - the key to access the raw date value from rowA.original/rowB.original
+ * Creates a date sort function that sorts by a raw date field from the row values
+ * @param dateKey - the key to access the raw date value from rowA.original.values/rowB.original.values
  * @returns a sort function compatible with react-table
  */
 export function dateSort(dateKey: string) {
@@ -191,8 +191,8 @@ export function dateSort(dateKey: string) {
     rowB: Row<TData>,
     _columnId: string,
   ) => {
-    const a = (rowA.original as unknown as Record<string, unknown>)[dateKey];
-    const b = (rowB.original as unknown as Record<string, unknown>)[dateKey];
+    const a = rowA.original.values[dateKey];
+    const b = rowB.original.values[dateKey];
 
     // Handle null/undefined - push to bottom
     if (!a && !b) return 0;
-- 
2.51.2