From 3f285a74bc2ecb34e2fe0339a0bc6100c3d09d68 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 14 Jan 2026 11:56:09 +0700
Subject: [PATCH] refactor(FE): Append title classes to Card and style customer
 card

---
 src/components/Card.tsx                                |  8 ++++++--
 .../pages/report/finance/tab/CustomerPaymentTab.tsx    | 10 +++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index ff4c35f2..e04fa4c7 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -148,7 +148,11 @@ const Card = ({
     const hasContent = children || actions || footer;
 
     const titleContent = (
-      <div className='group flex items-center !justify-between w-full'>
+      <div
+        className={
+          `group flex items-center justify-between! w-full` + getTitleClasses()
+        }
+      >
         <div className='flex-1'>
           {title && <h2 className={getTitleClasses()}>{title}</h2>}
           {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
@@ -156,7 +160,7 @@ const Card = ({
         {collapsible && (
           <button
             onClick={() => handleCollapsedChange(!isCollapsed)}
-            className='btn btn-ghost btn-sm btn-circle'
+            className={`btn btn-ghost btn-sm btn-circle` + getTitleClasses()}
             aria-label={isCollapsed ? 'Expand content' : 'Collapse content'}
           >
             <Icon
diff --git a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
index 7900056e..b907c027 100644
--- a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
+++ b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
@@ -735,8 +735,12 @@ const CustomerPaymentTab = () => {
               <Card
                 key={customerReport.customer.id}
                 title={customerReport.customer.name}
-                subtitle={`${customerReport.customer.address || ''}`}
-                className={{ wrapper: 'w-full' }}
+                className={{
+                  wrapper: 'w-full rounded-2xl',
+                  body: 'p-0',
+                  title:
+                    'py-1.5 px-3 bg-[#0069E0] text-white text-lg font-normal',
+                }}
                 variant='bordered'
                 collapsible={true}
               >
@@ -747,7 +751,7 @@ const CustomerPaymentTab = () => {
                   renderFooter={customerReport.rows.length > 0}
                   className={{
                     containerClassName: 'w-full',
-                    tableWrapperClassName: 'overflow-x-auto mt-4',
+                    tableWrapperClassName: 'overflow-x-auto',
                     tableClassName: 'w-full table-auto text-sm',
                     headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
                     headerColumnClassName: