fix(suppliers): refresh late CTE records when agreed hours change

frontend/src/__tests__/components/supplier-data-quality.test.tsx

@@ -1,6 +1,11 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import type { SupplierDataQuality, SupplierQualityMetric, SupplierQualityRecordsResponse } from '@/types/api';
+import type {
+    SupplierDataQuality,
+    SupplierQualityMetric,
+    SupplierQualityRecordItem,
+    SupplierQualityRecordsResponse,
+} from '@/types/api';
 
 const mocks = vi.hoisted(() => ({
     getSupplierDataQualityRecords: vi.fn(),
@@ -68,6 +73,21 @@ const lateMeasured = summary(
     AGREED_HOURS,
 );
 
+const lateRecordItem = (recordId: string, agreedHours: number): SupplierQualityRecordItem => {
+    const eventTime = new Date();
+    const receivedTime = new Date(eventTime);
+    receivedTime.setUTCHours(receivedTime.getUTCHours() + agreedHours + 1);
+    return {
+        record_id: recordId,
+        lot_id: null,
+        lot_code: crypto.randomUUID(),
+        cte_type: 'shipping',
+        event_time: eventTime.toISOString(),
+        received_at: receivedTime.toISOString(),
+        missing_kdes: [],
+    };
+};
+
 function renderQuality(data: SupplierDataQuality | null = fourMetrics, unavailable = false) {
     return render(
         <DataQuality
@@ -258,17 +278,7 @@ describe('DataQuality', () => {
             page({
                 metric: 'late_cte',
                 total: [lateId].length,
-                items: [
-                    {
-                        record_id: lateId,
-                        lot_id: null,
-                        lot_code: crypto.randomUUID(),
-                        cte_type: 'shipping',
-                        event_time: null,
-                        received_at: null,
-                        missing_kdes: [],
-                    },
-                ],
+                items: [lateRecordItem(lateId, AGREED_HOURS)],
             }),
         );
         renderQuality(lateMeasured);
@@ -282,6 +292,35 @@ describe('DataQuality', () => {
         expect(mocks.getSupplierDataQualityRecords).toHaveBeenCalledWith(FACILITY_ID, 'late_cte', expect.anything());
     });
 
+    it('clears late records from the prior agreement when the hours change', async () => {
+        const [oldRecordId, updatedRecordId] = uuids(2);
+        const updatedHours = AGREED_HOURS + 1;
+        mocks.getSupplierDataQualityRecords
+            .mockResolvedValueOnce(page({ metric: 'late_cte', total: [oldRecordId].length, items: [lateRecordItem(oldRecordId, AGREED_HOURS)] }))
+            .mockResolvedValueOnce(page({ metric: 'late_cte', total: [updatedRecordId].length, items: [lateRecordItem(updatedRecordId, updatedHours)] }));
+
+        const { rerender } = renderQuality(lateMeasured);
+        fireEvent.click(screen.getByRole('button', { name: 'View records' }));
+        await waitFor(() => expect(screen.getByText(oldRecordId)).toBeInTheDocument());
+
+        rerender(
+            <DataQuality
+                facilityId={FACILITY_ID}
+                summary={summary(lateMeasured.metrics, updatedHours)}
+                unavailable={false}
+                windowDays={WINDOW_DAYS}
+                minRecords={MIN_RECORDS}
+                lateCteLabel={LATE_LABEL}
+            />,
+        );
+        expect(screen.queryByText(oldRecordId)).not.toBeInTheDocument();
+        expect(screen.getByText(`Agreed sending time: ${updatedHours} hours after the event`)).toBeInTheDocument();
+
+        fireEvent.click(screen.getByRole('button', { name: 'View records' }));
+        await waitFor(() => expect(screen.getByText(updatedRecordId)).toBeInTheDocument());
+        expect(mocks.getSupplierDataQualityRecords).toHaveBeenCalledTimes(2);
+    });
+
     it('offers no late drill down without an agreed sending time', () => {
         renderQuality(summary([fourMetrics.metrics[2]]));
         expect(screen.getByText('Agreed sending time: Not set')).toBeInTheDocument();

frontend/src/app/dashboard/suppliers/data-quality.tsx

@@ -221,7 +221,7 @@ export function DataQuality({
             <ul className="mt-1 space-y-1">
                 {summary.metrics.map((metric) => (
                     <MetricRow
-                        key={metric.key}
+                        key={metric.key === 'late_cte' ? `${metric.key}:${summary.agreed_sending_hours ?? 'unset'}` : metric.key}
                         facilityId={facilityId}
                         metric={metric}
                         windowDays={windowDays}