From cf369b2da6b9ad92b2cc40d334a2b5acfdaf4622 Mon Sep 17 00:00:00 2001
From: root <root@fiberops-dev.juankibin.space>
Date: Tue, 31 Mar 2026 02:22:43 +0000
Subject: [PATCH] =?UTF-8?q?fix(m6):=20remittances=20=E2=80=94=20totalAmoun?=
 =?UTF-8?q?t=20field=20fix,=20add=20data-testid,=20upgrade=20E2E=20spec?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(app)/remittances/page.tsx | 10 ++++-----
 e2e/remittances.spec.ts        | 40 ++++++++++++++++++++++++----------
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/app/(app)/remittances/page.tsx b/app/(app)/remittances/page.tsx
index 33d6d6e..585330c 100644
--- a/app/(app)/remittances/page.tsx
+++ b/app/(app)/remittances/page.tsx
@@ -20,7 +20,7 @@ interface Payment {
 interface Remittance {
   id: string; collectorId?: string;
   collector?: { firstName: string; lastName: string };
-  amount: number | string; notes?: string; status: string;
+  totalAmount: number | string; notes?: string; status: string;
   payments?: Payment[]; createdAt: string;
 }
 
@@ -93,7 +93,7 @@ export default function RemittancesPage() {
         </div>
         <div className="flex gap-2">
           <Button onClick={() => refetch()} variant="outline" size="sm"><RefreshCw size={14} className="mr-1" />Refresh</Button>
-          <Button onClick={() => setShowSubmit(true)} size="sm"><Plus size={14} className="mr-1" />Submit Remittance</Button>
+          <Button data-testid="btn-submit-remittance" onClick={() => setShowSubmit(true)} size="sm"><Plus size={14} className="mr-1" />Submit Remittance</Button>
         </div>
       </div>
 
@@ -111,7 +111,7 @@ export default function RemittancesPage() {
               ) : remittances.length === 0 ? (
                 <EmptyState colSpan={6} message="No remittances yet" icon={<ArrowLeftRight size={24} />} />
               ) : remittances.map(r => (
-                <TableRow key={r.id} onClick={() => setSelected(r)} className="cursor-pointer hover:bg-blue-50 transition-colors">
+                <TableRow key={r.id} data-testid="remittance-row" onClick={() => setSelected(r)} className="cursor-pointer hover:bg-blue-50 transition-colors">
                   <Td>{formatDate(r.createdAt)}</Td>
                   <Td className="font-medium">{r.collector ? `${r.collector.firstName} ${r.collector.lastName}` : "—"}</Td>
                   <Td className="font-semibold text-blue-700">{formatCurrency(Number(r.amount))}</Td>
@@ -119,7 +119,7 @@ export default function RemittancesPage() {
                   <Td className="text-gray-500 text-sm">{r.notes ?? "—"}</Td>
                   <Td>
                     {r.status === "PENDING" && (
-                      <Button size="sm" variant="secondary" onClick={e => { e.stopPropagation(); confirm.mutate(r.id); }}>
+                      <Button size="sm" variant="secondary" data-testid="btn-confirm-remittance" onClick={e => { e.stopPropagation(); confirm.mutate(r.id); }}>
                         <CheckCircle size={13} className="mr-1" />Confirm
                       </Button>
                     )}
@@ -139,7 +139,7 @@ export default function RemittancesPage() {
               <div className="flex justify-between"><span className="text-gray-500">Collector</span>
                 <span className="font-medium">{selected.collector ? `${selected.collector.firstName} ${selected.collector.lastName}` : "—"}</span></div>
               <div className="flex justify-between"><span className="text-gray-500">Total Amount</span>
-                <span className="text-lg font-bold text-blue-700">{formatCurrency(Number(selected.amount))}</span></div>
+                <span className="text-lg font-bold text-blue-700">{formatCurrency(Number(selected.totalAmount))}</span></div>
               <div className="flex justify-between"><span className="text-gray-500">Status</span>
                 <Badge variant={statusVariant[selected.status] ?? "muted"}>{selected.status}</Badge></div>
               <div className="flex justify-between"><span className="text-gray-500">Date</span>
diff --git a/e2e/remittances.spec.ts b/e2e/remittances.spec.ts
index 4e221b5..f116c7b 100644
--- a/e2e/remittances.spec.ts
+++ b/e2e/remittances.spec.ts
@@ -7,24 +7,42 @@ test.describe('Remittances', () => {
     await page.goto('/remittances');
   });
 
-  test('remittances page renders', async ({ page }) => {
+  test('page renders with header and table', async ({ page }) => {
     await expect(page.locator('h1:has-text("Remittances")')).toBeVisible();
     await expect(page.locator('table')).toBeVisible();
   });
 
-  test('remittances load or show empty state', async ({ page }) => {
-    await page.waitForTimeout(3000);
-    const hasRows = await page.locator('tbody tr').count();
-    const hasEmpty = await page.locator('text=No remittances').isVisible().catch(() => false);
+  test('submit remittance button exists', async ({ page }) => {
+    await expect(page.locator('[data-testid="btn-submit-remittance"]')).toBeVisible();
+  });
+
+  test('submit remittance modal opens', async ({ page }) => {
+    await page.click('[data-testid="btn-submit-remittance"]');
+    await expect(page.locator('text=Submit Remittance')).toBeVisible({ timeout: 5000 });
+    // Close modal
+    await page.locator('button:has-text("Cancel")').click();
+    await expect(page.locator('text=Submit Remittance')).not.toBeVisible({ timeout: 3000 });
+  });
+
+  test('empty state shows when no remittances', async ({ page }) => {
+    // Either rows exist OR empty state message shows — both are valid
+    const hasRows = await page.locator('[data-testid="remittance-row"]').count();
+    const hasEmpty = await page.locator('text=No remittances yet').isVisible().catch(() => false);
     expect(hasRows > 0 || hasEmpty).toBeTruthy();
   });
 
-  test('Submit Remittance button opens modal', async ({ page }) => {
-    const btn = page.locator('button:has-text("Submit Remittance"), button:has-text("New Remittance")').first();
-    if (await btn.isVisible()) {
-      await btn.click();
-      await page.waitForTimeout(300);
-      await expect(page.locator('text=Submit Remittance, text=Remittance').first()).toBeVisible();
+  test('clicking remittance row opens detail modal', async ({ page }) => {
+    const rows = page.locator('[data-testid="remittance-row"]');
+    const count = await rows.count();
+    if (count === 0) {
+      // No data — acceptable, skip
+      test.skip();
+      return;
     }
+    await rows.first().click();
+    await expect(page.locator('text=Remittance Details')).toBeVisible({ timeout: 5000 });
+    await expect(page.locator('text=Total Amount')).toBeVisible();
+    await page.locator('button:has-text("Close")').click();
+    await expect(page.locator('text=Remittance Details')).not.toBeVisible({ timeout: 3000 });
   });
 });