From 6b5a80b597392121231cc073bd7927e91d4d1c05 Mon Sep 17 00:00:00 2001
From: Stephanos A <steph.et@outlook.com>
Date: Thu, 16 Jul 2026 15:18:01 +0300
Subject: [PATCH] Supplementary payments client pages

---
 .../payments/SupplementaryChargesModal.tsx    | 294 +++---------------
 .../backoffice/src/app/payments/page.tsx      | 144 ++++++++-
 .../app/pay-balance/[token]/failed/page.tsx   |  24 ++
 .../src/app/pay-balance/[token]/page.tsx      | 191 ++++++++++++
 .../app/pay-balance/[token]/success/page.tsx  |  21 ++
 5 files changed, 420 insertions(+), 254 deletions(-)
 create mode 100644 apps/edr-passenger-web/portal/src/app/pay-balance/[token]/failed/page.tsx
 create mode 100644 apps/edr-passenger-web/portal/src/app/pay-balance/[token]/page.tsx
 create mode 100644 apps/edr-passenger-web/portal/src/app/pay-balance/[token]/success/page.tsx

diff --git a/apps/edr-passenger-web/backoffice/src/app/payments/SupplementaryChargesModal.tsx b/apps/edr-passenger-web/backoffice/src/app/payments/SupplementaryChargesModal.tsx
index 9fb0de6bb..45941cea4 100644
--- a/apps/edr-passenger-web/backoffice/src/app/payments/SupplementaryChargesModal.tsx
+++ b/apps/edr-passenger-web/backoffice/src/app/payments/SupplementaryChargesModal.tsx
@@ -1,66 +1,30 @@
 'use client';
 
 import { useState } from 'react';
-import { Send, CheckCircle, XCircle, RotateCcw, PlusCircle } from 'lucide-react';
+import { PlusCircle } from 'lucide-react';
 import Modal from '@/components/ui/Modal';
 import ActionButton from '@/components/ui/ActionButton';
-import Badge from '@/components/ui/Badge';
-import { formatCurrency, formatDateTime } from '@/lib/utils';
-import {
-  useSupplementaryCharges,
-  useCreateSupplementaryCharge,
-  useMarkSupplementaryPaid,
-  useWaiveSupplementaryCharge,
-  useResendSupplementaryLink,
-} from './useSupplementaryCharges';
+import { useCreateSupplementaryCharge } from './useSupplementaryCharges';
 
-type Tab = 'create' | 'list';
+const REASONS = ['UNDERPAYMENT', 'FARE_CORRECTION', 'CURRENCY_ADJUSTMENT', 'OTHER'];
 
 interface Props {
   isOpen: boolean;
   onClose: () => void;
 }
 
