admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Finance_Export_Functionality

Browse Source
This commit is contained in:
Kartik Sharma 2025-11-27 17:57:56 +05:30
commit a791007561
26 changed files with 1710 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" dir="ltr" <html lang="en" lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact layout-menu-collapsed " dir="ltr"
data-theme="theme-default" data-assets-path="/assets/" data-template="vertical-menu-template" data-style="light"> data-theme="theme-default" data-assets-path="/assets/" data-template="vertical-menu-template" data-style="light">
<!-- layout-menu-collapsed layout-menu-hover -->
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

12
public/assets/css/core-extend.css
View File

@ -11,6 +11,18 @@
top: var(--sticky-top, 0px) !important; top: var(--sticky-top, 0px) !important;
z-index: 1025; z-index: 1025;
} }
.form-control-md {
min-height: calc(1.6em + 0.65rem + calc(var(--bs-border-width) * 2));
padding: 0.18rem 0.60rem;
font-size: 0.875rem; /* ~14px */
border-radius: var(--bs-border-radius);
}
.form-control-md::file-selector-button {
padding: 0.32rem 0.75rem;
margin: -0.32rem -0.75rem;
margin-inline-end: 0.75rem;
}
/* ===========================% Background_Colors %========================================================== */ /* ===========================% Background_Colors %========================================================== */

2
public/assets/css/default.css
View File

@ -31,7 +31,7 @@
} }
.app-brand-text { .app-brand-text {
font-size: 1.75rem; font-size: 1rem;
letter-spacing: -0.5px; letter-spacing: -0.5px;
/* text-transform: lowercase; */ /* text-transform: lowercase; */
} }

36
public/assets/js/main.js
View File

@ -148,5 +148,41 @@ function Main () {
wheelPropagation: false wheelPropagation: false
}); });
} }
}; };
document.addEventListener("DOMContentLoaded", function () {
const html = document.documentElement;
/******************************
* SIDEBAR HOVER BEHAVIOR
******************************/
document.addEventListener("mouseover", function (e) {
const isInsideSidebar = e.target.closest("#layout-menu");
if (isInsideSidebar && html.classList.contains("layout-menu-collapsed")) {
html.classList.add("layout-menu-hover");
}
});
document.addEventListener("mouseout", function (e) {
const leftSidebar = !e.relatedTarget || !e.relatedTarget.closest("#layout-menu");
if (leftSidebar) {
html.classList.remove("layout-menu-hover");
}
});
/******************************
* TOGGLE MENU BUTTON OVERRIDE
******************************/
document.body.addEventListener("click", function (e) {
const btn = e.target.closest(".layout-menu-toggle");
if (!btn) return;
e.preventDefault();
html.classList.toggle("layout-menu-collapsed");
html.classList.remove("layout-menu-hover");
});
});

28
src/components/Layout/Sidebar.jsx
View File

@ -25,20 +25,28 @@ const Sidebar = () => {
/> />
</span> */} </span> */}
<small <a
className="app-brand-link fw-bold navbar-brand text-green fs-6" href="/"
className="app-brand-link d-flex align-items-center gap-1 fw-bold navbar-brand "
> >
<span className="app-brand-logo demo"> <span className="app-brand-logo demo d-flex align-items-center">
<img src="/img/brand/marco.png" width="50" /> <img
src="/img/brand/marco.png"
width="40"
height="40"
alt="OnFieldWork logo"
/>
</span> </span>
<span className="text-blue">OnField</span>
<span>Work</span> <span className="app-brand-text">
<span className="text-dark">.com</span> <span className="text-primary ">OnField</span>
</small> <span className="mx-1">Work</span>
<span className="text-dark">.com</span>
</span>
</a>
</Link> </Link>
<small className="layout-menu-toggle menu-link text-large ms-auto"> <small className="layout-menu-toggle menu-link text-large ms-auto cursor-pointer">
<i className="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i> <i className="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
</small> </small>
</div> </div>

31
src/components/ServiceProject/Jobs.jsx
View File

@ -62,15 +62,27 @@ const Jobs = () => {
<div className="card page-min-h my-2 px-7 pb-4"> <div className="card page-min-h my-2 px-7 pb-4">
<div className="row align-items-center py-4"> <div className="row align-items-center py-4">
{/* LEFT — Tabs */} {/* LEFT — Archive / Unarchive Toggle */}
<div className="col-12 col-md-6 text-start"> <div className="col-12 col-md-6 text-start">
<button <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
type="button" <button
className={`btn btn-sm ${showArchive ? "btn-secondary" : "btn-outline-secondary"}`} type="button"
onClick={() => setShowArchive(!showArchive)} className={`btn px-3 py-1 rounded-0 text-tiny ${!showArchive ? "btn-primary text-white" : ""
> }`}
<i className="bx bx-archive bx-sm me-1 mt-1"></i> Archived onClick={() => setShowArchive(false)}
</button> >
<i className="bx bx-archive-out me-1"></i> Active Jobs
</button>
<button
type="button"
className={`btn px-3 py-1 rounded-0 text-tiny ${showArchive ? "btn-primary text-white" : ""
}`}
onClick={() => setShowArchive(true)}
>
<i className="bx bx-archive me-1"></i> Archived
</button>
</div>
</div> </div>
{/* RIGHT — New Job button */} {/* RIGHT — New Job button */}
@ -79,9 +91,10 @@ const Jobs = () => {
className="btn btn-sm btn-primary" className="btn btn-sm btn-primary"
onClick={() => setManageJob({ isOpen: true, jobId: null })} onClick={() => setManageJob({ isOpen: true, jobId: null })}
> >
<i className="bx bx-plus-circle bx-md me-2"></i>New Job <i className="bx bx-plus-circle bx-md me-2"></i> New Job
</button> </button>
</div> </div>
</div> </div>
{/* Job List */} {/* Job List */}

31
src/components/ServiceProject/ServiceProjectJob/ManageJob.jsx
View File

@ -173,6 +173,20 @@ const ManageJob = ({ Job }) => {
<div className="container"> <div className="container">
<AppFormProvider {...methods}> <AppFormProvider {...methods}>
<form className="row text-start" onSubmit={handleSubmit(onSubmit)}> <form className="row text-start" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12">
<SelectFieldSearch
label="Select Branch"
placeholder="Select Branch"
value={watch("projectBranchId")}
onChange={(val) => setValue("projectBranchId", val)}
valueKey="id"
labelKey="branchName"
hookParams={[projectId, true, 10, 1]}
useFetchHook={useBranches}
isMultiple={false}
disabled={Job}
/>
</div>
<div className="col-12 col-md-12 mb-2 "> <div className="col-12 col-md-12 mb-2 ">
<Label required>Title</Label> <Label required>Title</Label>
<input <input
@ -245,20 +259,7 @@ const ManageJob = ({ Job }) => {
placeholder="Enter Tag" placeholder="Enter Tag"
/> />
</div> </div>
<div className="col-12 col-md-6 mb-2 mb-md-4">
<SelectFieldSearch
label="Select Branch"
placeholder="Select Branch"
value={watch("projectBranchId")}
onChange={(val) => setValue("projectBranchId", val)}
valueKey="id"
labelKey="branchName"
hookParams={[projectId, true, 10, 1]}
useFetchHook={useBranches}
isMultiple={false}
disabled={Job}
/>
</div>
<div className="col-12"> <div className="col-12">
<Label required>Description</Label> <Label required>Description</Label>
<textarea <textarea
@ -277,7 +278,7 @@ const ManageJob = ({ Job }) => {
? "Please wait..." ? "Please wait..."
: Job : Job
? "Update" ? "Update"
: "Submit"} : "Assign"}
</button> </button>
</div> </div>
</form> </form>

170
src/components/common/Forms/SelectFieldServerSide.jsx
View File

@ -200,7 +200,9 @@ export const SelectProjectField = ({
isFullObject = false, isFullObject = false,
isMultiple = false, isMultiple = false,
isAllProject = false, isAllProject = false,
disabled disabled,
className,
errors,
}) => { }) => {
const [searchText, setSearchText] = useState(""); const [searchText, setSearchText] = useState("");
const debounce = useDebounce(searchText, 300); const debounce = useDebounce(searchText, 300);
@ -303,7 +305,10 @@ export const SelectProjectField = ({
</span> </span>
</button> </button>
{/* DROPDOWN */} {errors?.projectId && (
<div className="danger-text">{errors.projectId.message}</div>
)}
{open && ( {open && (
<ul <ul
className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded" className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded"
@ -326,6 +331,7 @@ export const SelectProjectField = ({
placeholder="Search..." placeholder="Search..."
/> />
</div> </div>
<div className="overflow-auto px-1" style={{ maxHeight: "200px" }}>
{isLoading && ( {isLoading && (
<li className="dropdown-item text-muted text-center">Loading...</li> <li className="dropdown-item text-muted text-center">Loading...</li>
@ -358,6 +364,7 @@ export const SelectProjectField = ({
</li> </li>
); );
})} })}
</div>
</ul> </ul>
)} )}
</div> </div>
@ -366,7 +373,7 @@ export const SelectProjectField = ({
export const SelectFieldSearch = ({ export const SelectFieldSearch = ({
label = "Select", label = "Select",
placeholder = "Select ", placeholder = "Select",
required = false, required = false,
value = null, value = null,
onChange, onChange,
@ -377,6 +384,7 @@ export const SelectFieldSearch = ({
isMultiple = false, isMultiple = false,
hookParams, hookParams,
useFetchHook, useFetchHook,
errors = null,
}) => { }) => {
const [searchText, setSearchText] = useState(""); const [searchText, setSearchText] = useState("");
const debounce = useDebounce(searchText, 300); const debounce = useDebounce(searchText, 300);
@ -386,108 +394,75 @@ export const SelectFieldSearch = ({
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const dropdownRef = useRef(null); const dropdownRef = useRef(null);
const getDisplayName = (entity) => { const getDisplayName = (entity) =>
if (!entity) return ""; entity ? `${entity[labelKey] || ""}`.trim() : "";
return `${entity[labelKey] || ""}`.trim();
};
/** ----------------------------- /** ----------------------------- SELECTED OPTION ----------------------------- */
* SELECTED OPTION (SINGLE)
* ----------------------------- */
let selectedSingle = null; let selectedSingle = null;
if (!isMultiple) { if (!isMultiple) {
if (isFullObject && value) selectedSingle = value; if (isFullObject && value) selectedSingle = value;
else if (!isFullObject && value) else if (!isFullObject && value)
selectedSingle = options.find((o) => o[valueKey] === value); selectedSingle = options.find((o) => o[valueKey] === value);
} }
/** -----------------------------
* SELECTED OPTION (MULTIPLE)
* ----------------------------- */
let selectedList = []; let selectedList = [];
if (isMultiple && Array.isArray(value)) { if (isMultiple && Array.isArray(value)) {
if (isFullObject) selectedList = value; selectedList = isFullObject
else { ? value
selectedList = options.filter((opt) => value.includes(opt[valueKey])); : options.filter((opt) => value.includes(opt[valueKey]));
}
} }
/** Main button label */
const displayText = !isMultiple const displayText = !isMultiple
? getDisplayName(selectedSingle) || placeholder ? getDisplayName(selectedSingle) || placeholder
: selectedList.length > 0 : selectedList.length
? selectedList.map((e) => getDisplayName(e)).join(", ") ? selectedList.map((e) => getDisplayName(e)).join(", ")
: placeholder; : placeholder;
/** ----------------------------- /** ----------------------------- OUTSIDE CLICK ----------------------------- */
* HANDLE OUTSIDE CLICK
* ----------------------------- */
useEffect(() => { useEffect(() => {
const handleClickOutside = (e) => { const handleClickOutside = (e) => {
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) { if (dropdownRef.current && !dropdownRef.current.contains(e.target))
setOpen(false); setOpen(false);
}
}; };
document.addEventListener("mousedown", handleClickOutside); document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside);
}, []); }, []);
// MERGED OPTIONS TO ENSURE SELECTED VALUE APPEARS EVEN IF NOT IN SEARCH RESULT /** ----------------------------- MERGED OPTIONS ----------------------------- */
const [mergedOptions, setMergedOptions] = useState([]); const [mergedOptions, setMergedOptions] = useState(options);
useEffect(() => { useEffect(() => {
let finalList = [...options]; let finalList = [...options];
if (!isMultiple && value && !isFullObject) { if (!isMultiple && value && !isFullObject && typeof value === "object") {
// already selected option inside options? const exists = options.some((o) => o[valueKey] === value[valueKey]);
const exists = options.some((o) => o[valueKey] === value); if (!exists) finalList.unshift(value);
// if selected item not found, try to get from props (value) as fallback
if (!exists && typeof value === "object") {
finalList.unshift(value);
}
} }
if (isMultiple && Array.isArray(value)) { if (isMultiple && Array.isArray(value)) {
value.forEach((val) => { value.forEach((val) => {
const id = isFullObject ? val[valueKey] : val; const id = isFullObject ? val[valueKey] : val;
const exists = options.some((o) => o[valueKey] === id); const exists = options.some((o) => o[valueKey] === id);
if (!exists && typeof val === "object") finalList.unshift(val);
if (!exists && typeof val === "object") {
finalList.unshift(val);
}
}); });
} }
setMergedOptions(finalList); // Only update if different to avoid infinite loop
}, [options, value]); const oldKeys = mergedOptions.map((o) => o[valueKey]).join(",");
const newKeys = finalList.map((o) => o[valueKey]).join(",");
if (oldKeys !== newKeys) setMergedOptions(finalList);
}, [options, value, isMultiple, isFullObject, valueKey, mergedOptions]);
/** ----------------------------- /** ----------------------------- HANDLE SELECT ----------------------------- */
* HANDLE SELECT
* ----------------------------- */
const handleSelect = (option) => { const handleSelect = (option) => {
if (!isMultiple) { if (!isMultiple) {
// SINGLE SELECT onChange(isFullObject ? option : option[valueKey]);
if (isFullObject) onChange(option);
else onChange(option[valueKey]);
} else { } else {
// MULTIPLE SELECT
let updated = [];
const exists = selectedList.some((e) => e[valueKey] === option[valueKey]); const exists = selectedList.some((e) => e[valueKey] === option[valueKey]);
const updated = exists
if (exists) { ? selectedList.filter((e) => e[valueKey] !== option[valueKey])
// remove : [...selectedList, option];
updated = selectedList.filter((e) => e[valueKey] !== option[valueKey]); onChange(isFullObject ? updated : updated.map((x) => x[valueKey]));
} else {
// add
updated = [...selectedList, option];
}
if (isFullObject) onChange(updated);
else onChange(updated.map((x) => x[valueKey]));
} }
}; };
@ -499,10 +474,9 @@ export const SelectFieldSearch = ({
</Label> </Label>
)} )}
{/* MAIN BUTTON */}
<button <button
type="button" type="button"
className={`select2-icons form-select d-flex align-items-center justify-content-between ${ className={`select2-icons form-select d-flex align-items-center justify-content-between ${
open ? "show" : "" open ? "show" : ""
}`} }`}
disabled={disabled} disabled={disabled}
@ -513,17 +487,17 @@ export const SelectFieldSearch = ({
</span> </span>
</button> </button>
{/* DROPDOWN */} {errors && <div className="danger-text">{errors.message}</div>}
{open && ( {open && (
<ul <ul
className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded overflow-x-hidden" className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded rounded-top-0 overflow-x-hidden"
style={{ style={{
position: "absolute", position: "absolute",
top: "100%", top: "100%",
left: 0, left: 0,
zIndex: 1050, zIndex: 1050,
marginTop: "2px", marginTop: "1px",
borderRadius: "0.375rem",
overflow: "hidden", overflow: "hidden",
}} }}
> >
@ -537,36 +511,40 @@ export const SelectFieldSearch = ({
disabled={disabled} disabled={disabled}
/> />
</div> </div>
<div className="overflow-auto px-1" style={{ maxHeight: "200px" }}>
{isLoading && (
<li className="dropdown-item text-muted text-center">
Loading...
</li>
)}
{!isLoading && mergedOptions.length === 0 && (
<li className="dropdown-item text-muted text-center">
No results found
</li>
)}
{isLoading && ( {!isLoading &&
<li className="dropdown-item text-muted text-center">Loading...</li> mergedOptions.map((option) => {
)} const isActive = isMultiple
? selectedList.some((x) => x[valueKey] === option[valueKey])
: selectedSingle &&
selectedSingle[valueKey] === option[valueKey];
{!isLoading && options.length === 0 && ( return (
<li className="dropdown-item text-muted text-center"> <li key={option[valueKey]}>
No results found <button
</li> type="button"
)} className={`dropdown-item rounded ${
isActive ? "active" : ""
{!isLoading && }`}
options.map((option) => { onClick={() => handleSelect(option)}
const isActive = isMultiple >
? selectedList.some((x) => x[valueKey] === option[valueKey]) {getDisplayName(option)}
: selectedSingle && </button>
selectedSingle[valueKey] === option[valueKey]; </li>
);
return ( })}
<li key={option[valueKey]}> </div>
<button
type="button"
className={`dropdown-item ${isActive ? "active" : ""}`}
onClick={() => handleSelect(option)}
>
{getDisplayName(option)}
</button>
</li>
);
})}
</ul> </ul>
)} )}
</div> </div>

1
src/components/common/InputSuggestion.jsx
View File

@ -50,7 +50,6 @@ const InputSuggestions = ({
{filteredList.map((org) => ( {filteredList.map((org) => (
<li <li
key={org} key={org}
className="ropdown-item"
style={{ style={{
cursor: "pointer", cursor: "pointer",
padding: "5px 12px", padding: "5px 12px",

150
src/components/purchase/ManagePurchase.jsx Normal file
View File

@ -0,0 +1,150 @@
import React, { useState } from "react";
import { AppFormProvider, useAppForm } from "../../hooks/appHooks/useAppForm";
import { zodResolver } from "@hookform/resolvers/zod";
import {
defaultPurchaseValue,
PurchaseSchema,
getStepFields,
} from "./PurchaseSchema";
import PurchasePartyDetails from "./PurchasePartyDetails";
import PurchaseTransportDetails from "./PurchaseTransportDetails";
import PurchasePaymentDetails from "./PurchasePaymentDetails";
import { useCreatePurchaseInvoice } from "../../hooks/usePurchase";
const ManagePurchase = ({ onClose }) => {
const [activeTab, setActiveTab] = useState(0);
const [completedTabs, setCompletedTabs] = useState([]);
const stepsConfig = [
{
name: "Party Details",
icon: "bx bx-user bx-md",
subtitle: "Supplier & project information",
component: <PurchasePartyDetails />,
},
{
name: "Invoice & Transport",
icon: "bx bx-receipt bx-md",
subtitle: "Invoice, eWay bill & transport info",
component: <PurchaseTransportDetails />,
},
{
name: "Payment Details",
icon: "bx bx-credit-card bx-md",
subtitle: "Amount, tax & due date",
component: <PurchasePaymentDetails />,
},
];
const purchaseOrder = useAppForm({
resolver: zodResolver(PurchaseSchema),
defaultValues: defaultPurchaseValue,
mode: "onChange",
});
const {reset} = purchaseOrder;
const handleNext = async () => {
const currentStepFields = getStepFields(activeTab);
const valid = await purchaseOrder.trigger(currentStepFields);
if (valid) {
setCompletedTabs((prev) => [...new Set([...prev, activeTab])]);
setActiveTab((prev) => Math.min(prev + 1, stepsConfig.length - 1));
}
};
const handlePrev = () => {
setActiveTab((prev) => Math.max(prev - 1, 0));
};
const { mutate: CreateInvoice, isPending } = useCreatePurchaseInvoice(() => {
reset()
onClose();
});
const onSubmit = (formData) => {
let payload = formData;
CreateInvoice(payload);
};
return (
<div
id="wizard-property-listing"
className="bs-stepper horizontically mt-2 b-secondry px-1 py-1 shadow-none border-0"
>
{/* Header */}
<div className="bs-stepper-header text-start px-0 py-1">
{stepsConfig.map((step, index) => {
const isActive = activeTab === index;
const isCompleted = completedTabs.includes(index);
return (
<React.Fragment key={step.name}>
<div
className={`step ${isActive ? "active" : ""} ${
isCompleted ? "crossed" : ""
}`}
>
<button type="button" className="step-trigger">
<span className="bs-stepper-circle">
{isCompleted ? (
<i className="bx bx-check"></i>
) : (
<i className={step.icon}></i>
)}
</span>
<span className="bs-stepper-label">
<span className="bs-stepper-title">{step.name}</span>
<span className="bs-stepper-subtitle">{step.subtitle}</span>
</span>
</button>
</div>
{index < stepsConfig.length - 1 && (
<div className="line text-primary"></div>
)}
</React.Fragment>
);
})}
</div>
{/* Content */}
<div className="bs-stepper-content py-2">
<AppFormProvider {...purchaseOrder}>
<form onSubmit={purchaseOrder.handleSubmit(onSubmit)}>
{stepsConfig[activeTab].component}
<div className="d-flex justify-content-between mt-4">
<button
type="button"
className="btn btn-sm btn-outline-secondary"
onClick={handlePrev}
disabled={activeTab === 0}
>
Previous
</button>
<di>
{activeTab < stepsConfig.length - 1 ? (
<button
type="button"
className="btn btn-sm btn-primary"
onClick={handleNext}
>
Next <i className="bx bx-sm bx-right-arrow"></i>
</button>
) : (
<button type="submit" className="btn btn-sm btn-primary">
{isPending ? "Please Wait" : "SUbmit"}
</button>
)}
</di>
</div>
</form>
</AppFormProvider>
</div>
</div>
);
};
export default ManagePurchase;

140
src/components/purchase/PurchaseList.jsx Normal file
View File

@ -0,0 +1,140 @@
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 = ({ searchString }) => {
const { setViewPurchase } = usePurchaseContext();
const [currentPage, setCurrentPage] = useState(1);
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 (
<div className="card mt-2">
<div className="table-responsive px-3">
<table className="datatables-users table border-top text-nowrap">
<thead>
<tr>
{visibleColumns.map((col) => (
<th key={col.key} colSpan={col.colSpan || 1}>
<div className={col.className || ""}>{col.label}</div>
</th>
))}
<th>Action</th>
</tr>
</thead>
<tbody>
{/* LOADING */}
{isLoading && (
<tr>
<td colSpan={3} colSpan={visibleColumns.length}>
<div className="py-6 py-12">
<SpinnerLoader />
</div>
</td>
</tr>
)}
{!isLoading && data?.data?.length === 0 && (
<tr>
<td
colSpan={visibleColumns.length}
className="text-center py-4"
colSpan={4}
>
No Data Found
</td>
</tr>
)}
{!isLoading &&
data?.data?.map((item, index) => (
<tr key={item?.id || index}>
{visibleColumns.map((col) => (
<td key={col.key} className={col.className || ""}>
{col.render ? col.render(item) : item[col.key] || "NA"}
</td>
))}
<td>
<div className="dropdown z-2">
<button
type="button"
className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i
className="bx bx-dots-vertical-rounded bx-sm text-muted"
data-bs-toggle="tooltip"
data-bs-offset="0,8"
data-bs-placement="top"
data-bs-custom-class="tooltip-dark"
title="More Action"
></i>
</button>
<ul className="dropdown-menu dropdown-menu-end">
<li>
<a
className="dropdown-item cursor-pointer"
onClick={() =>
setViewPurchase({
isOpen: true,
purchaseId: item.id,
})
}
>
<i className="bx bx-eye me-2"></i>
<span className="align-left">view</span>
</a>
</li>
<li>
<a className="dropdown-item cursor-pointer">
<i className="bx bx-trash me-2"></i>
<span className="align-left">Add</span>
</a>
</li>
<li>
<a className="dropdown-item cursor-pointer">
<i className="bx bx-trash me-2"></i>
<span className="align-left">Delete</span>
</a>
</li>
</ul>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
{data?.data?.length > 0 && (
<Pagination
currentPage={currentPage}
totalPages={data.totalPages}
onPageChange={paginate}
/>
)}
</div>
);
};
export default PurchaseList;

242
src/components/purchase/PurchasePartyDetails.jsx Normal file
View File

@ -0,0 +1,242 @@
import React from "react";
import { AppFormController, useAppFormContext } from "../../hooks/appHooks/useAppForm";
import Label from "../common/Label";
import DatePicker from "../common/DatePicker";
import {
SelectFieldSearch,
SelectProjectField,
} from "../common/Forms/SelectFieldServerSide";
import { useGlobaleOrganizations, useOrganization, useOrganizationsList } from "../../hooks/useOrganization";
import { ITEMS_PER_PAGE } from "../../utils/constants";
const PurchasePartyDetails = () => {
const {
register,
control,
setValue,
watch,
formState: { errors },
} = useAppFormContext();
return (
<div className="row g-2 text-start">
{/* Title */}
<div className="col-12 col-md-6">
<Label htmlFor="title" required>
Title
</Label>
<input
id="title"
type="text"
className={`form-control form-control-md ${
errors?.title ? "is-invalid" : ""
}`}
{...register("title")}
/>
{errors?.title && (
<div className="danger-text">{errors.title.message}</div>
)}
</div>
{/* Project ID */}
<div className="col-12 col-md-6">
<SelectProjectField
className={`form-control form-control-md ${
errors?.projectId ? "is-invalid" : ""
}`}
label="Project"
required
placeholder="Select Project"
value={watch("projectId")}
onChange={(val) =>
setValue("projectId", val, {
shouldDirty: true,
shouldValidate: true,
})
}
errors={errors}
/>
</div>
{/* Organization */}
<div className="col-12 col-md-6">
{/* <input
id="organizationId"
type="text"
className={`form-control form-control-md `}
{...register("organizationId")}
/> */}
<AppFormController
name="organizationId"
control={control}
render={({ field }) => (
<SelectFieldSearch
label="Organization"
placeholder="Select Organization"
required
value={field.value}
onChange={field.onChange}
valueKey="id"
labelKey="name"
useFetchHook={useGlobaleOrganizations}
hookParams={[ITEMS_PER_PAGE,1]}
errors={errors?.organizationId}
/>
)}
/>
</div>
{/* Supplier */}
<div className="col-12 col-md-6">
<AppFormController
name="supplierId"
control={control}
render={({ field }) => (
<SelectFieldSearch
label="Supplier"
placeholder="Select Organization"
required
value={field.value}
onChange={field.onChange}
valueKey="id"
labelKey="name"
useFetchHook={useGlobaleOrganizations}
hookParams={[ITEMS_PER_PAGE,1]}
errors={errors?.organizationId}
/>
)}
/>
{errors?.supplierId && (
<div className="danger-text">{errors.supplierId.message}</div>
)}
</div>
{/* Billing Address */}
<div className="col-12 col-md-6">
<Label htmlFor="billingAddress">Billing Address</Label>
<textarea
id="billingAddress"
rows="2"
className={`form-control form-control-md `}
{...register("billingAddress")}
/>
{errors?.billingAddress && (
<div className="danger-text">{errors.billingAddress.message}</div>
)}
</div>
<div className="col-12 col-md-6">
<Label htmlFor="shippingAddress">Shipping Address</Label>
<textarea
id="shippingAddress"
rows="2"
className={`form-control form-control-md `}
{...register("shippingAddress")}
/>
{errors?.shippingAddress && (
<div className="danger-text">{errors.shippingAddress.message}</div>
)}
</div>
{/* Purchase Order Number */}
<div className="col-12 col-md-6">
<Label htmlFor="purchaseOrderNumber" required>
Purchase Order Number
</Label>
<input
id="purchaseOrderNumber"
type="text"
className={`form-control form-control-md `}
{...register("purchaseOrderNumber")}
/>
{errors?.purchaseOrderNumber && (
<div className="danger-text">
{errors.purchaseOrderNumber.message}
</div>
)}
</div>
{/* Purchase Order Date */}
<div className="col-12 col-md-6">
<Label htmlFor="purchaseOrderDate" required>
Purchase Order Date
</Label>
<DatePicker
control={control}
name="purchaseOrderDate"
className={` w-full ${
errors?.purchaseOrderDate ? "is-invalid" : ""
}`}
/>
{errors?.purchaseOrderDate && (
<div className="danger-text">{errors.purchaseOrderDate.message}</div>
)}
</div>
{/* Proforma Invoice */}
<div className="col-12 col-md-6">
<Label htmlFor="proformaInvoiceNumber">Proforma Invoice Number</Label>
<input
id="proformaInvoiceNumber"
type="text"
className={`form-control `}
{...register("proformaInvoiceNumber")}
/>
{errors?.proformaInvoiceNumber && (
<div className="danger-text">
{errors.proformaInvoiceNumber.message}
</div>
)}
</div>
<div className="col-12 col-md-6">
<Label htmlFor="proformaInvoiceAmountt">Proforma Amount</Label>
<input
id="proformaInvoiceAmount"
type="text"
className={`form-control `}
{...register("proformaInvoiceAmount")}
/>
{errors?.proformaInvoiceAmountt && (
<div className="danger-text">
{errors.proformaInvoiceAmount.message}
</div>
)}
</div>
<div className="col-12 col-md-6">
<Label htmlFor="proformaInvoiceDate">Proforma Date</Label>
<DatePicker
control={control}
name="proformaInvoiceDate"
className="w-full"
/>
{errors?.proformaInvoiceDate && (
<div className="danger-text">
{errors.proformaInvoiceDate.message}
</div>
)}
</div>
</div>
);
};
export default PurchasePartyDetails;

144
src/components/purchase/PurchasePaymentDetails.jsx Normal file
View File

@ -0,0 +1,144 @@
import React, { useEffect } from "react";
import Label from "../common/Label";
import { useAppFormContext } from "../../hooks/appHooks/useAppForm";
import DatePicker from "../common/DatePicker";
import { useInvoiceAttachmentTypes } from "../../hooks/masterHook/useMaster";
const PurchasePaymentDetails = () => {
const { data, isLoading, error, isError } = useInvoiceAttachmentTypes();
const {
register,
watch,
setValue,
control,
formState: { errors },
} = useAppFormContext();
const baseAmount = watch("baseAmount");
const taxAmount = watch("taxAmount");
useEffect(() => {
const base = parseFloat(baseAmount) || 0;
const tax = parseFloat(taxAmount) || 0;
if (base || tax) {
setValue("totalAmount", (base + tax).toFixed(2));
}
}, [baseAmount, taxAmount, setValue]);
return (
<div className="row g-2 text-start">
<div className="col-12 col-md-4">
<Label htmlFor="baseAmount" required>
Base Amount
</Label>
<input
id="baseAmount"
type="number"
className="form-control form-control-md"
{...register("baseAmount")}
/>
{errors?.baseAmount && (
<div className="small danger-text mt-1">
{errors.baseAmount.message}
</div>
)}
</div>
<div className="col-12 col-md-4">
<Label htmlFor="taxAmount" required>
Tax Amount
</Label>
<input
id="taxAmount"
type="number"
className="form-control form-control-md"
{...register("taxAmount")}
/>
{errors?.taxAmount && (
<div className="small danger-text mt-1">
{errors.taxAmount.message}
</div>
)}
</div>
<div className="col-12 col-md-4">
<Label htmlFor="totalAmount" required>
Total Amount
</Label>
<input
id="totalAmount"
type="number"
className="form-control form-control-md"
{...register("totalAmount")}
readOnly
/>
{errors?.totalAmount && (
<div className="small danger-text mt-1">
{errors.totalAmount.message}
</div>
)}
</div>
<div className="col-12 col-md-6">
<Label htmlFor="transportCharges">Transport Charges</Label>
<input
id="transportCharges"
type="number"
className="form-control form-control-md"
{...register("transportCharges")}
/>
{errors?.transportCharges && (
<div className="small danger-text mt-1">
{errors.transportCharges.message}
</div>
)}
</div>
<div className="col-12 col-md-6">
<Label htmlFor="paymentDueDate">Payment Due Date</Label>
<DatePicker
name={"paymentDueDate"}
control={control}
className="w-full"
/>
{errors?.paymentDueDate && (
<div className="small danger-text mt-1">
{errors.paymentDueDate.message}
</div>
)}
</div>
<div className="col-12">
<Label htmlFor="description" required>
Description
</Label>
<textarea
id="description"
rows="3"
className="form-control form-control-md"
{...register("description")}
/>
{errors?.description && (
<div className="small danger-text mt-1">
{errors.description.message}
</div>
)}
</div>
</div>
);
};
export default PurchasePaymentDetails;

146
src/components/purchase/PurchaseSchema.jsx Normal file
View File

@ -0,0 +1,146 @@
import { z } from "zod";
import { normalizeAllowedContentTypes } from "../../utils/appUtils";
export const AttachmentSchema = (allowedContentType, maxSizeAllowedInMB) => {
const allowedTypes = normalizeAllowedContentTypes(allowedContentType);
return z.object({
fileName: z.string().min(1, { message: "File name is required" }),
base64Data: z.string().min(1, { message: "File data is required" }),
invoiceAttachmentTypeId: z
.string()
.min(1, { message: "File data is required" }),
contentType: z
.string()
.min(1, { message: "MIME type is required" })
.refine(
(val) => (allowedTypes.length ? allowedTypes.includes(val) : true),
{
message: `File type must be one of: ${allowedTypes.join(", ")}`,
}
),
fileSize: z
.number()
.int()
.nonnegative("fileSize must be ≥ 0")
.max(
(maxSizeAllowedInMB ?? 25) * 1024 * 1024,
`fileSize must be ≤ ${maxSizeAllowedInMB ?? 25}MB`
),
description: z.string().optional().default(""),
isActive: z.boolean(),
});
};
export const PurchaseSchema = z.object({
title: z.string().min(1, { message: "Title is required" }),
projectId: z.string().min(1, { message: "Project is required" }),
organizationId: z.string().min(1, { message: "Organization is required" }),
billingAddress: z.string().min(1, { message: "Address is required" }),
shippingAddress: z.string().min(1, { message: "Address is required" }),
purchaseOrderNumber: z.string().nullable(),
purchaseOrderDate: z.coerce.date().nullable(),
supplierId: z.string().min(1, { message: "Supplier is required" }),
proformaInvoiceNumber: z.string().nullable(),
proformaInvoiceDate: z.coerce.date().nullable(),
proformaInvoiceAmount: z.string().nullable(),
invoiceNumber: z.string().nullable(),
invoiceDate: z.coerce.date().nullable(),
eWayBillNumber: z.string().nullable(),
eWayBillDate: z.coerce.date().nullable(),
invoiceReferenceNumber: z.string().nullable(),
acknowledgmentDate: z.coerce.date().nullable(),
acknowledgmentNumber: z.string().nullable(),
baseAmount: z.string().min(1, { message: "Base amount is required" }),
taxAmount: z.string().min(1, { message: "Tax amount is required" }),
totalAmount: z.string().min(1, { message: "Total amount is required" }),
paymentDueDate: z.coerce.date().nullable(),
transportCharges: z.string().nullable(),
description: z.string().min(1, { message: "Description is required" }),
attachments: z.array(AttachmentSchema([], 25)).optional(),
});
// deliveryChallanNo: z
// .string()
// .min(1, { message: "Delivery Challan No is required" }),
// deliveryDate: z.string().min(1, { message: "Delevery Date is required" }),
// shippingAddress: z.string().min(1, { message: "Delevery Date is required" }),
export const defaultPurchaseValue = {
title: "",
projectId: "",
organizationId: "",
billingAddress: "",
shippingAddress: "",
purchaseOrderNumber: null,
purchaseOrderDate: null,
supplierId: "",
proformaInvoiceNumber: null,
proformaInvoiceDate: null,
proformaInvoiceAmount: null,
invoiceNumber: null,
invoiceDate: null,
eWayBillNumber: null,
eWayBillDate: null,
invoiceReferenceNumber: null,
acknowledgmentNumber: null,
acknowledgmentDate: null,
baseAmount: "",
taxAmount: "",
totalAmount: "",
paymentDueDate: null,
transportCharges: null,
description: "",
attachments: [],
};
export const getStepFields = (stepIndex) => {
const stepFieldMap = {
0: [
"title",
"projectId",
"organizationId",
"supplierId",
"billingAddress",
"shippingAddress",
"purchaseOrderNumber",
"purchaseOrderDate",
"proformaInvoiceNumber",
"proformaInvoiceDate",
"proformaInvoiceAmount",
],
1: [
"invoiceNumber",
"invoiceDate",
"eWayBillNumber",
"eWayBillDate",
"invoiceReferenceNumber",
"acknowledgmentNumber",
"acknowledgmentDate",
],
2: [
"baseAmount",
"taxAmount",
"totalAmount",
"transportCharges",
"paymentDueDate",
"description",
],
};
return stepFieldMap[stepIndex] || [];
};

131
src/components/purchase/PurchaseTransportDetails.jsx Normal file
View File

@ -0,0 +1,131 @@
import React from "react";
import { useAppFormContext } from "../../hooks/appHooks/useAppForm";
import DatePicker from "../common/DatePicker";
import Label from "../common/Label";
const PurchaseTransportDetails = () => {
const {
register,control,
formState: { errors },
} = useAppFormContext();
return (
<div className="row g-2 text-start">
{/* Invoice Number */}
<div className="col-12 col-md-6">
<Label htmlFor="invoiceNumber" required>
Invoice Number
</Label>
<input
id="invoiceNumber"
type="text"
className="form-control form-control-md"
{...register("invoiceNumber")}
/>
{errors?.invoiceNumber && (
<div className="small text-danger mt-1">
{errors.invoiceNumber.message}
</div>
)}
</div>
{/* Invoice Date */}
<div className="col-12 col-md-6">
<Label htmlFor="invoiceDate">Invoice Date</Label>
<DatePicker control={control} name="invoiceDate" className="w-full"/>
{errors?.invoiceDate && (
<div className="small text-danger mt-1">
{errors.invoiceDate.message}
</div>
)}
</div>
{/* E-Way Bill Number */}
<div className="col-12 col-md-6">
<Label htmlFor="eWayBillNumber">E-Way Bill Number</Label>
<input
id="eWayBillNumber"
type="text"
className="form-control form-control-md"
{...register("eWayBillNumber")}
/>
{errors?.eWayBillNumber && (
<div className="small text-danger mt-1">
{errors.eWayBillNumber.message}
</div>
)}
</div>
{/* E-Way Bill Date */}
<div className="col-12 col-md-6">
<Label htmlFor="eWayBillDate">E-Way Bill Date</Label>
<DatePicker control={control} name="eWayBillDate" className="w-full"/>
{errors?.eWayBillDate && (
<div className="small text-danger mt-1">
{errors.eWayBillDate.message}
</div>
)}
</div>
{/* Invoice Reference Number */}
<div className="col-12 col-md-6">
<Label htmlFor="invoiceReferenceNumber">Invoice Reference Number</Label>
<input
id="invoiceReferenceNumber"
type="text"
className="form-control form-control-md"
{...register("invoiceReferenceNumber")}
/>
{errors?.invoiceReferenceNumber && (
<div className="small text-danger mt-1">
{errors.invoiceReferenceNumber.message}
</div>
)}
</div>
{/* Acknowledgment Number */}
<div className="col-12 col-md-6">
<Label htmlFor="acknowledgmentNumber">Acknowledgment Number</Label>
<input
id="acknowledgmentNumber"
type="text"
className="form-control form-control-md"
{...register("acknowledgmentNumber")}
/>
{errors?.acknowledgmentNumber && (
<div className="small text-danger mt-1">
{errors.acknowledgmentNumber.message}
</div>
)}
</div>
<div className="col-12 col-md-6">
<Label htmlFor="acknowledgmentDate">Acknowledgment Date</Label>
<DatePicker control={control} name="acknowledgmentDate" className="w-full"/>
{errors?.acknowledgmentDate && (
<div className="small text-danger mt-1">
{errors.acknowledgmentDate.message}
</div>
)}
</div>
</div>
);
};
export default PurchaseTransportDetails;

60
src/components/purchase/Purchasetable.jsx Normal file
View File

@ -0,0 +1,60 @@
import { formatFigure, getColorNameFromHex } from "../../utils/appUtils";
export const PurchaseColumn = [
{
key: "purchaseInvoiceUId",
label: "Invoice Id",
className: "text-start",
render: (item) => (
<div className="d-flex justify-content-start align-items-center p-1">
<span className="fw-normal">{item?.purchaseInvoiceUId || "NA"}</span>
</div>
),
},
{
key: "title",
label: "Title",
className: "text-start",
render: (item) => (
<div className="d-flex justify-content-start align-items-center">
<span className="fw-normal">{item?.title || "NA"}</span>
</div>
),
},
{
key: "project",
label: "Project",
className: "text-start d-none d-sm-table-cell",
render: (item) => <span>{item?.project?.name || "NA"}</span>,
},
{
key: "supplier",
label: "Supplier",
className: "text-start d-none d-sm-table-cell",
render: (item) => <span>{item?.supplier?.name || "NA"}</span>,
},
{
key: "status",
label: "Status",
className: "text-start",
render: (item) => {
let color = getColorNameFromHex(item.status?.color);
return (
<span className={`badge rounded-pill bg-label-${color}`}>
<span className={`badge badge-dot bg-${color} me-1`}></span>
{item?.status.displayName || "NA"}
</span>
);
},
},
{
key: "totalAmount",
label: "Total Amount",
className: " text-end w-min",
render: (item) => (
<span>{formatFigure(item?.totalAmount, { type: "currency" })}</span>
),
},
];

243
src/components/purchase/ViewPurchase.jsx Normal file
View File

@ -0,0 +1,243 @@
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 <SpinnerLoader />;
if (isError) return <Error error={error} />;
return (
<div className="row g-3 px-3">
<div className="col-12 mb-1">
<h5 className="fw-semibold m-0">Purchase Invoice Details</h5>
</div>
<div className="col-12 text-start">
<div className="row">
<div className="fs-6 col-md-10 d-flex align-items-center fw-semibold">
<p className="mb-0 me-1">Purchase No:</p>
<p className="mb-0">{data?.purchaseInvoiceUId}</p>
</div>
<div className="col-md-2 d-flex align-items-center">
<p className="fw-light me-2 mb-0"></p>
<span className={`badge rounded-pill bg-label-${getColorNameFromHex(data?.status?.color)}`}>
{data?.status?.displayName || "NA"}
</span>
</div>
</div>
</div>
<div className="col-12 text-start border-bottom">
<div className=" ">
<p className="fw-semibold mb-3">Purchase Details</p>
<div className="row mb-3">
<div className="col-md-6">
<p className="text-secondary mb-0"><i class='bx bx-captions bx-sm me-1'></i>Title:</p>
<p className="fw-light mb-1">{data?.title}</p>
</div>
<div className="col-md-6">
<p className="text-secondary mb-0"><i class='bx bx-comment-detail bx-sm me-1'></i>Description:</p>
<p className="fw-light mb-1 ">{data?.description}</p>
</div>
</div>
</div>
</div>
<div className="col-12 border-bottom">
<div className="text-start h-auto fw-semibold">
<p className="text-muted mb-2">Project</p>
</div>
<div className="row text-start h-auto">
{/* Project Name */}
<div className="col-12 col-md-4 mb-3">
<p className="text-secondary mb-0"><i class='bx bx-captions bx-sm me-1'></i>Project Name:</p>
<p className="fw-light mb-0">{data?.project?.name}</p>
</div>
{/* Organization Name */}
<div className="col-12 col-md-4 mb-3">
<p className="text-secondary mb-0"><i class='bx bxs-component bx-sm me-1'></i>Organization:</p>
<p className="fw-light mb-0">{data?.organization?.name}</p>
</div>
{/* Email */}
<div className="col-12 col-md-4 mb-3">
<p className="text-secondary mb-0"><i class='bx bx-envelope me-1 bx-sm'></i>Email:</p>
<p className="fw-light mb-0">{data?.organization?.email}</p>
</div>
{/* Contact Number */}
<div className="col-12 col-md-4 mb-3">
<p className="text-secondary mb-0"><i class='bx bxs-contact bx-sm me-1' ></i>Contact:</p>
<p className="fw-light mb-0">{data?.organization?.contactNumber}</p>
</div>
{/* Address */}
<div className="col-12 mb-3">
<p className="text-secondary mb-0"><i class='bx bx-message-square-detail bx-sm me-1'></i>Address:</p>
<p className="fw-light mb-0">{data?.organization?.address}</p>
</div>
</div>
</div>
<div className="col-12 border-bottom">
<div className="row text-start h-auto">
<p className="text-muted mb-2 fw-semibold">Supplier</p>
{/* Supplier Name */}
<div className="col-12 col-md-4 mb-3">
<p className="text-secondary mb-0"><i class='bx bx-captions bx-sm me-1'></i>Name:</p>
<p className="fw-light mb-0">{data?.supplier?.name}</p>
</div>
{/* Contact Person */}
<div className="col-12 col-md-4 mb-3">
<p className="text-secondary mb-0"><i class='bx bx-support bx-sm me-1'></i>Contact Person:</p>
<p className="fw-light mb-0">{data?.supplier?.contactPerson}</p>
</div>
{/* Email */}
<div className="col-12 col-md-4 mb-3">
<p className="text-secondary mb-0"><i class='bx bx-envelope me-1 bx-sm'></i>Email:</p>
<p className="fw-light mb-0">{data?.supplier?.email}</p>
</div>
{/* Contact Number */}
<div className="col-12 col-md-4 mb-3">
<p className="text-secondary mb-0"><i class='bx bxs-contact bx-sm me-1' ></i>Contact:</p>
<p className="fw-light mb-0">{data?.supplier?.contactNumber}</p>
</div>
{/* Address */}
<div className="col-12 mb-3">
<p className="text-secondary mb-0"><i class='bx bx-message-square-detail bx-sm me-1'></i>Address:</p>
<p className="fw-light mb-0">{data?.supplier?.address}</p>
</div>
</div>
</div>
<div className="col-md-6">
<div className="text-start h-auto">
<p className="text-muted mb-2 fw-semibold">Invoice Details</p>
<div className="row g-3">
{/* Left column */}
<div className="col-12 col-sm-6">
<div>
<p className="text-secondary mb-0">Invoice No:</p>
<p className="fw-light mb-1">{data?.invoiceNumber}</p>
</div>
<div>
<p className="text-secondary mb-0">Proforma No:</p>
<p className="fw-light mb-1">{data?.proformaInvoiceNumber}</p>
</div>
<div>
<p className="text-secondary mb-0">E-Way Bill:</p>
<p className="fw-light mb-1">{data?.eWayBillNumber}</p>
</div>
<div>
<p className="text-secondary mb-0">PO No:</p>
<p className="fw-light mb-1">{data?.purchaseOrderNumber}</p>
</div>
</div>
{/* Right column */}
<div className="col-12 col-sm-6">
<div>
<p className="text-secondary mb-0 ">Invoice Date:</p>
<p className="fw-light mb-1">
{formatUTCToLocalTime(data?.invoiceDate)}
</p>
</div>
<div>
<p className="text-secondary mb-0">Proforma Date:</p>
<p className="fw-light mb-1">
{formatUTCToLocalTime(data?.proformaInvoiceDate)}
</p>
</div>
<div>
<p className="text-secondary mb-0">E-Way Date:</p>
<p className="fw-light mb-1">
{formatUTCToLocalTime(data?.eWayBillDate)}
</p>
</div>
<div>
<p className="text-secondary mb-0">PO Date:</p>
<p className="fw-light">
{formatUTCToLocalTime(data?.purchaseOrderDate)}
</p>
</div>
</div>
</div>
</div>
</div>
<div className="col-md-6">
<div className="text-start h-auto">
<p className="text-muted mb-2 fw-semibold">Amount Summary</p>
<div className="d-flex justify-content-between">
<p className="text-secondary mb-0">Base Amount</p>
<p className="fw-light mb-1">₹ {data?.baseAmount}</p>
</div>
<div className="d-flex justify-content-between">
<p className="text-secondary mb-0">Tax</p>
<p className="fw-light mb-1">₹ {data?.taxAmount}</p>
</div>
<div className="d-flex justify-content-between">
<p className="text-secondary mb-0">Transport</p>
<p className="fw-light mb-1">₹ {data?.transportCharges}</p>
</div>
<hr className="my-2" />
<div className="d-flex justify-content-between fs-6 fs-medium">
<span>Total</span>
<span>₹ {data?.totalAmount}</span>
</div>
<div className="mt-2">
<p className="text-secondary mb-0">Due Date:</p>
<p className="fw-light mb-0">
{formatUTCToLocalTime(data?.paymentDueDate)}
</p>
</div>
</div>
</div>
<div className="row mt-3 text-start">
<div className="col-md-6 mb-3 ms-n2">
<div className="h-100">
<p className="text-secondary mb-0">Billing Address</p>
<p className="mb-0 fw-light">{data?.billingAddress || "-"}</p>
</div>
</div>
<div className="col-md-6 mb-3 text-start">
<div className="h-100">
<p className="text-secondary mb-0">Shipping Address</p>
<p className="mb-0 fw-light">{data?.shippingAddress || "-"}</p>
</div>
</div>
</div>
</div>
);
};
export default ViewPurchase;

4
src/hooks/appHooks/useAppForm.js
View File

@ -1,6 +1,6 @@
import { useForm, Controller,FormProvider } from "react-hook-form"; import { useForm, Controller, FormProvider, useFormContext } from "react-hook-form";
export const useAppForm = (config) => useForm(config); export const useAppForm = (config) => useForm(config);
export const AppFormProvider = FormProvider; export const AppFormProvider = FormProvider;
export const AppFormController = Controller; export const AppFormController = Controller;
export const useAppFormContext = useFormContext;

133
src/hooks/masterHook/useMaster.js
View File

@ -10,16 +10,25 @@ import {
} from "@tanstack/react-query"; } from "@tanstack/react-query";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
export const useInvoiceAttachmentTypes = () => {
export const useRecurringStatus = ()=>{
return useQuery({ return useQuery({
queryKey:["RecurringStatus"], queryKey: ["invoiceAttachmentType"],
queryFn:async()=>{ queryFn: async () => {
const resp = await MasterRespository.getInvoiceAttachmentTypes();
return resp.data;
},
});
};
export const useRecurringStatus = () => {
return useQuery({
queryKey: ["RecurringStatus"],
queryFn: async () => {
const resp = await MasterRespository.getRecurringStatus(); const resp = await MasterRespository.getRecurringStatus();
return resp.data return resp.data;
} },
}) });
} };
export const useCurrencies = () => { export const useCurrencies = () => {
return useQuery({ return useQuery({
queryKey: ["currencies"], queryKey: ["currencies"],
@ -31,10 +40,10 @@ export const useCurrencies = () => {
}; };
export const usePaymentAjustmentHead = (isActive) => { export const usePaymentAjustmentHead = (isActive) => {
return useQuery({ return useQuery({
queryKey: ["paymentType",isActive], queryKey: ["paymentType", isActive],
queryFn: async () => await MasterRespository.getPaymentAdjustmentHead(isActive), queryFn: async () =>
await MasterRespository.getPaymentAdjustmentHead(isActive),
}); });
}; };
@ -296,26 +305,26 @@ export const useOrganizationType = () => {
}); });
}; };
export const useJobStatus=(statusId,projectId)=>{ export const useJobStatus = (statusId, projectId) => {
return useQuery({ return useQuery({
queryKey:["Job_Staus",statusId,projectId], queryKey: ["Job_Staus", statusId, projectId],
queryFn:async()=>{ queryFn: async () => {
const resp = await MasterRespository.getJobStatus(statusId,projectId); const resp = await MasterRespository.getJobStatus(statusId, projectId);
return resp.data; return resp.data;
}, },
enabled:!!statusId && !!projectId enabled: !!statusId && !!projectId,
}) });
} };
export const useTeamRole=()=>{ export const useTeamRole = () => {
return useQuery({ return useQuery({
queryKey:["Team_Role"], queryKey: ["Team_Role"],
queryFn:async()=>{ queryFn: async () => {
const resp = await MasterRespository.getTeamRole(); const resp = await MasterRespository.getTeamRole();
return resp.data; return resp.data;
} },
}) });
} };
//#region ==Get Masters== //#region ==Get Masters==
const fetchMasterData = async (masterType) => { const fetchMasterData = async (masterType) => {
switch (masterType) { switch (masterType) {
@ -405,8 +414,6 @@ const useMaster = () => {
export default useMaster; export default useMaster;
//#endregion //#endregion
// ================================Mutation==================================== // ================================Mutation====================================
//#region Job Role //#region Job Role
@ -456,10 +463,6 @@ export const useCreateJobRole = (onSuccessCallback) => {
}; };
//#endregion Job Role //#endregion Job Role
//#region Application Role //#region Application Role
export const useCreateApplicationRole = (onSuccessCallback) => { export const useCreateApplicationRole = (onSuccessCallback) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -505,10 +508,6 @@ export const useUpdateApplicationRole = (onSuccessCallback) => {
}; };
//#endregion //#endregion
//#region Create work Category //#region Create work Category
export const useCreateWorkCategory = (onSuccessCallback) => { export const useCreateWorkCategory = (onSuccessCallback) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -554,11 +553,6 @@ export const useUpdateWorkCategory = (onSuccessCallback) => {
}; };
//#endregion //#endregion
//#region Contact Category //#region Contact Category
export const useCreateContactCategory = (onSuccessCallback) => { export const useCreateContactCategory = (onSuccessCallback) => {
@ -609,10 +603,6 @@ export const useUpdateContactCategory = (onSuccessCallback) => {
//#endregion //#endregion
//#region Contact Tag //#region Contact Tag
export const useCreateContactTag = (onSuccessCallback) => { export const useCreateContactTag = (onSuccessCallback) => {
@ -659,10 +649,6 @@ export const useUpdateContactTag = (onSuccessCallback) => {
}; };
//#endregion //#endregion
//#region Expense Category //#region Expense Category
export const useCreateExpenseCategory = (onSuccessCallback) => { export const useCreateExpenseCategory = (onSuccessCallback) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -689,7 +675,10 @@ export const useUpdateExpenseCategory = (onSuccessCallback) => {
return useMutation({ return useMutation({
mutationFn: async ({ id, payload }) => { mutationFn: async ({ id, payload }) => {
const response = await MasterRespository.updateExpenseCategory(id, payload); const response = await MasterRespository.updateExpenseCategory(
id,
payload
);
return response.data; return response.data;
}, },
onSuccess: (data, variables) => { onSuccess: (data, variables) => {
@ -708,11 +697,6 @@ export const useUpdateExpenseCategory = (onSuccessCallback) => {
//#endregion //#endregion
//#region Payment Mode //#region Payment Mode
export const useCreatePaymentMode = (onSuccessCallback) => { export const useCreatePaymentMode = (onSuccessCallback) => {
@ -759,10 +743,6 @@ export const useUpdatePaymentMode = (onSuccessCallback) => {
//#endregion //#endregion
// Services------------------------------- // Services-------------------------------
// export const useCreateService = (onSuccessCallback) => { // export const useCreateService = (onSuccessCallback) => {
@ -844,10 +824,6 @@ export const useUpdateService = (onSuccessCallback) => {
//#endregion //#endregion
//#region Activity Grouph //#region Activity Grouph
export const useCreateActivityGroup = (onSuccessCallback) => { export const useCreateActivityGroup = (onSuccessCallback) => {
@ -912,10 +888,6 @@ export const useUpdateActivityGroup = (onSuccessCallback) => {
//#endregion //#endregion
//#region Activities //#region Activities
export const useCreateActivity = (onSuccessCallback) => { export const useCreateActivity = (onSuccessCallback) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -970,11 +942,6 @@ export const useUpdateActivity = (onSuccessCallback) => {
//#endregion //#endregion
//#region Expense Status //#region Expense Status
export const useCreateExpenseStatus = (onSuccessCallback) => { export const useCreateExpenseStatus = (onSuccessCallback) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -1018,10 +985,6 @@ export const useUpdateExpenseStatus = (onSuccessCallback) => {
}; };
//#endregion //#endregion
//#region Document-Category //#region Document-Category
export const useCreateDocumentCatgory = (onSuccessCallback) => { export const useCreateDocumentCatgory = (onSuccessCallback) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -1068,11 +1031,6 @@ export const useUpdateDocumentCategory = (onSuccessCallback) => {
}; };
//#endregion //#endregion
//#region Document-Type //#region Document-Type
export const useCreateDocumentType = (onSuccessCallback) => { export const useCreateDocumentType = (onSuccessCallback) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -1117,10 +1075,6 @@ export const useUpdateDocumentType = (onSuccessCallback) => {
}; };
//#endregion //#endregion
//#region Payment Adjustment Head //#region Payment Adjustment Head
export const useCreatePaymentAjustmentHead = (onSuccessCallback) => { export const useCreatePaymentAjustmentHead = (onSuccessCallback) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -1147,7 +1101,10 @@ export const useUpdatePaymentAjustmentHead = (onSuccessCallback) => {
return useMutation({ return useMutation({
mutationFn: async ({ id, payload }) => { mutationFn: async ({ id, payload }) => {
const resp = await MasterRespository.updatePaymentAjustmentHead(id, payload); const resp = await MasterRespository.updatePaymentAjustmentHead(
id,
payload
);
return resp.data; return resp.data;
}, },
onSuccess: (data) => { onSuccess: (data) => {
@ -1164,10 +1121,6 @@ export const useUpdatePaymentAjustmentHead = (onSuccessCallback) => {
}; };
//#endregion //#endregion
//#region ==Delete Master== //#region ==Delete Master==
export const useDeleteMasterItem = () => { export const useDeleteMasterItem = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -1203,8 +1156,6 @@ export const useDeleteMasterItem = () => {
//#endregion //#endregion
export const useDeleteServiceGroup = () => { export const useDeleteServiceGroup = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();

54
src/hooks/useOrganization.js
View File

@ -24,7 +24,9 @@ export const useOrganizationModal = () => {
dispatch( dispatch(
openOrgModal({ openOrgModal({
isOpen: true, isOpen: true,
orgData: options.hasOwnProperty("orgData") ? options.orgData : orgData, orgData: options.hasOwnProperty("orgData")
? options.orgData
: orgData,
startStep: options.startStep ?? startStep ?? 1, startStep: options.startStep ?? startStep ?? 1,
prevStep: options.prevStep ?? prevStep ?? 1, prevStep: options.prevStep ?? prevStep ?? 1,
flowType: options.flowType ?? flowType ?? "default", flowType: options.flowType ?? flowType ?? "default",
@ -37,16 +39,30 @@ export const useOrganizationModal = () => {
// ================================Query============================================================= // ================================Query=============================================================
export const useOrganization=(id)=>{ export const useGlobaleOrganizations = (pageSize, pageNumber, searchString) => {
return useQuery({ return useQuery({
queryKey:["organization",id], queryKey: ["global_organization",pageSize, pageNumber, searchString],
queryFn:async()=> { queryFn: async () => {
const resp = await await OrganizationRepository.getOrganizaion(id); const resp = await OrganizationRepository.getGlobalOrganization(
return resp.data pageSize,
}, pageNumber,
enabled:!!id searchString
}) );
} return resp.data;
},
});
};
export const useOrganization = (id) => {
return useQuery({
queryKey: ["organization", id],
queryFn: async () => {
const resp = await await OrganizationRepository.getOrganizaion(id);
return resp.data;
},
enabled: !!id,
});
};
export const useOrganizationBySPRID = (sprid) => { export const useOrganizationBySPRID = (sprid) => {
return useQuery({ return useQuery({
queryKey: ["organization by", sprid], queryKey: ["organization by", sprid],
@ -101,7 +117,7 @@ export const useOrganizationEmployees = (
organizationId, organizationId,
searchString searchString
), ),
enabled: !!projectId , enabled: !!projectId,
}); });
}; };
@ -138,10 +154,10 @@ export const useAssignOrgToProject = (onSuccessCallback) => {
useClient.invalidateQueries({ useClient.invalidateQueries({
queryKey: ["projectAssignedOrganiztions"], queryKey: ["projectAssignedOrganiztions"],
}); });
useClient.invalidateQueries({ useClient.invalidateQueries({
queryKey: ["projectAssignedOrganiztionsName"], queryKey: ["projectAssignedOrganiztionsName"],
}); });
useClient.invalidateQueries({ useClient.invalidateQueries({
queryKey: ["projectAssignedServices", projectId], queryKey: ["projectAssignedServices", projectId],
}); });
@ -181,12 +197,14 @@ export const useAssignOrgToTenant = (onSuccessCallback) => {
export const useUpdateOrganization = (onSuccessCallback) => { export const useUpdateOrganization = (onSuccessCallback) => {
const useClient = useQueryClient(); const useClient = useQueryClient();
return useMutation({ return useMutation({
mutationFn: async ({orgId,payload}) => mutationFn: async ({ orgId, payload }) =>
await OrganizationRepository.updateOrganizaion(orgId,payload), await OrganizationRepository.updateOrganizaion(orgId, payload),
onSuccess: (_, variables) => { onSuccess: (_, variables) => {
useClient.invalidateQueries({ queryKey: ["organizationList"] }); useClient.invalidateQueries({ queryKey: ["organizationList"] });
useClient.invalidateQueries({ queryKey: ["projectAssignedOrganiztionsName"] }); useClient.invalidateQueries({
queryKey: ["projectAssignedOrganiztionsName"],
});
showToast("Organization Updated successfully", "success"); showToast("Organization Updated successfully", "success");
if (onSuccessCallback) onSuccessCallback(); if (onSuccessCallback) onSuccessCallback();
}, },

64
src/hooks/usePurchase.jsx Normal file
View File

@ -0,0 +1,64 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { PurchaseRepository } from "../repositories/PurchaseRepository";
import showToast from "../services/toastService";
export const usePurchasesList = (
pageSize,
pageNumber,
isActive,
filter,
searchString
) => {
return useQuery({
queryKey: [
"purchase_list",
pageSize,
pageNumber,
isActive,
filter,
searchString,
],
queryFn: async () => {
const resp = await PurchaseRepository.GetPurchaseList(
pageSize,
pageNumber,
isActive,
filter,
searchString
);
return resp.data;
},
});
};
export const usePurchase = (id) => {
return useQuery({
queryKey: ["purchase", id],
queryFn: async () => {
const resp = await PurchaseRepository.GetPurchase(id);
return resp.data;
},
enabled: !!id,
});
};
export const useCreatePurchaseInvoice = (onSuccessCallback) => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async (payload) =>
await PurchaseRepository.CreatePurchase(payload),
onSuccess: (data, variables) => {
showToast("Purchase Invoice Created successfully", "success");
if (onSuccessCallback) onSuccessCallback();
},
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to create invoice",
"error"
);
},
});
};

94
src/pages/purchase/PurchasePage.jsx Normal file
View File

@ -0,0 +1,94 @@
import React, { createContext, useContext, useState } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
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 = () => {
let context = useContext(PurchaseContext);
if (!context) {
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 = {
setViewPurchase,
};
console.log(ViewPurchase);
return (
<PurchaseContext.Provider value={contextValue}>
<div className="container-fluid">
<Breadcrumb
data={[
{ label: "Home", link: "/dashboard" },
{ label: "Procurement & Inventory", link: "/purchase-invoice" },
{ label: "Purchase" },
]}
/>
<div className="card">
<div className="row p-2">
<div className="col-12 col-md-6 text-start">
{" "}
<label className="mb-0">
<input
type="search"
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
className="form-control form-control-sm"
placeholder="Search Purchase"
aria-controls="DataTables_Table_0"
/>
</label>
</div>
<di className="col-6 text-end">
<button
className="btn btn-sm btn-primary"
onClick={() => setAddedPurchase(true)}
>
<i className="bx bx-plus-circle me-2"></i>Add
</button>
</di>
</div>
</div>
<PurchaseList searchString={searchText} />
{addePurchase && (
<GlobalModel
isOpen={addePurchase}
size="lg"
closeModal={() => setAddedPurchase(false)}
>
<ManagePurchase onClose={() => setAddedPurchase(false)} />
</GlobalModel>
)}
{viewPurchaseState.isOpen && (
<GlobalModel
isOpen={viewPurchaseState.isOpen}
size="lg"
closeModal={() =>
setViewPurchase({ isOpen: false, purchaseId: null })
}
>
<ViewPurchase purchaseId={viewPurchaseState.purchaseId} />
</GlobalModel>
)}
</div>
</PurchaseContext.Provider>
);
};
export default PurchasePage;

3
src/repositories/MastersRepository.jsx
View File

@ -157,4 +157,7 @@ export const MasterRespository = {
), ),
getTeamRole: () => api.get(`/api/Master/team-roles/list`), getTeamRole: () => api.get(`/api/Master/team-roles/list`),
getInvoiceAttachmentTypes:()=>api.get("/api/Master/invoice-attachment-type/list")
}; };

10
src/repositories/OrganizationRespository.jsx
View File

@ -2,8 +2,9 @@ import { api } from "../utils/axiosClient";
const OrganizationRepository = { const OrganizationRepository = {
createOrganization: (data) => api.post("/api/Organization/create", data), createOrganization: (data) => api.post("/api/Organization/create", data),
updateOrganizaion:(id,data)=>api.put(`/api/Organization/edit/${id}`,data), updateOrganizaion: (id, data) =>
getOrganizaion:(id)=>api.get(`/api/Organization/details/${id}`), api.put(`/api/Organization/edit/${id}`, data),
getOrganizaion: (id) => api.get(`/api/Organization/details/${id}`),
getOrganizationList: (pageSize, pageNumber, active, sprid, searchString) => { getOrganizationList: (pageSize, pageNumber, active, sprid, searchString) => {
return api.get( return api.get(
`/api/Organization/list?pageSize=${pageSize}&pageNumber=${pageNumber}&active=${active}&${ `/api/Organization/list?pageSize=${pageSize}&pageNumber=${pageNumber}&active=${active}&${
@ -39,6 +40,11 @@ const OrganizationRepository = {
return api.get(url); return api.get(url);
}, },
getGlobalOrganization: (pageSize, pageNumber, searchString) =>
api.get(
`/api/Organization/list/basic?pageSize=${pageSize}&pageNumber=${pageNumber}&searchString=${searchString}`
),
}; };
export default OrganizationRepository; export default OrganizationRepository;

18
src/repositories/PurchaseRepository.jsx Normal file
View File

@ -0,0 +1,18 @@
import { api } from "../utils/axiosClient";
export const PurchaseRepository = {
CreatePurchase: (data) => api.post("/api/PurchaseInvoice/create", data),
GetPurchaseList: (pageSize, pageNumber, isActive, filter, searchString) =>
api.get(
`/api/PurchaseInvoice/list?pageSize=${pageSize}&pageNumber=${pageNumber}&isActive=${isActive}&filter=${filter}&searchString=${searchString}`
),
GetPurchase: (id) => api.get(`/api/PurchaseInvoice/details/${id}`),
UpdatePurchase: (id, data) =>
api.patch(`/api/PurchaseInvoice/edit/${id}`, data),
};
// const filterPayload = JSON.stringify({
// sortFilters,
// groupByColumn: groupBy || null,
// });

6
src/router/AppRoutes.jsx
View File

@ -113,6 +113,8 @@ const router = createBrowserRouter(
{ path: "/activities/task", element: <TaskPlannng /> }, { path: "/activities/task", element: <TaskPlannng /> },
{ path: "/activities/reports", element: <Reports /> }, { path: "/activities/reports", element: <Reports /> },
{ path: "/gallary", element: <ImageGalleryPage /> }, { path: "/gallary", element: <ImageGalleryPage /> },
// Finance
{ path: "/expenses/:status?/:project?", element: <ExpensePage /> }, { path: "/expenses/:status?/:project?", element: <ExpensePage /> },
{ path: "/expenses", element: <ExpensePage /> }, { path: "/expenses", element: <ExpensePage /> },
{ path: "/payment-request", element: <PaymentRequestPage /> }, { path: "/payment-request", element: <PaymentRequestPage /> },
@ -123,6 +125,10 @@ const router = createBrowserRouter(
{ path: "/advance-payment", element: <AdvancePaymentPage /> }, { path: "/advance-payment", element: <AdvancePaymentPage /> },
{ path: "/advance-payment/:employeeId", element: <AdvancePaymentPageDetails /> }, { path: "/advance-payment/:employeeId", element: <AdvancePaymentPageDetails /> },
{ path: "/collection", element: <CollectionPage /> }, { path: "/collection", element: <CollectionPage /> },
// Purchases and Inventory
{ path: "/purchase-invoice", element: <PurchasePage /> },
// Administration
{ path: "/masters", element: <MasterPage /> }, { path: "/masters", element: <MasterPage /> },
{ path: "/tenants", element: <TenantPage /> }, { path: "/tenants", element: <TenantPage /> },
{ path: "/tenants/new-tenant", element: <CreateTenant /> }, { path: "/tenants/new-tenant", element: <CreateTenant /> },