diff --git a/src/components/purchase/PurchaseList.jsx b/src/components/purchase/PurchaseList.jsx index d6d3fd97..672bccef 100644 --- a/src/components/purchase/PurchaseList.jsx +++ b/src/components/purchase/PurchaseList.jsx @@ -2,22 +2,130 @@ import React, { useState } from "react"; import { usePurchasesList } from "../../hooks/usePurchase"; import { ITEMS_PER_PAGE } from "../../utils/constants"; import Pagination from "../common/Pagination"; +import { PurchaseColumn } from "./Purchasetable"; +import { SpinnerLoader } from "../common/Loader"; +import { useDebounce } from "../../utils/appUtils"; +import { usePurchaseContext } from "../../pages/purchase/PurchasePage"; -const PurchaseList = () => { +const PurchaseList = ({ searchString }) => { + const { setViewPurchase } = usePurchaseContext(); const [currentPage, setCurrentPage] = useState(1); - const { data, isLoading, isError, error } = usePurchasesList( + const debounceSearch = useDebounce(searchString, 300); + const { data, isLoading } = usePurchasesList( ITEMS_PER_PAGE, currentPage, true, - {} + {}, + debounceSearch ); + const paginate = (page) => { if (page >= 1 && page <= (data?.totalPages ?? 1)) { setCurrentPage(page); } }; + + const visibleColumns = PurchaseColumn.filter((col) => !col.hidden); + return ( -
+
+
+ + + + {visibleColumns.map((col) => ( + + ))} + + + + + + {/* LOADING */} + {isLoading && ( + + + + )} + {!isLoading && data?.data?.length === 0 && ( + + + + )} + + {!isLoading && + data?.data?.map((item, index) => ( + + {visibleColumns.map((col) => ( + + ))} + + + ))} + +
+
{col.label}
+ 		Action
+
+ +
+
+ No Data Found +
+ {col.render ? col.render(item) : item[col.key] || "NA"} + + +
+
+ {data?.data?.length > 0 && ( { }; export default PurchaseList; -``; diff --git a/src/components/purchase/Purchasetable.jsx b/src/components/purchase/Purchasetable.jsx new file mode 100644 index 00000000..c2c5fe5b --- /dev/null +++ b/src/components/purchase/Purchasetable.jsx @@ -0,0 +1,60 @@ +import { formatFigure, getColorNameFromHex } from "../../utils/appUtils"; + +export const PurchaseColumn = [ + { + key: "purchaseInvoiceUId", + label: "Invoice Id", + + className: "text-start", + render: (item) => ( +
+ {item?.purchaseInvoiceUId || "NA"} +
+ ), + }, + { + key: "title", + label: "Title", + + className: "text-start", + render: (item) => ( +
+ {item?.title || "NA"} +
+ ), + }, + { + key: "project", + label: "Project", + className: "text-start d-none d-sm-table-cell", + render: (item) => {item?.project?.name || "NA"}, + }, + { + key: "supplier", + label: "Supplier", + className: "text-start d-none d-sm-table-cell", + render: (item) => {item?.supplier?.name || "NA"}, + }, + { + key: "status", + label: "Status", + className: "text-start", + render: (item) => { + let color = getColorNameFromHex(item.status?.color); + return ( + + + {item?.status.displayName || "NA"} + + ); + }, + }, + { + key: "totalAmount", + label: "Total Amount", + className: " text-end w-min", + render: (item) => ( + {formatFigure(item?.totalAmount, { type: "currency" })} + ), + }, +]; diff --git a/src/components/purchase/ViewPurchase.jsx b/src/components/purchase/ViewPurchase.jsx new file mode 100644 index 00000000..583066ca --- /dev/null +++ b/src/components/purchase/ViewPurchase.jsx @@ -0,0 +1,227 @@ +import React from "react"; +import { usePurchase } from "../../hooks/usePurchase"; +import { SpinnerLoader } from "../common/Loader"; +import { formatUTCToLocalTime } from "../../utils/dateUtils"; +import { getColorNameFromHex } from "../../utils/appUtils"; + +const ViewPurchase = ({ purchaseId }) => { + const { data, isLoading, isError, error } = usePurchase(purchaseId); + + if (isLoading) return ; + if (isError) return ; + + return ( +
+
+
+

Purchase Details

+
+
+ Purchase No: +

{data?.purchaseInvoiceUId}

+
+ +
+ Title: +

{data?.title}

+
+ +
+ Status: + + + {data?.status.displayName || "NA"} + +
+ +
+ Description: +

{data?.description}

+
+
+
+
+ +
+
+

Project

+ +
+ Name: +

{data?.project?.name}

+
+ +
+ Organization{" "} +

{data?.organization?.name}

+
+ +
+
+ Email: +

{data?.organization?.email}

+
+
+ Contact:{" "} +

+ {data?.organization?.contactNumber} +

+
+
+
+ Address:{" "} +

{data?.organization?.address}

+
+
+
+ +
+
+

Supplier

+ +
+ Name: +

{data?.supplier?.name}

+
+ +
+ Contact Person: +

{data?.supplier?.contactPerson}

+
+ +
+
+ Email: +

{data?.supplier?.email}

+
+ +
+ Contact: +

{data?.supplier?.contactNumber}

+
+
+ +
+ Address: +

{data?.supplier?.address}

+
+
+
+
+
+

Invoice Details

+ +
+ {/* Left column */} +
+
+ Invoice No: +

{data?.invoiceNumber}

+
+ +
+ Proforma No: +

{data?.proformaInvoiceNumber}

+
+ +
+ E-Way Bill: +

{data?.eWayBillNumber}

+
+ +
+ PO No: +

{data?.purchaseOrderNumber}

+
+
+ + {/* Right column */} +
+
+ Invoice Date: +

+ {formatUTCToLocalTime(data?.invoiceDate)} +

+
+ +
+ Proforma Date: +

+ {formatUTCToLocalTime(data?.proformaInvoiceDate)} +

+
+ +
+ E-Way Date: +

+ {formatUTCToLocalTime(data?.eWayBillDate)} +

+
+ +
+ PO Date: +

+ {formatUTCToLocalTime(data?.purchaseOrderDate)} +

+
+
+
+
+
+ +
+
+

Amount Summary

+ +
+ Base Amount +

₹ {data?.baseAmount}

+
+ +
+ Tax +

₹ {data?.taxAmount}

+
+ +
+ Transport +

₹ {data?.transportCharges}

+
+ +
+ +
+ Total + ₹ {data?.totalAmount} +
+ +
+ Due Date: +

+ {formatUTCToLocalTime(data?.paymentDueDate)} +

+
+
+
+ +
+
+
+

Billing Address

+ +

{data?.billingAddress || "-"}

+
+
+ +
+
+

Shipping Address

+

{data?.shippingAddress || "-"}

+
+
+
+
+ ); +}; + +export default ViewPurchase; diff --git a/src/hooks/usePurchase.jsx b/src/hooks/usePurchase.jsx index ce9dd87c..2cd4fc7f 100644 --- a/src/hooks/usePurchase.jsx +++ b/src/hooks/usePurchase.jsx @@ -38,6 +38,7 @@ export const usePurchase = (id) => { const resp = await PurchaseRepository.GetPurchase(id); return resp.data; }, + enabled: !!id, }); }; diff --git a/src/pages/purchase/PurchasePage.jsx b/src/pages/purchase/PurchasePage.jsx index 7beeaa96..95c00523 100644 --- a/src/pages/purchase/PurchasePage.jsx +++ b/src/pages/purchase/PurchasePage.jsx @@ -4,6 +4,7 @@ import showToast from "../../services/toastService"; import GlobalModel from "../../components/common/GlobalModel"; import ManagePurchase from "../../components/purchase/ManagePurchase"; import PurchaseList from "../../components/purchase/PurchaseList"; +import ViewPurchase from "../../components/purchase/ViewPurchase"; export const PurchaseContext = createContext(); export const usePurchaseContext = () => { @@ -13,11 +14,20 @@ export const usePurchaseContext = () => { showToast("Please use Innne cntext", "warning"); window.location = "/dashboard"; } + return context; }; const PurchasePage = () => { + const [searchText, setSearchText] = useState(""); const [addePurchase, setAddedPurchase] = useState(false); + const [viewPurchaseState, setViewPurchase] = useState({ + isOpen: false, + purchaseId: null, + }); - const contextValue = {}; + const contextValue = { + setViewPurchase, + }; + console.log(ViewPurchase); return (
@@ -30,7 +40,20 @@ const PurchasePage = () => { />
- +
+ {" "} + +
+
- + + {addePurchase && ( + setAddedPurchase(false)} + > + setAddedPurchase(false)} /> + + )} - setAddedPurchase(false)} - > - setAddedPurchase(false)} /> - + {viewPurchaseState.isOpen && ( + + setViewPurchase({ isOpen: false, purchaseId: null }) + } + > + + + )}
); diff --git a/src/repositories/PurchaseRepository.jsx b/src/repositories/PurchaseRepository.jsx index be3d871b..de4a033e 100644 --- a/src/repositories/PurchaseRepository.jsx +++ b/src/repositories/PurchaseRepository.jsx @@ -7,7 +7,9 @@ export const PurchaseRepository = { `/api/PurchaseInvoice/list?pageSize=${pageSize}&pageNumber=${pageNumber}&isActive=${isActive}&filter=${filter}&searchString=${searchString}` ), - GetPurchase:(id)=>api.get(`/api/PurchaseInvoice/details/${id}`) + GetPurchase: (id) => api.get(`/api/PurchaseInvoice/details/${id}`), + UpdatePurchase: (id, data) => + api.patch(`/api/PurchaseInvoice/edit/${id}`, data), }; // const filterPayload = JSON.stringify({