From 309127bba9f99af1801654bd28cd21e2afc6e62e Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Tue, 7 Apr 2026 20:34:57 -0400
Subject: [PATCH 1/2] feat: add condensed view for PaymentHistoryTable and
 PendingClaimsTable

- PaymentHistoryTable: 4 data-slots (payment-history, payment-history-empty,
  payment-history-table, payment-history-row) with condensed CSS for table
  headers, rows, badges, method icons, and refund buttons
- PendingClaimsTable: 6 data-slots (pending-claims, pending-claims-empty,
  pending-claims-table, pending-claims-row, pending-claims-cards,
  pending-claims-card) with condensed CSS for desktop table and mobile cards
- All selectors use structural patterns (no Tailwind class selectors)
---
 .../PaymentHistoryTable.tsx                   |  14 +-
 .../PendingClaimsTable/PendingClaimsTable.tsx |  30 ++-
 src/styles/condensed-view.css                 | 238 ++++++++++++++++++
 3 files changed, 273 insertions(+), 9 deletions(-)

diff --git a/src/components/PaymentHistoryTable/PaymentHistoryTable.tsx b/src/components/PaymentHistoryTable/PaymentHistoryTable.tsx
index 0da0e5b9..25e8eb3d 100644
--- a/src/components/PaymentHistoryTable/PaymentHistoryTable.tsx
+++ b/src/components/PaymentHistoryTable/PaymentHistoryTable.tsx
@@ -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}
@@ -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
@@ -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">
@@ -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' : ''} `}
             >
diff --git a/src/components/PendingClaimsTable/PendingClaimsTable.tsx b/src/components/PendingClaimsTable/PendingClaimsTable.tsx
index 1c1bc259..52e807cd 100644
--- a/src/components/PendingClaimsTable/PendingClaimsTable.tsx
+++ b/src/components/PendingClaimsTable/PendingClaimsTable.tsx
@@ -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}
@@ -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
@@ -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">
@@ -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" />
@@ -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" />
diff --git a/src/styles/condensed-view.css b/src/styles/condensed-view.css
index 5c91bd4f..cc39d4e4 100644
--- a/src/styles/condensed-view.css
+++ b/src/styles/condensed-view.css
@@ -9599,3 +9599,241 @@ 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 > 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;
+  font-size: 0.625rem !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;
+}

From a871def740098ae0b26a25f0cd462f011b273bb7 Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Tue, 7 Apr 2026 20:42:55 -0400
Subject: [PATCH 2/2] fix: scope PendingClaimsTable selectors per review
 feedback

- Narrow claimant cell gap selector from 'td > div' to 'td:first-child > div'
- Target inner div for mobile info row font-size instead of relying on inheritance
---
 src/styles/condensed-view.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/styles/condensed-view.css b/src/styles/condensed-view.css
index cc39d4e4..27f96369 100644
--- a/src/styles/condensed-view.css
+++ b/src/styles/condensed-view.css
@@ -9744,7 +9744,7 @@ body.condensed [data-slot='pending-claims-row'] td {
 
 /* ── Claimant cell: avatar + info ── */
 
-body.condensed [data-slot='pending-claims-row'] td > div {
+body.condensed [data-slot='pending-claims-row'] td:first-child > div {
   gap: 0.375rem !important;
 }
 
@@ -9820,7 +9820,11 @@ body.condensed [data-slot='pending-claims-card'] [data-slot='badge'] {
 
 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 ── */