From a0af934002aef3d0b6a4c0554abbc826b709871d Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 19 Feb 2026 11:52:57 +0700
Subject: [PATCH] feat(FE): Add headings and improve layout for financial
 tables

---
 .../pages/closing/ClosingKandangList.tsx      |  1 +
 .../closing/table/FinanceClosingTable.tsx     | 99 +++++++++++++------
 2 files changed, 72 insertions(+), 28 deletions(-)

diff --git a/src/components/pages/closing/ClosingKandangList.tsx b/src/components/pages/closing/ClosingKandangList.tsx
index bd2823c4..4ecf607f 100644
--- a/src/components/pages/closing/ClosingKandangList.tsx
+++ b/src/components/pages/closing/ClosingKandangList.tsx
@@ -14,6 +14,7 @@ const ClosingKandangList = ({
       <div className='flex flex-col @sm:flex-row gap-4'>
         <div className='w-full'>
           <div className='overflow-x-auto'>
+            <h1 className='font-bold mb-3'>Kandang</h1>
             <div className='flex flex-wrap gap-2'>
               {projectData?.kandangs?.map((kandang) => (
                 <Button
diff --git a/src/components/pages/closing/table/FinanceClosingTable.tsx b/src/components/pages/closing/table/FinanceClosingTable.tsx
index 82e8b309..760fbd04 100644
--- a/src/components/pages/closing/table/FinanceClosingTable.tsx
+++ b/src/components/pages/closing/table/FinanceClosingTable.tsx
@@ -1,9 +1,11 @@
+import Alert from '@/components/Alert';
 import Card from '@/components/Card';
 import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { formatCurrency, formatTitleCase } from '@/lib/helper';
 import { ClosingApi } from '@/services/api/closing';
 import { HppItem, ProfitLossItem } from '@/types/api/closing';
+import { Icon } from '@iconify/react';
 import { useSearchParams } from 'next/navigation';
 import { useMemo } from 'react';
 import useSWR from 'swr';
@@ -93,38 +95,79 @@ const FinanceClosingTable = ({
         />
       ) : (
         <>
-          <Card
-            variant='bordered'
-            className={{
-              wrapper: 'w-full rounded-lg border-none',
-              body: 'p-0',
-              title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
-              collapsible: 'rounded-lg',
-            }}
-          >
-            <div className='p-4 grid grid-cols-2 gap-6'>
-              <div className='flex flex-col gap-1'>
-                <div>Laba Rugi Brutto</div>
-                <div className='text-lg font-bold'>
-                  {isResponseSuccess(finance)
-                    ? formatCurrency(
-                        finance.data.profit_loss.summary.gross_profit.amount
-                      )
-                    : '-'}
+          <section className='grid grid-cols-1 md:grid-cols-2 gap-3'>
+            <Card
+              className={{
+                wrapper: 'w-full rounded-xl border border-base-content/10',
+                body: 'p-0',
+                wrapperContent:
+                  'h-full flex flex-col items-between justify-between',
+              }}
+              variant='bordered'
+            >
+              <div className='flex flex-row items-center gap-4 px-4 py-4'>
+                <Alert
+                  variant='soft'
+                  color='success'
+                  className='rounded-lg p-3 bg-success/12 flex items-center justify-center'
+                >
+                  <Icon
+                    icon='heroicons:chart-bar-square'
+                    width={24}
+                    height={24}
+                  />
+                </Alert>
+                <div className='space-y-1'>
+                  <h3 className='text-base-content/50 font-semibold text-sm'>
+                    Laba Rugi Brutto
+                  </h3>
+                  <p className='text-xl font-semibold'>
+                    {isResponseSuccess(finance)
+                      ? formatCurrency(
+                          finance.data.profit_loss.summary.gross_profit.amount
+                        )
+                      : '-'}
+                  </p>
                 </div>
               </div>
-              <div className='flex flex-col gap-1'>
-                <div>Laba Rugi Netto</div>
-                <div className='text-lg font-bold'>
-                  {isResponseSuccess(finance)
-                    ? formatCurrency(
-                        finance.data.profit_loss.summary.net_profit.amount
-                      )
-                    : '-'}
+            </Card>
+
+            <Card
+              className={{
+                wrapper: 'w-full rounded-xl border border-base-content/10',
+                body: 'p-0',
+                wrapperContent:
+                  'h-full flex flex-col items-between justify-between',
+              }}
+              variant='bordered'
+            >
+              <div className='flex flex-row items-center gap-4 px-4 py-4'>
+                <Alert
+                  variant='soft'
+                  color='info'
+                  className='rounded-lg p-3 bg-info/12 flex items-center justify-center'
+                >
+                  <Icon
+                    icon='heroicons:currency-dollar'
+                    width={24}
+                    height={24}
+                  />
+                </Alert>
+                <div className='space-y-1'>
+                  <h3 className='text-base-content/50 font-semibold text-sm'>
+                    Laba Rugi Netto
+                  </h3>
+                  <p className='text-xl font-semibold'>
+                    {isResponseSuccess(finance)
+                      ? formatCurrency(
+                          finance.data.profit_loss.summary.net_profit.amount
+                        )
+                      : '-'}
+                  </p>
                 </div>
               </div>
-            </div>
-          </Card>
+            </Card>
+          </section>
           <Card
             title='HPP Purchases'
             variant='bordered'