-const REASONS = ['UNDERPAYMENT', 'FARE_CORRECTION', 'CURRENCY_ADJUSTMENT', 'OTHER'];
-
-const STATUS_COLORS: Record<string, string> = {
-  PENDING: 'warning',
-  PAID: 'success',
-  WAIVED: 'info',
-  EXPIRED: 'error',
-};
-
 export default function SupplementaryChargesModal({ isOpen, onClose }: Props) {
-  const [tab, setTab] = useState<Tab>('create');
-  const [listFilters, setListFilters] = useState({ bookingRef: '', status: '' });
-
-  // Create form state
   const [form, setForm] = useState({ bookingRef: '', amountEtb: '', reason: 'UNDERPAYMENT', notes: '' });
   const [formError, setFormError] = useState<string | null>(null);
   const [createSuccess, setCreateSuccess] = useState<string | null>(null);
 
-  const { data: chargesData, isLoading } = useSupplementaryCharges(listFilters);
-  const charges: any[] = (chargesData as any)?.items ?? (Array.isArray(chargesData) ? chargesData : []);
-
   const createMutation = useCreateSupplementaryCharge(() => {
-    setCreateSuccess(`Charge created and payment link sent.`);
+    setCreateSuccess('Charge created and payment link sent.');
     setForm({ bookingRef: '', amountEtb: '', reason: 'UNDERPAYMENT', notes: '' });
     setFormError(null);
-    setTimeout(() => { setCreateSuccess(null); setTab('list'); }, 2000);
+    setTimeout(() => { setCreateSuccess(null); onClose(); }, 2000);
   });
 
-  const markPaidMutation = useMarkSupplementaryPaid();
-  const waiveMutation = useWaiveSupplementaryCharge();
-  const resendMutation = useResendSupplementaryLink();
-
-  const [actionError, setActionError] = useState<string | null>(null);
-  const [actionSuccess, setActionSuccess] = useState<string | null>(null);
-
-  const flash = (msg: string) => {
-    setActionSuccess(msg);
-    setTimeout(() => setActionSuccess(null), 3000);
-  };
-
   const handleCreate = async () => {
     setFormError(null);
     const amountMinor = Math.round(parseFloat(form.amountEtb) * 100);
@@ -73,218 +37,46 @@ export default function SupplementaryChargesModal({ isOpen, onClose }: Props) {
     }
   };
 
-  const handleMarkPaid = async (id: string) => {
-    setActionError(null);
-    try {
-      await markPaidMutation.mutateAsync({ id });
-      flash('Marked as paid');
-    } catch (e: any) {
-      setActionError(e?.response?.data?.message ?? e?.message ?? 'Failed');
-    }
-  };
-
-  const handleWaive = async (id: string) => {
-    setActionError(null);
-    try {
-      await waiveMutation.mutateAsync({ id });
-      flash('Charge waived');
-    } catch (e: any) {
-      setActionError(e?.response?.data?.message ?? e?.message ?? 'Failed');
-    }
-  };
-
-  const handleResend = async (id: string) => {
-    setActionError(null);
-    try {
-      await resendMutation.mutateAsync(id);
-      flash('Payment link resent');
-    } catch (e: any) {
-      setActionError(e?.response?.data?.message ?? e?.message ?? 'Failed');
-    }
-  };
-
   return (
-    <Modal isOpen={isOpen} onClose={onClose} title="Supplementary Charges" size="xl">
-      {/* Tabs */}
-      <div className="flex gap-1 mb-5 border-b border-muted">
-        {(['create', 'list'] as Tab[]).map((t) => (
-          <button
-            key={t}
-            onClick={() => setTab(t)}
-            className={`px-4 py-2 text-sm font-medium capitalize border-b-2 transition-colors ${
-              tab === t
-                ? 'border-emerald-500 text-emerald-600 dark:text-emerald-400'
-                : 'border-transparent text-muted-foreground hover:text-foreground'
-            }`}
-          >
-            {t === 'create' ? '+ Raise Charge' : 'All Charges'}
-          </button>
-        ))}
+    <Modal isOpen={isOpen} onClose={onClose} title="Raise Supplementary Charge" size="lg">
+      <div className="space-y-4">
+        {createSuccess && (
+          <div className="rounded-lg bg-green-50 dark:bg-green-900/20 p-3 text-sm text-green-800 dark:text-green-200">✓ {createSuccess}</div>
+        )}
+        {formError && (
+          <div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-3 text-sm text-red-700 dark:text-red-300">{formError}</div>
+        )}
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="md:col-span-2">
+            <label className="label">Booking Reference <span className="text-red-500">*</span></label>
+            <input className="input" placeholder="e.g. EDR-20240001" value={form.bookingRef} onChange={(e) => setForm({ ...form, bookingRef: e.target.value })} />
+          </div>
+          <div>
+            <label className="label">Amount Owed (ETB) <span className="text-red-500">*</span></label>
+            <input className="input" type="number" min="0.01" step="0.01" placeholder="e.g. 50.00" value={form.amountEtb} onChange={(e) => setForm({ ...form, amountEtb: e.target.value })} />
+          </div>
+          <div>
+            <label className="label">Reason <span className="text-red-500">*</span></label>
+            <select className="input" value={form.reason} onChange={(e) => setForm({ ...form, reason: e.target.value })}>
+              {REASONS.map((r) => <option key={r} value={r}>{r.replace('_', ' ')}</option>)}
+            </select>
+          </div>
+          <div className="md:col-span-2">
+            <label className="label">Notes (optional)</label>
+            <textarea className="input resize-none" rows={2} placeholder="e.g. Passenger paid 350 ETB, correct fare is 400 ETB" value={form.notes} onChange={(e) => setForm({ ...form, notes: e.target.value })} />
+          </div>
+        </div>
+
+        <p className="text-xs text-muted-foreground">
+          A payment link will be sent to the passenger's registered phone/email. The link expires in 72 hours.
+        </p>
+
+        <div className="flex justify-end gap-2 pt-2 border-t border-muted">
+          <ActionButton variant="secondary" onClick={onClose}>Cancel</ActionButton>
+          <ActionButton icon={PlusCircle} onClick={handleCreate} loading={createMutation.isPending}>Raise Charge</ActionButton>
+        </div>
       </div>
-
-      {/* ── CREATE TAB ── */}
-      {tab === 'create' && (
-        <div className="space-y-4">
-          {createSuccess && (
-            <div className="rounded-lg bg-green-50 dark:bg-green-900/20 p-3 text-sm text-green-800 dark:text-green-200">✓ {createSuccess}</div>
-          )}
-          {formError && (
-            <div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-3 text-sm text-red-700 dark:text-red-300">{formError}</div>
-          )}
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="md:col-span-2">
-              <label className="label">Booking Reference <span className="text-red-500">*</span></label>
-              <input
-                className="input"
-                placeholder="e.g. EDR-20240001"
-                value={form.bookingRef}
-                onChange={(e) => setForm({ ...form, bookingRef: e.target.value })}
-              />
-            </div>
-            <div>
-              <label className="label">Amount Owed (ETB) <span className="text-red-500">*</span></label>
-              <input
-                className="input"
-                type="number"
-                min="0.01"
-                step="0.01"
-                placeholder="e.g. 50.00"
-                value={form.amountEtb}
-                onChange={(e) => setForm({ ...form, amountEtb: e.target.value })}
-              />
-            </div>
-            <div>
-              <label className="label">Reason <span className="text-red-500">*</span></label>
-              <select className="input" value={form.reason} onChange={(e) => setForm({ ...form, reason: e.target.value })}>
-                {REASONS.map((r) => <option key={r} value={r}>{r.replace('_', ' ')}</option>)}
-              </select>
-            </div>
-            <div className="md:col-span-2">
-              <label className="label">Notes (optional)</label>
-              <textarea
-                className="input resize-none"
-                rows={2}
-                placeholder="e.g. Passenger paid 350 ETB, correct fare is 400 ETB"
-                value={form.notes}
-                onChange={(e) => setForm({ ...form, notes: e.target.value })}
-              />
-            </div>
-          </div>
-
-          <p className="text-xs text-muted-foreground">
-            A payment link will be sent to the passenger's registered phone/email. The link expires in 72 hours.
-          </p>
-
-          <div className="flex justify-end gap-2 pt-2 border-t border-muted">
-            <ActionButton variant="secondary" onClick={() => setTab('list')}>Cancel</ActionButton>
-            <ActionButton icon={PlusCircle} onClick={handleCreate} loading={createMutation.isPending}>
-              Raise Charge
-            </ActionButton>
-          </div>
-        </div>
-      )}
-
-      {/* ── LIST TAB ── */}
-      {tab === 'list' && (
-        <div className="space-y-4">
-          {actionSuccess && (
-            <div className="rounded-lg bg-green-50 dark:bg-green-900/20 p-3 text-sm text-green-800 dark:text-green-200">✓ {actionSuccess}</div>
-          )}
-          {actionError && (
-            <div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-3 text-sm text-red-700 dark:text-red-300">{actionError}</div>
-          )}
-
-          {/* Filters */}
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <label className="label">Booking Ref</label>
-              <input
-                className="input"
-                placeholder="Search booking ref…"
-                value={listFilters.bookingRef}
-                onChange={(e) => setListFilters({ ...listFilters, bookingRef: e.target.value })}
-              />
-            </div>
-            <div>
-              <label className="label">Status</label>
-              <select className="input" value={listFilters.status} onChange={(e) => setListFilters({ ...listFilters, status: e.target.value })}>
-                <option value="">All</option>
-                <option value="PENDING">Pending</option>
-                <option value="PAID">Paid</option>
-                <option value="WAIVED">Waived</option>
-                <option value="EXPIRED">Expired</option>
-              </select>
-            </div>
-          </div>
-
-          {/* Table */}
-          {isLoading ? (
-            <p className="text-sm text-muted-foreground py-6 text-center">Loading…</p>
-          ) : charges.length === 0 ? (
-            <p className="text-sm text-muted-foreground py-6 text-center">No supplementary charges found.</p>
-          ) : (
-            <div className="overflow-x-auto rounded-lg border border-muted">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="bg-muted/40 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                    <th className="px-3 py-2">Booking</th>
-                    <th className="px-3 py-2">Amount</th>
-                    <th className="px-3 py-2">Reason</th>
-                    <th className="px-3 py-2">Status</th>
-                    <th className="px-3 py-2">Created</th>
-                    <th className="px-3 py-2">Actions</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-muted">
-                  {charges.map((c: any) => (
-                    <tr key={c.id} className="hover:bg-muted/20 transition-colors">
-                      <td className="px-3 py-2 font-mono text-xs">{c.booking?.bookingRef ?? c.bookingId.substring(0, 8)}</td>
-                      <td className="px-3 py-2 font-semibold">{formatCurrency(c.amountMinor, c.currency ?? 'ETB')}</td>
-                      <td className="px-3 py-2 text-xs">{c.reason}</td>
-                      <td className="px-3 py-2">
-                        <Badge variant="status" status={STATUS_COLORS[c.status] ?? c.status}>{c.status}</Badge>
-                      </td>
-                      <td className="px-3 py-2 text-xs text-muted-foreground">{formatDateTime(c.createdAt)}</td>
-                      <td className="px-3 py-2">
-                        {c.status === 'PENDING' && (
-                          <div className="flex gap-1">
-                            <button
-                              title="Mark paid"
-                              onClick={() => handleMarkPaid(c.id)}
-                              className="p-1 rounded hover:bg-green-100 dark:hover:bg-green-900/30 text-green-600"
-                            >
-                              <CheckCircle size={15} />
-                            </button>
-                            <button
-                              title="Waive"
-                              onClick={() => handleWaive(c.id)}
-                              className="p-1 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-red-500"
-                            >
-                              <XCircle size={15} />
-                            </button>
-                            <button
-                              title="Resend link"
-                              onClick={() => handleResend(c.id)}
-                              className="p-1 rounded hover:bg-blue-100 dark:hover:bg-blue-900/30 text-blue-500"
-                            >
-                              <RotateCcw size={15} />
-                            </button>
-                          </div>
-                        )}
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-
-          <div className="flex justify-end pt-2 border-t border-muted">
-            <ActionButton variant="secondary" onClick={onClose}>Close</ActionButton>
-          </div>
-        </div>
-      )}
     </Modal>
   );
 }
diff --git a/apps/edr-passenger-web/backoffice/src/app/payments/page.tsx b/apps/edr-passenger-web/backoffice/src/app/payments/page.tsx
index 5ab1bfe5b..b9c81a183 100644
--- a/apps/edr-passenger-web/backoffice/src/app/payments/page.tsx
+++ b/apps/edr-passenger-web/backoffice/src/app/payments/page.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { Download, Eye, Trash2, AlertCircle } from 'lucide-react';
+import { Download, Eye, Trash2, AlertCircle, Send, CheckCircle, XCircle, RotateCcw } from 'lucide-react';
 import DataTable from '@/components/ui/DataTable';
 import Badge from '@/components/ui/Badge';
 import ActionButton from '@/components/ui/ActionButton';
@@ -11,6 +11,21 @@ import ConfirmDialog from '@/components/ui/ConfirmDialog';
 import { paymentsApi, apiClient } from '@/lib/api';
 import { formatDateTime, formatCurrency } from '@/lib/utils';
 import SupplementaryChargesModal from './SupplementaryChargesModal';
+import {
+  useSupplementaryCharges,
+  useMarkSupplementaryPaid,
+  useWaiveSupplementaryCharge,
+  useResendSupplementaryLink,
+} from './useSupplementaryCharges';
+
+type PageTab = 'payments' | 'supplementary';
+
+const STATUS_COLORS: Record<string, string> = {
+  PENDING: 'warning',
+  PAID: 'success',
+  WAIVED: 'info',
+  EXPIRED: 'error',
+};
 
 const Field = ({ label, value, mono = false, truncate = false }: { label: string; value: string; mono?: boolean; truncate?: boolean }) => (
   <div className="bg-muted/40 rounded-lg p-3">
@@ -26,6 +41,7 @@ const SectionHeader = ({ title }: { title: string }) => (
 );
 
 export default function PaymentsPage() {
+  const [pageTab, setPageTab] = useState<PageTab>('payments');
   const [filters, setFilters] = useState({ search: '', status: '', method: '' });
   const [selectedPayment, setSelectedPayment] = useState<any>(null);
   const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
@@ -40,6 +56,33 @@ export default function PaymentsPage() {
   });
   const [supplementaryOpen, setSupplementaryOpen] = useState(false);
 
+  // Supplementary tab state
+  const [suppFilters, setSuppFilters] = useState({ bookingRef: '', status: '' });
+  const [suppActionError, setSuppActionError] = useState<string | null>(null);
+  const [suppActionSuccess, setSuppActionSuccess] = useState<string | null>(null);
+  const { data: chargesData, isLoading: loadingCharges } = useSupplementaryCharges(suppFilters);
+  const charges: any[] = (chargesData as any)?.items ?? (Array.isArray(chargesData) ? chargesData : []);
+  const markPaidMutation = useMarkSupplementaryPaid();
+  const waiveMutation = useWaiveSupplementaryCharge();
+  const resendMutation = useResendSupplementaryLink();
+
+  const flashSupp = (msg: string) => { setSuppActionSuccess(msg); setTimeout(() => setSuppActionSuccess(null), 3000); };
+  const handleMarkPaid = async (id: string) => {
+    setSuppActionError(null);
+    try { await markPaidMutation.mutateAsync({ id }); flashSupp('Marked as paid'); }
+    catch (e: any) { setSuppActionError(e?.response?.data?.message ?? e?.message ?? 'Failed'); }
+  };
+  const handleWaive = async (id: string) => {
+    setSuppActionError(null);
+    try { await waiveMutation.mutateAsync({ id }); flashSupp('Charge waived'); }
+    catch (e: any) { setSuppActionError(e?.response?.data?.message ?? e?.message ?? 'Failed'); }
+  };
+  const handleResend = async (id: string) => {
+    setSuppActionError(null);
+    try { await resendMutation.mutateAsync(id); flashSupp('Payment link resent'); }
+    catch (e: any) { setSuppActionError(e?.response?.data?.message ?? e?.message ?? 'Failed'); }
+  };
+
   const queryClient = useQueryClient();
 
   const deleteMutation = useMutation({
@@ -137,11 +180,103 @@ export default function PaymentsPage() {
           <p className="text-muted-foreground">Manage payment transactions and refunds</p>
         </div>
         <div className="flex items-center gap-2">
-          <ActionButton icon={AlertCircle} variant="secondary" onClick={() => setSupplementaryOpen(true)}>Supplementary Charges</ActionButton>
-          <ActionButton icon={Download} variant="export" onClick={() => setExportModalOpen(true)}>Export</ActionButton>
+          {pageTab === 'supplementary' && (
+            <ActionButton icon={AlertCircle} variant="secondary" onClick={() => setSupplementaryOpen(true)}>Raise Charge</ActionButton>
+          )}
+          {pageTab === 'payments' && (
+            <ActionButton icon={Download} variant="export" onClick={() => setExportModalOpen(true)}>Export</ActionButton>
+          )}
         </div>
       </div>
 
+      {/* Page-level tabs */}
+      <div className="flex gap-1 border-b border-muted">
+        {(['payments', 'supplementary'] as PageTab[]).map((t) => (
+          <button
+            key={t}
+            onClick={() => setPageTab(t)}
+            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+              pageTab === t
+                ? 'border-emerald-500 text-emerald-600 dark:text-emerald-400'
+                : 'border-transparent text-muted-foreground hover:text-foreground'
+            }`}
+          >
+            {t === 'payments' ? 'Payments' : 'Supplementary Charges'}
+          </button>
+        ))}
+      </div>
+
+      {/* ── SUPPLEMENTARY TAB ── */}
+      {pageTab === 'supplementary' && (
+        <div className="space-y-4">
+          {suppActionSuccess && (
+            <div className="rounded-lg bg-green-50 dark:bg-green-900/20 p-3 text-sm text-green-800 dark:text-green-200">✓ {suppActionSuccess}</div>
+          )}
+          {suppActionError && (
+            <div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-3 text-sm text-red-700 dark:text-red-300">{suppActionError}</div>
+          )}
+          <div className="card grid grid-cols-2 gap-3">
+            <div>
+              <label className="label">Booking Ref</label>
+              <input className="input" placeholder="Search booking ref…" value={suppFilters.bookingRef} onChange={(e) => setSuppFilters({ ...suppFilters, bookingRef: e.target.value })} />
+            </div>
+            <div>
+              <label className="label">Status</label>
+              <select className="input" value={suppFilters.status} onChange={(e) => setSuppFilters({ ...suppFilters, status: e.target.value })}>
+                <option value="">All</option>
+                <option value="PENDING">Pending</option>
+                <option value="PAID">Paid</option>
+                <option value="WAIVED">Waived</option>
+                <option value="EXPIRED">Expired</option>
+              </select>
+            </div>
+          </div>
+          {loadingCharges ? (
+            <p className="text-sm text-muted-foreground py-6 text-center">Loading…</p>
+          ) : charges.length === 0 ? (
+            <p className="text-sm text-muted-foreground py-6 text-center">No supplementary charges found.</p>
+          ) : (
+            <div className="overflow-x-auto rounded-lg border border-muted">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="bg-muted/40 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                    <th className="px-3 py-2">Booking</th>
+                    <th className="px-3 py-2">Amount</th>
+                    <th className="px-3 py-2">Reason</th>
+                    <th className="px-3 py-2">Status</th>
+                    <th className="px-3 py-2">Created</th>
+                    <th className="px-3 py-2">Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-muted">
+                  {charges.map((c: any) => (
+                    <tr key={c.id} className="hover:bg-muted/20 transition-colors">
+                      <td className="px-3 py-2 font-mono text-xs">{c.booking?.bookingRef ?? c.bookingId.substring(0, 8)}</td>
+                      <td className="px-3 py-2 font-semibold">{formatCurrency(c.amountMinor, c.currency ?? 'ETB')}</td>
+                      <td className="px-3 py-2 text-xs">{c.reason}</td>
+                      <td className="px-3 py-2"><Badge variant="status" status={STATUS_COLORS[c.status] ?? c.status}>{c.status}</Badge></td>
+                      <td className="px-3 py-2 text-xs text-muted-foreground">{formatDateTime(c.createdAt)}</td>
+                      <td className="px-3 py-2">
+                        {c.status === 'PENDING' && (
+                          <div className="flex gap-1">
+                            <button title="Mark paid" onClick={() => handleMarkPaid(c.id)} className="p-1 rounded hover:bg-green-100 dark:hover:bg-green-900/30 text-green-600"><CheckCircle size={15} /></button>
+                            <button title="Waive" onClick={() => handleWaive(c.id)} className="p-1 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-red-500"><XCircle size={15} /></button>
+                            <button title="Resend link" onClick={() => handleResend(c.id)} className="p-1 rounded hover:bg-blue-100 dark:hover:bg-blue-900/30 text-blue-500"><RotateCcw size={15} /></button>
+                          </div>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* ── PAYMENTS TAB ── */}
+      {pageTab === 'payments' && (
+      <>
       <div className="card">
         {successMessage && (
           <div className="mb-4 rounded-lg bg-green-50 dark:bg-green-900/20 p-4 text-sm text-green-800 dark:text-green-200">✓ {successMessage}</div>
@@ -285,6 +420,9 @@ export default function PaymentsPage() {
         error={deleteError ?? undefined}
       />
 
+      </>
+      )}
+
       <SupplementaryChargesModal isOpen={supplementaryOpen} onClose={() => setSupplementaryOpen(false)} />
 
       {/* Export Modal */}
diff --git a/apps/edr-passenger-web/portal/src/app/pay-balance/[token]/failed/page.tsx b/apps/edr-passenger-web/portal/src/app/pay-balance/[token]/failed/page.tsx
new file mode 100644
index 000000000..346f31c71
--- /dev/null
+++ b/apps/edr-passenger-web/portal/src/app/pay-balance/[token]/failed/page.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { XCircle } from "lucide-react";
+import Link from "next/link";
+
+export default function PayBalanceFailedPage() {
+  const { token } = useParams<{ token: string }>();
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center px-4">
+      <div className="max-w-sm w-full text-center space-y-4">
+        <XCircle className="w-16 h-16 text-red-500 mx-auto" />
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Payment failed</h1>
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          Your payment could not be completed. Please try again.
+        </p>
+        <Link href={`/pay-balance/${token}`} className="btn-primary inline-block px-6 py-2.5 font-semibold">
+          Try again
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-passenger-web/portal/src/app/pay-balance/[token]/page.tsx b/apps/edr-passenger-web/portal/src/app/pay-balance/[token]/page.tsx
new file mode 100644
index 000000000..2b2e69549
--- /dev/null
+++ b/apps/edr-passenger-web/portal/src/app/pay-balance/[token]/page.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { apiClient } from "@/lib/api-client";
+import { PaymentMethod } from "@/types";
+import {
+  Loader2,
+  CreditCard,
+  Smartphone,
+  Wallet,
+  Landmark,
+  CheckCircle,
+  AlertCircle,
+} from "lucide-react";
+
+const getIconForMethod = (methodId: string) => {
+  if (methodId.includes("CARD")) return CreditCard;
+  if (methodId.includes("WALLET")) return Wallet;
+  if (methodId.includes("CAC")) return Landmark;
+  return Smartphone;
+};
+
+export default function PayBalancePage() {
+  const { token } = useParams<{ token: string }>();
+  const router = useRouter();
+  const [selectedMethod, setSelectedMethod] = useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [paymentError, setPaymentError] = useState<string | null>(null);
+
+  const { data: charge, isLoading: loadingCharge, error: chargeError } = useQuery({
+    queryKey: ["supplementary-charge", token],
+    queryFn: () => apiClient.get<any>(`/payments/supplementary/by-token/${token}`),
+    retry: false,
+  });
+
+  const { data: paymentMethods = [], isLoading: loadingMethods } = useQuery<PaymentMethod[]>({
+    queryKey: ["paymentMethods"],
+    queryFn: async () => {
+      const res = await apiClient.get<PaymentMethod[]>("/payments/methods");
+      return Array.isArray(res) ? res : [];
+    },
+    enabled: !!charge,
+  });
+
+  const payMutation = useMutation({
+    mutationFn: (method: string) =>
+      apiClient.post<any>(`/payments/supplementary/by-token/${token}/pay`, {
+        method,
+        platform: "web",
+      }),
+    onSuccess: (data: any) => {
+      if (data?.clientAction?.type === "REDIRECT") {
+        window.location.href = data.clientAction.url;
+        return;
+      }
+      // Immediate success (e.g. wallet)
+      router.push(`/pay-balance/${token}/success`);
+    },
+    onError: (err: any) => {
+      setPaymentError(
+        err?.response?.data?.message ?? err?.message ?? "Payment failed. Please try again."
+      );
+      setIsProcessing(false);
+    },
+  });
+
+  const handlePay = () => {
+    if (!selectedMethod) return;
+    setIsProcessing(true);
+    setPaymentError(null);
+    payMutation.mutate(selectedMethod);
+  };
+
+  if (loadingCharge) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <Loader2 className="w-10 h-10 text-primary animate-spin" />
+      </div>
+    );
+  }
+
+  if (chargeError || !charge) {
+    const msg = (chargeError as any)?.response?.data?.message ?? "This payment link is invalid or has expired.";
+    return (
+      <div className="min-h-screen flex items-center justify-center px-4">
+        <div className="max-w-sm w-full text-center space-y-4">
+          <AlertCircle className="w-14 h-14 text-red-500 mx-auto" />
+          <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">Link unavailable</h1>
+          <p className="text-sm text-gray-500 dark:text-gray-400">{msg}</p>
+        </div>
+      </div>
+    );
+  }
+
+  const amountDisplay = (charge.amountMinor / 100).toFixed(2);
+  const currency = charge.currency ?? "ETB";
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-start justify-center px-4 py-10">
+      <div className="w-full max-w-md space-y-4">
+        {/* Header */}
+        <div className="text-center space-y-1">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Outstanding balance</h1>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Booking <span className="font-semibold text-gray-700 dark:text-gray-300">{charge.booking?.bookingRef}</span>
+          </p>
+        </div>
+
+        {/* Charge summary */}
+        <div className="card space-y-3">
+          <div className="flex justify-between items-center">
+            <span className="text-sm text-gray-500 dark:text-gray-400">Reason</span>
+            <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{charge.reason}</span>
+          </div>
+          {charge.notes && (
+            <div className="flex justify-between items-start gap-4">
+              <span className="text-sm text-gray-500 dark:text-gray-400 shrink-0">Notes</span>
+              <span className="text-sm text-gray-700 dark:text-gray-300 text-right">{charge.notes}</span>
+            </div>
+          )}
+          <div className="border-t border-gray-100 dark:border-gray-800 pt-3 flex justify-between items-center">
+            <span className="font-bold text-gray-900 dark:text-gray-100">Amount due</span>
+            <span className="text-2xl font-bold text-primary">{currency} {amountDisplay}</span>
+          </div>
+        </div>
+
+        {/* Payment methods */}
+        <div className="card space-y-3">
+          <h2 className="text-base font-bold text-gray-900 dark:text-gray-100">Select payment method</h2>
+          {loadingMethods ? (
+            <div className="flex items-center justify-center py-6 gap-2">
+              <Loader2 className="w-5 h-5 text-primary animate-spin" />
+              <span className="text-sm text-gray-500 dark:text-gray-400">Loading...</span>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {paymentMethods.filter((m) => m.enabled).map((method) => {
+                const Icon = getIconForMethod(method.type);
+                const isSelected = selectedMethod === method.type;
+                return (
+                  <button
+                    key={method.id}
+                    onClick={() => setSelectedMethod(method.type)}
+                    disabled={isProcessing}
+                    className={`w-full p-4 rounded-xl border-2 transition-all text-left ${
+                      isSelected
+                        ? "border-primary bg-primary/8 dark:bg-primary/15 shadow-md"
+                        : "border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-primary/50"
+                    } ${isProcessing ? "opacity-50 cursor-not-allowed" : ""}`}
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${isSelected ? "bg-primary" : "bg-gray-100 dark:bg-gray-700"}`}>
+                        <Icon className={`w-5 h-5 ${isSelected ? "text-white" : "text-primary"}`} />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p className="font-semibold text-gray-900 dark:text-gray-100">{method.displayName}</p>
+                        <p className="text-xs text-gray-500 dark:text-gray-400">{method.region} · {method.currency}</p>
+                      </div>
+                      {isSelected && <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {paymentError && (
+          <p className="text-red-600 dark:text-red-400 text-sm text-center">⚠️ {paymentError}</p>
+        )}
+
+        <button
+          onClick={handlePay}
+          disabled={!selectedMethod || isProcessing}
+          className="btn-primary w-full py-3 font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {isProcessing ? (
+            <span className="flex items-center justify-center gap-2">
+              <Loader2 className="w-4 h-4 animate-spin" /> Processing...
+            </span>
+          ) : (
+            `Pay ${currency} ${amountDisplay}`
+          )}
+        </button>
+
+        <p className="text-xs text-gray-400 dark:text-gray-500 text-center">🔒 Secure & encrypted payment</p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-passenger-web/portal/src/app/pay-balance/[token]/success/page.tsx b/apps/edr-passenger-web/portal/src/app/pay-balance/[token]/success/page.tsx
new file mode 100644
index 000000000..cc7980dd3
--- /dev/null
+++ b/apps/edr-passenger-web/portal/src/app/pay-balance/[token]/success/page.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { CheckCircle } from "lucide-react";
+import Link from "next/link";
+
+export default function PayBalanceSuccessPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center px-4">
+      <div className="max-w-sm w-full text-center space-y-4">
+        <CheckCircle className="w-16 h-16 text-green-500 mx-auto" />
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Payment successful</h1>
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          Your outstanding balance has been settled. Thank you.
+        </p>
+        <Link href="/" className="btn-primary inline-block px-6 py-2.5 font-semibold">
+          Back to home
+        </Link>
+      </div>
+    </div>
+  );
+}