feat(FE): Add headings and improve layout for financial tables

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

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
+          <section className='grid grid-cols-1 md:grid-cols-2 gap-3'>
-            variant='bordered'
+            <Card
-            className={{
+              className={{
-              wrapper: 'w-full rounded-lg border-none',
+                wrapper: 'w-full rounded-xl border border-base-content/10',
-              body: 'p-0',
+                body: 'p-0',
-              title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
+                wrapperContent:
-              collapsible: 'rounded-lg',
+                  'h-full flex flex-col items-between justify-between',
-            }}
+              }}
-          >
+              variant='bordered'
-            <div className='p-4 grid grid-cols-2 gap-6'>
+            >
-              <div className='flex flex-col gap-1'>
+              <div className='flex flex-row items-center gap-4 px-4 py-4'>
-                <div>Laba Rugi Brutto</div>
+                <Alert
-                <div className='text-lg font-bold'>
+                  variant='soft'
-                  {isResponseSuccess(finance)
+                  color='success'
-                    ? formatCurrency(
+                  className='rounded-lg p-3 bg-success/12 flex items-center justify-center'
-                        finance.data.profit_loss.summary.gross_profit.amount
+                >
-                      )
+                  <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'>
+            </Card>
-                <div>Laba Rugi Netto</div>
+
-                <div className='text-lg font-bold'>
+            <Card
-                  {isResponseSuccess(finance)
+              className={{
-                    ? formatCurrency(
+                wrapper: 'w-full rounded-xl border border-base-content/10',
-                        finance.data.profit_loss.summary.net_profit.amount
+                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'