From 902e5dabbb1ab0612764983c094af398e5f636ee Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Thu, 26 Jan 2023 17:02:02 +0700 Subject: Invoice and invoice detail --- src/components/elements/Disclosure.js | 4 +- src/components/layouts/AppBar.js | 5 +- src/components/transactions/TransactionDetail.js | 2 +- src/pages/my/address/index.js | 1 + src/pages/my/invoice/[id].js | 121 +++++++++++++++++++++ src/pages/my/invoices.js | 124 ++++++++++++++++++++++ src/pages/my/menu.js | 2 +- src/pages/my/transaction/[id].js | 89 ++++++++++++++++ src/pages/my/transactions.js | 128 +++++++++++++++++++++++ src/pages/my/transactions/[id].js | 89 ---------------- src/pages/my/transactions/index.js | 128 ----------------------- 11 files changed, 471 insertions(+), 222 deletions(-) create mode 100644 src/pages/my/invoice/[id].js create mode 100644 src/pages/my/invoices.js create mode 100644 src/pages/my/transaction/[id].js create mode 100644 src/pages/my/transactions.js delete mode 100644 src/pages/my/transactions/[id].js delete mode 100644 src/pages/my/transactions/index.js (limited to 'src') diff --git a/src/components/elements/Disclosure.js b/src/components/elements/Disclosure.js index 584fa144..1f334be3 100644 --- a/src/components/elements/Disclosure.js +++ b/src/components/elements/Disclosure.js @@ -4,9 +4,9 @@ const Disclosure = ({ label, active, onClick }) => (

{ label }

{ onClick && ( active ? ( - + ) : ( - + ) ) }
); diff --git a/src/components/layouts/AppBar.js b/src/components/layouts/AppBar.js index f9dddf9d..b4c7703c 100644 --- a/src/components/layouts/AppBar.js +++ b/src/components/layouts/AppBar.js @@ -1,4 +1,4 @@ -import { ChevronLeftIcon, HeartIcon, HomeIcon } from "@heroicons/react/24/outline"; +import { Bars3Icon, ChevronLeftIcon, HeartIcon, HomeIcon } from "@heroicons/react/24/outline"; import Head from "next/head"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; @@ -49,6 +49,9 @@ const AppBar = ({ title }) => { + + + {/* --- End Icons */} diff --git a/src/components/transactions/TransactionDetail.js b/src/components/transactions/TransactionDetail.js index 7659a321..295a4f9f 100644 --- a/src/components/transactions/TransactionDetail.js +++ b/src/components/transactions/TransactionDetail.js @@ -33,7 +33,7 @@ const TransactionDetailAddress = ({ transaction }) => { }; return ( -
+
{ + if (auth && id) { + const loadInvoice = async () => { + const dataInvoice = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/invoice/${id}`); + setInvoice(dataInvoice); + } + loadInvoice(); + } + }, [ auth, id ]); + + const Customer = () => { + const customer = invoice?.customer; + const fullAddress = []; + if (customer?.street) fullAddress.push(customer.street); + if (customer?.sub_district?.name) fullAddress.push(customer.sub_district.name); + if (customer?.district?.name) fullAddress.push(customer.district.name); + if (customer?.city?.name) fullAddress.push(customer.city.name); + + return ( +
+ { invoice?.customer?.name } + { invoice?.customer?.email || '-' } + { invoice?.customer?.mobile || '-' } + { fullAddress.join(', ') } +
+ ); + }; + + return ( + + + + + { invoice ? ( + <> +
+ + { invoice?.name } + + + { invoice?.amount_residual > 0 ? ( + Belum Lunas + ) : ( + Lunas + ) } + + + { invoice?.purchase_order_name || '-' } + + + { invoice?.payment_term } + + { invoice?.amount_residual > 0 && invoice.invoice_date != invoice.invoice_date_due && ( + + { invoice?.invoice_date_due } + + ) } + + { invoice?.sales } + + + { invoice?.invoice_date } + +
+ + + + + + + + + + + +
+ { invoice?.products?.map((product, index) => ( + + )) } +
+

Total Belanja

+

{ currencyFormat(invoice?.amount_total || 0) }

+
+
+ + ) : ( +
+ +
+ ) } + + + ); +} \ No newline at end of file diff --git a/src/pages/my/invoices.js b/src/pages/my/invoices.js new file mode 100644 index 00000000..e136f4fd --- /dev/null +++ b/src/pages/my/invoices.js @@ -0,0 +1,124 @@ +import WithAuth from "@/components/auth/WithAuth"; +import Alert from "@/components/elements/Alert"; +import Link from "@/components/elements/Link"; +import AppBar from "@/components/layouts/AppBar"; +import Layout from "@/components/layouts/Layout"; +import apiOdoo from "@/core/utils/apiOdoo"; +import { useAuth } from "@/core/utils/auth"; +import currencyFormat from "@/core/utils/currencyFormat"; +import { EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; +import { useRouter } from "next/router"; +import { useEffect, useRef, useState } from "react"; + +export default function Invoices() { + const [ auth ] = useAuth(); + const router = useRouter(); + const { + q, + page = 1 + } = router.query; + + const [ invoices, setInvoices ] = useState([]); + const [ activePopupId, setActivePopupId ] = useState(null); + + const [ pageCount, setPageCount ] = useState(0); + const [ isLoading, setIsLoading ] = useState(true); + + const searchQueryRef = useRef(); + + useEffect(() => { + const loadInvoices = async () => { + if (auth) { + const limit = 10; + let offset = (page - 1) * 10; + let queryParams = [`limit=${limit}`, `offset=${offset}`]; + if (q) queryParams.push(`name=${q}`); + queryParams = queryParams.join('&'); + queryParams = queryParams ? '?' + queryParams : ''; + + const dataInvoices = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/invoice${queryParams}`); + setInvoices(dataInvoices); + setPageCount(Math.ceil(dataInvoices.sale_order_total / limit)); + setIsLoading(false); + }; + }; + loadInvoices(); + }, [ auth, q, page ]); + + const actionSearch = (e) => { + e.preventDefault(); + let queryParams = []; + if (searchQueryRef.current.value) queryParams.push(`q=${searchQueryRef.current.value}`); + queryParams = queryParams.join('&'); + queryParams = queryParams ? `?${queryParams}` : ''; + router.push(`/my/invoices${queryParams}`); + }; + + return ( + + + + +
+ + +
+ +
+ { invoices?.invoice_total === 0 && !isLoading && ( + + Invoice tidak ditemukan + + ) } + { invoices?.invoices?.map((invoice, index) => ( +
+
+ + No. Transaksi +

{ invoice.name }

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

+ { invoice.invoice_date } +

+

+ { invoice.payment_term } +

+
+
+
+
+ Nomor PO +

{ invoice.purchase_order_name || '-' }

+
+
+ Total Invoice +

{ currencyFormat(invoice.amount_total) }

+
+
+ +
+ )) } +
+ + + ); +} \ No newline at end of file diff --git a/src/pages/my/menu.js b/src/pages/my/menu.js index e7ece135..3de6f8a6 100644 --- a/src/pages/my/menu.js +++ b/src/pages/my/menu.js @@ -59,7 +59,7 @@ export default function MyMenu() {

Aktivitas Pembelian

} name="Daftar Transaksi" url="/my/transactions" /> - } name="Invoice & Faktur Pajak" url="/my/transactions" /> + } name="Invoice & Faktur Pajak" url="/my/invoices" /> } name="Wishlist" url="/my/wishlist" />
diff --git a/src/pages/my/transaction/[id].js b/src/pages/my/transaction/[id].js new file mode 100644 index 00000000..09bf1ec7 --- /dev/null +++ b/src/pages/my/transaction/[id].js @@ -0,0 +1,89 @@ +import AppBar from "@/components/layouts/AppBar"; +import Layout from "@/components/layouts/Layout"; +import LineDivider from "@/components/elements/LineDivider"; +import WithAuth from "@/components/auth/WithAuth"; +import { useEffect, useState } from "react"; +import apiOdoo from "@/core/utils/apiOdoo"; +import { useRouter } from "next/router"; +import { useAuth } from "@/core/utils/auth"; +import VariantCard from "@/components/variants/VariantCard"; +import currencyFormat from "@/core/utils/currencyFormat"; +import Disclosure from "@/components/elements/Disclosure"; +import DescriptionRow from "@/components/elements/DescriptionRow"; +import { TransactionDetailAddress } from "@/components/transactions/TransactionDetail"; +import { SkeletonList } from "@/components/elements/Skeleton"; + +export default function DetailTransaction() { + const router = useRouter(); + const { id } = router.query; + const [ auth ] = useAuth(); + const [ transaction, setTransaction ] = useState(null); + + useEffect(() => { + if (auth && id) { + const loadTransaction = async () => { + const dataTransaction = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/sale_order/${id}`); + setTransaction(dataTransaction); + } + loadTransaction(); + } + }, [ auth, id ]); + + return ( + + + + + { transaction ? ( + <> +
+ + Pending Quotation + + + { transaction?.name } + + + { transaction?.purchase_order_name || '-' } + + + { transaction?.payment_term } + + + { transaction?.sales } + + + { transaction?.date_order } + +
+ + + + + +
+ { transaction?.products?.map((product, index) => ( + + )) } +
+

Total Belanja

+

{ currencyFormat(transaction?.amount_total || 0) }

+
+
+ + + + ) : ( +
+ +
+ ) } + + + ); +} \ No newline at end of file diff --git a/src/pages/my/transactions.js b/src/pages/my/transactions.js new file mode 100644 index 00000000..aca5f081 --- /dev/null +++ b/src/pages/my/transactions.js @@ -0,0 +1,128 @@ +import { useRouter } from "next/router"; +import AppBar from "@/components/layouts/AppBar"; +import BottomPopup from "@/components/elements/BottomPopup"; +import Layout from "@/components/layouts/Layout"; +import WithAuth from "@/components/auth/WithAuth"; +import { useEffect, useRef, useState } from "react"; +import { useAuth } from "@/core/utils/auth"; +import apiOdoo from "@/core/utils/apiOdoo"; +import currencyFormat from "@/core/utils/currencyFormat"; +import { EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; +import Link from "@/components/elements/Link"; +import Pagination from "@/components/elements/Pagination"; +import Alert from "@/components/elements/Alert"; + +export default function Transactions() { + const [ auth ] = useAuth(); + const router = useRouter(); + const { + q, + page = 1 + } = router.query; + + const [ transactions, setTransactions ] = useState([]); + const [ activePopupId, setActivePopupId ] = useState(null); + + const [ pageCount, setPageCount ] = useState(0); + const [ isLoading, setIsLoading ] = useState(true); + + const searchQueryRef = useRef(); + + useEffect(() => { + const loadTransactions = async () => { + if (auth) { + const limit = 10; + let offset = (page - 1) * 10; + let queryParams = [`limit=${limit}`, `offset=${offset}`]; + if (q) queryParams.push(`name=${q}`); + queryParams = queryParams.join('&'); + queryParams = queryParams ? '?' + queryParams : ''; + + const dataTransactions = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/sale_order${queryParams}`); + setTransactions(dataTransactions); + setPageCount(Math.ceil(dataTransactions.sale_order_total / limit)); + setIsLoading(false); + }; + } + loadTransactions(); + }, [ auth, q, page ]); + + const actionSearch = (e) => { + e.preventDefault(); + let queryParams = []; + if (searchQueryRef.current.value) queryParams.push(`q=${searchQueryRef.current.value}`); + queryParams = queryParams.join('&'); + queryParams = queryParams ? `?${queryParams}` : ''; + router.push(`/my/transactions${queryParams}`); + }; + + return ( + + + + +
+ + +
+ +
+ { transactions?.sale_order_total === 0 && !isLoading && ( + + Transaksi tidak ditemukan + + ) } + { transactions?.sale_orders?.map((transaction, index) => ( +
+
+ + No. Transaksi +

{ transaction.name }

+ +
+
Pending
+ setActivePopupId(transaction.id)} /> +
+
+ +
+ Sales +

{ transaction.sales }

+
+
+ Total Harga +

{ currencyFormat(transaction.amount_total) }

+
+ +
+ )) } +
+ +
+ +
+ + { transactions?.sale_orders?.length > 0 && ( + setActivePopupId(null)} + > +
+

Download Quotation

+

Batalkan Transaksi

+
+ + ) } + + + ); +}; \ No newline at end of file diff --git a/src/pages/my/transactions/[id].js b/src/pages/my/transactions/[id].js deleted file mode 100644 index 110915cf..00000000 --- a/src/pages/my/transactions/[id].js +++ /dev/null @@ -1,89 +0,0 @@ -import AppBar from "@/components/layouts/AppBar"; -import Layout from "@/components/layouts/Layout"; -import LineDivider from "@/components/elements/LineDivider"; -import WithAuth from "@/components/auth/WithAuth"; -import { useEffect, useState } from "react"; -import apiOdoo from "@/core/utils/apiOdoo"; -import { useRouter } from "next/router"; -import { useAuth } from "@/core/utils/auth"; -import VariantCard from "@/components/variants/VariantCard"; -import currencyFormat from "@/core/utils/currencyFormat"; -import Disclosure from "@/components/elements/Disclosure"; -import DescriptionRow from "@/components/elements/DescriptionRow"; -import { TransactionDetailAddress } from "@/components/transactions/TransactionDetail"; -import { SkeletonList } from "@/components/elements/Skeleton"; - -export default function DetailTransactions() { - const router = useRouter(); - const { id } = router.query; - const [ auth ] = useAuth(); - const [ transaction, setTransaction ] = useState(null); - - useEffect(() => { - if (auth) { - const loadTransaction = async () => { - const dataTransaction = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/sale_order/${id}`); - setTransaction(dataTransaction); - } - loadTransaction(); - } - }, [ auth, id ]); - - return ( - - - - - { transaction ? ( - <> -
- - Pending Quotation - - - { transaction?.name } - - - { transaction?.po_name || '-' } - - - { transaction?.payment_term } - - - { transaction?.sales } - - - { transaction?.date_order } - -
- - - - - -
- { transaction?.products?.map((product, index) => ( - - )) } -
-

Total Belanja

-

{ currencyFormat(transaction?.amount_total || 0) }

-
-
- - - - ) : ( -
- -
- ) } - - - ); -} \ No newline at end of file diff --git a/src/pages/my/transactions/index.js b/src/pages/my/transactions/index.js deleted file mode 100644 index c31336f2..00000000 --- a/src/pages/my/transactions/index.js +++ /dev/null @@ -1,128 +0,0 @@ -import { useRouter } from "next/router"; -import AppBar from "@/components/layouts/AppBar"; -import BottomPopup from "@/components/elements/BottomPopup"; -import Layout from "@/components/layouts/Layout"; -import WithAuth from "@/components/auth/WithAuth"; -import { useEffect, useRef, useState } from "react"; -import { useAuth } from "@/core/utils/auth"; -import apiOdoo from "@/core/utils/apiOdoo"; -import currencyFormat from "@/core/utils/currencyFormat"; -import { EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; -import Link from "@/components/elements/Link"; -import Pagination from "@/components/elements/Pagination"; -import Alert from "@/components/elements/Alert"; - -export default function Transactions() { - const [ auth ] = useAuth(); - const router = useRouter(); - const { - q, - page = 1 - } = router.query; - - const [ transactions, setTransactions ] = useState([]); - const [ activePopupId, setActivePopupId ] = useState(null); - - const [ pageCount, setPageCount ] = useState(0); - const [ isLoading, setIsLoading ] = useState(true); - - const searchQueryRef = useRef(); - - useEffect(() => { - const loadTransactions = async () => { - if (auth) { - const limit = 10; - let offset = (page - 1) * 10; - let queryParams = [`limit=${limit}`, `offset=${offset}`]; - if (q) queryParams.push(`name=${q}`); - queryParams = queryParams.join('&'); - queryParams = queryParams ? '?' + queryParams : ''; - - const dataTransactions = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/sale_order${queryParams}`); - setTransactions(dataTransactions); - setPageCount(Math.ceil(dataTransactions.sale_order_total / limit)); - setIsLoading(false); - }; - } - loadTransactions(); - }, [ auth, q, page ]); - - const actionSearch = (e) => { - e.preventDefault(); - let queryParams = []; - if (searchQueryRef.current.value) queryParams.push(`q=${searchQueryRef.current.value}`); - queryParams = queryParams.join('&'); - queryParams = queryParams ? `?${queryParams}` : ''; - router.push(`/my/transactions${queryParams}`); - }; - - return ( - - - - -
- - -
- -
- { transactions?.sale_order_total === 0 && !isLoading && ( - - Transaksi tidak ditemukan - - ) } - { transactions?.sale_orders?.map((transaction, index) => ( -
-
- - No. Transaksi -

{ transaction.name }

- -
-
Pending
- setActivePopupId(transaction.id)} /> -
-
- -
- Dilayani Oleh -

{ transaction.sales }

-
-
- Total Harga -

{ currencyFormat(transaction.amount_total) }

-
- -
- )) } -
- -
- -
- - { transactions?.sale_orders?.length > 0 && ( - setActivePopupId(null)} - > -
-

Download Quotation

-

Batalkan Transaksi

-
- - ) } - - - ); -}; \ No newline at end of file -- cgit v1.2.3