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

import { ClosingGeneralInformation } from '@/types/api/closing';

interface ClosingGeneralInformationProps {
  initialValue?: ClosingGeneralInformation;
}

const ClosingGeneralInformationTable = ({
  initialValue,
}: ClosingGeneralInformationProps) => {
  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}</td>
                </tr>
                <tr>
                  <td>Periode</td>
                  <td>:</td>
                  <td>{initialValue?.period}</td>
                </tr>
                <tr>
                  <td>Kategori</td>
                  <td>:</td>
                  <td>{initialValue?.project_category}</td>
                </tr>
                <tr>
                  <td>Populasi</td>
                  <td>:</td>
                  <td>{initialValue?.population} Ekor</td>
                </tr>
                <tr>
                  <td>Jenis Project</td>
                  <td>:</td>
                  <td>{initialValue?.project_type}</td>
                </tr>
                <tr className='table-row @sm:hidden'>
                  <td>Kandang Aktif</td>
                  <td>:</td>
                  <td>{initialValue?.active_house_count} Kandang</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 Aktif</td>
                  <td>:</td>
                  <td>{initialValue?.active_house_count} Kandang</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;