refactor(FE): Refactor Card and SapronakClosingSkeleton components for

readability

src/components/pages/closing/table/OverheadClosingTable.tsx

@@ -258,58 +258,58 @@ const OverheadClosingTable = ({
           />
         )}
         {kandangId && !isLoadingOverhead && isResponseSuccess(overhead) && (
-            <Card
+          <Card
-              className={{
+            className={{
-                wrapper: 'w-full',
+              wrapper: 'w-full',
-                body: 'p-4 shadow-button-soft border border-base-content/10 rounded-lg',
+              body: 'p-4 shadow-button-soft border border-base-content/10 rounded-lg',
-              }}
+            }}
-            >
+          >
-              <div className='flex flex-row gap-3 w-full justify-center items-stretch'>
+            <div className='flex flex-row gap-3 w-full justify-center items-stretch'>
-                <div className='flex flex-row items-center justify-between'>
+              <div className='flex flex-row items-center justify-between'>
-                  <h2 className='text-base font-bold'>Pembelian Kandang </h2>
+                <h2 className='text-base font-bold'>Pembelian Kandang </h2>
+              </div>
+              <div className='flex flex-col items-center justify-center'>
+                <Icon icon='heroicons:equals' className='inline' />
+              </div>
+              <div className='flex flex-col flex-1 gap-1.5'>
+                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
+                  Populasi Akhir KANDANG{' '}
+                  <Icon icon='heroicons:x-mark' className='inline' /> Pemakaian
+                  Di FARM
                 </div>
-                <div className='flex flex-col items-center justify-center'>
+                <hr className='w-full h-fit m-0 p-0 text-base-content/65' />
-                  <Icon icon='heroicons:equals' className='inline' />
+                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
-                </div>
+                  Populasi Akhir Proyek
-                <div className='flex flex-col flex-1 gap-1.5'>
-                  <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
-                    Populasi Akhir KANDANG{' '}
-                    <Icon icon='heroicons:x-mark' className='inline' />{' '}
-                    Pemakaian Di FARM
-                  </div>
-                  <hr className='w-full h-fit m-0 p-0 text-base-content/65' />
-                  <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
-                    Populasi Akhir Proyek
-                  </div>
-                </div>
-                <div className='flex flex-col items-center justify-center'>
-                  <Icon icon='heroicons:equals' className='inline' />
-                </div>
-                <div className='flex flex-col flex-1 gap-1.5'>
-                  <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
-                    {formatNumber(chickinPopulation ?? 0)}
-                    <Icon icon='heroicons:x-mark' className='inline' />
-                    {formatCurrency(
-                      isResponseSuccess(overhead)
-                        ? overhead.data?.total.actual_total_amount
-                        : 0
-                    )}
-                  </div>
-                  <hr className='w-full h-fit m-0 p-0 text-base-content/65' />
-                  <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
-                    {formatNumber(generalInformation?.population ?? 0)}
-                  </div>
-                </div>
-                <div className='flex flex-col items-center justify-center'>
-                  <Icon icon='heroicons:equals' className='inline' />
-                </div>
-                <div className='flex flex-row items-center justify-between'>
-                  <h2 className='text-base font-bold'>
-                    {formatNumber(kandangTotal || 0)}
-                  </h2>
                 </div>
               </div>
-            </Card>
+              <div className='flex flex-col items-center justify-center'>
+                <Icon icon='heroicons:equals' className='inline' />
+              </div>
+              <div className='flex flex-col flex-1 gap-1.5'>
+                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
+                  {formatNumber(chickinPopulation ?? 0)}
+                  <Icon icon='heroicons:x-mark' className='inline' />
+                  {formatCurrency(
+                    isResponseSuccess(overhead)
+                      ? overhead.data?.total.actual_total_amount
+                      : 0
+                  )}
+                </div>
+                <hr className='w-full h-fit m-0 p-0 text-base-content/65' />
+                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
+                  {formatNumber(generalInformation?.population ?? 0)}
+                </div>
+              </div>
+              <div className='flex flex-col items-center justify-center'>
+                <Icon icon='heroicons:equals' className='inline' />
+              </div>
+              <div className='flex flex-row items-center justify-between'>
+                <h2 className='text-base font-bold'>
+                  {formatNumber(kandangTotal || 0)}
+                </h2>
+              </div>
+            </div>
+          </Card>
         )}
       </Card>
     </>

src/components/pages/closing/table/sapronak/IncomingSapronaksSummaryTable.tsx

@@ -133,7 +133,10 @@ const ClosingIncomingSapronaksSummaryTable = ({
       >
         <div className='w-full p-0'>
           {isLoadingIncomingSapronakSummaries ? (
-            <SapronakClosingSkeleton type='incoming' columns={incomingSapronaksColumns} />
+            <SapronakClosingSkeleton
+              type='incoming'
+              columns={incomingSapronaksColumns}
+            />
           ) : isResponseSuccess(incomingSapronakSummaries) &&
             incomingSapronakSummaries.data.length === 0 ? (
             <SapronakClosingSkeleton

src/components/pages/closing/table/sapronak/IncomingSapronaksTable.tsx

@@ -169,7 +169,10 @@ const ClosingIncomingSapronaksTable = ({
           </div>
 
           {isLoadingIncomingSapronaks ? (
-            <SapronakClosingSkeleton type='incoming' columns={incomingSapronaksColumns} />
+            <SapronakClosingSkeleton
+              type='incoming'
+              columns={incomingSapronaksColumns}
+            />
           ) : isResponseSuccess(incomingSapronaks) &&
             incomingSapronaks.data.length === 0 ? (
             <SapronakClosingSkeleton

src/components/pages/closing/table/sapronak/OutgoingSapronaksSummaryTable.tsx

@@ -133,7 +133,10 @@ const ClosingOutgoingSapronaksSummaryTable = ({
       >
         <div className='w-full p-0'>
           {isLoadingOutgoingSapronakSummaries ? (
-            <SapronakClosingSkeleton type='outgoing' columns={outgoingSapronaksColumns} />
+            <SapronakClosingSkeleton
+              type='outgoing'
+              columns={outgoingSapronaksColumns}
+            />
           ) : isResponseSuccess(outgoingSapronakSummaries) &&
             outgoingSapronakSummaries.data.length === 0 ? (
             <SapronakClosingSkeleton

src/components/pages/closing/table/sapronak/OutgoingSapronaksTable.tsx

@@ -169,7 +169,10 @@ const ClosingOutgoingSapronaksTable = ({
           </div>
 
           {isLoadingOutgoingSapronaks ? (
-            <SapronakClosingSkeleton type='outgoing' columns={outgoingSapronaksColumns} />
+            <SapronakClosingSkeleton
+              type='outgoing'
+              columns={outgoingSapronaksColumns}
+            />
           ) : isResponseSuccess(outgoingSapronaks) &&
             outgoingSapronaks.data.length === 0 ? (
             <SapronakClosingSkeleton