From 9d419fe16476d8e0a38c2ee3d33a3f7b7e8577fb Mon Sep 17 00:00:00 2001
From: Moheeb Zara <hackbuildvideo@gmail.com>
Date: Sun, 17 May 2026 01:54:14 -0700
Subject: [PATCH] feat(ux): mobile card layouts for members & payments tables

The two dense tables were overflow-x-auto only; on phones the action
buttons sat off-screen. Table is now hidden md:block; under md a stacked
card list renders the same data + key actions reusing the existing
handlers/dialogs (members: approve/edit/certs/cards/forms/remove;
payments: link member). Desktop unchanged.
---
 app/(app)/members/members-client.tsx   | 54 +++++++++++++++++++++++++-
 app/(app)/payments/payments-client.tsx | 42 +++++++++++++++++++-
 2 files changed, 94 insertions(+), 2 deletions(-)

diff --git a/app/(app)/members/members-client.tsx b/app/(app)/members/members-client.tsx
index f3ff3ab..2f68eee 100644
--- a/app/(app)/members/members-client.tsx
+++ b/app/(app)/members/members-client.tsx
@@ -306,7 +306,7 @@ export function MembersClient({ members: initialMembers, currentRole, areaLeadRo
         </div>
 
         <div className="bg-card rounded border border-border overflow-hidden">
-          <div className="overflow-x-auto">
+          <div className="overflow-x-auto hidden md:block">
           <table className="w-full">
             <thead>
               <tr className="border-b border-border">
@@ -480,6 +480,58 @@ export function MembersClient({ members: initialMembers, currentRole, areaLeadRo
             </tbody>
           </table>
           </div>
+
+          {/* Mobile: stacked cards (the table is unusable on phones). */}
+          <div className="md:hidden divide-y divide-border">
+            {sortedMembers.length > 0 ? sortedMembers.map(m => {
+              const hasIssue = m.payment_status && m.payment_status !== 'current'
+              return (
+                <div key={m.id} className={`p-4 ${hasIssue ? 'bg-red-50/20' : ''}`}>
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <p className="font-sans text-sm font-medium text-foreground truncate">{m.display_name}</p>
+                      <p className={`font-mono text-[10px] truncate ${hasIssue ? 'text-red-500' : 'text-muted-foreground'}`}>{m.email}</p>
+                    </div>
+                    <span className={`font-mono text-[10px] px-2 py-0.5 rounded border shrink-0 ${TIER_COLORS[m.tier?.toLowerCase()] ?? 'text-muted-foreground bg-muted border-border'}`}>
+                      {m.tier?.toUpperCase()}
+                    </span>
+                  </div>
+                  <p className="font-mono text-[10px] text-muted-foreground mt-1">
+                    {m.status === 'unverified' ? 'unverified' : (m.payment_status || m.status)}
+                    {m.joined_at ? ` · joined ${new Date(m.joined_at).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}` : ''}
+                  </p>
+                  <div className="flex flex-wrap gap-2 mt-3">
+                    {isAdmin(currentRole) && m.status === 'unverified' && (
+                      <button onClick={() => handleApprove(m.id)} className="font-mono text-[10px] border border-primary/30 text-primary bg-primary/5 px-3 py-2 min-h-[44px] rounded">APPROVE</button>
+                    )}
+                    {isAdmin(currentRole) && (
+                      <button onClick={() => openEdit(m)} className="font-mono text-[10px] border border-border px-3 py-2 min-h-[44px] rounded">EDIT</button>
+                    )}
+                    {canGrantCerts && (
+                      <button onClick={() => setCertMember(m)} className="font-mono text-[10px] border border-border px-3 py-2 min-h-[44px] rounded">CERTS</button>
+                    )}
+                    {canManageCards && (
+                      <button onClick={() => setCardMember(m)} className="font-mono text-[10px] border border-border px-3 py-2 min-h-[44px] rounded">CARDS</button>
+                    )}
+                    {canViewForms && (
+                      <button onClick={() => setFormsMember(m)} className="font-mono text-[10px] border border-border px-3 py-2 min-h-[44px] rounded">FORMS</button>
+                    )}
+                    {isAdmin(currentRole) && (
+                      <button onClick={() => handleRemove(m.id)} className="font-mono text-[10px] border border-border px-3 py-2 min-h-[44px] rounded hover:border-red-300 hover:text-red-600">REMOVE</button>
+                    )}
+                  </div>
+                </div>
+              )
+            }) : (
+              <Empty className="border-0">
+                <EmptyHeader>
+                  <EmptyMedia variant="icon"><Users /></EmptyMedia>
+                  <EmptyTitle>No members match this filter</EmptyTitle>
+                  <EmptyDescription>Try a different tab, clear the search, or change the tier filter.</EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            )}
+          </div>
         </div>
       </div>
 
diff --git a/app/(app)/payments/payments-client.tsx b/app/(app)/payments/payments-client.tsx
index 316a67a..f347004 100644
--- a/app/(app)/payments/payments-client.tsx
+++ b/app/(app)/payments/payments-client.tsx
@@ -202,7 +202,7 @@ export function PaymentsClient({ payments: initialPayments, members, integration
           </div>
 
           <div className="bg-card rounded border border-border overflow-hidden">
-            <div className="overflow-x-auto">
+            <div className="overflow-x-auto hidden md:block">
             <table className="w-full">
               <thead>
                 <tr className="border-b border-border">
@@ -262,6 +262,46 @@ export function PaymentsClient({ payments: initialPayments, members, integration
               </tbody>
             </table>
             </div>
+
+            {/* Mobile: stacked cards */}
+            <div className="md:hidden divide-y divide-border">
+              {filtered.length > 0 ? filtered.map(p => (
+                <div key={p.id} className={`p-4 ${p.link_status === 'linked' ? 'bg-primary/3' : ''}`}>
+                  <div className="flex items-center justify-between gap-3">
+                    <span className="font-sans text-sm font-medium">{'$'}{Number(p.amount).toFixed(2)}</span>
+                    <span className={`font-mono text-[10px] font-bold ${platformColors[p.platform] ?? ''}`}>{p.platform?.toUpperCase()}</span>
+                  </div>
+                  <p className="font-mono text-[10px] text-muted-foreground mt-1 truncate">
+                    {p.from_identifier}{p.from_note ? ` · "${p.from_note}"` : ''}
+                    {p.transaction_date ? ` · ${new Date(p.transaction_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}` : ''}
+                  </p>
+                  <div className="mt-3">
+                    {p.link_status === 'linked' && p.space_members ? (
+                      <span className="font-mono text-[10px] text-primary bg-primary/5 px-2 py-1 rounded border border-primary/20">
+                        ✓ {p.space_members.display_name}
+                      </span>
+                    ) : canEdit(currentRole) ? (
+                      <button
+                        onClick={() => setLinkingPayment(p)}
+                        className="font-mono text-[10px] border border-dashed border-border px-3 py-2 min-h-[44px] rounded hover:border-primary hover:text-primary transition"
+                      >
+                        + Link member
+                      </button>
+                    ) : (
+                      <span className="font-mono text-[10px] text-muted-foreground">unlinked</span>
+                    )}
+                  </div>
+                </div>
+              )) : (
+                <Empty className="border-0">
+                  <EmptyHeader>
+                    <EmptyMedia variant="icon"><Receipt /></EmptyMedia>
+                    <EmptyTitle>No payments yet</EmptyTitle>
+                    <EmptyDescription>Synced and logged transactions show up here once they exist.</EmptyDescription>
+                  </EmptyHeader>
+                </Empty>
+              )}
+            </div>
           </div>
         </div>
       </div>