lti-web-client/src/components/pages/closing/ClosingDetailTabs.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/table/ClosingGeneralInformationTable';
import SapronakClosingTab from '@/components/pages/closing/tab/SapronakClosingTab';
import ProductionDataClosingTab from '@/components/pages/closing/tab/ProductionDataClosingTab';

import { ClosingGeneralInformation } from '@/types/api/closing';
import SapronakCalculationClosingTab from '@/components/pages/closing/tab/SapronakCalculationClosingTab';
import OverheadClosingTab from '@/components/pages/closing/tab/OverheadClosingTab';
import FinanceClosingTab from '@/components/pages/closing/tab/FinanceClosingTab';
import SalesClosingTab from '@/components/pages/closing/tab/SalesClosingTab';
import HppExpeditionClosingTab from '@/components/pages/closing/tab/HppExpeditionClosingTab';
import ClosingKandangList from '@/components/pages/closing/ClosingKandangList';
import { ProjectFlock } from '@/types/api/production/project-flock';
import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
interface ClosingDetailProps {
  id: number;
  initialValue?: ClosingGeneralInformation;
  projectData?: ProjectFlock;
  kandangData?: ProjectFlockKandang;
}

const ClosingDetail: React.FC<ClosingDetailProps> = ({
  id,
  initialValue,
  projectData,
  kandangData,
}) => {
  const [activeTabId, setActiveTabId] = useState<string>('sapronak');
  const tabActions = useTabActionsStore((state) => state.tabActions);

  const closingDetailTabs = useMemo(() => {
    const validTabs = [
      {
        id: 'sapronak',
        label: 'Sapronak',
        content: <SapronakClosingTab projectFlockId={id} />,
      },
      {
        id: 'perhitunganSapronak',
        label: 'Perhitungan Sapronak',
        content: (
          <SapronakCalculationClosingTab
            closingGeneralInformation={initialValue}
            projectFlockId={id}
          />
        ),
      },
      {
        id: 'penjualan',
        label: 'Penjualan',
        content: <SalesClosingTab projectFlockId={id} />,
      },
      {
        id: 'overhead',
        label: 'Overhead',
        content: (
          <OverheadClosingTab
            projectFlockId={id}
            generalInformation={initialValue}
            kandangData={kandangData}
          />
        ),
      },
      {
        id: 'hppEkspedisi',
        label: 'HPP Ekspedisi',
        content: <HppExpeditionClosingTab projectFlockId={id} />,
      },
      {
        id: 'dataProduksi',
        label: 'Data Produksi',
        content: <ProductionDataClosingTab projectFlockId={id} />,
      },
      {
        id: 'keuangan',
        label: 'Keuangan',
        content: <FinanceClosingTab projectFlockId={id} />,
      },
    ];

    return validTabs;
  }, [initialValue, kandangData, id]);

  return (
    <>
      <section className='w-full'>
        <header className='flex flex-col gap-4'>
          <Button
            href={
              !kandangData ? '/closing' : `/closing/detail/?closingId=${id}`
            }
            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}
          projectData={projectData}
          kandangData={kandangData}
        />

        <ClosingKandangList
          initialValue={initialValue}
          projectData={projectData}
          selectedKandangId={kandangData?.id}
        />

        <Tabs
          activeTabId={activeTabId}
          onTabChange={setActiveTabId}
          tabs={closingDetailTabs}
          variant='boxed'
          className={{
            tabHeaderWrapper:
              'relative justify-between items-center py-3 before:absolute before:top-0 before:left-0 before:right-0 before:-mx-4 before:border-t before:border-base-content/10 after:absolute after:bottom-0 after:left-0 after:right-0 after:-mx-4 after:border-b after:border-base-content/10',
            tab: 'w-fit',
            content: 'p-0 m-0',
          }}
          sideContent={tabActions[activeTabId] || null}
        />
      </section>
    </>
  );
};

export default ClosingDetail;