summaryrefslogtreecommitdiff
path: root/src/lib/invoice/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/invoice/components')
-rw-r--r--src/lib/invoice/components/Invoice.jsx292
-rw-r--r--src/lib/invoice/components/Invoices.jsx313
2 files changed, 426 insertions, 179 deletions
diff --git a/src/lib/invoice/components/Invoice.jsx b/src/lib/invoice/components/Invoice.jsx
index e34ad8c2..355f36e5 100644
--- a/src/lib/invoice/components/Invoice.jsx
+++ b/src/lib/invoice/components/Invoice.jsx
@@ -4,10 +4,34 @@ import { downloadInvoice, downloadTaxInvoice } from '../utils/invoices'
import Divider from '@/core/components/elements/Divider/Divider'
import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
import currencyFormat from '@/core/utils/currencyFormat'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
+import Menu from '@/lib/auth/components/Menu'
+import Link from '@/core/components/elements/Link/Link'
+import Image from '@/core/components/elements/Image/Image'
+import { createSlug } from '@/core/utils/slug'
+import { useEffect, useState } from 'react'
const Invoice = ({ id }) => {
const { invoice } = useInvoice({ id })
+ const [totalAmount, setTotalAmount] = useState(0)
+ const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
+
+ useEffect(() => {
+ if (invoice?.data?.products) {
+ let calculateTotalAmount = 0
+ let calculateTotalDiscountAmount = 0
+ invoice.data.products.forEach((product) => {
+ calculateTotalAmount += product.price.price * product.quantity
+ calculateTotalDiscountAmount +=
+ (product.price.price - product.price.priceDiscount) * product.quantity
+ })
+ setTotalAmount(calculateTotalAmount)
+ setTotalDiscountAmount(calculateTotalDiscountAmount)
+ }
+ }, [invoice])
+
if (invoice.isLoading) {
return (
<div className='flex justify-center my-6'>
@@ -27,74 +51,226 @@ const Invoice = ({ id }) => {
return (
invoice.data?.name && (
<>
- <div className='flex flex-col gap-y-4 p-4'>
- <DescriptionRow label='No Invoice'>{invoice.data?.name}</DescriptionRow>
- <DescriptionRow label='Status Transaksi'>
- {invoice.data?.amountResidual > 0 ? (
- <span className='badge-solid-red'>Belum Lunas</span>
- ) : (
- <span className='badge-solid-green'>Lunas</span>
- )}
- </DescriptionRow>
- <DescriptionRow label='Purchase Order'>
- {invoice.data?.purchaseOrderName || '-'}
- </DescriptionRow>
- <DescriptionRow label='Ketentuan Pembayaran'>{invoice.data?.paymentTerm}</DescriptionRow>
- {invoice.data?.amountResidual > 0 && invoice.invoiceDate != invoice.invoiceDateDue && (
- <DescriptionRow label='Tanggal Jatuh Tempo'>
- {invoice.data?.invoiceDateDue}
+ <MobileView>
+ <div className='flex flex-col gap-y-4 p-4'>
+ <DescriptionRow label='No Invoice'>{invoice.data?.name}</DescriptionRow>
+ <DescriptionRow label='Status Transaksi'>
+ {invoice.data?.amountResidual > 0 ? (
+ <span className='badge-solid-red'>Belum Lunas</span>
+ ) : (
+ <span className='badge-solid-green'>Lunas</span>
+ )}
+ </DescriptionRow>
+ <DescriptionRow label='Purchase Order'>
+ {invoice.data?.purchaseOrderName || '-'}
+ </DescriptionRow>
+ <DescriptionRow label='Ketentuan Pembayaran'>
+ {invoice.data?.paymentTerm}
</DescriptionRow>
- )}
- <DescriptionRow label='Nama Sales'>{invoice.data?.sales}</DescriptionRow>
- <DescriptionRow label='Tanggal Invoice'>{invoice.data?.invoiceDate}</DescriptionRow>
- <div className='flex items-center'>
- <p className='text-gray_r-11 leading-none'>Invoice</p>
- <button
- type='button'
- className='btn-light py-1.5 px-3 ml-auto'
- onClick={() => downloadInvoice(invoice.data)}
- >
- Download
- </button>
+ {invoice.data?.amountResidual > 0 && invoice.invoiceDate != invoice.invoiceDateDue && (
+ <DescriptionRow label='Tanggal Jatuh Tempo'>
+ {invoice.data?.invoiceDateDue}
+ </DescriptionRow>
+ )}
+ <DescriptionRow label='Nama Sales'>{invoice.data?.sales}</DescriptionRow>
+ <DescriptionRow label='Tanggal Invoice'>{invoice.data?.invoiceDate}</DescriptionRow>
+ <div className='flex items-center'>
+ <p className='text-gray_r-11 leading-none'>Invoice</p>
+ <button
+ type='button'
+ className='btn-light py-1.5 px-3 ml-auto'
+ onClick={() => downloadInvoice(invoice.data)}
+ >
+ Download
+ </button>
+ </div>
+ <div className='flex items-center'>
+ <p className='text-gray_r-11 leading-none'>Faktur Pajak</p>
+ <button
+ type='button'
+ className='btn-light py-1.5 px-3 ml-auto'
+ onClick={() => downloadTaxInvoice(invoice.data)}
+ disabled={!invoice.data?.efaktur}
+ >
+ Download
+ </button>
+ </div>
</div>
- <div className='flex items-center'>
- <p className='text-gray_r-11 leading-none'>Faktur Pajak</p>
- <button
- type='button'
- className='btn-light py-1.5 px-3 ml-auto'
- onClick={() => downloadTaxInvoice(invoice.data)}
- disabled={!invoice.data?.efaktur}
- >
- Download
- </button>
+
+ <Divider />
+
+ <div className='p-4 font-medium'>Detail Penagihan</div>
+
+ <div className='flex flex-col gap-y-4 p-4 border-t border-gray_r-6'>
+ <DescriptionRow label='Nama'>{address?.name}</DescriptionRow>
+ <DescriptionRow label='Email'>{address?.email || '-'}</DescriptionRow>
+ <DescriptionRow label='No Telepon'>{address?.mobile || '-'}</DescriptionRow>
+ <DescriptionRow label='Alamat'>{fullAddress}</DescriptionRow>
</div>
- </div>
- <Divider />
+ <Divider />
+
+ <div className='font-medium p-4'>Detail Produk</div>
+
+ <div className='p-4 pt-0 flex flex-col gap-y-3'>
+ <VariantGroupCard variants={invoice.data?.products} buyMore />
+ <div className='flex justify-between mt-3 font-medium'>
+ <p>Total Belanja</p>
+ <p>{currencyFormat(invoice.data?.amountTotal)}</p>
+ </div>
+ </div>
+ </MobileView>
+
+ <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'>
+ <h1 className='text-title-sm font-semibold mb-6'>Invoice & Faktur Pajak</h1>
+
+ <div className='flex items-center gap-x-2 mb-3'>
+ <span className='text-h-sm font-medium'>{invoice?.data?.name}</span>
+ {invoice?.data?.amountResidual > 0 ? (
+ <div className='badge-solid-red h-fit'>Belum Lunas</div>
+ ) : (
+ <div className='badge-solid-green h-fit'>Lunas</div>
+ )}
+ </div>
+
+ <button
+ type='button'
+ className='btn-solid-red px-3 py-2'
+ onClick={() => downloadInvoice(invoice.data)}
+ >
+ Download
+ </button>
+
+ <div className='grid grid-cols-2 gap-x-6 mt-6'>
+ <div className='h-fit grid grid-cols-2 gap-y-4'>
+ <div>Tanggal Invoice</div>
+ <div>: {invoice?.data?.invoiceDate}</div>
+
+ <div>Purchase Order</div>
+ <div>
+ :{' '}
+ <button
+ type='button'
+ className='inline-block text-red_r-11'
+ onClick={() => downloadInvoice(invoice.data)}
+ >
+ Download
+ </button>
+ </div>
+
+ <div>Ketentuan Pembayaran</div>
+ <div>: {invoice?.data?.paymentTerm}</div>
+ </div>
+ <div className='h-fit grid grid-cols-2 gap-y-4'>
+ <div>Nama Sales</div>
+ <div>: {invoice?.data?.sales}</div>
+
+ <div>Faktur Pajak</div>
+ <div>
+ :{' '}
+ {invoice.data?.efaktur ? (
+ <button
+ type='button'
+ className='inline-block text-red_r-11'
+ onClick={() => downloadTaxInvoice(invoice?.data)}
+ >
+ Download
+ </button>
+ ) : (
+ '-'
+ )}
+ </div>
+ </div>
+ </div>
- <div className='p-4 font-medium'>Detail Penagihan</div>
+ <div className='text-h-sm font-semibold mt-6 mb-4'>Rincian Pembelian</div>
+ <table className='table-data'>
+ <thead>
+ <tr>
+ <th>Nama Produk</th>
+ <th>Jumlah</th>
+ <th>Harga</th>
+ <th>Diskon</th>
+ <th>Subtotal</th>
+ </tr>
+ </thead>
+ <tbody>
+ {invoice?.data?.products?.map((product) => (
+ <tr key={product.id}>
+ <td className='flex'>
+ <Link
+ href={createSlug(
+ '/shop/product/',
+ product?.parent.name,
+ product?.parent.id
+ )}
+ className='w-[30%] flex-shrink-0'
+ >
+ <Image
+ src={product?.parent?.image}
+ alt={product?.name}
+ className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
+ />
+ </Link>
+ <div className='px-2 text-left'>
+ <Link
+ href={createSlug(
+ '/shop/product/',
+ product?.parent.name,
+ product?.parent.id
+ )}
+ className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+ >
+ {product?.parent?.name}
+ </Link>
+ <div className='text-gray_r-11 mt-2'>
+ {product?.code}{' '}
+ {product?.attributes.length > 0
+ ? `| ${product?.attributes.join(', ')}`
+ : ''}
+ </div>
+ </div>
+ </td>
+ <td>{product.quantity}</td>
+ <td>{currencyFormat(product.price.price)}</td>
+ <td>
+ {product.price.discountPercentage > 0
+ ? `${product.price.discountPercentage}%`
+ : ''}
+ </td>
+ <td>{currencyFormat(product.price.priceDiscount * product.quantity)}</td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
- <div className='flex flex-col gap-y-4 p-4 border-t border-gray_r-6'>
- <DescriptionRow label='Nama'>{address?.name}</DescriptionRow>
- <DescriptionRow label='Email'>{address?.email || '-'}</DescriptionRow>
- <DescriptionRow label='No Telepon'>{address?.mobile || '-'}</DescriptionRow>
- <DescriptionRow label='Alamat'>{fullAddress}</DescriptionRow>
- </div>
+ <div className='flex justify-end mt-4'>
+ <div className='w-1/4 grid grid-cols-2 gap-y-2 text-gray_r-12/80'>
+ <div className='text-right'>Subtotal</div>
+ <div className='text-right font-medium'>{currencyFormat(totalAmount)}</div>
- <Divider />
+ <div className='text-right'>Total Diskon</div>
+ <div className='text-right font-medium'>
+ {currencyFormat(-totalDiscountAmount)}
+ </div>
- <div className='font-medium p-4'>Detail Produk</div>
+ <div className='text-right'>PPN 11% (Incl.)</div>
+ <div className='text-right font-medium'>{currencyFormat(totalAmount * 0.11)}</div>
- <div className='p-4 pt-0 flex flex-col gap-y-3'>
- <VariantGroupCard
- variants={invoice.data?.products}
- buyMore
- />
- <div className='flex justify-between mt-3 font-medium'>
- <p>Total Belanja</p>
- <p>{currencyFormat(invoice.data?.amountTotal)}</p>
+ <div className='text-right'>Grand Total</div>
+ <div className='text-right font-medium text-gray_r-12'>
+ {currencyFormat(invoice.data?.amountTotal)}
+ </div>
+ </div>
+ </div>
+ </div>
</div>
- </div>
+ </DesktopView>
</>
)
)
diff --git a/src/lib/invoice/components/Invoices.jsx b/src/lib/invoice/components/Invoices.jsx
index ab318a3c..51041316 100644
--- a/src/lib/invoice/components/Invoices.jsx
+++ b/src/lib/invoice/components/Invoices.jsx
@@ -16,6 +16,9 @@ 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 '../utils/invoices'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
+import Menu from '@/lib/auth/components/Menu'
const Invoices = () => {
const router = useRouter()
@@ -44,133 +47,201 @@ const Invoices = () => {
}
return (
- <div className='p-4 flex flex-col gap-y-4'>
- <form
- className='flex gap-x-3'
- onSubmit={handleSubmit}
- >
- <input
- type='text'
- className='form-input'
- placeholder='Cari Invoice...'
- value={inputQuery}
- onChange={(e) => setInputQuery(e.target.value)}
- />
- <button
- className='btn-light bg-transparent px-3'
- type='submit'
- >
- <MagnifyingGlassIcon className='w-6' />
- </button>
- </form>
-
- {invoices.isLoading && (
- <div className='flex justify-center my-4'>
- <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
- </div>
- )}
-
- {!invoices.isLoading && invoices.data?.invoices?.length === 0 && (
- <Alert
- type='info'
- className='text-center'
- >
- Tidak ada data invoice
- </Alert>
- )}
-
- {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/invoice/${invoice.id}`}>
- <span className='text-caption-2 text-gray_r-11'>No. Invoice</span>
- <h2 className='text-red_r-11 mt-1'>{invoice.name}</h2>
- </Link>
- <div className='flex gap-x-1 justify-end'>
- {invoice.amountResidual > 0 ? (
- <div className='badge-solid-red h-fit ml-auto'>Belum Lunas</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/invoice/${invoice.id}`}>
- <div className='grid grid-cols-2 text-caption-2 text-gray_r-11 mt-2 font-normal'>
- <p>{invoice.invoiceDate}</p>
- <p className='text-right'>{invoice.paymentTerm}</p>
+ <>
+ <MobileView>
+ <div className='p-4 flex flex-col gap-y-4'>
+ <form className='flex gap-x-3' onSubmit={handleSubmit}>
+ <input
+ type='text'
+ className='form-input'
+ placeholder='Cari Invoice...'
+ value={inputQuery}
+ onChange={(e) => setInputQuery(e.target.value)}
+ />
+ <button className='btn-light bg-transparent px-3' type='submit'>
+ <MagnifyingGlassIcon className='w-6' />
+ </button>
+ </form>
+
+ {invoices.isLoading && (
+ <div className='flex justify-center my-4'>
+ <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
</div>
- <hr className='my-3' />
- <div className='grid grid-cols-2'>
- <div>
- <span className='text-caption-2 text-gray_r-11'>No. Purchase Order</span>
- <p className='mt-1 font-medium text-gray_r-12'>
- {invoice.purchaseOrderName || '-'}
- </p>
- </div>
- <div className='text-right'>
- <span className='text-caption-2 text-gray_r-11'>Total Invoice</span>
- <p className='mt-1 font-medium text-gray_r-12'>
- {currencyFormat(invoice.amountTotal)}
- </p>
+ )}
+
+ {!invoices.isLoading && invoices.data?.invoices?.length === 0 && (
+ <Alert type='info' className='text-center'>
+ Tidak ada data invoice
+ </Alert>
+ )}
+
+ {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/invoice/${invoice.id}`}>
+ <span className='text-caption-2 text-gray_r-11'>No. Invoice</span>
+ <h2 className='text-red_r-11 mt-1'>{invoice.name}</h2>
+ </Link>
+ <div className='flex gap-x-1 justify-end'>
+ {invoice.amountResidual > 0 ? (
+ <div className='badge-solid-red h-fit ml-auto'>Belum Lunas</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/invoice/${invoice.id}`}>
+ <div className='grid grid-cols-2 text-caption-2 text-gray_r-11 mt-2 font-normal'>
+ <p>{invoice.invoiceDate}</p>
+ <p className='text-right'>{invoice.paymentTerm}</p>
+ </div>
+ <hr className='my-3' />
+ <div className='grid grid-cols-2'>
+ <div>
+ <span className='text-caption-2 text-gray_r-11'>No. Purchase Order</span>
+ <p className='mt-1 font-medium text-gray_r-12'>
+ {invoice.purchaseOrderName || '-'}
+ </p>
+ </div>
+ <div className='text-right'>
+ <span className='text-caption-2 text-gray_r-11'>Total Invoice</span>
+ <p className='mt-1 font-medium text-gray_r-12'>
+ {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>
- </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
+ ))}
+
+ <Pagination
+ pageCount={pageCount}
+ currentPage={parseInt(page)}
+ url={`/my/invoices${pageQuery}`}
+ 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>
- ))}
-
- <Pagination
- pageCount={pageCount}
- currentPage={parseInt(page)}
- url={`/my/invoices${pageQuery}`}
- 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>
+ </MobileView>
+
+ <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'>
+ <div className='flex mb-6 items-center justify-between'>
+ <h1 className='text-title-sm font-semibold'>
+ Invoice & Faktur Pajak{' '}
+ {invoices?.data?.invoices ? `(${invoices?.data?.invoices.length})` : ''}
+ </h1>
+ <form className='flex gap-x-2' onSubmit={handleSubmit}>
+ <input
+ type='text'
+ className='form-input'
+ placeholder='Cari Invoice...'
+ value={inputQuery}
+ onChange={(e) => setInputQuery(e.target.value)}
+ />
+ <button className='btn-light bg-transparent px-3' type='submit'>
+ <MagnifyingGlassIcon className='w-6' />
+ </button>
+ </form>
+ </div>
+
+ <table className='table-data'>
+ <thead>
+ <tr>
+ <th>No. Invoice</th>
+ <th>No. PO</th>
+ <th>Tanggal</th>
+ <th className='!text-left'>Salesperson</th>
+ <th>Status</th>
+ <th className='!text-left'>Total</th>
+ </tr>
+ </thead>
+ <tbody>
+ {invoices.isLoading && (
+ <tr>
+ <td colSpan={5}>
+ <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 data invoice</td>
+ </tr>
+ )}
+ {invoices.data?.invoices?.map((invoice) => (
+ <tr key={invoice.id}>
+ <td>
+ <Link href={`/my/invoice/${invoice.id}`}>{invoice.name}</Link>
+ </td>
+ <td>{invoice.purchaseOrderName || '-'}</td>
+ <td>{invoice.invoiceDate}</td>
+ <td className='!text-left'>{invoice.sales}</td>
+ <td>
+ {invoice.amountResidual > 0 ? (
+ <div className='badge-solid-red h-fit mx-auto'>Belum Lunas</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(page)}
+ url={`/my/transactions${pageQuery}`}
+ className='mt-2 mb-2'
+ />
+ </div>
</div>
- </BottomPopup>
- </div>
+ </DesktopView>
+ </>
)
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 03:56:17 +0000