lti-web-client/src/components/pages/closing/hpp-ekspedisi/HppExpeditionReportTable.tsx

'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 = ({
  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;