lti-web-client/src/components/pages/closing/table/ClosingGeneralInformationTable.tsx

import { formatNumber } from '@/lib/helper';
import { ClosingGeneralInformation } from '@/types/api/closing';
import { ProjectFlock } from '@/types/api/production/project-flock';
import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
import { useMemo } from 'react';

interface ClosingGeneralInformationProps {
  initialValue?: ClosingGeneralInformation;
  projectData?: ProjectFlock;
  kandangData?: ProjectFlockKandang;
}

const ClosingGeneralInformationTable = ({
  initialValue,
  projectData,
  kandangData,
}: ClosingGeneralInformationProps) => {
  const chickinPopulation = useMemo(() => {
    if (kandangData) {
      return kandangData?.chickins?.reduce(
        (acc, chickin) => acc + chickin.usage_qty,
        0
      );
    }
    return 0;
  }, [kandangData]);

  return (
    <div className='w-full my-4 @container'>
      <div className='flex flex-col @sm:flex-row gap-4'>
        <div className='w-full'>
          <div className='overflow-x-auto'>
            <table className='table table-zebra table-sm'>
              <tbody>
                <tr>
                  <td>Lokasi</td>
                  <td>:</td>
                  <td>
                    {initialValue?.location_name ?? projectData?.location?.name}
                  </td>
                </tr>
                <tr>
                  <td>Periode</td>
                  <td>:</td>
                  <td>{initialValue?.period}</td>
                </tr>
                <tr>
                  <td>Project Flock</td>
                  <td>:</td>
                  <td>
                    {initialValue?.project_flock?.name ??
                      projectData?.flock_name}
                  </td>
                </tr>
                <tr>
                  <td>Populasi</td>
                  <td>:</td>
                  <td>
                    {!kandangData
                      ? formatNumber(initialValue?.population || 0)
                      : formatNumber(chickinPopulation || 0)}{' '}
                    Ekor
                  </td>
                </tr>
                <tr>
                  <td>Jenis Project</td>
                  <td>:</td>
                  <td>{initialValue?.project_type}</td>
                </tr>
                <tr className='table-row @sm:hidden'>
                  <td>Kandang {!kandangData && 'Aktif'}</td>
                  <td>:</td>
                  <td>
                    {!kandangData
                      ? `${initialValue?.active_house_count} Kandang`
                      : kandangData?.kandang?.name}
                  </td>
                </tr>
                <tr className='table-row @sm:hidden'>
                  <td>Status Pembayaran Penjualan</td>
                  <td>:</td>
                  <td>{initialValue?.sales_payment_status}</td>
                </tr>
                <tr className='table-row @sm:hidden'>
                  <td>Status Project</td>
                  <td>:</td>
                  <td>{initialValue?.project_status}</td>
                </tr>
                <tr className='table-row @sm:hidden'>
                  <td>Status Closing</td>
                  <td>:</td>
                  <td>{initialValue?.closing_status}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div className='w-full hidden @sm:block'>
          <div className='overflow-x-auto'>
            <table className='table table-zebra table-sm'>
              <tbody>
                <tr>
                  <td>Kandang {!kandangData && 'Aktif'}</td>
                  <td>:</td>
                  <td>
                    {!kandangData
                      ? `${initialValue?.active_house_count} Kandang`
                      : kandangData?.kandang?.name}
                  </td>
                </tr>
                <tr>
                  <td>Status Pembayaran Penjualan</td>
                  <td>:</td>
                  <td>{initialValue?.sales_payment_status}</td>
                </tr>
                <tr>
                  <td>Status Project</td>
                  <td>:</td>
                  <td>{initialValue?.project_status}</td>
                </tr>
                <tr>
                  <td>Status Closing</td>
                  <td>:</td>
                  <td>{initialValue?.closing_status}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ClosingGeneralInformationTable;