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.
This commit is contained in:
Moheeb Zara
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user