Merge branch 'feat/FE/US-334/expedition-hpp-report' into 'development'

[FEAT/FE][US#334] Slicing and Integrate API Expedition HPP Report Table

See merge request mbugroup/lti-web-client!111

src/components/pages/closing/ClosingDetail.tsx

@@ -12,22 +12,26 @@ import ClosingProductionDataTabContent from '@/components/pages/closing/ClosingP
 import {
   ClosingGeneralInformation,
   BaseClosingSales,
+  ClosingHppExpedition,
 } from '@/types/api/closing';
 import ClosingSapronakCalculationTabContent from '@/components/pages/closing/ClosingSapronakCalculationTabContent';
 import ClosingOverheadTabContent from '@/components/pages/closing/ClosingOverheadTabContent';
 import ClosingFinanceTabContent from '@/components/pages/closing/ClosingFinanceTabContent';
 import SalesReportTable from '@/components/pages/closing/sale/SalesReportTable';
+import HppExpeditionReportTable from './hpp-ekspedisi/HppExpeditionReportTable';
 
 interface ClosingDetailProps {
   id: number;
   initialValue?: ClosingGeneralInformation;
   salesData?: BaseClosingSales;
+  hppExpeditionData?: ClosingHppExpedition;
 }
 
 const ClosingDetail: React.FC<ClosingDetailProps> = ({
   id,
   initialValue,
   salesData,
+  hppExpeditionData,
 }) => {
   const [activeTab, setActiveTab] = useState<string>('sapronak');
 
@@ -56,7 +60,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'hppEkspedisi',
         label: 'HPP Ekspedisi',
-        content: 'HPP Ekspedisi',
+        content: <HppExpeditionReportTable initialValues={hppExpeditionData} />,
       },
       {
         id: 'dataProduksi',

src/components/pages/closing/hpp-ekspedisi/HppExpeditionReportTable.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+import Table from '@/components/Table';
+import Card from '@/components/Card';
+import { formatCurrency } from '@/lib/helper';
+import { BaseHppExpedition, BaseExpeditionCost } from '@/types/api/closing';
+
+interface HppExpeditionReportTableProps {
+  type?: 'detail';
+  initialValues?: BaseHppExpedition;
+}
+
+const HppExpeditionReportTable = ({
+  type = 'detail',
+  initialValues,
+}: HppExpeditionReportTableProps) => {
+  const costOfRevenueExpeditionData: BaseExpeditionCost[] = useMemo(() => {
+    return initialValues?.expedition_costs || [];
+  }, [initialValues]);
+
+  const totals = useMemo(() => {
+    const totalHpp = initialValues?.total_hpp_amount || 0;
+
+    return {
+      totalHpp,
+    };
+  }, [initialValues]);
+
+  const costOfRevenueExpeditionColumns: ColumnDef<BaseExpeditionCost>[] =
+    useMemo(
+      () => [
+        {
+          id: 'id',
+          accessorKey: 'id',
+          header: 'No',
+          cell: (props) => {
+            return <div>{props.row.index + 1}</div>;
+          },
+          footer: () => (
+            <div className='font-semibold text-gray-900'>
+              Total HPP Ekspedisi
+            </div>
+          ),
+        },
+        {
+          id: 'expedition_vendor_name',
+          accessorKey: 'expedition_vendor_name',
+          header: 'Nama Ekspedisi',
+          cell: (props) => props.getValue() || '-',
+        },
+        {
+          id: 'hpp_amount',
+          accessorKey: 'hpp_amount',
+          header: 'HPP Ekspedisi',
+          cell: (props) => {
+            const value = props.getValue() as number;
+            return <div className='text-right'>{formatCurrency(value)}</div>;
+          },
+          footer: () => (
+            <div className='text-right font-semibold text-gray-900'>
+              {formatCurrency(totals.totalHpp)}
+            </div>
+          ),
+        },
+      ],
+      [totals]
+    );
+
+  return (
+    <>
+      <section className='w-full'>
+        <div className='p-4'>
+          <h2 className='text-xl font-semibold mb-4'>HPP Ekspedisi</h2>
+          <Card
+            className={{
+              wrapper: 'w-full bg-base-100',
+              body: 'p-0',
+            }}
+          >
+            <Table
+              data={costOfRevenueExpeditionData}
+              columns={costOfRevenueExpeditionColumns}
+              renderFooter={costOfRevenueExpeditionData.length > 0}
+              className={{
+                tableWrapperClassName: 'overflow-x-auto',
+                tableClassName: 'w-full table-auto text-sm',
+                headerRowClassName: 'border-b border-b-gray-200',
+                headerColumnClassName:
+                  'px-4 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end whitespace-nowrap',
+                bodyRowClassName:
+                  'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
+                bodyColumnClassName:
+                  'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+                tableFooterClassName:
+                  'bg-gray-100 font-semibold border border-gray-200',
+                footerRowClassName: 'border-t-2 border-gray-300',
+                footerColumnClassName:
+                  'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+              }}
+            />
+          </Card>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default HppExpeditionReportTable;