lti-web-client/src/components/pages/closing/ClosingDetail.tsx

'use client';

import { useMemo, useState } from 'react';

import { Icon } from '@iconify/react';
import Button from '@/components/Button';
import Tabs from '@/components/Tabs';
import ClosingGeneralInformationTable from '@/components/pages/closing/ClosingGeneralInformationTable';
import ClosingSapronakTabContent from '@/components/pages/closing/ClosingSapronakTabContent';
import ClosingProductionDataTabContent from '@/components/pages/closing/ClosingProductionDataTabContent';

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');

  const closingDetailTabs = useMemo(() => {
    const validTabs = [
      {
        id: 'sapronak',
        label: 'Sapronak',
        content: <ClosingSapronakTabContent projectFlockId={id} />,
      },
      {
        id: 'perhitunganSapronak',
        label: 'Perhitungan Sapronak',
        content: <ClosingSapronakCalculationTabContent projectFlockId={id} />,
      },
      {
        id: 'penjualan',
        label: 'Penjualan',
        content: <SalesReportTable initialValues={salesData} />,
      },
      {
        id: 'overhead',
        label: 'Overhead',
        content: <ClosingOverheadTabContent projectFlockId={id} />,
      },
      {
        id: 'hppEkspedisi',
        label: 'HPP Ekspedisi',
        content: <HppExpeditionReportTable initialValues={hppExpeditionData} />,
      },
      {
        id: 'dataProduksi',
        label: 'Data Produksi',
        content: <ClosingProductionDataTabContent projectFlockId={id} />,
      },
      {
        id: 'keuangan',
        label: 'Keuangan',
        content: <ClosingFinanceTabContent projectFlockId={id} />,
      },
    ];

    return validTabs;
  }, [initialValue]);

  return (
    <>
      <section className='w-full max-w-7xl pb-16'>
        <header className='flex flex-col gap-4'>
          <Button
            href='/closing'
            variant='link'
            className='w-fit p-0 text-primary'
          >
            <Icon icon='uil:arrow-left' width={24} height={24} />
            Kembali
          </Button>

          <h1 className='text-2xl font-bold text-center'>Detail Closing</h1>
        </header>

        <ClosingGeneralInformationTable initialValue={initialValue} />

        <Tabs
          activeTabId={activeTab}
          onTabChange={setActiveTab}
          tabs={closingDetailTabs}
          variant='lifted'
          className={{
            wrapper: 'w-full mt-4',
          }}
        />
      </section>
    </>
  );
};

export default ClosingDetail;