From bc04e721d51e149709ab3cfaf5e77ef034511860 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 27 Mar 2023 10:17:49 +0700 Subject: invoice, invoice detail, address, create address, edit address, wishlist --- .../elements/Navbar/NavbarUserDropdown.jsx | 2 +- src/lib/address/components/Addresses.jsx | 125 +++++--- src/lib/address/components/CreateAddress.jsx | 237 ++++++++-------- src/lib/address/components/EditAddress.jsx | 237 ++++++++-------- src/lib/auth/components/Menu.jsx | 2 +- src/lib/invoice/components/Invoice.jsx | 292 +++++++++++++++---- src/lib/invoice/components/Invoices.jsx | 313 +++++++++++++-------- src/lib/transaction/components/Transaction.jsx | 6 +- src/lib/transaction/components/Transactions.jsx | 18 +- src/lib/wishlist/components/Wishlists.jsx | 68 +++-- src/pages/my/address/[id]/edit.jsx | 20 +- src/pages/my/address/create.jsx | 17 +- src/pages/my/address/index.jsx | 17 +- src/pages/my/invoice/[id].jsx | 17 +- src/pages/my/invoices.jsx | 17 +- src/pages/my/wishlist.jsx | 17 +- 16 files changed, 888 insertions(+), 517 deletions(-) (limited to 'src') diff --git a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx index c08d81ce..1d2429a7 100644 --- a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx +++ b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx @@ -16,7 +16,7 @@ const NavbarUserDropdown = () => { Daftar Transaksi Invoice & Faktur Pajak Wishlist - Pengaturan Akun + Daftar Alamat diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx index 3ac06b6c..a2adecb1 100644 --- a/src/lib/address/components/Addresses.jsx +++ b/src/lib/address/components/Addresses.jsx @@ -4,13 +4,15 @@ import useAuth from '@/core/hooks/useAuth' import { getItemAddress, updateItemAddress } from '@/core/utils/address' import { useRouter } from 'next/router' import useAddresses from '../hooks/useAddresses' +import MobileView from '@/core/components/views/MobileView' +import DesktopView from '@/core/components/views/DesktopView' +import Menu from '@/lib/auth/components/Menu' const Addresses = () => { const router = useRouter() const { select = null } = router.query - const auth = useAuth() const { addresses } = useAddresses() - const selectedAdress = getItemAddress(select || '') + const selectedAddress = getItemAddress(select || '') const changeSelectedAddress = (id) => { if (!select) return updateItemAddress(select, id) @@ -26,43 +28,96 @@ const Addresses = () => { } return ( -
-
- Tambah Alamat -
+ <> + +
+
+ Tambah Alamat +
+ +
+ {addresses.data?.map((address, index) => { + const type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address' + return ( + + ) + })} +
+
+ -
- {addresses.data?.map((address, index) => { - let type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address' - return ( -
-
changeSelectedAddress(address.id)}> -
-
{type}
- {auth?.partnerId == address.id &&
Utama
} -
-

{address.name}

- {address.mobile &&

{address.mobile}

} -

{address.street}

-
- - Ubah Alamat + +
+
+ +
+
+
+

Daftar Alamat

+ + Tambah Alamat
- ) - })} + +
+ {addresses.data?.map((address, index) => { + const type = + address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address' + return ( + + ) + })} +
+
+
+ + + ) +} + +const AddressCard = ({ address, selectedAddress, changeSelectedAddress, type, select }) => { + const auth = useAuth() + + return ( +
+
changeSelectedAddress(address.id)} className={select && 'cursor-pointer'}> +
+
{type}
+ {auth?.partnerId == address.id &&
Utama
} +
+

{address.name}

+ {address.mobile &&

{address.mobile}

} +

{address.street}

+ + Ubah Alamat +
) } diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx index 849b4c01..475d8548 100644 --- a/src/lib/address/components/CreateAddress.jsx +++ b/src/lib/address/components/CreateAddress.jsx @@ -10,6 +10,7 @@ import { useEffect, useState } from 'react' import createAddressApi from '../api/createAddressApi' import { toast } from 'react-hot-toast' import { yupResolver } from '@hookform/resolvers/yup' +import Menu from '@/lib/auth/components/Menu' const CreateAddress = () => { const auth = useAuth() @@ -88,133 +89,119 @@ const CreateAddress = () => { } return ( -
-
- - ( - - )} - /> -
{errors.type?.message}
+
+
+
- -
- - -
{errors.name?.message}
-
- -
- - -
{errors.email?.message}
-
- -
- - -
{errors.mobile?.message}
-
- -
- - -
{errors.street?.message}
-
- -
- - -
{errors.zip?.message}
-
- -
- - ( - - )} - /> -
{errors.city?.message}
-
- -
- - ( - - )} - /> -
- -
- - ( - - )} - /> +
+ +
+
+ + ( + + )} + /> +
{errors.type?.message}
+
+ +
+ + +
{errors.name?.message}
+
+ +
+ + +
{errors.email?.message}
+
+ +
+ + +
{errors.mobile?.message}
+
+ +
+ + +
{errors.street?.message}
+
+ +
+ + +
{errors.zip?.message}
+
+ +
+ + } + /> +
{errors.city?.message}
+
+ +
+ + ( + + )} + /> +
+ +
+ + ( + + )} + /> +
+
+ + +
- - - +
) } diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx index a832edbc..d754cbd9 100644 --- a/src/lib/address/components/EditAddress.jsx +++ b/src/lib/address/components/EditAddress.jsx @@ -9,6 +9,7 @@ import subDistrictApi from '../api/subDistrictApi' import editAddressApi from '../api/editAddressApi' import HookFormSelect from '@/core/components/elements/Select/HookFormSelect' import { toast } from 'react-hot-toast' +import Menu from '@/lib/auth/components/Menu' const EditAddress = ({ id, defaultValues }) => { const router = useRouter() @@ -102,133 +103,119 @@ const EditAddress = ({ id, defaultValues }) => { } return ( -
-
- - ( - - )} - /> -
{errors.type?.message}
+
+
+
- -
- - -
{errors.name?.message}
-
- -
- - -
{errors.email?.message}
-
- -
- - -
{errors.mobile?.message}
-
- -
- - -
{errors.street?.message}
-
- -
- - -
{errors.zip?.message}
-
- -
- - ( - - )} - /> -
{errors.city?.message}
-
- -
- - ( - - )} - /> -
- -
- - ( - - )} - /> +
+

