Skip to content

feat: add condensed view for PaymentHistoryTable and PendingClaimsTable #166

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
garrity-miepub merged 2 commits into from
Apr 8, 2026
+277 −9
Merged

feat: add condensed view for PaymentHistoryTable and PendingClaimsTable #166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
309127b
feat: add condensed view for PaymentHistoryTable and PendingClaimsTable
garrity-miepub Apr 8, 2026
a871def
fix: scope PendingClaimsTable selectors per review feedback
garrity-miepub Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions src/components/PaymentHistoryTable/PaymentHistoryTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ export function PaymentHistoryTable({

if (isLoading) {
return (
<div className={`space-y-2 ${className}`}>
<div data-slot="payment-history" className={`space-y-2 ${className}`}>
{[1, 2, 3].map((i) => (
<div
key={i}
Expand All @@ -171,6 +171,7 @@ export function PaymentHistoryTable({
if (payments.length === 0) {
return (
<div
data-slot="payment-history"
className={`rounded-lg border border-dashed border-gray-300 py-12 text-center dark:border-gray-700 ${className}`}
>
<svg
Expand All @@ -186,16 +187,22 @@ export function PaymentHistoryTable({
d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
<p className="text-gray-500 dark:text-gray-400">{emptyMessage}</p>
<p
data-slot="payment-history-empty"
className="text-gray-500 dark:text-gray-400"
>
{emptyMessage}
</p>
</div>
);
}

return (
<div
data-slot="payment-history"
className={`overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 ${className}`}
>
<table className="w-full">
<table data-slot="payment-history-table" className="w-full">
<thead className="bg-gray-50 dark:bg-gray-800">
<tr>
<th className="px-4 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400">
Expand Down Expand Up @@ -227,6 +234,7 @@ export function PaymentHistoryTable({
{payments.map((payment) => (
<tr
key={payment.id}
data-slot="payment-history-row"
onClick={() => onPaymentClick?.(payment)}
className={`bg-white dark:bg-gray-900 ${onPaymentClick ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800' : ''} `}
>
Expand Down
30 changes: 24 additions & 6 deletions src/components/PendingClaimsTable/PendingClaimsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export function PendingClaimsTable({

if (isLoading) {
return (
<div className={`space-y-2 ${className}`}>
<div data-slot="pending-claims" className={`space-y-2 ${className}`}>
{[1, 2, 3].map((i) => (
<div
key={i}
Expand All @@ -79,6 +79,7 @@ export function PendingClaimsTable({
if (claims.length === 0) {
return (
<div
data-slot="pending-claims"
className={`rounded-lg border border-dashed border-gray-300 py-12 text-center dark:border-gray-700 ${className}`}
>
<svg
Expand All @@ -94,18 +95,24 @@ export function PendingClaimsTable({
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<p className="text-gray-500 dark:text-gray-400">{emptyMessage}</p>
<p
data-slot="pending-claims-empty"
className="text-gray-500 dark:text-gray-400"
>
{emptyMessage}
</p>
</div>
);
}

return (
<div
data-slot="pending-claims"
className={`overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 ${className}`}
>
{/* Desktop table */}
<div className="hidden md:block">
<table className="w-full">
<table data-slot="pending-claims-table" className="w-full">
<thead className="bg-gray-50 dark:bg-gray-800">
<tr>
<th className="px-4 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400">
Expand All @@ -127,7 +134,11 @@ export function PendingClaimsTable({
</thead>
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
{claims.map((claim) => (
<tr key={claim.id} className="bg-white dark:bg-gray-900">
<tr
key={claim.id}
data-slot="pending-claims-row"
className="bg-white dark:bg-gray-900"
>
<td className="px-4 py-4">
<div className="flex items-center gap-3">
<Avatar name={claim.claimantName} size="sm" />
Expand Down Expand Up @@ -199,9 +210,16 @@ export function PendingClaimsTable({
</div>

{/* Mobile cards */}
<div className="divide-y divide-gray-200 md:hidden dark:divide-gray-700">
<div
data-slot="pending-claims-cards"
className="divide-y divide-gray-200 md:hidden dark:divide-gray-700"
>
{claims.map((claim) => (
<div key={claim.id} className="bg-white p-4 dark:bg-gray-900">
<div
key={claim.id}
data-slot="pending-claims-card"
className="bg-white p-4 dark:bg-gray-900"
>
<div className="flex items-start justify-between gap-4">
<div className="flex items-center gap-3">
<Avatar name={claim.claimantName} size="sm" />
Expand Down
242 changes: 242 additions & 0 deletions src/styles/condensed-view.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9599,3 +9599,245 @@ body.condensed [data-slot='notification-center-meta'] span {
body.condensed [data-slot='notification-center-footer'] {
padding: 0.375rem 0.75rem !important;
}

/* ═══════════════════════════════════════════════════════════════
PaymentHistoryTable – condensed overrides
═══════════════════════════════════════════════════════════════ */

/* ── Root container ── */

body.condensed [data-slot='payment-history'] {
font-size: 0.75rem !important;
}

/* ── Empty state ── */

body.condensed
[data-slot='payment-history']:has([data-slot='payment-history-empty'])
> svg {
width: 1.5rem !important;
height: 1.5rem !important;
margin-bottom: 0.375rem !important;
}

body.condensed
[data-slot='payment-history']
> svg
+ [data-slot='payment-history-empty'] {
margin-top: 0 !important;
}

body.condensed
[data-slot='payment-history']:has([data-slot='payment-history-empty']) {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}

body.condensed [data-slot='payment-history-empty'] {
font-size: 0.75rem !important;
}

/* ── Table ── */

body.condensed [data-slot='payment-history-table'] thead th {
padding: 0.25rem 0.5rem !important;
font-size: 0.625rem !important;
line-height: 0.875rem !important;
}

/* ── Table rows ── */

body.condensed [data-slot='payment-history-row'] td {
padding: 0.25rem 0.5rem !important;
}

body.condensed [data-slot='payment-history-row'] td p {
font-size: 0.75rem !important;
line-height: 1rem !important;
}

body.condensed [data-slot='payment-history-row'] td p + p {
font-size: 0.625rem !important;
line-height: 0.875rem !important;
}

/* ── Invoice link ── */

body.condensed [data-slot='payment-history-row'] td button {
font-size: 0.75rem !important;
}

/* ── Method column ── */

body.condensed [data-slot='payment-history-row'] td > div {
gap: 0.25rem !important;
}

body.condensed [data-slot='payment-history-row'] td > div svg {
width: 0.75rem !important;
height: 0.75rem !important;
}

body.condensed [data-slot='payment-history-row'] td > div span {
font-size: 0.6875rem !important;
}

/* ── Status badge ── */

body.condensed [data-slot='payment-history-row'] [data-slot='badge'] {
font-size: 0.625rem !important;
padding: 0 0.25rem !important;
}

/* ── Refund button ── */

body.condensed [data-slot='payment-history-row'] td > [data-slot='button'] {
font-size: 0.6875rem !important;
padding: 0.125rem 0.375rem !important;
height: auto !important;
min-height: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
PendingClaimsTable – condensed overrides
═══════════════════════════════════════════════════════════════ */

/* ── Root container ── */

body.condensed [data-slot='pending-claims'] {
font-size: 0.75rem !important;
}

/* ── Empty state ── */

body.condensed
[data-slot='pending-claims']:has([data-slot='pending-claims-empty']) {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}

body.condensed
[data-slot='pending-claims']:has([data-slot='pending-claims-empty'])
> svg {
width: 1.5rem !important;
height: 1.5rem !important;
margin-bottom: 0.375rem !important;
}

body.condensed [data-slot='pending-claims-empty'] {
font-size: 0.75rem !important;
}

/* ── Desktop table header ── */

body.condensed [data-slot='pending-claims-table'] thead th {
padding: 0.25rem 0.5rem !important;
font-size: 0.625rem !important;
line-height: 0.875rem !important;
}

/* ── Desktop table rows ── */

body.condensed [data-slot='pending-claims-row'] td {
padding: 0.25rem 0.5rem !important;
}

/* ── Claimant cell: avatar + info ── */

body.condensed [data-slot='pending-claims-row'] td:first-child > div {
gap: 0.375rem !important;
}

body.condensed [data-slot='pending-claims-row'] [data-slot='avatar'] {
width: 1.25rem !important;
height: 1.25rem !important;
font-size: 0.5rem !important;
}

body.condensed [data-slot='pending-claims-row'] td p {
font-size: 0.75rem !important;
line-height: 1rem !important;
}

body.condensed [data-slot='pending-claims-row'] td p + p {
font-size: 0.625rem !important;
line-height: 0.875rem !important;
}

/* ── Status badge ── */

body.condensed [data-slot='pending-claims-row'] [data-slot='badge'] {
font-size: 0.625rem !important;
padding: 0 0.25rem !important;
}

/* ── Action buttons ── */

body.condensed [data-slot='pending-claims-row'] td > div [data-slot='button'],
body.condensed [data-slot='pending-claims-row'] td > div button {
font-size: 0.6875rem !important;
padding: 0.125rem 0.375rem !important;
height: auto !important;
min-height: 0 !important;
}

/* ── Mobile cards ── */

body.condensed [data-slot='pending-claims-card'] {
padding: 0.375rem 0.5rem !important;
}

body.condensed [data-slot='pending-claims-card'] > div:first-child {
gap: 0.375rem !important;
}

body.condensed [data-slot='pending-claims-card'] > div:first-child > div {
gap: 0.375rem !important;
}

body.condensed [data-slot='pending-claims-card'] [data-slot='avatar'] {
width: 1.25rem !important;
height: 1.25rem !important;
font-size: 0.5rem !important;
}

body.condensed [data-slot='pending-claims-card'] p {
font-size: 0.75rem !important;
line-height: 1rem !important;
}

body.condensed [data-slot='pending-claims-card'] p + p {
font-size: 0.625rem !important;
line-height: 0.875rem !important;
}

body.condensed [data-slot='pending-claims-card'] [data-slot='badge'] {
font-size: 0.625rem !important;
padding: 0 0.25rem !important;
}

/* ── Mobile info row (role + date) ── */

body.condensed [data-slot='pending-claims-card'] > div:nth-child(2) {
margin-top: 0.25rem !important;
}

body.condensed [data-slot='pending-claims-card'] > div:nth-child(2) > div {
font-size: 0.625rem !important;
line-height: 0.875rem !important;
}

/* ── Mobile action buttons ── */

body.condensed [data-slot='pending-claims-card'] > div:last-child {
margin-top: 0.25rem !important;
gap: 0.25rem !important;
}

body.condensed [data-slot='pending-claims-card'] [data-slot='button'],
body.condensed [data-slot='pending-claims-card'] button {
font-size: 0.6875rem !important;
padding: 0.125rem 0.375rem !important;
height: auto !important;
min-height: 0 !important;
}
Loading