import {
  CheckIcon,
  ClockIcon,
  EllipsisVerticalIcon,
  MagnifyingGlassIcon,
} from '@heroicons/react/24/outline';
import { Skeleton } from '@chakra-ui/react';
import { div, toQuery } from 'lodash-contrib';
import _ from 'lodash';
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';
import useInvoices from '../../invoice/hooks/useInvoices';
import Spinner from '@/core/components/elements/Spinner/Spinner';
import Alert from '@/core/components/elements/Alert/Alert';
import Pagination from '@/core/components/elements/Pagination/Pagination';
import Link from '@/core/components/elements/Link/Link';
import currencyFormat from '@/core/utils/currencyFormat';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import {
  downloadInvoice,
  downloadTaxInvoice,
} from '../../invoice/utils/invoices';
import MobileView from '@/core/components/views/MobileView';
import DesktopView from '@/core/components/views/DesktopView';
import Menu from '@/lib/auth/components/Menu';
import odooApi from '@/core/api/odooApi';
import { getAuth } from '@/core/utils/auth';
import FooterBanner from '~/modules/footer-banner';
import Image from '~/components/ui/image';
import useDevice from '@/core/hooks/useDevice';
import { Tooltip } from '@chakra-ui/react';
import { InfoIcon } from 'lucide-react';
const Tempo = () => {
  const auth = getAuth();
  const router = useRouter();
  const { q = '', page = 1, limit = 15, status = '' } = router.query;
  const { isDesktop, isMobile } = useDevice();
  const [pageNew, setPageNew] = useState(page);
  const [limitNew, setLimitNew] = useState(limit);
  const [statusNew, setStatusNew] = useState(status);

  const query = {
    name: q,
    offset: (pageNew - 1) * limitNew,
    limit: limitNew,
    status: statusNew,
  };
  const { invoices } = useInvoices({ query });
  const [isLoading, setIsLoading] = useState(true);
  const [tempo, setTempo] = useState([]);
  const [inputQuery, setInputQuery] = useState(q);
  const [toOthers, setToOthers] = useState(null);

  const pageCount = Math.ceil(invoices?.data?.invoiceTotal / limitNew);
  let pageQuery = _.omit(query, ['limitNew', 'offset']);
  pageQuery = _.pickBy(pageQuery, _.identity);
  pageQuery = toQuery(pageQuery);
  const handleSubmit = (e) => {
    e.preventDefault();
    router.push(`/my/tempo?q=${inputQuery}`);
  };
  useEffect(() => {
    const loadTempo = async () => {
      setIsLoading(true);
      const dataTempo = await odooApi(
        'GET',
        `/api/v1/check/${auth.partnerId}/tempo`
      );
      setTempo(dataTempo);
      setIsLoading(false);
    };
    loadTempo();
  }, []);
  const limitTempo = Math.round(
    parseInt(tempo.amountDue + tempo.remainingLimit)
  );
  const amountDue = Math.round(parseInt(tempo.amountDue + tempo.amountDueSale));

  const startItem = 1 + (pageNew - 1) * limitNew;
  const endItem = Math.min(
    limitNew * pageNew,
    invoices?.data?.invoiceTotal +
      (statusNew === 0 || statusNew === 2 || statusNew === 4
        ? invoices?.data?.saleOrderTotal
        : 0)
  );
  const getDueDate = (invoice) => {
    const [day, month, year] = invoice.split('/');
    const dueDate = new Date(year, month - 1, day); // Konversi ke objek Date
    return dueDate;
  };

  const formatTanggal = (tanggalInput) => {
    const [day, month, year] = tanggalInput.split('/');
    const date = new Date(year, month - 1, day);
    const formattedDate = new Intl.DateTimeFormat('id-ID', {
      day: '2-digit',
      month: 'short',
      year: 'numeric',
    }).format(date);

    return formattedDate;
  };

  const handleClick = () => {
    setStatusNew((prevStatus) => (prevStatus === 4 ? 0 : 4)); // Toggle antara 4 dan 0
  };
  const handleClickInvoice = () => {
    setStatusNew((prevStatus) => (prevStatus === 1 ? 0 : 1)); // Toggle antara 4 dan 0
  };
  return (
    <>
      <DesktopView>
        <div className='container mx-auto flex py-10'>
          <div className='w-3/12 pr-4'>
            <Menu />
          </div>
          <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded flex flex-col gap-y-4'>
            <div className='flex flex-col mb-6 items-start justify-start'>
              <h1 className='text-title-sm font-semibold'>Pembayaran Tempo</h1>
              <div className='flex items-start mb-4'>
                <p className='flex flex-row gap-2 w-full items-center'>
                  Kredit Limit Anda
                  <Skeleton
                    isLoaded={!isLoading}
                    h='fit'
                    w='fit'
                    className='text-3xl font-semibold text-green-600 min-w-56'
                  >
                    {limitTempo ? currencyFormat(limitTempo) : '-'}
                  </Skeleton>
                </p>
                <Tooltip
                  placement='top-start'
                  label='Jumlah kredit limit dapat berubah sesuai dengan ketentuan yang Indoteknik miliki.'
                >
                  <div className='text-gray-600'>
                    <InfoIcon size={15} />
                  </div>
                </Tooltip>
              </div>
              <p className='flex flex-row gap-2 w-full'>
                Status Detail Tempo Pembayaran Anda adalah{' '}
                <Skeleton
                  isLoaded={!isLoading}
                  h='fit'
                  w={32}
                  className={`${
                    tempo.paymentTerm ? 'badge-solid-green' : 'badge-yellow'
                  }  px-1 text-sm flex items-center justify-center font-thin`}
                >
                  {tempo.paymentTerm ? tempo.paymentTerm : 'Review'}
                </Skeleton>
              </p>
            </div>
            <div className='grid grid-flow-col gap-2'>
              <div className='border w-full p-4'>
                <p>Sisa Kredit Limit</p>
                <Skeleton
                  isLoaded={!isLoading}
                  h='fit'
                  w='full'
                  className={`text-3xl font-semibold ${
                    limitTempo - amountDue < 0
                      ? 'text-red-500'
                      : 'text-green-600'
                  } `}
                >
                  {limitTempo && amountDue
                    ? currencyFormat(
                        Math.round(parseInt(limitTempo - amountDue))
                      )
                    : '-'}
                </Skeleton>
              </div>
              <div
                className={`border  w-full p-4 flex gap-4  items-center hover:cursor-pointer hover:shadow-lg ${
                  statusNew == 4 ? 'bg-red-100' : ''
                }`}
                onClick={handleClick}
              >
                <div className=''>
                  <p>Kredit Limit Terpakai</p>
                  <Skeleton
                    isLoaded={!isLoading}
                    h='36px'
                    w='full'
                    className='text-3xl font-semibold text-red-600'
                  >
                    {amountDue ? currencyFormat(amountDue) : '-'}
                  </Skeleton>
                </div>
                <div className='w-fit h-full flex items-center text-red-600 text-lg text-nowrap font-medium '>
                  {tempo.amountDueTotal
                    ? tempo.amountDueTotal +
                      tempo.amountDueSaleTotal +
                      ` Transaksi`
                    : ''}
                </div>
              </div>
              <div
                className={`border  w-full p-4 flex gap-4 items-center hover:cursor-pointer hover:shadow-lg ${
                  statusNew == 1 ? 'bg-red-100' : ''
                }`}
                onClick={handleClickInvoice}
              >
                <div className=''>
                  <p>Jatuh Tempo</p>
                  <Skeleton
                    isLoaded={!isLoading}
                    h='36px'
                    w='full'
                    className='text-3xl font-semibold text-red-600'
                  >
                    {tempo.amountJatuhTempo
                      ? currencyFormat(tempo.amountJatuhTempo)
                      : '-'}
                  </Skeleton>
                </div>
                <div className='w-fit h-full flex items-center text-red-600 text-lg text-nowrap font-medium '>
                  {tempo.amountJatuhTempoTotal
                    ? tempo.amountJatuhTempoTotal + ` Invoice`
                    : ''}
                </div>
              </div>
              {/* <div className='border w-full p-4'>
                <p>Jatuh Tempo</p>
                <Skeleton
                  isLoaded={!isLoading}
                  h='36px'
                  // w={16}
                  className='text-3xl font-semibold text-red-600'
                >
                  {tempo.amountJatuhTempo
                    ? currencyFormat(tempo.amountJatuhTempo)
                    : '-'}
                </Skeleton>
              </div> */}
            </div>

            {auth && auth?.tempoProgres == 'review' && !tempo.paymentTerm ? (
              <div className='flex justify-center'>
                <Image
                  src='/images/ICON-DOKUMEN-VERIFIKASI.png'
                  alt='Registrasi Tempo'
                  width={isMobile ? 300 : 600}
                  height={isMobile ? 300 : 550}
                />
              </div>
            ) : (
              <div className='border p-4 rounded'>
                <div className='flex mb-6 items-center justify-between mt-4'>
                  <form className='flex' onSubmit={handleSubmit}>
                    <button className='bg-gray_r-2 px-3' type='submit'>
                      <MagnifyingGlassIcon className='w-6' />
                    </button>
                    <input
                      type='text'
                      className='form-input bg-gray_r-2 border-none'
                      placeholder='Cari Invoice...'
                      value={inputQuery}
                      onChange={(e) => setInputQuery(e.target.value)}
                    />
                  </form>
                  {!invoices.isLoading && (
                    <div className='flex flex-row gap-4 items-center justify-center'>
                      <p>
                        Menampilkan {startItem}-{endItem} dari{' '}
                        {invoices?.data?.invoiceTotal +
                          (statusNew === 0 || statusNew === 2 || statusNew === 4
                            ? invoices?.data?.saleOrderTotal
                            : 0)}
                      </p>
                      <select
                        id='limitSelect'
                        value={limitNew}
                        onChange={(e) => {
                          setLimitNew(Number(e.target.value));
                          setPageNew(1);
                        }}
                        className='border p-2'
                      >
                        <option value={10}>10</option>
                        <option value={15}>15</option>
                        <option value={20}>20</option>
                      </select>
                      <select
                        id='statusSelect'
                        value={statusNew ?? ''} // Gunakan nullish coalescing untuk default value
                        onChange={(e) => {
                          setStatusNew(Number(e.target.value));
                          if (e.target.value == 0) {
                            if (inputQuery) {
                              router.push('/my/tempo/');
                            }
                          }
                        }}
                        className='border p-2'
                      >
                        <option value='' disabled hidden>
                          Status
                        </option>
                        <option value={0}>All</option>
                        <option value={1}>Jatuh Tempo</option>
                        <option value={2}>Belum Jatuh Tempo</option>
                        <option value={3}>Lunas</option>
                      </select>
                    </div>
                  )}
                </div>

                <table className='table-data'>
                  <thead>
                    <tr>
                      <th>No. Invoice</th>
                      <th>No. Transaksi</th>
                      <th className='!text-left'>Salesperson</th>
                      <th>Tanggal</th>
                      <th>Jatuh Tempo</th>
                      <th>Status</th>
                      <th className='!text-left'>Total</th>
                    </tr>
                  </thead>
                  <tbody>
                    {/* {invoices.isLoading && (
                      <tr>
                        <td colSpan={6}>
                          <div className='flex justify-center my-2'>
                            <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
                          </div>
                        </td>
                      </tr>
                    )} */}
                    {/* {!invoices.isLoading &&
                      (!invoices?.data?.saleOrders ||
                        invoices?.data?.saleOrders?.length == 0) && (
                        <tr>
                          <td colSpan={6}>Tidak ada orders</td>
                        </tr>
                      )} */}
                    {(statusNew == 0 || statusNew == 2 || statusNew == 4) &&
                      invoices.data?.saleOrders?.map((orders) => (
                        <tr key={orders.id}>
                          <td>{orders.salesOrder || '-'}</td>
                          <td>
                            <Link href={`/my/transactions/${orders.id}`}>
                              {orders.name}
                            </Link>
                          </td>
                          <td className='!text-left'>{orders.sales}</td>
                          <td>{orders.dateOrder.split(' ')[0]}</td>
                          <td>-</td>
                          <td>
                            {
                              <div className=' h-fit mx-auto inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20'>
                                Belum Jatuh Tempo
                              </div>
                            }
                          </td>
                          <td className='!text-left'>
                            {currencyFormat(orders.amountTotal)}
                          </td>
                        </tr>
                      ))}
                  </tbody>
                  <tbody>
                    {invoices.isLoading && (
                      <tr>
                        <td colSpan={6}>
                          <div className='flex justify-center my-2'>
                            <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
                          </div>
                        </td>
                      </tr>
                    )}
                    {!invoices.isLoading &&
                      (!invoices?.data?.invoices ||
                        invoices?.data?.invoices?.length == 0) && (
                        <tr>
                          <td colSpan={6}>Tidak ada Invoice</td>
                        </tr>
                      )}
                    {invoices.data?.invoices?.map((invoice) => (
                      <tr key={invoice.id}>
                        <td>
                          <Link href={`/my/invoices/${invoice.id}`}>
                            {invoice.name}
                          </Link>
                        </td>
                        <td>{invoice.salesOrder || '-'}</td>
                        <td className='!text-left'>{invoice.sales}</td>
                        <td>{invoice.invoiceDate}</td>
                        <td>{invoice.invoiceDateDue}</td>
                        <td>
                          {invoice.amountResidual > 0 ? (
                            new Date() > getDueDate(invoice.invoiceDateDue) ? (
                              <div className='badge-solid-red h-fit mx-auto'>
                                Jatuh Tempo
                              </div>
                            ) : (
                              <div className=' h-fit mx-auto inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20'>
                                Belum Jatuh Tempo
                              </div>
                            )
                          ) : (
                            <div className='badge-solid-green h-fit mx-auto'>
                              Lunas
                            </div>
                          )}
                        </td>
                        <td className='!text-left'>
                          {currencyFormat(invoice.amountTotal)}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>

                <Pagination
                  pageCount={pageCount}
                  currentPage={parseInt(pageNew)}
                  // url={`/my/tempo${pageQuery}`}
                  url={`/my/tempo?${toQuery(_.omit(query, ['page']))}`}
                  className='mt-2 mb-2'
                />
              </div>
            )}

            <div className=''>
              <FooterBanner />
            </div>
          </div>
        </div>
      </DesktopView>
      <MobileView>
        <div className=' bg-[#FEF8E2] w-[110%] inset-0 relative transform -translate-x-5 px-8 py-4'>
          <div className='flex flex-col gap-y-4 '>
            <p className='flex flex-row gap-2 w-full text-sm items-center'>
              <span className='opacity-70 text-nowrap'>
                Kredit Limit Anda :{' '}
              </span>
              <Skeleton
                isLoaded={!isLoading}
                h='fit'
                w='fit'
                className='text-xl font-semibold text-green-700 min-w-56'
              >
                {limitTempo ? currencyFormat(limitTempo) : '-'}
              </Skeleton>
            </p>
            <div className='flex flex-col items-center justify-center'>
              <p className='flex flex-row w-full text-sm gap-2 items-center justify-start'>
                <span className='opacity-70'>
                  Status Detail Tempo Pembayaran Anda adalah :
                </span>
                <Skeleton
                  isLoaded={!isLoading}
                  h='fit'
                  w={24}
                  className={`${
                    tempo.paymentTerm ? 'badge-solid-green' : 'badge-yellow'
                  }  px-1 text-xs flex items-center justify-center font-extralight text-nowrap`}
                >
                  {tempo.paymentTerm ? tempo.paymentTerm : 'Review'}
                </Skeleton>
              </p>
            </div>
            <div className='flex items-start justify-around text-sm gap-3'>
              <div className='w-[30%] flex  flex-col gap-2'>
                <p className='opacity-70 text-nowrap'>Sisa Kredit Limit</p>
                <Skeleton
                  isLoaded={!isLoading}
                  // h='36px'
                  // w={16}
                  className={`font-semibold text-sm text-nowrap ${
                    limitTempo - amountDue < 0
                      ? 'text-red-500'
                      : 'text-green-700'
                  }`}
                >
                  {limitTempo && amountDue
                    ? currencyFormat(
                        Math.round(parseInt(limitTempo - amountDue))
                      )
                    : '-'}
                </Skeleton>
              </div>{' '}
              <div className='w-[40%]  flex flex-col gap-2'>
                <p className='opacity-70 text-nowrap'>Kredit Limit Terpakai</p>
                <Skeleton
                  isLoaded={!isLoading}
                  // h='36px'
                  // w={16}
                  className='font-semibold text-sm text-nowrap text-green-700'
                >
                  {amountDue ? currencyFormat(amountDue) : '-'}
                </Skeleton>
              </div>
              <div className=' w-[30%] flex flex-col gap-2'>
                <p className='opacity-70 text-nowrap'>Jatuh Tempo</p>
                <Skeleton
                  isLoaded={!isLoading}
                  // h='36px'
                  // w={16}
                  className=' font-semibold text-sm text-nowrap text-red-600'
                >
                  {tempo.amountJatuhTempo
                    ? currencyFormat(tempo.amountJatuhTempo)
                    : '-'}
                </Skeleton>
              </div>
            </div>
          </div>
        </div>
        <div className='p-4 flex flex-col gap-y-4 w-full'>
          {auth && (!auth?.tempoProgres == 'review' || tempo.paymentTerm) && (
            <form
              className='w-full flex gap-x-2 flex-row justify-between'
              onSubmit={handleSubmit}
            >
              <div className='flex w-3/5'>
                <input
                  type='text'
                  className='form-input'
                  placeholder='Cari Invoice...'
                  value={inputQuery}
                  onChange={(e) => setInputQuery(e.target.value)}
                />
              </div>
              <button className='btn-light bg-transparent px-3' type='submit'>
                <MagnifyingGlassIcon className='w-6' />
              </button>
              <div className='flex w-1/5 '>
                <div className='flex flex-row gap-4 items-center justify-center'>
                  <select
                    id='statusSelect'
                    value={statusNew}
                    onChange={(e) => {
                      setStatusNew(Number(e.target.value));
                      if (e.target.value == 0) {
                        setInputQuery(' ');
                      }
                    }}
                    className='border p-2 w-full h-full rounded-md'
                  >
                    <option value={0}>All</option>
                    <option value={1}>Jatuh Tempo</option>
                    <option value={2}>Belum Jatuh Tempo</option>
                    <option value={3}>Lunas</option>
                  </select>
                </div>
              </div>
            </form>
          )}

          {invoices.isLoading && (
            <div className='flex justify-center my-4'>
              <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
            </div>
          )}

          {auth && auth?.tempoProgres == 'review' && !tempo.paymentTerm ? (
            // <Alert type='info' className='text-center'>
            //   Tidak ada invoice
            // </Alert>
            <div className='flex items-center justify-center'>
              <Image
                src='/images/ICON-DOKUMEN-VERIFIKASI.png'
                alt='Registrasi Tempo'
                width={isMobile ? 300 : 600}
                height={isMobile ? 300 : 550}
              />
            </div>
          ) : (
            <div>
              {(statusNew == 0 || statusNew == 2 || statusNew == 4) &&
                invoices.data?.saleOrders?.map((invoice, index) => (
                  <div
                    className='p-4 shadow border border-gray_r-3 rounded-md'
                    key={index}
                  >
                    <div className='grid grid-cols-2'>
                      <Link href={`/my/quotations/${invoice.id}`}>
                        <span className='text-caption-2 text-gray_r-11'>
                          No. Transaksi
                        </span>
                        <h2 className='font-semibold text-black mt-1'>
                          {invoice.name}
                        </h2>
                      </Link>
                      <div className='flex gap-x-1 justify-end  items-end '>
                        <div className='badge-solid-red h-fit ml-auto'>
                          Belum Jatuh Tempo
                        </div>
                        {/* <EllipsisVerticalIcon
                      className='w-5 h-5'
                      onClick={() => setToOthers(invoice)}
                    /> */}
                      </div>
                    </div>
                    <Link href={`/my/quotations/${invoice.id}`}>
                      <div className='grid grid-cols-2 text-caption-2 text-gray_r-11 mt-2 font-normal'>
                        <p className='opacity-70'>
                          {invoice.dateOrder.split(' ')[0]}
                        </p>
                        <p className='text-right text-xs text-red-500'>
                          Jatuh Tempo: -
                        </p>
                      </div>
                      <hr className='my-3' />
                      <div className='grid grid-cols-2'>
                        <div>
                          <span className='text-caption-2 text-gray_r-11'>
                            No. Invoice
                          </span>
                          <p className='mt-1 font-semibold text-gray_r-12'>-</p>
                        </div>
                        <div className='text-right'>
                          <span className='opacity-65 text-caption-2 text-gray_r-11'>
                            Total Belanja
                          </span>
                          <p className='mt-1 font-semibold text-red-500 '>
                            {currencyFormat(invoice.amountTotal)}
                          </p>
                        </div>
                      </div>
                    </Link>
                    {/* {invoice.efaktur ? (
                  <div className='badge-green h-fit mt-3 ml-auto flex items-center gap-x-0.5'>
                    <CheckIcon className='w-4 stroke-2' />
                    Faktur Pajak
                  </div>
                ) : (
                  <div className='badge-red h-fit mt-3 ml-auto flex items-center gap-x-0.5'>
                    <ClockIcon className='w-4 stroke-2' />
                    Faktur Pajak
                  </div>
                )} */}
                  </div>
                ))}
              {invoices.data?.invoices?.map((invoice, index) => (
                <div
                  className='p-4 shadow border border-gray_r-3 rounded-md'
                  key={index}
                >
                  <div className='grid grid-cols-2'>
                    <Link href={`/my/quotations/${invoice.salesOrderId}`}>
                      <span className='text-caption-2 text-gray_r-11'>
                        No. Transaksi
                      </span>
                      <h2 className='font-semibold text-black mt-1'>
                        {invoice.salesOrder}
                      </h2>
                    </Link>
                    <div className='flex gap-x-1 justify-end  items-end '>
                      {invoice.amountResidual > 0 ? (
                        new Date() > getDueDate(invoice.invoiceDateDue) ? (
                          <div className='inline-flex items-end rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20'>
                            Jatuh Tempo
                          </div>
                        ) : (
                          <div className='badge-solid-red h-fit ml-auto'>
                            Belum Jatuh Tempo
                          </div>
                        )
                      ) : (
                        <div className='badge-solid-green h-fit ml-auto'>
                          Lunas
                        </div>
                      )}
                      {/* <EllipsisVerticalIcon
                      className='w-5 h-5'
                      onClick={() => setToOthers(invoice)}
                    /> */}
                    </div>
                  </div>
                  <Link href={`/my/invoices/${invoice.id}`}>
                    <div className='grid grid-cols-2 text-caption-2 text-gray_r-11 mt-2 font-normal'>
                      <p className='opacity-70'>
                        {formatTanggal(invoice.invoiceDate)}
                      </p>
                      <p className='text-right text-xs text-red-500'>
                        Jatuh Tempo: {formatTanggal(invoice.invoiceDateDue)}
                      </p>
                    </div>
                    <hr className='my-3' />
                    <div className='grid grid-cols-2'>
                      <div>
                        <span className='text-caption-2 text-gray_r-11'>
                          No. Invoice
                        </span>
                        <p className='mt-1 font-semibold text-gray_r-12'>
                          {invoice.name || '-'}
                        </p>
                      </div>
                      <div className='text-right'>
                        <span className='opacity-65 text-caption-2 text-gray_r-11'>
                          Total Belanja
                        </span>
                        <p className='mt-1 font-semibold text-red-500 '>
                          {currencyFormat(invoice.amountTotal)}
                        </p>
                      </div>
                    </div>
                  </Link>
                  {/* {invoice.efaktur ? (
                  <div className='badge-green h-fit mt-3 ml-auto flex items-center gap-x-0.5'>
                    <CheckIcon className='w-4 stroke-2' />
                    Faktur Pajak
                  </div>
                ) : (
                  <div className='badge-red h-fit mt-3 ml-auto flex items-center gap-x-0.5'>
                    <ClockIcon className='w-4 stroke-2' />
                    Faktur Pajak
                  </div>
                )} */}
                </div>
              ))}
            </div>
          )}

          <Pagination
            pageCount={pageCount}
            currentPage={parseInt(pageNew)}
            url={`/my/tempo?${toQuery(_.omit(query, ['page']))}`}
            className='mt-2 mb-2'
          />

          <BottomPopup
            title='Lainnya'
            active={toOthers}
            close={() => setToOthers(null)}
          >
            <div className='flex flex-col gap-y-4 mt-2'>
              <button
                className='text-left disabled:opacity-60'
                onClick={() => {
                  downloadInvoice(toOthers);
                  setToOthers(null);
                }}
              >
                Download Invoice
              </button>
              <button
                className='text-left disabled:opacity-60'
                disabled={!toOthers?.efaktur}
                onClick={() => {
                  downloadTaxInvoice(toOthers);
                  setToOthers(null);
                }}
              >
                Download Faktur Pajak
              </button>
            </div>
          </BottomPopup>
        </div>
      </MobileView>
    </>
  );
};

export default Tempo;