Ubah Alamat

+ +
+
+ + ( + + )} + /> +
{errors.type?.message}
+
+ +
+ + +
{errors.name?.message}
+
+ +
+ + +
{errors.email?.message}
+
+ +
+ + +
{errors.mobile?.message}
+
+ +
+ + +
{errors.street?.message}
+
+ +
+ + +
{errors.zip?.message}
+
+ +
+ + } + /> +
{errors.city?.message}
+
+ +
+ + ( + + )} + /> +
+ +
+ + ( + + )} + /> +
+
+ +
- - - +
) } diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx index 3f2b2fb2..9a73609d 100644 --- a/src/lib/auth/components/Menu.jsx +++ b/src/lib/auth/components/Menu.jsx @@ -7,7 +7,7 @@ const Menu = () => { const routeStartWith = (route) => router.pathname.startsWith(route) return ( -
+
Menu
Daftar Transaksi 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 (
@@ -27,74 +51,226 @@ const Invoice = ({ id }) => { return ( invoice.data?.name && ( <> -
- {invoice.data?.name} - - {invoice.data?.amountResidual > 0 ? ( - Belum Lunas - ) : ( - Lunas - )} - - - {invoice.data?.purchaseOrderName || '-'} - - {invoice.data?.paymentTerm} - {invoice.data?.amountResidual > 0 && invoice.invoiceDate != invoice.invoiceDateDue && ( - - {invoice.data?.invoiceDateDue} + +
+ {invoice.data?.name} + + {invoice.data?.amountResidual > 0 ? ( + Belum Lunas + ) : ( + Lunas + )} + + + {invoice.data?.purchaseOrderName || '-'} + + + {invoice.data?.paymentTerm} - )} - {invoice.data?.sales} - {invoice.data?.invoiceDate} -
-

Invoice

- + {invoice.data?.amountResidual > 0 && invoice.invoiceDate != invoice.invoiceDateDue && ( + + {invoice.data?.invoiceDateDue} + + )} + {invoice.data?.sales} + {invoice.data?.invoiceDate} +
+

Invoice

+ +
+
+

Faktur Pajak

+ +
-
-

Faktur Pajak

- + + + +
Detail Penagihan
+ +
+ {address?.name} + {address?.email || '-'} + {address?.mobile || '-'} + {fullAddress}
-
- + + +
Detail Produk
+ +
+ +
+

Total Belanja

+

{currencyFormat(invoice.data?.amountTotal)}

+
+
+ + + +
+
+ +
+
+

Invoice & Faktur Pajak

+ +
+ {invoice?.data?.name} + {invoice?.data?.amountResidual > 0 ? ( +
Belum Lunas
+ ) : ( +
Lunas
+ )} +
+ + + +
+
+
Tanggal Invoice
+
: {invoice?.data?.invoiceDate}
+ +
Purchase Order
+
+ :{' '} + +
+ +
Ketentuan Pembayaran
+
: {invoice?.data?.paymentTerm}
+
+
+
Nama Sales
+
: {invoice?.data?.sales}
+ +
Faktur Pajak
+
+ :{' '} + {invoice.data?.efaktur ? ( + + ) : ( + '-' + )} +
+
+
-
Detail Penagihan
+
Rincian Pembelian
+ + + + + + + + + + + + {invoice?.data?.products?.map((product) => ( + + + + + + + + ))} + +
Nama ProdukJumlahHargaDiskonSubtotal
+ + {product?.name} + +
+ + {product?.parent?.name} + +
+ {product?.code}{' '} + {product?.attributes.length > 0 + ? `| ${product?.attributes.join(', ')}` + : ''} +
+
+ 		{product.quantity}{currencyFormat(product.price.price)} + {product.price.discountPercentage > 0 + ? `${product.price.discountPercentage}%` + : ''} + {currencyFormat(product.price.priceDiscount * product.quantity)}
-
- {address?.name} - {address?.email || '-'} - {address?.mobile || '-'} - {fullAddress} -
+
+
+
Subtotal
+
{currencyFormat(totalAmount)}
- +
Total Diskon
+
+ {currencyFormat(-totalDiscountAmount)} +
-
Detail Produk
+
PPN 11% (Incl.)
+
{currencyFormat(totalAmount * 0.11)}
-
- -
-

Total Belanja

-

{currencyFormat(invoice.data?.amountTotal)}

+
Grand Total
+
+ {currencyFormat(invoice.data?.amountTotal)} +
+
+
+
-
+ ) ) 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 ( -
-
- setInputQuery(e.target.value)} - /> - -
- - {invoices.isLoading && ( -
- -
- )} - - {!invoices.isLoading && invoices.data?.invoices?.length === 0 && ( - - Tidak ada data invoice - - )} - - {invoices.data?.invoices?.map((invoice, index) => ( -
-
- - No. Invoice -

{invoice.name}

- -
- {invoice.amountResidual > 0 ? ( -
Belum Lunas
- ) : ( -
Lunas
- )} - setToOthers(invoice)} - /> -
-
- -
-

{invoice.invoiceDate}

-

{invoice.paymentTerm}

+ <> + +
+
+ setInputQuery(e.target.value)} + /> + +
+ + {invoices.isLoading && ( +
+
-
-
-
- No. Purchase Order -

- {invoice.purchaseOrderName || '-'} -

-
-
- Total Invoice -

- {currencyFormat(invoice.amountTotal)} -

+ )} + + {!invoices.isLoading && invoices.data?.invoices?.length === 0 && ( + + Tidak ada data invoice + + )} + + {invoices.data?.invoices?.map((invoice, index) => ( +
+
+ + No. Invoice +

{invoice.name}

+ +
+ {invoice.amountResidual > 0 ? ( +
Belum Lunas
+ ) : ( +
Lunas
+ )} + setToOthers(invoice)} /> +
+ +
+

{invoice.invoiceDate}

+

{invoice.paymentTerm}

+
+
+
+
+ No. Purchase Order +

+ {invoice.purchaseOrderName || '-'} +

+
+
+ Total Invoice +

+ {currencyFormat(invoice.amountTotal)} +

+
+
+ + {invoice.efaktur ? ( +
+ + Faktur Pajak +
+ ) : ( +
+ + Faktur Pajak +
+ )}
- - {invoice.efaktur ? ( -
- - Faktur Pajak -
- ) : ( -
- - Faktur Pajak + ))} + + + + setToOthers(null)}> +
+ +
- )} +
- ))} - - - - setToOthers(null)} - > -
- - + + + +
+
+ +
+
+
+

+ Invoice & Faktur Pajak{' '} + {invoices?.data?.invoices ? `(${invoices?.data?.invoices.length})` : ''} +

+
+ setInputQuery(e.target.value)} + /> + +
+
+ + + + + + + + + + + + + + {invoices.isLoading && ( + + + + )} + {!invoices.isLoading && + (!invoices?.data?.invoices || invoices?.data?.invoices?.length == 0) && ( + + + + )} + {invoices.data?.invoices?.map((invoice) => ( + + + + + + + + + ))} + +
No. InvoiceNo. POTanggalSalespersonStatusTotal
+
+ +
+
Tidak ada data invoice
+ {invoice.name} + {invoice.purchaseOrderName || '-'}{invoice.invoiceDate}{invoice.sales} + {invoice.amountResidual > 0 ? ( +
Belum Lunas
+ ) : ( +
Lunas
+ )} + 		{currencyFormat(invoice.amountTotal)}
+ + +
- -
+ + ) } diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx index cba7646f..104a7f2d 100644 --- a/src/lib/transaction/components/Transaction.jsx +++ b/src/lib/transaction/components/Transaction.jsx @@ -298,14 +298,14 @@ const Transaction = ({ id }) => {
-
+
Nama Sales
: {transaction?.data?.sales}
Tanggal Transaksi
: {transaction?.data?.dateOrder}
-
+
Ketentuan Pembayaran
: {transaction?.data?.paymentTerm}
@@ -398,7 +398,7 @@ const Transaction = ({ id }) => { ? `${product.price.discountPercentage}%` : ''} - {currencyFormat(product.price.priceDiscount)} + {currencyFormat(product.price.priceDiscount * product.quantity)} ))} diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx index 0a772967..30c670ae 100644 --- a/src/lib/transaction/components/Transactions.jsx +++ b/src/lib/transaction/components/Transactions.jsx @@ -224,12 +224,28 @@ const Transactions = () => { No. Transaksi Tanggal - Sales Person + Salesperson Total Status + {transactions.isLoading && ( + + +
+ +
+ + + )} + {!transactions.isLoading && + (!transactions?.data?.saleOrders || + transactions?.data?.saleOrders?.length == 0) && ( + + Tidak ada data transaksi + + )} {transactions.data?.saleOrders?.map((saleOrder) => ( diff --git a/src/lib/wishlist/components/Wishlists.jsx b/src/lib/wishlist/components/Wishlists.jsx index e61efcc3..e13c61e5 100644 --- a/src/lib/wishlist/components/Wishlists.jsx +++ b/src/lib/wishlist/components/Wishlists.jsx @@ -4,6 +4,9 @@ import Spinner from '@/core/components/elements/Spinner/Spinner' import ProductCard from '@/lib/product/components/ProductCard' import { useRouter } from 'next/router' import useWishlists from '../hooks/useWishlists' +import MobileView from '@/core/components/views/MobileView' +import DesktopView from '@/core/components/views/DesktopView' +import Menu from '@/lib/auth/components/Menu' const Wishlists = () => { const router = useRouter() @@ -22,33 +25,46 @@ const Wishlists = () => { } return ( -
- {wishlists.data?.products?.length == 0 && ( - - Wishlist anda masih kosong - - )} - -
- {wishlists.data?.products.map((product) => ( - - ))} -
+ <> + +
+ {wishlists.data?.products?.length == 0 && ( + + Wishlist anda masih kosong + + )} -
- -
-
+
+ {wishlists.data?.products.map((product) => ( + + ))} +
+ +
+ +
+
+ + + +
+
+ +
+
+
+ {wishlists.data?.products.map((product) => ( + + ))} +
+ +
+ +
+
+
+ + ) } diff --git a/src/pages/my/address/[id]/edit.jsx b/src/pages/my/address/[id]/edit.jsx index bc5f3471..6706b458 100644 --- a/src/pages/my/address/[id]/edit.jsx +++ b/src/pages/my/address/[id]/edit.jsx @@ -1,4 +1,7 @@ import AppLayout from '@/core/components/layouts/AppLayout' +import BasicLayout from '@/core/components/layouts/BasicLayout' +import DesktopView from '@/core/components/views/DesktopView' +import MobileView from '@/core/components/views/MobileView' import addressApi from '@/lib/address/api/addressApi' import EditAddressComponent from '@/lib/address/components/EditAddress' import IsAuth from '@/lib/auth/components/IsAuth' @@ -6,12 +9,17 @@ import IsAuth from '@/lib/auth/components/IsAuth' export default function EditAddress({ id, defaultValues }) { return ( - - - + + + + + + + + + + + ) } diff --git a/src/pages/my/address/create.jsx b/src/pages/my/address/create.jsx index ec17f987..be645853 100644 --- a/src/pages/my/address/create.jsx +++ b/src/pages/my/address/create.jsx @@ -1,13 +1,24 @@ import AppLayout from '@/core/components/layouts/AppLayout' +import BasicLayout from '@/core/components/layouts/BasicLayout' +import DesktopView from '@/core/components/views/DesktopView' +import MobileView from '@/core/components/views/MobileView' import CreateAddressComponent from '@/lib/address/components/CreateAddress' import IsAuth from '@/lib/auth/components/IsAuth' export default function CreateAddress() { return ( - - - + + + + + + + + + + + ) } diff --git a/src/pages/my/address/index.jsx b/src/pages/my/address/index.jsx index 93ed40b0..61d72a41 100644 --- a/src/pages/my/address/index.jsx +++ b/src/pages/my/address/index.jsx @@ -1,13 +1,24 @@ import AppLayout from '@/core/components/layouts/AppLayout' +import BasicLayout from '@/core/components/layouts/BasicLayout' +import DesktopView from '@/core/components/views/DesktopView' +import MobileView from '@/core/components/views/MobileView' import AddressesComponent from '@/lib/address/components/Addresses' import IsAuth from '@/lib/auth/components/IsAuth' export default function Addresses() { return ( - - - + + + + + + + + + + + ) } diff --git a/src/pages/my/invoice/[id].jsx b/src/pages/my/invoice/[id].jsx index 4938d8f8..740819cc 100644 --- a/src/pages/my/invoice/[id].jsx +++ b/src/pages/my/invoice/[id].jsx @@ -1,4 +1,7 @@ import AppLayout from '@/core/components/layouts/AppLayout' +import BasicLayout from '@/core/components/layouts/BasicLayout' +import DesktopView from '@/core/components/views/DesktopView' +import MobileView from '@/core/components/views/MobileView' import IsAuth from '@/lib/auth/components/IsAuth' import InvoiceComponent from '@/lib/invoice/components/Invoice' import { useRouter } from 'next/router' @@ -8,9 +11,17 @@ export default function Invoice() { return ( - - - + + + + + + + + + + + ) } diff --git a/src/pages/my/invoices.jsx b/src/pages/my/invoices.jsx index 12a5ff7e..59059b2e 100644 --- a/src/pages/my/invoices.jsx +++ b/src/pages/my/invoices.jsx @@ -1,13 +1,24 @@ import AppLayout from '@/core/components/layouts/AppLayout' +import BasicLayout from '@/core/components/layouts/BasicLayout' +import DesktopView from '@/core/components/views/DesktopView' +import MobileView from '@/core/components/views/MobileView' import IsAuth from '@/lib/auth/components/IsAuth' import InvoicesComponent from '@/lib/invoice/components/Invoices' export default function Invoices() { return ( - - - + + + + + + + + + + + ) } diff --git a/src/pages/my/wishlist.jsx b/src/pages/my/wishlist.jsx index 196adf50..7d9ad0d7 100644 --- a/src/pages/my/wishlist.jsx +++ b/src/pages/my/wishlist.jsx @@ -1,13 +1,24 @@ import AppLayout from '@/core/components/layouts/AppLayout' +import BasicLayout from '@/core/components/layouts/BasicLayout' +import DesktopView from '@/core/components/views/DesktopView' +import MobileView from '@/core/components/views/MobileView' import IsAuth from '@/lib/auth/components/IsAuth' import Wishlists from '@/lib/wishlist/components/Wishlists' export default function Wishlist() { return ( - - - + + + + + + + + + + + ) } -- cgit v1.2.3