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 Image_Gallery_FilterChips

Browse Source
This commit is contained in:
Kartik Sharma 2025-12-03 09:57:49 +05:30
commit 568ed386ca
71 changed files with 4253 additions and 819 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>
<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">
<!-- layout-menu-collapsed layout-menu-hover -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

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

@ -11,6 +11,18 @@
top: var(--sticky-top, 0px) !important;
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 %========================================================== */
@ -222,7 +234,9 @@ font-weight: normal;
.h-min { height: min-content; }
.h-max { height: max-content; }
.vh-50 {
height: 50vh !important;
}

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

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

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

@ -148,5 +148,41 @@ function Main () {
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");
});
});

6
public/assets/vendor/css/core.css vendored
View File

@ -89,7 +89,7 @@
);
--bs-root-font-size: 16px;
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 0.875rem;
--bs-body-font-size: 0.85rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.375;
--bs-body-color: #646e78;
@ -9060,7 +9060,7 @@ img[data-app-light-img][data-app-dark-img] {
}
.table th {
color: var(--bs-heading-color);
font-size: 0.8125rem;
font-size: 0.8025rem;
letter-spacing: 0.2px;
text-transform: uppercase;
}
@ -20345,7 +20345,7 @@ li:not(:first-child) .dropdown-item,
}
.fs-6 {
font-size: 0.9375rem !important;
font-size: 0.8375rem !important;
}
.fs-tiny {

2
src/components/DailyProgressRport/TaskReportFilterPanel.jsx
View File

@ -39,14 +39,12 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
dateTo: localToUtc(formData.dateTo),
};
handleFilter(filterPayload);
closePanel();
};
const onClear = () => {
setResetKey((prev) => prev + 1);
handleFilter(TaskReportDefaultValue);
reset(TaskReportDefaultValue);
closePanel();
};
return (
<FormProvider {...methods}>

14
src/components/DailyProgressRport/TaskReportList.jsx
View File

@ -204,24 +204,34 @@ const TaskReportList = () => {
<HoverPopup
id="total_pending_task"
title="Total Pending Task"
content={<p>This shows the total pending tasks for each activity on that date.</p>}
content={
<div className="text-wrap" style={{ minWidth: "200px" }}>
This shows the total pending tasks for each activity on that date.
</div>
}
>
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
</HoverPopup>
</span>
</th>
<th>
<span>
Reported/Planned{" "}
<HoverPopup
id="reportes_and_planned_task"
title="Reported and Planned Task"
content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
content={
<div className="text-wrap" style={{ maxWidth: "200px" }}>
This shows the reported versus planned tasks for each activity on that date.
</div>
}
>
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
</HoverPopup>
</span>
</th>
<th>Assign Date</th>
<th>Team</th>
<th className="text-center">Actions</th>

2
src/components/Dashboard/AttendanceOverview.jsx
View File

@ -100,7 +100,7 @@ const AttendanceOverview = () => {
};
return (
<div className="bg-white px-4 rounded shadow d-flex flex-column h-100">
<div className="bg-white px-4 rounded shadow d-flex flex-column h-100" style={{ minHeight: "450px" }}>
{/* Header */}
<div className="d-flex mt-2 justify-content-between align-items-center mb-3">
<div className="card-title mb-0 text-start">

53
src/components/Dashboard/Dashboard.jsx
View File

@ -17,12 +17,19 @@ import ExpenseAnalysis from "./ExpenseAnalysis";
import ExpenseStatus from "./ExpenseStatus";
import ExpenseByProject from "./ExpenseByProject";
import ProjectStatistics from "../Project/ProjectStatistics";
import ServiceJobs from "./ServiceJobs";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { REGULARIZE_ATTENDANCE, SELF_ATTENDANCE, TEAM_ATTENDANCE } from "../../utils/constants";
const Dashboard = () => {
// Get the selected project ID from Redux store
const projectId = useSelector((store) => store.localVariables.projectId);
const isAllProjectsSelected = projectId === null;
const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
return (
<div className="container-fluid mt-5">
@ -40,26 +47,6 @@ const Dashboard = () => {
<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
<TasksCard />
</div>
{isAllProjectsSelected && (
<div className="col-xxl-6 col-lg-6">
<ProjectCompletionChart />
</div>
)}
<div className="col-xxl-6 col-lg-6">
<ProjectProgressChart />
</div>
{!isAllProjectsSelected && (
<div className="col-12 col-md-6 mb-sm-0 mb-4">
<AttendanceOverview />
</div>
)}
{!isAllProjectsSelected && (
<div className="col-xxl-4 col-lg-4">
<ProjectStatistics />
</div>
)}
<div className="col-12 col-xl-4 col-md-6">
<div className="card ">
<ExpenseStatus />
@ -74,6 +61,32 @@ const Dashboard = () => {
<div className="col-12 col-md-6">
<ExpenseByProject />
</div>
{isAllProjectsSelected && (
<div className="col-xxl-6 col-lg-6">
<ProjectCompletionChart />
</div>
)}
<div className="col-xxl-6 col-lg-6">
<ProjectProgressChart />
</div>
{!isAllProjectsSelected && (canRegularize || canTeamAttendance || canSelfAttendance) && (
<div className="col-12 col-md-6 mb-sm-0 mb-4">
<AttendanceOverview />
</div>
)}
{!isAllProjectsSelected && (
<div className="col-xxl-4 col-lg-4">
<div className="card h-100">
<ProjectStatistics />
</div>
</div>
)}
{/* <div className="col-12 col-md-12">
<ServiceJobs />
</div> */}
</div>
</div>
);

237
src/components/Dashboard/ServiceJobs.jsx Normal file
View File

@ -0,0 +1,237 @@
import React from "react";
const ServiceJobs = () => {
return (
<div className="col-xxl-4 col-lg-6">
<div className="card h-100">
<div className="card-header d-flex justify-content-between">
<div className="card-title mb-0 text-start">
<h5 className="mb-1">Service Jobs</h5>
<p className="card-subtitle">All Projects</p>
</div>
</div>
<div className="card-body p-0">
<div className="nav-align-top">
{/* Tabs */}
<ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
<li className="nav-item">
<button className="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-new">
My Jobs
</button>
</li>
<li className="nav-item">
<button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-preparing">
Assigned
</button>
</li>
<li className="nav-item">
<button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-shipping">
In Progress
</button>
</li>
</ul>
{/* Tab Content */}
<div className="tab-content border-0 mx-1 text-start">
{/* ---------------------- NEW TAB ---------------------- */}
<div className="tab-pane fade show active" id="tab-new">
{/* Entry 1 */}
<ul className="timeline mb-0">
<li className="timeline-item ps-6 border-left-dashed">
<span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i className="bx bx-check-circle"></i>
</span>
<div className="timeline-event ps-1">
<div className="timeline-header">
<small className="text-success text-uppercase">Sender</small>
</div>
<h6 className="my-50">Myrtle Ullrich</h6>
<p className="text-body mb-0">101 Boulder, California(CA), 95959</p>
</div>
</li>
<li className="timeline-item ps-6 border-transparent">
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i className="bx bx-map"></i>
</span>
<div className="timeline-event ps-1">
<div className="timeline-header">
<small className="text-primary text-uppercase">Receiver</small>
</div>
<h6 className="my-50">Barry Schowalter</h6>
<p className="text-body mb-0">939 Orange, California(CA), 92118</p>
</div>
</li>
</ul>
<div className="border-1 border-light border-top border-dashed my-4"></div>
{/* Entry 2 */}
<ul className="timeline mb-0">
<li className="timeline-item ps-6 border-left-dashed">
<span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i className="bx bx-check-circle"></i>
</span>
<div className="timeline-event ps-1">
<div className="timeline-header">
<small className="text-success text-uppercase">Sender</small>
</div>
<h6 className="my-50">Veronica Herman</h6>
<p className="text-body mb-0">162 Windsor, California(CA), 95492</p>
</div>
</li>
<li className="timeline-item ps-6 border-transparent">
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i className="bx bx-map"></i>
</span>
<div className="timeline-event ps-1">
<div className="timeline-header">
<small className="text-primary text-uppercase">Receiver</small>
</div>
<h6 className="my-50">Helen Jacobs</h6>
<p className="text-body mb-0">487 Sunset, California(CA), 94043</p>
</div>
</li>
</ul>
</div>
{/* ---------------------- PREPARING TAB ---------------------- */}
<div className="tab-pane fade" id="tab-preparing">
{/* Entry 1 */}
<ul className="timeline mb-0">
<li className="timeline-item ps-6 border-left-dashed">
<span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
<i className="bx bx-time-five"></i>
</span>
<div className="timeline-event ps-1">
<div className="timeline-header">
<small className="text-warning text-uppercase">Sender</small>
</div>
<h6 className="my-50">Oliver Grant</h6>
<p className="text-body mb-0">220 Pine St, California(CA), 95765</p>
</div>
</li>
<li className="timeline-item ps-6 border-transparent">
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i className="bx bx-map"></i>
</span>
<div className="timeline-event ps-1">
<div className="timeline-header">
<small className="text-primary text-uppercase">Receiver</small>
</div>
<h6 className="my-50">Samantha Lee</h6>
<p className="text-body mb-0">744 Bay Area, California(CA), 94016</p>
</div>
</li>
</ul>
<div className="border-1 border-light border-top border-dashed my-4"></div>
{/* Entry 2 */}
<ul className="timeline mb-0">
<li className="timeline-item ps-6 border-left-dashed">
<span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
<i className="bx bx-time-five"></i>
</span>
<div className="timeline-event ps-1">
<div className="timeline-header">
<small className="text-warning text-uppercase">Sender</small>
</div>
<h6 className="my-50">Marcus Howard</h6>
<p className="text-body mb-0">58 Avenue, California(CA), 95376</p>
</div>
</li>
<li className="timeline-item ps-6 border-transparent">
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i className="bx bx-map"></i>
</span>
<div className="timeline-event ps-1">
<div className="timeline-header">
<small className="text-primary text-uppercase">Receiver</small>
</div>
<h6 className="my-50">Daniel Foster</h6>
<p className="text-body mb-0">312 Marina, California(CA), 94109</p>
</div>
</li>
</ul>
</div>
{/* ---------------------- SHIPPING TAB ---------------------- */}
<div className="tab-pane fade" id="tab-shipping">
{/* Entry 1 */}
<ul className="timeline mb-0">
<li className="timeline-item ps-6 border-left-dashed">
<span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
<i className="bx bx-package"></i>
</span>
<div className="timeline-event ps-1">
<div className="timeline-header">
<small className="text-info text-uppercase">Sender</small>
</div>
<h6 className="my-50">James Carter</h6>
<p className="text-body mb-0">441 Market St, California(CA), 94111</p>
</div>
</li>
<li className="timeline-item ps-6 border-transparent">
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i className="bx bx-map"></i>
</span>
<div className="timeline-event ps-1">
<div className="timeline-header">
<small className="text-primary text-uppercase">Receiver</small>
</div>
<h6 className="my-50">Linda Moore</h6>
<p className="text-body mb-0">990 Willow Road, California(CA), 94025</p>
</div>
</li>
</ul>
<div className="border-1 border-light border-top border-dashed my-4"></div>
{/* Entry 2 */}
<ul className="timeline mb-0">
<li className="timeline-item ps-6 border-left-dashed">
<span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
<i className="bx bx-package"></i>
</span>
<div className="timeline-event ps-1">
<div className="timeline-header">
<small className="text-info text-uppercase">Sender</small>
</div>
<h6 className="my-50">Sarah Bennett</h6>
<p className="text-body mb-0">882 Canyon Rd, California(CA), 94704</p>
</div>
</li>
<li className="timeline-item ps-6 border-transparent">
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i className="bx bx-map"></i>
</span>
<div className="timeline-event ps-1">
<div className="timeline-header">
<small className="text-primary text-uppercase">Receiver</small>
</div>
<h6 className="my-50">George Simmons</h6>
<p className="text-body mb-0">19 Palm St, California(CA), 93001</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default ServiceJobs;

136
src/components/Expenses/Filelist.jsx
View File

@ -2,54 +2,53 @@ import React from "react";
import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
import Tooltip from "../common/Tooltip";
const Filelist = ({ files, removeFile, expenseToEdit,sm=6,md=4 }) => {
const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
return (
<div className="d-flex flex-wrap gap-2 my-1">
{files
.filter((file) => {
if (expenseToEdit) {
return file.isActive;
}
return true;
})
.map((file, idx) => (
<div className={`col-12 col-sm-${sm} col-md-${md} mb-2`} key={idx}>
<div className="d-flex align-items-center justify-content-between bg-white border rounded p-1">
{/* File icon and info */}
<div className="d-flex align-items-center flex-grow-1 gap-2 overflow-hidden">
<i
className={`bx ${getIconByFileType(
file?.contentType
)} fs-3 `}
style={{ minWidth: "30px" }}
></i>
{files
.filter((file) => {
if (expenseToEdit) {
return file.isActive;
}
return true;
})
.map((file, idx) => (
<div className={`col-12 col-sm-${sm} col-md-${md} mb-2`} key={idx}>
<div className="d-flex align-items-center justify-content-between bg-white border rounded p-1">
{/* File icon and info */}
<div className="d-flex align-items-center flex-grow-1 gap-2 overflow-hidden">
<i
className={`bx ${getIconByFileType(file?.contentType)} fs-3 `}
style={{ minWidth: "30px" }}
></i>
<div className="d-flex flex-column text-truncate">
<span className="fw-semibold small text-truncate">
{file.fileName}
</span>
<span className="text-body-secondary small">
{file.fileSize ? formatFileSize(file.fileSize) : ""}
</span>
<Tooltip text={file.fileName}>
<div className="d-flex flex-column text-truncate">
<span className="fw-semibold small text-truncate">
{file.fileName}
</span>
<span className="text-body-secondary small">
{file.fileSize ? formatFileSize(file.fileSize) : ""}
</span>
</div>
</Tooltip>
</div>
{/* Delete icon */}
<Tooltip text="Remove file">
<i
className="bx bx-sm bx-trash text-danger fs-4 cursor-pointer ms-2"
role="button"
onClick={(e) => {
e.preventDefault();
removeFile(expenseToEdit ? file.documentId ?? file.tempId ?? idx : file.tempId ?? idx);
}}
></i>
</Tooltip>
</div>
</div>
{/* Delete icon */}
<Tooltip text="Remove file">
<i
className="bx bx-sm bx-trash text-danger fs-4 cursor-pointer ms-2"
role="button"
onClick={(e) => {
e.preventDefault();
removeFile(expenseToEdit ? file.documentId : idx);
}}
></i>
</Tooltip>
</div>
</div>
))}
</div>
))}
</div>
);
};
@ -58,13 +57,11 @@ export const FilelistView = ({ files, viewFile }) => {
return (
<div className="d-flex flex-wrap gap-2 mt-2">
{files?.map((file, idx) => (
<div className=" bg-white " key={idx}>
<div className=" bg-white " key={idx}>
<div className="row align-items-center">
{/* File icon and info */}
<div className="col-12 d-flex align-items-center gap-2">
<i
className={`bx ${getIconByFileType(file?.fileName)} fs-3`}
></i>
<i className={`bx ${getIconByFileType(file?.fileName)} fs-3`}></i>
<div
className="d-flex flex-column text-truncate"
@ -72,7 +69,7 @@ export const FilelistView = ({ files, viewFile }) => {
e.preventDefault();
viewFile({
IsOpen: true,
Image: file.preSignedUrl,
Image: files,
});
}}
>
@ -92,4 +89,45 @@ export const FilelistView = ({ files, viewFile }) => {
))}
</div>
);
};
};
export const FileView = ({ file, viewFile }) => {
if (!file) {
return (
<div className="d-flex justify-content-center align-items-center py-4">
<p className="mb-0 text-muted small">No file uploaded</p>
</div>
);
}
return (
<div className=" bg-white ">
<div className="row align-items-center">
{/* File icon and info */}
<div className="col-12 d-flex align-items-center gap-2 ms-n1">
<i className={`bx ${getIconByFileType(file?.contentType)} fs-4`}></i>
<div
className="d-flex flex-column text-truncate"
onClick={(e) => {
e.preventDefault();
viewFile({
IsOpen: true,
Image: file.preSignedUrl,
});
}}
>
<span className="text-muted small text-truncate mb-n4">
{file.fileName}
</span>
<span className="text-body-secondary small">
<Tooltip text={"Click on file"}>
{" "}
{file.fileSize ? formatFileSize(file.fileSize) : ""}
</Tooltip>
</span>
</div>
</div>
</div>
</div>
);
};

79
src/components/Expenses/ManageExpense.jsx
View File

@ -236,31 +236,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
{expenseToEdit ? "Update Expense " : "Create New Expense"}
</h5>
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
<div className="row my-2 text-start">
{/* <div className="col-md-6">
<Label className="form-label" required>
Select Project
</Label>
<select
className="form-select form-select-sm"
{...register("projectId")}
>
<option value="">Select Project</option>
{projectLoading ? (
<option>Loading...</option>
) : (
projectNames?.map((project) => (
<option key={project.id} value={project.id}>
{project.name}
</option>
))
)}
</select>
{errors.projectId && (
<small className="danger-text">{errors.projectId.message}</small>
)}
</div> */}
<div className="col-12 col-md-6 mb-2">
<div className="row my-2 text-start">
<div className="col-12 col-md-6">
<SelectProjectField
label="Project"
required
@ -283,7 +260,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
Expense Category
</Label>
<select
className="form-select form-select-sm"
className="form-select "
id="expenseCategoryId"
{...register("expenseCategoryId")}
>
@ -314,7 +291,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
Payment Mode
</Label>
<select
className="form-select form-select-sm"
className="form-select "
id="paymentModeId"
{...register("paymentModeId")}
>
@ -337,34 +314,23 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
</small>
)}
</div>
<div className="col-12 col-md-6 text-start">
{/* <Label className="form-label" required>
Paid By{" "}
</Label> */}
{/* <EmployeeSearchInput
control={control}
name="paidById"
projectId={null}
forAll={true}
/> */}
<div className="col-12 col-md-6 text-start">
<AppFormController
name="paidById"
name="paidById"
control={control}
render={({ field }) => (
<SelectEmployeeServerSide
label="Paid By" required
value={field.value}
onChange={field.onChange}
isFullObject={false} // because using ID
isFullObject={false}
/>
)}
/>
</div>
</div>
<div className="row my-2 text-start">
<div className="row my-2 text-start mb-4">
<div className="col-md-6">
<Label htmlFor="transactionDate" className="form-label" required>
Transaction Date
@ -374,6 +340,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
className="w-100"
control={control}
maxDate={new Date()}
size="md"
/>
{errors.transactionDate && (
@ -390,7 +357,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
<input
type="number"
id="amount"
className="form-control form-control-sm"
className="form-control "
min="1"
step="0.01"
inputMode="decimal"
@ -402,7 +369,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
</div>
</div>
<div className="row my-2 text-start">
<div className="row my-2 text-start mb-4">
<div className="col-md-6">
<Label htmlFor="supplerName" className="form-label" required>
Supplier Name/Transporter Name/Other
@ -410,7 +377,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
<input
type="text"
id="supplerName"
className="form-control form-control-sm"
className="form-control "
{...register("supplerName")}
/>
{errors.supplerName && (
@ -427,7 +394,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
<input
type="text"
id="location"
className="form-control form-control-sm"
className="form-control "
{...register("location")}
/>
{errors.location && (
@ -435,7 +402,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
)}
</div>
</div>
<div className="row my-2 text-start">
<div className="row my-2 text-start mb-4">
<div className="col-md-6">
<label htmlFor="statusId" className="form-label ">
Transaction ID
@ -443,7 +410,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
<input
type="text"
id="transactionId"
className="form-control form-control-sm"
className="form-control "
min="1"
{...register("transactionId")}
/>
@ -460,7 +427,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
<input
type="text"
id="gstNumber"
className="form-control form-control-sm"
className="form-control "
min="1"
{...register("gstNumber")}
/>
@ -469,13 +436,13 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
)}
</div>
</div>
<div className="row">
<div className="row mb-4">
<div className="col-md-6 text-start ">
<Label htmlFor="currencyId" className="form-label" required>
Select Currency
</Label>
<select
className="form-select form-select-sm"
className="form-select "
id="currencyId"
{...register("currencyId")}
>
@ -497,14 +464,14 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
)}
</div>
{expenseCategory?.noOfPersonsRequired && (
<div className="col-md-6 text-start">
<div className="col-md-6 text-start">
<Label className="form-label" required>
No. of Persons
</Label>
<input
type="number"
id="noOfPersons"
className="form-control form-control-sm"
className="form-control "
{...register("noOfPersons")}
inputMode="numeric"
/>
@ -517,14 +484,14 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
)}
</div>
<div className="row my-2 text-start">
<div className="row my-2 text-start mb-4">
<div className="col-md-12">
<Label htmlFor="description" className="form-label" required>
Description
</Label>
<textarea
id="description"
className="form-control form-control-sm"
className="form-control "
{...register("description")}
rows="2"
></textarea>
@ -536,7 +503,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
</div>
</div>
<div className="row my-2 text-start">
<div className="row my-4 text-start">
<div className="col-md-12">
<Label className="form-label" required>
Upload Bill{" "}

183
src/components/Expenses/PreviewDocument.jsx
View File

@ -1,53 +1,168 @@
import { useState } from "react";
import { useState, useRef, useEffect } from "react";
const PreviewDocument = ({ imageUrl }) => {
const PreviewDocument = ({ files = [] }) => {
const images = Array.isArray(files) ? files : [files];
const [index, setIndex] = useState(0);
const [loading, setLoading] = useState(true);
const [rotation, setRotation] = useState(0);
const [scale, setScale] = useState(1);
const [position, setPosition] = useState({ x: 0, y: 0 });
const [dragging, setDragging] = useState(false);
const startPos = useRef({ x: 0, y: 0 });
const MIN_ZOOM = 0.4;
const MAX_ZOOM = 3;
const currentImage = images[index];
// Reset on image change
useEffect(() => {
setRotation(0);
setScale(1);
setPosition({ x: 0, y: 0 });
setLoading(true);
}, [index]);
const zoomIn = () => setScale((prev) => Math.min(prev + 0.2, MAX_ZOOM));
const zoomOut = () => setScale((prev) => Math.max(prev - 0.2, MIN_ZOOM));
const resetAll = () => {
setRotation(0);
setScale(1);
setPosition({ x: 0, y: 0 });
};
const nextImage = () => {
if (index < images.length - 1) setIndex((i) => i + 1);
};
const prevImage = () => {
if (index > 0) setIndex((i) => i - 1);
};
const handleWheel = (e) => {
e.preventDefault();
if (e.ctrlKey) {
const delta = e.deltaY > 0 ? -0.1 : 0.1;
setScale((prev) => {
let next = prev + delta;
if (next < MIN_ZOOM) next = MIN_ZOOM;
if (next > MAX_ZOOM) next = MAX_ZOOM;
return next;
});
} else {
if (e.deltaY > 0) nextImage();
else prevImage();
}
};
const handleMouseDown = (e) => {
setDragging(true);
startPos.current = {
x: e.clientX - position.x,
y: e.clientY - position.y,
};
};
const handleMouseMove = (e) => {
if (!dragging) return;
setPosition({
x: e.clientX - startPos.current.x,
y: e.clientY - startPos.current.y,
});
};
const handleMouseUp = () => setDragging(false);
const handleDoubleClick = () => resetAll();
return (
<>
<div className="d-flex justify-content-start">
<i
className="bx bx-rotate-right cursor-pointer"
onClick={() => setRotation((prev) => prev + 90)}
></i>
<>
{/* Top Controls */}
<div className="d-flex justify-content-start align-items-center mb-2">
{/* Left */}
<div className="d-flex gap-3">
<i
className="bx bx-rotate-right cursor-pointer fs-4"
onClick={() => setRotation((prev) => prev + 90)}
title="Rotate"
/>
<i
className="bx bx-zoom-in cursor-pointer fs-4"
onClick={zoomIn}
title="Zoom In"
/>
<i
className="bx bx-zoom-out cursor-pointer fs-4"
onClick={zoomOut}
title="Zoom Out"
/>
<i
className="bx bx-reset cursor-pointer fs-4"
onClick={resetAll}
title="Reset"
/>
</div>
</div>
<div
className="position-relative d-flex flex-column justify-content-center align-items-center"
style={{ minHeight: "80vh" }}
>
{loading && (
<div className="text-secondary text-center mb-2">Loading...</div>
)}
<div className="mb-3 d-flex justify-content-center align-items-center">
<div
onWheel={handleWheel}
onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp}
onMouseLeave={handleMouseUp}
onDoubleClick={handleDoubleClick}
className="position-relative d-flex justify-content-center align-items-center bg-light-secondary overflow-hidden"
style={{
minHeight: "70vh",
userSelect: "none",
borderRadius: "10px",
}}
>
{loading && <div className="text-secondary">Loading...</div>}
<img
src={imageUrl}
alt="Full View"
className="img-fluid"
src={currentImage?.preSignedUrl}
alt="Preview"
draggable="false"
style={{
maxHeight: "80vh",
objectFit: "contain",
maxHeight: "60vh",
display: loading ? "none" : "block",
transform: `rotate(${rotation}deg)`,
transition: "transform 0.3s ease",
transform: `
translate(${position.x}px, ${position.y}px)
scale(${scale})
rotate(${rotation}deg)
`,
transition: dragging ? "none" : "transform 0.2s ease",
cursor: dragging ? "grabbing" : "grab",
}}
onLoad={() => setLoading(false)}
/>
</div>
<div className="position-absolute bottom-0 start-0 justify-content-center gap-2">
<button
className="btn btn-outline-secondary"
onClick={() => setRotation(0)}
title="Reset Rotation"
>
<i className="bx bx-reset"></i> Reset
</button>
<div className="d-flex justify-content-between">
<div className="text-center text-muted mt-2 small">
Scroll = change image | Double click = reset
</div>
<div className="d-flex align-items-center gap-2">
<i
className="bx bx-chevron-left cursor-pointer fs-4"
onClick={prevImage}
/>
<span>
{index + 1} / {images.length}
</span>
<i
className="bx bx-chevron-right cursor-pointer fs-4"
onClick={nextImage}
/>
</div>
</div>
</div>
</>
</>
);
};

2
src/components/Expenses/ViewExpense.jsx
View File

@ -393,7 +393,7 @@ const tdsPercentage = Number(watch("tdsPercentage")) || 0;
if (isImage) {
setDocumentView({
IsOpen: true,
Image: doc.preSignedUrl,
Images: data?.documents,
});
}
}}

16
src/components/InfoBlock/WarningBlock.jsx Normal file
View File

@ -0,0 +1,16 @@
import React from 'react'
const WarningBlock = ({content}) => {
return (
<div className="col-12 my-1">
<div className="d-flex align-items-center gap-2 p-3 rounded bg-warning bg-opacity-10 border border-warning-subtle text-start align-item-start">
<i className="bx bx-info-circle text-warning fs-5"></i>
<p className="mb-0 small">
{content}
</p>
</div>
</div>
)
}
export default WarningBlock

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

@ -25,20 +25,28 @@ const Sidebar = () => {
/>
</span> */}
<small
className="app-brand-link fw-bold navbar-brand text-green fs-6"
<a
href="/"
className="app-brand-link d-flex align-items-center gap-1 fw-bold navbar-brand "
>
<span className="app-brand-logo demo">
<img src="/img/brand/marco.png" width="50" />
<span className="app-brand-logo demo d-flex align-items-center">
<img
src="/img/brand/marco.png"
width="40"
height="40"
alt="OnFieldWork logo"
/>
</span>
<span className="text-blue">OnField</span>
<span>Work</span>
<span className="text-dark">.com</span>
</small>
<span className="app-brand-text">
<span className="text-primary ">OnField</span>
<span className="mx-1">Work</span>
<span className="text-dark">.com</span>
</span>
</a>
</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>
</small>
</div>

20
src/components/PaymentRequest/ManagePaymentRequest.jsx
View File

@ -239,7 +239,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
Select Project
</Label> */}
{/* <select
className="form-select form-select-sm"
className="form-select "
{...register("projectId")}
disabled={
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
@ -282,7 +282,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
Expense Category
</Label>
<select
className="form-select form-select-sm"
className="form-select "
id="expenseCategoryId"
{...register("expenseCategoryId")}
disabled={
@ -311,7 +311,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
</div>
{/* Title and Advance Payment */}
<div className="row my-2 text-start">
<div className="row mt-n2 text-start">
<div className="col-md-6">
<Label htmlFor="title" className="form-label" required>
Title
@ -319,7 +319,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
<input
type="text"
id="title"
className="form-control form-control-sm"
className="form-control "
{...register("title")}
disabled={
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
@ -330,7 +330,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
)}
</div>
<div className="col-md-6 ">
<div className="col-md-6">
<Label htmlFor="isAdvance" className="form-label">
Is Advance Payment
</Label>
@ -343,7 +343,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
}
render={({ field }) => (
<div className="d-flex align-items-center gap-3">
<div className="d-flex align-items-center gap-3 mt-3">
<div className="form-check d-flex flex-row m-0 gap-2">
<input
type="radio"
@ -387,6 +387,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
control={control}
minDate={new Date()}
className="w-100"
size="md"
disabled={
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
}
@ -404,7 +405,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
<input
type="number"
id="amount"
className="form-control form-control-sm"
className="form-control "
min="1"
step="0.01"
inputMode="decimal"
@ -429,6 +430,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
setValue("payee", val, { shouldValidate: true })
}
error={errors.payee?.message}
size="md"
disabled={
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
}
@ -458,7 +460,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
</Label>
<select
id="currencyId"
className="form-select form-select-sm"
className="form-select "
{...register("currencyId")}
disabled={
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
@ -490,7 +492,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
</Label>
<textarea
id="description"
className="form-control form-control-sm"
className="form-control "
{...register("description")}
rows="2"
disabled={

7
src/components/Project/ProjectCardView.jsx
View File

@ -8,7 +8,12 @@ const ProjectCardView = ({ data, currentPage, totalPages, paginate }) => {
return (
<div className="row page-min-h">
{data?.length === 0 && (
<p className="text-center text-muted">No projects found.</p>
<div
className="col-12 d-flex justify-content-center align-items-center"
style={{ minHeight: "250px" }}
>
<p className="text-center text-muted m-0">No Infra projects found.</p>
</div>
)}
{data?.map((project) => (

155
src/components/Project/ProjectListView.jsx
View File

@ -126,8 +126,8 @@ const ProjectListView = ({ data, currentPage, totalPages, paginate }) => {
return (
<div className="card page-min-h py-4 px-6 shadow-sm">
<div className="table-responsive text-nowrap page-min-h">
<table className="table table-hover align-middle m-0">
<div className="table-responsive text-nowrap">
<table className="table table-hover align-middle m-0">
<thead className="border-bottom ">
<tr>
{projectColumns.map((col) => (
@ -143,77 +143,94 @@ const ProjectListView = ({ data, currentPage, totalPages, paginate }) => {
</tr>
</thead>
<tbody>
{data?.map((project) => (
<tr key={project.id}>
{projectColumns.map((col) => (
<td
key={col.key}
colSpan={col.colSpan}
className={`${col.className} py-5`}
style={{ paddingTop: "20px", paddingBottom: "20px" }}
>
{col.getValue
? col.getValue(project)
: project[col.key] || "N/A"}
</td>
))}
<td
className={`mx-2 ${
canManageProject ? "d-sm-table-cell" : "d-none"
}`}
>
<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"
{data?.length > 0 ? (
data?.map((project) => (
<tr key={project.id}>
{projectColumns.map((col) => (
<td
key={col.key}
colSpan={col.colSpan}
className={`${col.className} py-5`}
style={{ paddingTop: "20px", paddingBottom: "20px" }}
>
<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
aria-label="click to View details"
className="dropdown-item cursor-pointer"
>
<i className="bx bx-detail me-2"></i>
<span className="align-left">View details</span>
</a>
</li>
{col.getValue
? col.getValue(project)
: project[col.key] || "N/A"}
</td>
))}
<td
className={`mx-2 ${canManageProject ? "d-sm-table-cell" : "d-none"
}`}
>
<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
aria-label="click to View details"
className="dropdown-item cursor-pointer"
>
<i className="bx bx-detail me-2"></i>
<span className="align-left">View details</span>
</a>
</li>
<li>
<a
className="dropdown-item cursor-pointer"
onClick={() =>
setMangeProject({
isOpen: true,
Project: project.id,
})
}
>
<i className="bx bx-pencil me-2"></i>
<span className="align-left">Modify</span>
</a>
</li>
<li onClick={() => handleViewActivities(project.id)}>
<a className="dropdown-item cursor-pointer">
<i className="bx bx-task me-2"></i>
<span className="align-left">Activities</span>
</a>
</li>
</ul>
</div>
<li>
<a
className="dropdown-item cursor-pointer"
onClick={() =>
setMangeProject({
isOpen: true,
Project: project.id,
})
}
>
<i className="bx bx-pencil me-2"></i>
<span className="align-left">Modify</span>
</a>
</li>
<li onClick={() => handleViewActivities(project.id)}>
<a className="dropdown-item cursor-pointer">
<i className="bx bx-task me-2"></i>
<span className="align-left">Activities</span>
</a>
</li>
</ul>
</div>
</td>
</tr>
))
) : (
<tr
className="no-hover"
style={{
pointerEvents: "none",
backgroundColor: "transparent",
}}
>
<td
colSpan={projectColumns.length + 1}
className="text-center align-middle"
style={{ height: "300px", borderBottom: "none" }}
>
No Infra projects available
</td>
</tr>
))}
)}
</tbody>
</table>
</div>

4
src/components/Project/ProjectStatistics.jsx
View File

@ -165,7 +165,7 @@ const ProjectStatistics = ({ project }) => {
}, [selectedProject]);
return (
<div className="card h-100">
<>
<div className="card-header text-start">
<h5 className="card-action-title mb-0">
{" "}
@ -242,8 +242,8 @@ const ProjectStatistics = ({ project }) => {
</li>
</ul>
</div>
</>
</div>
);
};

61
src/components/RecurringExpense/ManageRecurringExpense.jsx
View File

@ -165,7 +165,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
<div className="row my-2 text-start">
<div className="col-md-6">
{/* <select
className="form-select form-select-sm"
className="form-select"
{...register("projectId")}
>
<option value="">Select Project</option>
@ -201,7 +201,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
Expense Category
</Label>
<select
className="form-select form-select-sm"
className="form-select"
id="expenseCategoryId"
{...register("expenseCategoryId")}
>
@ -227,7 +227,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
</div>
{/* Title and Is Variable */}
<div className="row my-2 text-start">
<div className="row my-2 text-start mt-n2">
<div className="col-md-6">
<Label htmlFor="title" className="form-label" required>
Title
@ -235,7 +235,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
<input
type="text"
id="title"
className="form-control form-control-sm"
className="form-control "
{...register("title")}
placeholder="Enter title"
/>
@ -244,7 +244,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
)}
</div>
<div className="col-md-6 mt-2">
<div className="col-md-6">
<div className="d-flex justify-content-start align-items-center text-nowrap gap-2">
<Label htmlFor="isVariable" className="form-label mb-0" required>
Payment Type
@ -252,16 +252,15 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
<HoverPopup
title="Payment Type"
id="payment_type"
content={
<div className=" w-50">
<p>
Choose whether the payment amount varies or remains fixed
each cycle.
<br />
<strong>Is Variable:</strong> Amount changes per cycle.
<br />
<strong>Fixed:</strong> Amount stays constant.
</p>
<div className="text-wrap" style={{ maxWidth: "200px" }}>
Choose whether the payment amount varies or remains fixed
each cycle.
<br />
<strong>Is Variable:</strong> Amount changes per cycle.
<br />
<strong>Fixed:</strong> Amount stays constant.
</div>
}
>
@ -274,7 +273,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
control={control}
defaultValue={defaultRecurringExpense.isVariable ?? false}
render={({ field }) => (
<div className="d-flex align-items-center gap-3 mt-1">
<div className="d-flex align-items-center gap-3 mt-2">
<div className="form-check">
<input
type="radio"
@ -327,6 +326,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
control={control}
minDate={new Date()}
className="w-100"
size="md"
/>
{errors.strikeDate && (
<small className="danger-text">{errors.strikeDate.message}</small>
@ -340,7 +340,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
<input
type="number"
id="amount"
className="form-control form-control-sm"
className="form-control "
min="1"
step="0.01"
inputMode="decimal"
@ -354,7 +354,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
</div>
{/* Payee and Currency */}
<div className="row my-2 text-start">
<div className="row my-2 text-start mt-3">
<div className="col-md-6">
<Label htmlFor="payee" className="form-label" required>
Payee (Supplier Name/Transporter Name/Other)
@ -367,6 +367,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
}
error={errors.payee?.message}
placeholder="Select or enter payee"
size="md"
/>
</div>
@ -376,7 +377,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
</Label>
<select
id="currencyId"
className="form-select form-select-sm"
className="form-select"
{...register("currencyId")}
>
<option value="">Select Currency</option>
@ -398,7 +399,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
</div>
{/* Frequency To and Status Id */}
<div className="row my-2 text-start">
<div className="row my-2 text-start mt-n2">
<div className="col-md-6">
<div className="d-flex justify-content-start align-items-center gap-2">
<Label htmlFor="frequency" className="form-label mb-0" required>
@ -420,7 +421,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
<select
id="frequency"
className="form-select form-select-sm mt-1"
className="form-select mt-1"
{...register("frequency", { valueAsNumber: true })}
>
<option value="">Select Frequency</option>
@ -442,7 +443,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
</Label>
<select
id="statusId"
className="form-select form-select-sm"
className="form-select"
{...register("statusId")}
>
<option value="">Select Status</option>
@ -476,10 +477,10 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
title="Payment Buffer Days"
id="payment_buffer_days"
content={
<p>
<div className="text-wrap" style={{ maxWidth: "200px" }}>
Number of extra days allowed after the due date before
payment is considered late.
</p>
</div>
}
>
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
@ -489,7 +490,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
<input
type="number"
id="paymentBufferDays"
className="form-control form-control-sm mt-1"
className="form-control mt-1"
min="0"
step="1"
{...register("paymentBufferDays", { valueAsNumber: true })}
@ -511,10 +512,11 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
<HoverPopup
title="End Date"
id="end_date"
content={
<p>
<div className="text-wrap" style={{ maxWidth: "200px" }}>
The date when the last payment in the recurrence occurs.
</p>
</div>
}
>
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
@ -526,6 +528,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
control={control}
minDate={StrikeDate}
className="w-100 mt-1"
size="md"
/>
{errors.endDate && (
@ -568,7 +571,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
</Label>
<textarea
id="description"
className="form-control form-control-sm"
className="form-control "
{...register("description")}
rows="2"
></textarea>
@ -592,8 +595,8 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
{createPending || isPending
? "Please wait...."
: requestToEdit
? "Update"
: "Save as Draft"}
? "Update"
: "Save as Draft"}
</button>
</div>
</form>

1
src/components/RecurringExpense/RecurringExpenseList.jsx
View File

@ -166,7 +166,6 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
}
);
};
console.log("Tanish",filteredData)
return (
<>
{IsDeleteModalOpen && (

5
src/components/ServiceProject/JobList.jsx
View File

@ -175,12 +175,9 @@ const JobList = ({ isArchive }) => {
<td
key={col.key}
className={col.className}
// onClick={() =>
// setSelectedJob({ showCanvas: true, job: row?.id })
// }
onClick={() => {
if (!isArchive) {
setSelectedJob({ showCanvas: true, job: e?.id });
setSelectedJob({ showCanvas: true, job: row?.id });
}
}}

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

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

5
src/components/ServiceProject/ManageServiceProject.jsx
View File

@ -222,10 +222,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
type="text"
className="form-control form-control-sm"
{...register("contactName")}
placeholder="Enter Employee name.."
onInput={(e) => {
e.target.value = e.target.value.replace(/[^A-Za-z ]/g, "");
}}
placeholder="Enter Employee name.."
/>
{errors?.contactName && (
<span className="danger-text">{errors.contactName.message}</span>

13
src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx
View File

@ -237,14 +237,17 @@ const ServiceBranch = () => {
!isError &&
(!data?.data || data.data.length === 0) && (
<tr>
<td
colSpan={columns.length + 1}
className="text-center py-12"
>
No Branch Found
<td colSpan={columns.length + 1}>
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "150px" }}
>
No Branch Found
</div>
</td>
</tr>
)}
</tbody>
</table>

2
src/components/ServiceProject/ServiceProjectJob/ChangeStatus.jsx
View File

@ -31,7 +31,7 @@ const ChangeStatus = ({ statusId, projectId, jobId, popUpId }) => {
} = methods;
const { mutate: UpdateStatus, isPending } = useUpdateServiceProjectJob(() => {
// handleClose();
handleClose();
});
const onSubmit = (formData) => {
const payload =

2
src/components/ServiceProject/ServiceProjectJob/JobComments.jsx
View File

@ -150,7 +150,7 @@ const JobComments = ({ data }) => {
type="submit"
disabled={!watch("comment")?.trim() || isPending}
>
Send
Submit
</button>
</div>
</form>

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

@ -172,6 +172,20 @@ const ManageJob = ({ Job }) => {
<div className="container">
<AppFormProvider {...methods}>
<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 ">
<Label required>Title</Label>
<input
@ -244,20 +258,7 @@ const ManageJob = ({ Job }) => {
placeholder="Enter Tag"
/>
</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">
<Label required>Description</Label>
<textarea
@ -276,7 +277,7 @@ const ManageJob = ({ Job }) => {
? "Please wait..."
: Job
? "Update"
: "Submit"}
: "Assign"}
</button>
</div>
</form>

7
src/components/ServiceProject/ServiceProjectJob/ManageJobTicket.jsx
View File

@ -69,7 +69,7 @@ const ManageJobTicket = ({ Job }) => {
id="STATUS_CHANEG"
Mode="click"
className=""
align="right"
align="left"
content={
<ChangeStatus
statusId={data?.status?.id}
@ -141,7 +141,7 @@ const ManageJobTicket = ({ Job }) => {
})()}
</div>
{data?.projectBranch && (
<div className="d-flex gap-3 my-2 position-relative" ref={drawerRef} >
<div className="d-flex gap-3 my-2 position-relative" ref={drawerRef} >
<span className="text-secondary">
<i className="bx bx-buildings"></i> Branch Name:
</span>
@ -149,7 +149,8 @@ const ManageJobTicket = ({ Job }) => {
<HoverPopup
id="BRANCH_DETAILS"
Mode="click"
align="auto"
align="right"
minWidth="340px"
boundaryRef={drawerRef}
content={<BranchDetails branch={data?.projectBranch?.id} />}
>

3
src/components/ServiceProject/ServiceProjectSchema.jsx
View File

@ -22,8 +22,7 @@ export const projectSchema = z.object({
contactName: z
.string()
.trim()
.min(1, "Contact name is required")
.regex(/^[A-Za-z\s]+$/, "Contact name can contain only letters"),
.min(1, "Contact name is required"),
contactPhone: z
.string()

23
src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx
View File

@ -26,13 +26,6 @@ const ServiceProjectCard = ({ project, isCore = true }) => {
const ManageProject = useHasUserPermission(MANAGE_PROJECT);
const { setMangeProject, setManageServiceProject } = useProjectContext();
const getProgress = (planned, completed) => {
return (completed * 100) / planned + "%";
};
const getProgressInNumber = (planned, completed) => {
return (completed * 100) / planned;
};
const handleClose = () => setShowModal(false);
const handleViewProject = () => {
@ -43,10 +36,6 @@ const ServiceProjectCard = ({ project, isCore = true }) => {
navigate(`/service-projects/${project.id}`);
}
};
const handleViewActivities = () => {
dispatch(setProjectId(project.id));
navigate(`/activities/records?project=${project.id}`);
};
const handleManage = () => {
if (isCore) {
setMangeProject({
@ -68,6 +57,8 @@ const ServiceProjectCard = ({ project, isCore = true }) => {
DeleteProject(projectId, false);
};
return (
<>
<ConfirmModal
@ -98,7 +89,7 @@ const ServiceProjectCard = ({ project, isCore = true }) => {
>
{project?.shortName ? project?.shortName : project?.name}
</h5>
<div className="client-info text-body">
<div className="client-info text-body text-start">
<span>{project?.shortName ? project?.name : ""}</span>
</div>
</div>
@ -138,14 +129,6 @@ const ServiceProjectCard = ({ project, isCore = true }) => {
<span className="align-left">Modify</span>
</a>
</li>
{isCore && (
<li onClick={handleViewActivities}>
<a className="dropdown-item">
<i className="bx bx-task me-2"></i>
<span className="align-left">Activities</span>
</a>
</li>
)}
{!isCore && (
<li
onClick={() =>

209
src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx Normal file
View File

@ -0,0 +1,209 @@
import React, { useState } from "react";
import { MANAGE_PROJECT, PROJECT_STATUS } from "../../../utils/constants";
import { useProjects } from "../../../hooks/useProjects";
import { formatNumber, formatUTCToLocalTime } from "../../../utils/dateUtils";
import ProgressBar from "../../common/ProgressBar";
import {
getProjectStatusColor,
getProjectStatusName,
} from "../../../utils/projectStatus";
import { useDispatch } from "react-redux";
import { setProjectId } from "../../../slices/localVariablesSlice";
import { useNavigate } from "react-router-dom";
import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
import { useProjectContext } from "../../../pages/project/ProjectPage";
import usePagination from "../../../hooks/usePagination";
import Pagination from "../../common/Pagination";
const ServiceProjectList = ({
data,
currentPage,
totalPages,
paginate,
isCore = true,
}) => {
const dispatch = useDispatch();
const navigate = useNavigate();
const { setMangeProject, setManageServiceProject } = useProjectContext();
const handleClose = () => setShowModal(false);
// check Permissions
const canManageProject = useHasUserPermission(MANAGE_PROJECT);
const projectColumns = [
{
key: "projectName",
label: "Project Name",
className: "text-start py-3",
getValue: (p) => (
<div
className="text-primary cursor-pointer fw-bold py-3"
onClick={() => {
dispatch(setProjectId(p.id));
navigate(`/service-projects/${p.id}`);
}}
>
{p.shortName ? `${p.name} (${p.shortName})` : p.name}
</div>
),
},
{
key: "client.contactPerson",
label: "Contact Person",
className: "text-start small",
getValue: (p) => p.client?.contactPerson || "N/A",
},
{
key: "assignedDate",
label: "Assign Date",
className: "text-center small",
getValue: (p) => formatUTCToLocalTime(p.assignedDate),
},
{
key: "status",
label: "Status",
className: "text-center small",
getValue: (p) => (
<span className={`badge ${getProjectStatusColor(p.status?.id)}`}>
{p.status?.status}
</span>
),
},
];
const handleViewProject = (p) => {
if (isCore) {
dispatch(setProjectId(p.id));
navigate(`/projects/details`);
} else {
navigate(`/service-projects/${p.id}`);
}
};
const handleManage = (p) => {
if (isCore) {
setMangeProject({
isOpen: true,
Project: p.id,
});
} else {
setManageServiceProject({
isOpen: true,
project: p.id,
});
}
};
return (
<div>
<div className="card page-min-h py-4 px-6 shadow-sm">
<div className="table-responsive text-nowrap page-min-h">
<table className="table table-hover align-middle m-0">
<thead className="border-bottom ">
<tr>
{projectColumns.map((col) => (
<th
key={col.key}
colSpan={col.colSpan}
className={`${col.className} table_header_border`}
>
{col.label}
</th>
))}
<th className="text-center py-3">Action</th>
</tr>
</thead>
<tbody>
{data?.length > 0 ? (
data.map((project) => (
<tr key={project.id}>
{projectColumns.map((col) => (
<td
key={col.key}
colSpan={col.colSpan}
className={`${col.className} py-5`}
style={{ paddingTop: "20px", paddingBottom: "20px" }}
>
{col.getValue
? col.getValue(project)
: project[col.key] || "N/A"}
</td>
))}
<td
className={`mx-2 ${
canManageProject ? "d-sm-table-cell" : "d-none"
}`}
>
<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
aria-label="click to View details"
className="dropdown-item"
onClick={() => handleViewProject(project)}
>
<i className="bx bx-detail me-2"></i>
<span className="align-left">View details</span>
</a>
</li>
<li>
<a
className="dropdown-item"
onClick={() => handleManage(project)}
>
<i className="bx bx-pencil me-2"></i>
<span className="align-left">Modify</span>
</a>
</li>
</ul>
</div>
</td>
</tr>
))
) : (
<tr
className="no-hover"
style={{
pointerEvents: "none",
backgroundColor: "transparent",
}}
>
<td
colSpan={projectColumns.length + 1}
className="text-center align-middle"
style={{ height: "300px", borderBottom: "none" }}
>
No Service projects available
</td>
</tr>
)}
</tbody>
</table>
</div>
<Pagination
currentPage={currentPage}
totalPages={totalPages}
paginate={paginate}
/>
</div>
</div>
);
};
export default ServiceProjectList;

2
src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamList.jsx
View File

@ -77,6 +77,7 @@ const ServiceProjectTeamList = () => {
<td
colSpan={servceProjectColmen.length}
className="text-center py-4 border-0"
style={{ height: "200px" }}
>
{isLoading ? (
<SpinnerLoader />
@ -85,6 +86,7 @@ const ServiceProjectTeamList = () => {
)}
</td>
</tr>
)}
</tbody>
</table>

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

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

192
src/components/common/HoverPopup.jsx
View File

@ -6,10 +6,6 @@ import {
togglePopup,
} from "../../slices/localVariablesSlice";
/**
* align: "auto" | "left" | "right"
* boundaryRef: optional ref to the drawer/container element to use as boundary
*/
const HoverPopup = ({
id,
title,
@ -17,7 +13,9 @@ const HoverPopup = ({
children,
className = "",
Mode = "hover",
align = "auto",
align = "auto", // <-- dynamic placement
minWidth = "250px",
maxWidth = "350px",
boundaryRef = null,
}) => {
const dispatch = useDispatch();
@ -26,20 +24,15 @@ const HoverPopup = ({
const triggerRef = useRef(null);
const popupRef = useRef(null);
const handleMouseEnter = () => {
if (Mode === "hover") dispatch(openPopup(id));
};
const handleMouseLeave = () => {
if (Mode === "hover") dispatch(closePopup(id));
};
const handleMouseEnter = () => Mode === "hover" && dispatch(openPopup(id));
const handleMouseLeave = () => Mode === "hover" && dispatch(closePopup(id));
const handleClick = (e) => {
if (Mode === "click") {
e.stopPropagation();
dispatch(togglePopup(id));
}
if (Mode !== "click") return;
e.stopPropagation();
dispatch(togglePopup(id));
};
// Close on outside click when using click mode
// Close popup when clicking outside (click mode)
useEffect(() => {
if (Mode !== "click" || !visible) return;
@ -56,142 +49,95 @@ const HoverPopup = ({
document.addEventListener("click", handler);
return () => document.removeEventListener("click", handler);
}, [Mode, visible, dispatch, id]);
}, [visible, Mode, id, dispatch]);
// Positioning effect: respects align prop and stays inside boundary (drawer)
// ---------- DYNAMIC POSITIONING LOGIC ----------
useEffect(() => {
if (!visible || !popupRef.current || !triggerRef.current) return;
// run in next frame so DOM/layout settles
requestAnimationFrame(() => {
const popup = popupRef.current;
const trigger = triggerRef.current;
// choose boundary: provided boundaryRef or nearest positioned parent (popup.parentElement)
const boundaryEl =
(boundaryRef && boundaryRef.current) || popup.parentElement;
if (!boundaryEl) return;
const boundaryRect = boundaryEl.getBoundingClientRect();
const triggerRect = triggerRef.current.getBoundingClientRect();
// reset styles first
popup.style.left = "";
popup.style.right = "";
popup.style.transform = "";
popup.style.top = "";
const triggerRect = trigger.getBoundingClientRect();
const popupRect = popup.getBoundingClientRect();
const parentRect = boundaryRect; // alias
// Convert trigger center to parent coordinates
const triggerCenterX =
triggerRect.left + triggerRect.width / 2 - parentRect.left;
let left;
// preferred left so popup center aligns to trigger center:
const preferredLeft = triggerCenterX - popupRect.width / 2;
// AUTO ALIGN (smart)
if (align === "auto") {
const center =
triggerRect.left +
triggerRect.width / 2 -
boundaryRect.left -
popupRect.width / 2;
// Helpers to set styles in parent's coordinate system:
const setLeft = (leftPx) => {
popup.style.left = `${leftPx}px`;
popup.style.right = "auto";
popup.style.transform = "none";
};
const setRight = (rightPx) => {
popup.style.left = "auto";
popup.style.right = `${rightPx}px`;
popup.style.transform = "none";
};
// If user forced align:
if (align === "left") {
// align popup's left to parent's left (0)
setLeft(0);
return;
}
if (align === "right") {
// align popup's right to parent's right (0)
setRight(0);
return;
}
if (align === "center") {
popup.style.left = "50%";
popup.style.right = "auto";
popup.style.transform = "translateX(-50%)";
return;
left = Math.max(
0,
Math.min(center, boundaryRect.width - popupRect.width)
);
}
// align === "auto": try preferred centered position, but flip fully if overflow
// clamp preferredLeft to boundaries so it doesn't render partially outside
const leftIfCentered = Math.max(
0,
Math.min(preferredLeft, parentRect.width - popupRect.width)
);
// if centered fits, use it
if (leftIfCentered === preferredLeft) {
setLeft(leftIfCentered);
return;
// LEFT ALIGN
else if (align === "left") {
left = triggerRect.left - boundaryRect.left;
if (left + popupRect.width > boundaryRect.width) {
left = boundaryRect.width - popupRect.width; // clamp right
}
}
// if centering would overflow right -> stick popup fully to left (left=0)
if (preferredLeft > parentRect.width - popupRect.width) {
// place popup so its right aligns to parent's right
// i.e., left = parent width - popup width
setLeft(parentRect.width - popupRect.width);
return;
// RIGHT ALIGN
else if (align === "right") {
left =
triggerRect.left +
triggerRect.width -
boundaryRect.left -
popupRect.width;
if (left < 0) left = 0; // clamp left
}
// if centering would overflow left -> stick popup fully to left=0
if (preferredLeft < 0) {
setLeft(0);
return;
}
// fallback center
setLeft(leftIfCentered);
popup.style.left = `${left}px`;
popup.style.top = `100%`;
});
}, [visible, align, boundaryRef]);
return (
<div
className="d-inline-block position-relative" // <-- ADD THIS !!
style={{
maxWidth: "calc(700px - 100px)",
width: "100%",
wordWrap: "break-word",
overflow: "visible", // also make sure popup isn't clipped
}}
>
<div
className="d-inline-block"
ref={triggerRef}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
style={{ cursor: "pointer" }}
>
{children}
</div>
// ------------------------------------------------
{visible && (
return (
<div className="d-inline-block position-relative" style={{ overflow: "visible" }}>
<div
ref={popupRef}
className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
style={{
zIndex: 2000,
top: "100%",
width: "max-content",
minWidth: "120px",
}}
onClick={(e) => e.stopPropagation()}
ref={triggerRef}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
style={{ cursor: "pointer", display: "inline-block" }}
>
{title && <h6 className="fw-semibold mb-2">{title}</h6>}
<div>{content}</div>
{children}
</div>
)}
</div>
);
{visible && (
<div
ref={popupRef}
className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
style={{
zIndex: 2000,
minWidth,
maxWidth,
wordWrap: "break-word",
}}
onClick={(e) => e.stopPropagation()}
>
{title && <h6 className="fw-semibold mb-2">{title}</h6>}
{content}
</div>
)}
</div>
);
};
export default HoverPopup;

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

@ -4,6 +4,7 @@ const InputSuggestions = ({
organizationList = [],
value,
onChange,
size = "sm",
error,
disabled = false,
}) => {
@ -27,7 +28,7 @@ const InputSuggestions = ({
return (
<div className="mb-3 position-relative">
<input
className="form-control form-control-sm"
className={`form-control form-control-${size}`}
value={value}
onChange={handleInputChange}
onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
@ -50,7 +51,6 @@ const InputSuggestions = ({
{filteredList.map((org) => (
<li
key={org}
className="ropdown-item"
style={{
cursor: "pointer",
padding: "5px 12px",
@ -58,15 +58,14 @@ const InputSuggestions = ({
transition: "background-color 0.2s",
}}
onMouseDown={() => handleSelectSuggestion(org)}
className={`dropdown-item ${
org === value ? "active" : ""
className={`dropdown-item ${org === value ? "active" : ""
}`}
>
{org}
</li>
))}
</ul>
)}
{error && <small className="danger-text">{error}</small>}

111
src/components/common/SigleFileUploader.jsx Normal file
View File

@ -0,0 +1,111 @@
import { useRef } from "react";
import Label from "./Label";
import Tooltip from "./Tooltip";
import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
const SingleFileUploader = ({
label = "Upload Document",
required = false,
value,
onChange,
onRemove,
disabled,
error,
accept = ".pdf,.jpg,.jpeg,.png",
maxSizeMB = 25,
hint = "(PDF, JPG, PNG, max 5MB)",
}) => {
const inputRef = useRef(null);
const handleFileSelect = async (e) => {
const file = e.target.files?.[0];
if (!file) return;
// Validate size
if (file.size > maxSizeMB * 1024 * 1024) {
alert(`File size cannot exceed ${maxSizeMB}MB`);
e.target.value = "";
return;
}
// Convert to base64
const base64Data = await new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result.split(",")[1]);
reader.onerror = (err) => reject(err);
});
const attachmentObj = {
fileName: file.name,
base64Data,
invoiceAttachmentTypeId: "", // set dynamically if needed
contentType: file.type,
fileSize: file.size,
description: "",
isActive: true,
};
onChange(attachmentObj);
e.target.value = "";
};
return (
<div className="col-md-12">
<Label className="form-label" required={required}>
{label}
</Label>
<div
className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
style={{ cursor: "pointer" }}
onClick={() => inputRef.current.click()}
>
<i className="bx bx-cloud-upload d-block bx-lg"></i>
<span className="text-muted d-block">
Click to select or click here to browse
</span>
<small className="text-muted">{hint}</small>
<input
type="file"
ref={inputRef}
accept={accept}
style={{ display: "none" }}
onChange={handleFileSelect}
disabled={disabled}
/>
</div>
{error && <small className="danger-text">{error}</small>}
{value && (
<div className="mt-3">
<div className="d-flex align-items-center justify-content-between bg-white border rounded p-2">
<div className="d-flex align-items-center gap-2">
<i
className={`bx ${getIconByFileType(value.contentType)} fs-3`}
></i>
<div className="d-flex flex-column text-truncate">
<span className="fw-semibold small text-truncate">
{value.fileName}
</span>
<small className="text-muted">
{value.fileSize ? formatFileSize(value.fileSize) : ""}
</small>
</div>
</div>
<i
className="bx bx-trash text-danger fs-5 cursor-pointer"
onClick={onRemove}
></i>
</div>
</div>
)}
</div>
);
};
export default SingleFileUploader;

68
src/components/purchase/DeliverChallanList.jsx Normal file
View File

@ -0,0 +1,68 @@
import React from "react";
import { useDeliverChallane } from "../../hooks/usePurchase";
import { SpinnerLoader } from "../common/Loader";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { FileView } from "../Expenses/Filelist";
const DeliverChallanList = ({ purchaseId }) => {
const { data, isLoading, isError, error } = useDeliverChallane(purchaseId);
if (isLoading) {
return (
<div className="d-flex justify-content-center align-items-center text-center vh-50">
<SpinnerLoader />
</div>
);
}
if (isError) {
return (
<div className="py-3">
<Error error={error} />
</div>
);
}
if (!isLoading && data.length === 0)
return (
<div className="d-flex justify-content-center align-items-center text-center vh-50">
<p className="mb-0">Not Yet</p>
</div>
);
return (
<div className="list-group list-group-flush text-start">
{data.map((item) => (
<div
key={item.id}
className="list-group-item d-flex justify-content-between align-items-start flex-wrap px-3 w-full"
>
{/* LEFT SIDE */}
<div className=" pe-3 text-break w-full">
<div className="d-flex justify-content-between">
<p className="mb-1 fw-semibold">{item.deliveryChallanNumber}</p>
<small className="text-muted text-end">
{formatUTCToLocalTime(item.deliveryChallanDate, true)}
</small>
</div>
<div className="mb-1 small text-muted text-break">
<span className="fw-semibold me-1">Invoice:</span>
{item.purchaseInvoice?.title} (
{item.purchaseInvoice?.purchaseInvoiceUId})
</div>
<p className="mb-1 text-break">
<span className="fw-semibold">Description:</span>{" "}
{item.description || "-"}
</p>
{item.attachment?.preSignedUrl && (
<FileView file={item.attachment} />
)}
</div>
</div>
))}
</div>
);
};
export default DeliverChallanList;

200
src/components/purchase/DeliveryChallane.jsx Normal file
View File

@ -0,0 +1,200 @@
import React, { useState } from "react";
import {
useAddDeliverChallan,
useDeliverChallane,
} from "../../hooks/usePurchase";
import { SpinnerLoader } from "../common/Loader";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import DeliverChallanList from "./DeliverChallanList";
import { AppFormController, useAppForm } from "../../hooks/appHooks/useAppForm";
import { zodResolver } from "@hookform/resolvers/zod";
import {
DeliveryChallanDefaultValue,
DeliveryChallanSchema,
} from "./PurchaseSchema";
import Label from "../common/Label";
import DatePicker from "../common/DatePicker";
import { useInvoiceAttachmentTypes } from "../../hooks/masterHook/useMaster";
import SelectField from "../common/Forms/SelectField";
import Filelist from "../Expenses/Filelist";
import SingleFileUploader from "../common/SigleFileUploader";
import { localToUtc } from "../../utils/appUtils";
import WarningBlock from "../InfoBlock/WarningBlock";
import { FILE_UPLOAD_INFO } from "../../utils/staticContent";
const DeliveryChallane = ({ purchaseId }) => {
const [file, setFile] = useState(null);
const {
register,
control,
handleSubmit,
setValue,
trigger,
watch,
reset,
formState: { errors },
} = useAppForm({
resolver: zodResolver(DeliveryChallanSchema),
defaultValues: DeliveryChallanDefaultValue,
});
const { data, isLoading } = useInvoiceAttachmentTypes();
const { mutate: AddChallan, isPending } = useAddDeliverChallan(() => {
setFile(null);
setValue("attachment", null, { shouldValidate: false });
reset({
...DeliveryChallanDefaultValue,
attachment: null,
});
});
const onSubmit = async (formData) => {
const valid = await trigger();
if (!valid) return;
const { invoiceAttachmentTypeId, ...rest } = formData;
const payload = {
...rest,
attachment: formData.attachment
? {
...formData.attachment,
invoiceAttachmentTypeId,
}
: null,
purchaseInvoiceId: purchaseId,
deliveryChallanDate: formData.deliveryChallanDate
? localToUtc(formData.deliveryChallanDate)
: null,
};
AddChallan(payload);
};
const isUploaded = watch("attachment");
const isDocumentType = watch("invoiceAttachmentTypeId");
return (
<div className="row px-3 px-sm-1">
<div className="fw-semibold mb-3 fs-5">Delivery Challans</div>
<div className="col-md-6">
<form
onSubmit={handleSubmit(onSubmit)}
className="row g-3 text-start"
noValidate
>
{/* Challan Number */}
<div className="col-md-6">
<Label required>Delivery Challan No</Label>
<input
type="text"
className="form-control"
{...register("deliveryChallanNumber")}
/>
{errors?.deliveryChallanNumber && (
<small className="danger-text">
{errors.deliveryChallanNumber.message}
</small>
)}
</div>
<div className="col-md-6">
<Label required>Delivery Date</Label>
<DatePicker
name="deliveryChallanDate"
control={control}
className="w-100"
size="xs"
/>
{errors?.deliveryChallanDate && (
<small className="danger-text">
{errors.deliveryChallanDate.message}
</small>
)}
</div>
<div className="col-12">
<Label required>Description</Label>
<textarea
className="form-control form-control-sm"
rows="3"
{...register("description")}
/>
{errors?.description && (
<small className="danger-text">
{errors.description.message}
</small>
)}
</div>
<div className="col-12">
<AppFormController
name="invoiceAttachmentTypeId"
control={control}
render={({ field }) => (
<SelectField
label="Select Document Type"
options={data ?? []}
placeholder="Choose Type"
labelKeyKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
isLoading={isLoading}
className="m-0"
/>
)}
/>
{errors?.invoiceAttachmentTypeId && (
<small className="danger-text">
{errors.invoiceAttachmentTypeId.message}
</small>
)}
</div>
<SingleFileUploader
label="Upload Bill"
required
value={file}
onChange={(selectedFile) => {
setFile(selectedFile);
setValue("attachment", selectedFile, { shouldValidate: true });
}}
disabled={!isDocumentType}
onRemove={() => {
setFile(null);
setValue("attachment", null, { shouldValidate: true });
}}
error={errors?.attachment?.message}
/>
<div className="col-12 text-end my-3">
<button type="submit" className="btn btn-sm btn-primary px-4">
{isPending ? "Please Wait..." : "Submit"}
</button>
</div>
</form>
{!isUploaded && (
<WarningBlock content={FILE_UPLOAD_INFO} />
)}
</div>
<div className="col-md-6 text-start">
<div className="d-flex justiffy-content-start align-items-center gap-1 ms-2">
<i className="bx bx-history bx-xs"></i>{" "}
<p className="fw-medium mb-0">History</p>
</div>
<div className="overflow-auto " style={{ maxHeight: "420px" }}>
<DeliverChallanList purchaseId={purchaseId} />
</div>
</div>
</div>
);
};
export default DeliveryChallane;

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

@ -0,0 +1,238 @@
import React, { useEffect, useMemo, useCallback, 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,
usePurchase,
useUpdatePurchaseInvoice,
} from "../../hooks/usePurchase";
import { error } from "pdf-lib";
const ManagePurchase = ({ onClose, purchaseId }) => {
const { data } = usePurchase(purchaseId);
const [activeTab, setActiveTab] = useState(0);
const [completedTabs, setCompletedTabs] = useState([]);
const stepsConfig = useMemo(
() => [
{
name: "Vendor & Project Details",
icon: "bx bx-user bx-md",
subtitle: "Vendor information and project association",
component: <PurchasePartyDetails purchase={data} />,
},
{
name: "Invoice & Logistics",
icon: "bx bx-receipt bx-md",
subtitle: "Invoice, e-Way bill, and logistics information",
component: <PurchaseTransportDetails />,
},
{
name: "Invoice & Tax Amount",
icon: "bx bx-credit-card bx-md",
subtitle: "Payment terms, tax breakdown, and due dates",
component: <PurchasePaymentDetails purchaseId={purchaseId} />,
},
],
[data, purchaseId]
);
const purchaseOrder = useAppForm({
resolver: zodResolver(PurchaseSchema),
defaultValues: defaultPurchaseValue,
mode: "onChange",
shouldUnregister: false,
});
const { reset, formState } = purchaseOrder;
useEffect(() => {
if (!purchaseId || !data) return;
reset({
...data,
projectId: data?.project?.id,
organizationId: data?.organization?.id,
supplierId: data?.supplier?.id,
invoiceAttachmentTypeId: null,
attachments:
data?.attachments?.map((doc) => ({
fileName: doc.fileName,
base64Data: null,
contentType: doc.contentType,
documentId: doc.documentId ?? null,
invoiceAttachmentTypeId: doc.invoiceAttachmentType?.id ?? null,
fileSize: 0,
description: "",
preSignedUrl: doc.preSignedUrl,
isActive: doc.isActive ?? true,
})) || [],
});
setCompletedTabs([0, 1, 2]);
}, [purchaseId, data, reset]);
const handleNext = useCallback(async () => {
const fields = getStepFields(activeTab);
const valid = await purchaseOrder.trigger(fields);
if (!valid) return;
setCompletedTabs((prev) => [...new Set([...prev, activeTab])]);
setActiveTab((prev) => Math.min(prev + 1, stepsConfig.length - 1));
}, [activeTab, purchaseOrder, stepsConfig.length]);
const handlePrev = useCallback(() => {
setActiveTab((prev) => Math.max(prev - 1, 0));
}, []);
const generatePatchOps = useCallback(
(formData) => {
const { dirtyFields } = formState;
return Object.keys(dirtyFields)
.filter((key) => key !== "invoiceAttachmentTypeId")
.map((key) => ({
operationType: 0,
path: `/${key}`,
op: "replace",
value: formData[key],
}));
},
[formState]
);
const { mutate: CreateInvoice, isPending } = useCreatePurchaseInvoice(() => {
reset();
onClose();
});
const { mutate: updatePurchase, isPending: isUpdating } =
useUpdatePurchaseInvoice(() => {
reset();
onClose();
});
const onSubmit = useCallback(
(formData) => {
if (purchaseId) {
const payload = generatePatchOps(formData);
updatePurchase({ purchaseId, payload });
} else {
CreateInvoice(formData);
}
},
[purchaseId, generatePatchOps, updatePurchase, CreateInvoice]
);
return (
<div className="bs-stepper horizontically mt-2 b-secondry shadow-none border-0">
{/* --- Steps 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 text-truncate ${isActive ? "active" : ""} ${
isCompleted ? "crossed" : ""
}`}
>
<button
type="button"
className={`step-trigger`}
onClick={() => purchaseId && setActiveTab(index)}
>
<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>
{/* --- Form Content --- */}
<div className="bs-stepper-content py-2 px-3">
<AppFormProvider {...purchaseOrder}>
{activeTab !== 2 && (
<div>
{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>
<button
type="button"
className="btn btn-sm btn-primary"
onClick={handleNext}
>
Next
</button>
</div>
</div>
)}
{activeTab === 2 && (
<form onSubmit={purchaseOrder.handleSubmit(onSubmit)}>
{stepsConfig[2].component}
<div className="d-flex justify-content-between mt-4">
<button
type="button"
className="btn btn-sm btn-outline-secondary"
onClick={handlePrev}
>
Previous
</button>
<button
type="submit"
className="btn btn-sm btn-primary"
disabled={isPending || isUpdating}
>
{isPending || isUpdating ? "Please Wait" : "Submit"}
</button>
</div>
</form>
)}
</AppFormProvider>
</div>
</div>
);
};
export default ManagePurchase;

102
src/components/purchase/PurchaseActions.jsx Normal file
View File

@ -0,0 +1,102 @@
export const getPurchaseActions = ({
item,
isActive,
canDelete,
canAddChallan,
setViewPurchase,
setManagePurchase,
setDeletingId,
setIsDeleteModalOpen,
setChallan,
setAddPayment,
}) => {
const actions = [];
// VIEW
actions.push({
key: "view",
label: "View",
icon: "bx bx-show",
show: true,
onClick: () =>
setViewPurchase({
isOpen: true,
purchaseId: item.id,
}),
});
if (!isActive) {
// EDIT
actions.push({
key: "edit",
label: "Edit",
icon: "bx bx-edit",
show: true,
onClick: () =>
setManagePurchase({
isOpen: true,
purchaseId: item.id,
}),
});
// DELETE
actions.push({
key: "delete",
label: "Delete",
icon: "bx bx-trash",
show: canDelete,
onClick: () => {
setDeletingId(item.id);
setIsDeleteModalOpen(true);
},
});
// ADD CHALLAN
actions.push({
key: "challan",
label: "Add Delivery Challan",
icon: "bx bx-file bx-plus",
show: canAddChallan,
onClick: () =>
setChallan({
isOpen: true,
purchaseId: item.id,
}),
});
// ADD PAYMENT
actions.push({
key: "payment",
label: "Add Payment",
icon: "bx bx-wallet",
show: true,
onClick: () =>
setAddPayment({
isOpen: true,
purchaseId: item.id,
}),
});
} else {
// RESTORE
actions.push({
key: "restore",
label: "Restore",
icon: "bx bx-undo",
show: true,
onClick: () => {
setDeletingId(item.id);
setIsDeleteModalOpen(true);
},
});
}
return actions.filter((a) => a.show);
};
export const DropdownItem = ({ icon, label, onClick }) => (
<li>
<a className="dropdown-item cursor-pointer" onClick={onClick}>
<i className={`${icon} me-2`}></i> {label}
</a>
</li>
);

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

@ -0,0 +1,188 @@
import React, { useState } from "react";
import {
useDeletePurchaseInvoice,
usePurchasesList,
} from "../../hooks/usePurchase";
import {
ADD_DELIVERY_CHALLAN,
DELETEPURCHASE_INVOICE,
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";
import ConfirmModal from "../common/ConfirmModal";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { DropdownItem, getPurchaseActions } from "./PurchaseActions";
const PurchaseList = ({ searchString, isActive }) => {
const { setViewPurchase, setManagePurchase, setChallan, setAddPayment } =
usePurchaseContext();
const [currentPage, setCurrentPage] = useState(1);
const { mutate: DeletePurchaseInvoice, isPending } =
useDeletePurchaseInvoice();
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [deletingId, setDeletingId] = useState(null);
const canAddChallan = useHasUserPermission(ADD_DELIVERY_CHALLAN);
const canDelete = useHasUserPermission(DELETEPURCHASE_INVOICE);
const debounceSearch = useDebounce(searchString, 300);
const { data, isLoading } = usePurchasesList(
ITEMS_PER_PAGE,
currentPage,
// true,
!isActive,
{},
debounceSearch
);
const paginate = (page) => {
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
setCurrentPage(page);
}
};
const visibleColumns = PurchaseColumn.filter((col) => !col.hidden);
const handleDeleteRestore = (id) => {
DeletePurchaseInvoice(
{ id, isActive: isActive }, // delete if active, restore if deleted
{
onSettled: () => {
setDeletingId(null);
setIsDeleteModalOpen(false);
},
}
);
};
return (
<>
{IsDeleteModalOpen && (
<ConfirmModal
isOpen={IsDeleteModalOpen}
type={!isActive ? "delete" : "undo"}
header={!isActive ? "Delete Invoice" : "Restore Invoice"}
message={
!isActive
? "Are you sure you want to delete?"
: "Are you sure you want to restore?"
}
onSubmit={handleDeleteRestore}
onClose={() => setIsDeleteModalOpen(false)}
loading={isPending}
paramData={deletingId}
/>
)}
<div className="card mt-2 page-min-h table-responsive px-sm-4">
<div className="px-2">
<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={visibleColumns.length + 1}
className="border-0"
style={{ height: "300px", verticalAlign: "middle" }}
>
<div className="d-flex justify-content-center align-items-center w-100 h-100">
<SpinnerLoader />
</div>
</td>
</tr>
)}
{!isLoading && data?.data?.length === 0 && (
<tr>
<td
colSpan={visibleColumns.length + 1}
className="text-center border-0"
style={{ height: "400px", verticalAlign: "middle" }}
>
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">
{getPurchaseActions({
item,
isActive,
canDelete,
canAddChallan,
setViewPurchase,
setManagePurchase,
setDeletingId,
setIsDeleteModalOpen,
setChallan,
setAddPayment,
}).map((action) => (
<DropdownItem
key={action.key}
icon={action.icon}
label={action.label}
onClick={action.onClick}
/>
))}
</ul>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
{data?.data?.length > 0 && (
<Pagination
currentPage={currentPage}
totalPages={data.totalPages}
onPageChange={paginate}
/>
)}
</div>
</>
);
};
export default PurchaseList;

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

@ -0,0 +1,231 @@
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-3 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-xs `}
{...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-xs ${
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>
<div className="col-12 col-md-6 my-0">
<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>
<div className="col-12 col-md-6 my-0">
<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.supplierId}
/>
)}
/>
</div>
<div className="col-12 col-md-6 my-0">
<Label required htmlFor="billingAddress">Billing Address</Label>
<textarea
id="billingAddress"
rows="2"
className={`form-control form-control-xs `}
{...register("billingAddress")}
/>
{errors?.billingAddress && (
<div className="danger-text">{errors.billingAddress.message}</div>
)}
</div>
<div className="col-12 col-md-6 my-0 mb-1">
<Label required htmlFor="shippingAddress">Shipping Address</Label>
<textarea
id="shippingAddress"
rows="2"
className={`form-control form-control-xs `}
{...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" >
Purchase Order Number
</Label>
<input
id="purchaseOrderNumber"
type="text"
className={`form-control form-control-xs `}
{...register("purchaseOrderNumber")}
/>
{errors?.purchaseOrderNumber && (
<div className="danger-text">
{errors.purchaseOrderNumber.message}
</div>
)}
</div>
{/* Purchase Order Date */}
<div className="col-12 col-md-6 mb-1">
<Label htmlFor="purchaseOrderDate" >
Purchase Order Date
</Label>
<DatePicker
control={control}
name="purchaseOrderDate"
size="xs"
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 mb-1">
<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 mb-2">
<Label htmlFor="proformaInvoiceDate">Proforma Date</Label>
<DatePicker
control={control}
name="proformaInvoiceDate"
className="w-full"
size="xs"
/>
{errors?.proformaInvoiceDate && (
<div className="danger-text">
{errors.proformaInvoiceDate.message}
</div>
)}
</div>
</div>
);
};
export default PurchasePartyDetails;

298
src/components/purchase/PurchasePayment.jsx Normal file
View File

@ -0,0 +1,298 @@
import React from "react";
import {
AppFormController,
AppFormProvider,
useAppForm,
} from "../../hooks/appHooks/useAppForm";
import { zodResolver } from "@hookform/resolvers/zod";
import { AddPurchasePayment, defaultPurchasePayment } from "./PurchaseSchema";
import { usePaymentAjustmentHead } from "../../hooks/masterHook/useMaster";
import { formatFigure, localToUtc } from "../../utils/appUtils";
import Label from "../common/Label";
import DatePicker from "../common/DatePicker";
import {
useAddPurchasePayment,
usePurchase,
usePurchasePaymentHistory,
} from "../../hooks/usePurchase";
import SelectField from "../common/Forms/SelectField";
import { SpinnerLoader } from "../common/Loader";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import Avatar from "../common/Avatar";
const PurchasePayment = ({onClose, purchaseId }) => {
const {
data: Purchase,
isLoading: isPurchaseLoading,
error: purchaseError,
} = usePurchase(purchaseId);
const methods = useAppForm({
resolver: zodResolver(AddPurchasePayment),
defaultValues: defaultPurchasePayment,
});
const {
control,
register,
handleSubmit,
reset,
formState: { errors },
} = methods;
const {
data: paymentTypes,
isLoading: isPaymentTypeLoading,
isError: isPaymentTypeError,
error: paymentError,
} = usePaymentAjustmentHead(true);
const { mutate: AddPayment, isPending } = useAddPurchasePayment(() => {
handleClose();
});
const { data, isLoading, isError, error } =
usePurchasePaymentHistory(purchaseId);
const onSubmit = (formData) => {
const payload = {
...formData,
paymentReceivedDate: localToUtc(formData.paymentReceivedDate),
invoiceId: purchaseId,
};
AddPayment(payload);
};
const handleClose = (formData) => {
reset(defaultPurchasePayment);
};
return (
<div className="contianer p-1">
<div className="text-center">
<p className="fs-5 text-semibod">Supplier / Vendor Transaction </p>
</div>
<div className="row g-3">
<div className="col-12 col-sm-6 px-2 p-sm-0">
<AppFormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)} className="p-0 text-start">
<div className="row px-md-1 px-0">
<div className="col-12 col-md-6 mb-2">
<Label required>TransanctionId</Label>
<input
type="text"
className="form-control form-control-md"
{...register("transactionId")}
/>
{errors.transactionId && (
<small className="danger-text">
{errors.transactionId.message}
</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<Label required>Transaction Date </Label>
<DatePicker
className="w-100"
size="md"
name="paymentReceivedDate"
control={control}
minDate={
Purchase?.createdAt
? new Date(
new Date(Purchase?.createdAt).setDate(
new Date(Purchase?.createdAt).getDate() + 1
)
)
: null
}
maxDate={new Date()}
/>
{errors.paymentReceivedDate && (
<small className="danger-text">
{errors.paymentReceivedDate.message}
</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<AppFormController
name="paymentAdjustmentHeadId"
control={control}
render={({ field }) => (
<SelectField
label="Payment Adjustment Head"
options={paymentTypes?.data ?? []}
placeholder="Choose a Status"
required
labelKeyKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
isLoading={isPaymentTypeLoading}
className="m-0"
/>
)}
/>
{errors.paymentAdjustmentHeadId && (
<small className="danger-text">
{errors.paymentAdjustmentHeadId.message}
</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<Label htmlFor="amount" className="form-label" required>
Amount
</Label>
<input
type="number"
id="amount"
className="form-control form-control-md"
min="1"
step="0.01"
inputMode="decimal"
{...register("amount", { valueAsNumber: true })}
/>
{errors.amount && (
<small className="danger-text">
{errors.amount.message}
</small>
)}
</div>
<div className="col-12 mb-2">
<Label htmlFor="comment" className="form-label" required>
Comment
</Label>
<textarea
id="comment"
className="form-control form-control-sm"
{...register("comment")}
/>
{errors.comment && (
<small className="danger-text">
{errors.comment.message}
</small>
)}
</div>
<div className="d-flex justify-content-end gap-3">
{" "}
<button
type="reset"
className="btn btn-label-secondary btn-sm mt-3"
onClick={() => {
handleClose();
onClose();
}}
disabled={isPending}
>
Cancel
</button>
<button
type="submit"
className="btn btn-primary btn-sm mt-3"
disabled={isPending}
>
{isPending ? "Please Wait..." : "Submit"}
</button>
</div>
</div>
</form>
</AppFormProvider>
</div>
<div className="col-12 col-sm-6 px-2 p-sm-0">
<div className="d-flex flex-row gap-2 text-start">
<i className="bx bx-history"></i> <p>Purchase Payment Log</p>
</div>
{isLoading ? (
<SpinnerLoader />
) : (
data?.length > 0 && (
<div
className="row text-start mx-2"
style={{ maxHeight: "70vh", overflowY: "auto" }}
>
{data
.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
.map((payment, index) => (
<div className="col-12 mb-2" key={payment.id}>
<div className=" p-2 border-start border-warning">
<div className="row">
<div className="col-12 col-md-6 d-flex justify-content-between align-items-center ">
<div>
<small className="fw-semibold me-1">
Transaction Date:
</small>{" "}
{formatUTCToLocalTime(
payment.paymentReceivedDate
)}
</div>
<span className="fs-semibold d-block d-md-none">
{formatFigure(payment.amount, {
type: "currency",
currency: "INR",
})}
</span>
</div>
<div className="col-12 col-md-6 mb-0 d-flex align-items-center m-0">
<small className="fw-semibold me-2">
Updated By:
</small>{" "}
<Avatar
size="xs"
firstName={payment?.createdBy?.firstName}
lastName={payment?.createdBy?.lastName}
/>{" "}
{payment?.createdBy?.firstName}{" "}
{payment.createdBy?.lastName}
</div>
</div>
<div className="row">
<div className="col-12 col-md-6">
<p className="mb-1">
<small className="fw-semibold">
Transaction ID:
</small>{" "}
{payment.transactionId}
</p>
</div>
<div className="col-12 ">
<div className="d-flex justify-content-between">
<span>
{payment?.paymentAdjustmentHead?.name}
</span>
<span className="fs-semibold d-none d-md-block">
{formatFigure(payment.amount, {
type: "currency",
currency: "INR",
})}
</span>
</div>
<p className="text-tiny m-0 mt-1">
{payment?.comment}
</p>
</div>
</div>
</div>
</div>
))}
</div>
)
)}
{data?.length === 0 && (
<div className="d-flex justify-content-center algin-items-center text-center">
<div>
<i className='bx bx-box'></i>
<p className="text-secondary">You don't have any payment yet.</p>
</div>
</div>
)}
</div>
</div>
</div>
);
};
export default PurchasePayment;

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

@ -0,0 +1,299 @@
import React, { useEffect } from "react";
import Label from "../common/Label";
import {
AppFormController,
useAppFormContext,
} from "../../hooks/appHooks/useAppForm";
import DatePicker from "../common/DatePicker";
import { useInvoiceAttachmentTypes } from "../../hooks/masterHook/useMaster";
import Filelist from "../Expenses/Filelist";
import SelectField from "../common/Forms/SelectField";
import { useWatch } from "react-hook-form";
import WarningBlock from "../InfoBlock/WarningBlock";
import { FILE_UPLOAD_INFO } from "../../utils/staticContent";
const PurchasePaymentDetails = ({ purchaseId = null }) => {
const { data, isLoading, error, isError } = useInvoiceAttachmentTypes();
const { data: InvoiceDocTypes, isLoading: invoiceDocLoading } =
useInvoiceAttachmentTypes();
const {
register,
watch,
setValue,
control,
formState: { errors },
} = useAppFormContext();
const baseAmount = watch("baseAmount");
const taxAmount = watch("taxAmount");
const trCharge = watch("transportCharges");
useEffect(() => {
const base = parseFloat(baseAmount) || 0;
const tax = parseFloat(taxAmount) || 0;
const transportCharges = parseFloat(trCharge) || 0;
if (base || tax || transportCharges) {
setValue("totalAmount", (base + tax + transportCharges).toFixed(2));
}
}, [baseAmount, taxAmount, trCharge, setValue]);
const invoiceAttachmentType = watch("invoiceAttachmentTypeId");
const files = watch("attachments");
const toBase64 = (file) =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result.split(",")[1]);
reader.onerror = (error) => reject(error);
});
const onFileChange = async (e) => {
const newFiles = Array.from(e.target.files);
if (newFiles.length === 0) return;
const existingFiles = watch("attachments") || [];
const parsedFiles = await Promise.all(
newFiles.map(async (file) => {
const base64Data = await toBase64(file);
return {
fileName: file.name,
base64Data,
contentType: file.type,
fileSize: file.size,
description: "",
isActive: true,
invoiceAttachmentTypeId: invoiceAttachmentType,
isNew: true, // <-- temp
tempId: crypto.randomUUID(), // temp - id
};
})
);
const combinedFiles = [
...existingFiles,
...parsedFiles.filter(
(newFile) =>
!existingFiles.some(
(f) =>
f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
)
),
];
setValue("attachments", combinedFiles, {
shouldDirty: true,
shouldValidate: true,
});
};
const removeFile = (index) => {
const updated = files.flatMap((file, i) => {
// NEW FILE → remove completely
if (file.isNew && file.tempId === index) {
return []; // remove from array
}
// EXISTING FILE → mark inactive
if (!file.isNew && file.documentId === index) {
return [{ ...file, isActive: false }];
}
return [file];
});
setValue("attachments", updated, {
shouldDirty: true,
shouldValidate: true,
});
};
return (
<div className="row g-1 text-start">
<div className="col-12 col-md-4">
<Label htmlFor="baseAmount">Base Amount</Label>
<input
id="baseAmount"
type="number"
className="form-control form-control-xs"
{...register("baseAmount", { valueAsNumber: true })}
/>
{errors?.baseAmount && (
<div className="small danger-text mt-1">
{errors.baseAmount.message}
</div>
)}
</div>
<div className="col-12 col-md-4">
<Label htmlFor="taxAmount">Tax Amount</Label>
<input
id="taxAmount"
type="number"
className="form-control form-control-xs"
{...register("taxAmount", { valueAsNumber: true })}
/>
{errors?.taxAmount && (
<div className="small danger-text mt-1">
{errors.taxAmount.message}
</div>
)}
</div>
<div className="col-12 col-md-4">
<Label htmlFor="transportCharges">Transport Charges</Label>
<input
id="transportCharges"
type="number"
className="form-control form-control-xs"
{...register("transportCharges", { valueAsNumber: true })}
/>
{errors?.transportCharges && (
<div className="small danger-text mt-1">
{errors.transportCharges.message}
</div>
)}
</div>
<div className="col-12 col-md-6">
<Label htmlFor="totalAmount">Total Amount</Label>
<input
id="totalAmount"
type="number"
className="form-control form-control-xs"
{...register("totalAmount", { valueAsNumber: true })}
/>
{errors?.totalAmount && (
<div className="small danger-text mt-1">
{errors.totalAmount.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"
size="xs"
/>
{errors?.paymentDueDate && (
<div className="small danger-text mt-1">
{errors.paymentDueDate.message}
</div>
)}
</div>
<div className="col-12 mb-2">
<Label htmlFor="description">Description</Label>
<textarea
id="description"
rows="3"
className="form-control form-control-xs"
{...register("description")}
/>
{errors?.description && (
<div className="small danger-text mt-1">
{errors.description.message}
</div>
)}
</div>
<div className="col-12">
<AppFormController
name="invoiceAttachmentTypeId"
control={control}
render={({ field }) => (
<SelectField
label="Select Document Type"
options={InvoiceDocTypes ?? []}
placeholder="Choose Type"
labelKeyKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
isLoading={invoiceDocLoading}
className="m-0"
/>
)}
/>
{errors?.invoiceAttachmentTypeId && (
<small className="danger-text">
{errors.invoiceAttachmentTypeId.message}
</small>
)}
</div>
<div className="text-start">
<div className="col-md-12">
<Label className="form-label" required>
Upload Bill{" "}
</Label>
<div
className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
style={{ cursor: "pointer" }}
onClick={() => document.getElementById("attachments").click()}
>
<i className="bx bx-cloud-upload d-block bx-lg"> </i>
<span className="text-muted d-block">
Click to select or click here to browse
</span>
<small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
<input
type="file"
id="attachments"
accept=".pdf,.jpg,.jpeg,.png"
multiple
disabled={!invoiceAttachmentType}
style={{ display: "none" }}
{...register("attachments")}
onChange={(e) => {
onFileChange(e);
e.target.value = "";
}}
/>
</div>
{errors.attachments && (
<small className="danger-text">{errors.attachments.message}</small>
)}
{files.length > 0 && (
<Filelist
files={files}
removeFile={removeFile}
expenseToEdit={purchaseId}
/>
)}
{Array.isArray(errors.attachments) &&
errors.attachments.map((fileError, index) => (
<div key={index} className="danger-text small mt-1">
{
(fileError?.fileSize?.message ||
fileError?.contentType?.message ||
fileError?.base64Data?.message,
fileError?.documentId?.message)
}
</div>
))}
{!invoiceAttachmentType && (
<WarningBlock content={FILE_UPLOAD_INFO} />
)}
</div>
</div>
</div>
);
};
export default PurchasePaymentDetails;

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

@ -0,0 +1,211 @@
import { z } from "zod";
import { normalizeAllowedContentTypes } from "../../utils/appUtils";
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
const ALLOWED_TYPES = [
"application/pdf",
"image/png",
"image/jpg",
"image/jpeg",
];
export const AttachmentSchema = z.object({
invoiceAttachmentTypeId: z.string().nullable(),
fileName: z.string().min(1, { message: "Filename is required" }),
base64Data: z.string().nullable(),
contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
message: "Only PDF, PNG, JPG, or JPEG files are allowed",
}),
fileSize: z.number().max(MAX_FILE_SIZE, {
message: "File size must be less than or equal to 5MB",
}),
description: z.string().optional().default(""),
isActive: z.boolean().default(true),
documentId: z.string().nullable().default(null),
});
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.coerce.number().optional(),
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
.number()
.or(z.nan()) // allow NaN
.transform((val) => (Number.isNaN(val) ? null : val)),
taxAmount: z
.number()
.or(z.nan()) // allow NaN
.transform((val) => (Number.isNaN(val) ? null : val)),
totalAmount: z
.number()
.or(z.nan()) // allow NaN
.transform((val) => (Number.isNaN(val) ? null : val)),
paymentDueDate: z.coerce.date().nullable(),
transportCharges: z
.number()
.or(z.nan()) // allow NaN
.transform((val) => (Number.isNaN(val) ? null : val)),
description: z.string(),
invoiceAttachmentTypeId: z.string().nullable(),
attachments: z.array(AttachmentSchema),
});
export const defaultPurchaseValue = {
title: "",
projectId: "",
organizationId: "",
billingAddress: "",
shippingAddress: "",
purchaseOrderNumber: null,
purchaseOrderDate: null,
supplierId: "",
proformaInvoiceNumber: null,
proformaInvoiceDate: null,
proformaInvoiceAmount: 0,
invoiceNumber: null,
invoiceDate: null,
eWayBillNumber: null,
eWayBillDate: null,
invoiceReferenceNumber: null,
acknowledgmentNumber: null,
acknowledgmentDate: null,
baseAmount: 0,
taxAmount: 0,
totalAmount: 0,
paymentDueDate: null,
transportCharges: 0,
description: "",
invoiceAttachmentTypeId: null,
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",
"invoiceAttachmentTypeId",
"description",
"attachments",
],
};
return stepFieldMap[stepIndex] || [];
};
export const SingleAttachmentSchema = 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().nullable(),
contentType: z
.string()
.min(1, { message: "MIME type is required" })
.refine(
(val) =>
["application/pdf", "image/jpeg", "image/jpg", "image/png"].includes(
val
),
{
message: "File type must be PDF, JPG, JPEG or PNG",
}
),
fileSize: z
.number()
.int()
.nonnegative("fileSize must be ≥ 0")
.max(5 * 1024 * 1024, "File size must be ≤ 5MB"),
description: z.string().optional().default(""),
isActive: z.boolean(),
});
export const DeliveryChallanSchema = z.object({
deliveryChallanNumber: z
.string()
.min(1, { message: "Challan Number required" }),
invoiceAttachmentTypeId: z.string().nullable(),
deliveryChallanDate: z.string().min(1, { message: "Deliver date required" }),
description: z.string().min(1, { message: "Description required" }),
attachment: z
.any()
.refine((val) => val && typeof val === "object" && !!val.base64Data, {
message: "Please upload document",
}),
});
export const DeliveryChallanDefaultValue = {
deliveryChallanNumber: "",
deliveryChallanDate: "",
description: "",
attachment: null,
invoiceAttachmentTypeId: null,
};
export const AddPurchasePayment = z.object({
paymentReceivedDate: z.string().min(1, { message: "Date is required" }),
transactionId: z.string().min(1, "Transaction ID is required"),
amount: z.number().min(1, "Amount must be greater than zero"),
comment: z.string().min(1, { message: "Comment required" }),
paymentAdjustmentHeadId: z
.string()
.min(1, { message: "Payment Type required" }),
});
export const defaultPurchasePayment = {
paymentReceivedDate: null,
transactionId: "",
amount: 0,
comment: "",
paymentAdjustmentHeadId: "",
};

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-3 text-start">
{/* Invoice Number */}
<div className="col-12 col-md-6">
<Label htmlFor="invoiceNumber" >
Invoice Number
</Label>
<input
id="invoiceNumber"
type="text"
className="form-control form-control-xs"
{...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" size="xs"/>
{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-xs"
{...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-xs"
{...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-xs"
{...register("acknowledgmentNumber")}
/>
{errors?.acknowledgmentNumber && (
<div className="small text-danger mt-1">
{errors.acknowledgmentNumber.message}
</div>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<Label htmlFor="acknowledgmentDate">Acknowledgment Date</Label>
<DatePicker control={control} name="acknowledgmentDate" className="w-full" size="xs"/>
{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 ",
render: (item) => <span>{item?.project?.name || "NA"}</span>,
},
{
key: "supplier",
label: "Supplier",
className: "text-start ",
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",
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 AppFormProvider = FormProvider;
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";
import showToast from "../../services/toastService";
export const useRecurringStatus = ()=>{
export const useInvoiceAttachmentTypes = () => {
return useQuery({
queryKey:["RecurringStatus"],
queryFn:async()=>{
queryKey: ["invoiceAttachmentType"],
queryFn: async () => {
const resp = await MasterRespository.getInvoiceAttachmentTypes();
return resp.data;
},
});
};
export const useRecurringStatus = () => {
return useQuery({
queryKey: ["RecurringStatus"],
queryFn: async () => {
const resp = await MasterRespository.getRecurringStatus();
return resp.data
}
})
}
return resp.data;
},
});
};
export const useCurrencies = () => {
return useQuery({
queryKey: ["currencies"],
@ -31,10 +40,10 @@ export const useCurrencies = () => {
};
export const usePaymentAjustmentHead = (isActive) => {
return useQuery({
queryKey: ["paymentType",isActive],
queryFn: async () => await MasterRespository.getPaymentAdjustmentHead(isActive),
return useQuery({
queryKey: ["paymentType", 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({
queryKey:["Job_Staus",statusId,projectId],
queryFn:async()=>{
const resp = await MasterRespository.getJobStatus(statusId,projectId);
queryKey: ["Job_Staus", statusId, projectId],
queryFn: async () => {
const resp = await MasterRespository.getJobStatus(statusId, projectId);
return resp.data;
},
enabled:!!statusId && !!projectId
})
}
enabled: !!statusId && !!projectId,
});
};
export const useTeamRole=()=>{
export const useTeamRole = () => {
return useQuery({
queryKey:["Team_Role"],
queryFn:async()=>{
queryKey: ["Team_Role"],
queryFn: async () => {
const resp = await MasterRespository.getTeamRole();
return resp.data;
}
})
}
},
});
};
//#region ==Get Masters==
const fetchMasterData = async (masterType) => {
switch (masterType) {
@ -405,8 +414,6 @@ const useMaster = () => {
export default useMaster;
//#endregion
// ================================Mutation====================================
//#region Job Role
@ -456,10 +463,6 @@ export const useCreateJobRole = (onSuccessCallback) => {
};
//#endregion Job Role
//#region Application Role
export const useCreateApplicationRole = (onSuccessCallback) => {
const queryClient = useQueryClient();
@ -505,10 +508,6 @@ export const useUpdateApplicationRole = (onSuccessCallback) => {
};
//#endregion
//#region Create work Category
export const useCreateWorkCategory = (onSuccessCallback) => {
const queryClient = useQueryClient();
@ -554,11 +553,6 @@ export const useUpdateWorkCategory = (onSuccessCallback) => {
};
//#endregion
//#region Contact Category
export const useCreateContactCategory = (onSuccessCallback) => {
@ -609,10 +603,6 @@ export const useUpdateContactCategory = (onSuccessCallback) => {
//#endregion
//#region Contact Tag
export const useCreateContactTag = (onSuccessCallback) => {
@ -659,10 +649,6 @@ export const useUpdateContactTag = (onSuccessCallback) => {
};
//#endregion
//#region Expense Category
export const useCreateExpenseCategory = (onSuccessCallback) => {
const queryClient = useQueryClient();
@ -689,7 +675,10 @@ export const useUpdateExpenseCategory = (onSuccessCallback) => {
return useMutation({
mutationFn: async ({ id, payload }) => {
const response = await MasterRespository.updateExpenseCategory(id, payload);
const response = await MasterRespository.updateExpenseCategory(
id,
payload
);
return response.data;
},
onSuccess: (data, variables) => {
@ -708,11 +697,6 @@ export const useUpdateExpenseCategory = (onSuccessCallback) => {
//#endregion
//#region Payment Mode
export const useCreatePaymentMode = (onSuccessCallback) => {
@ -759,10 +743,6 @@ export const useUpdatePaymentMode = (onSuccessCallback) => {
//#endregion
// Services-------------------------------
// export const useCreateService = (onSuccessCallback) => {
@ -844,10 +824,6 @@ export const useUpdateService = (onSuccessCallback) => {
//#endregion
//#region Activity Grouph
export const useCreateActivityGroup = (onSuccessCallback) => {
@ -912,10 +888,6 @@ export const useUpdateActivityGroup = (onSuccessCallback) => {
//#endregion
//#region Activities
export const useCreateActivity = (onSuccessCallback) => {
const queryClient = useQueryClient();
@ -970,11 +942,6 @@ export const useUpdateActivity = (onSuccessCallback) => {
//#endregion
//#region Expense Status
export const useCreateExpenseStatus = (onSuccessCallback) => {
const queryClient = useQueryClient();
@ -1018,10 +985,6 @@ export const useUpdateExpenseStatus = (onSuccessCallback) => {
};
//#endregion
//#region Document-Category
export const useCreateDocumentCatgory = (onSuccessCallback) => {
const queryClient = useQueryClient();
@ -1068,11 +1031,6 @@ export const useUpdateDocumentCategory = (onSuccessCallback) => {
};
//#endregion
//#region Document-Type
export const useCreateDocumentType = (onSuccessCallback) => {
const queryClient = useQueryClient();
@ -1117,10 +1075,6 @@ export const useUpdateDocumentType = (onSuccessCallback) => {
};
//#endregion
//#region Payment Adjustment Head
export const useCreatePaymentAjustmentHead = (onSuccessCallback) => {
const queryClient = useQueryClient();
@ -1147,7 +1101,10 @@ export const useUpdatePaymentAjustmentHead = (onSuccessCallback) => {
return useMutation({
mutationFn: async ({ id, payload }) => {
const resp = await MasterRespository.updatePaymentAjustmentHead(id, payload);
const resp = await MasterRespository.updatePaymentAjustmentHead(
id,
payload
);
return resp.data;
},
onSuccess: (data) => {
@ -1164,10 +1121,6 @@ export const useUpdatePaymentAjustmentHead = (onSuccessCallback) => {
};
//#endregion
//#region ==Delete Master==
export const useDeleteMasterItem = () => {
const queryClient = useQueryClient();
@ -1203,8 +1156,6 @@ export const useDeleteMasterItem = () => {
//#endregion
export const useDeleteServiceGroup = () => {
const queryClient = useQueryClient();

54
src/hooks/useOrganization.js
View File

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

7
src/hooks/useProjects.js
View File

@ -20,14 +20,15 @@ export const useCurrentService = () => {
// ------------------------------Query-------------------
export const useProjects = (pageSize, pageNumber) => {
export const useProjects = (pageSize, pageNumber,searchString) => {
const loggedUser = useSelector((store) => store.globalVariables.loginUser);
return useQuery({
queryKey: ["ProjectsList", pageSize, pageNumber],
queryKey: ["ProjectsList", pageSize, pageNumber,searchString],
queryFn: async () => {
const response = await ProjectRepository.getProjectList(
pageSize,
pageNumber
pageNumber,
searchString,
);
return response?.data;
},

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

@ -0,0 +1,181 @@
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 useDeliverChallane = (purchaseInvoiceId) => {
return useQuery({
queryKey: ["deliverliy_challane", purchaseInvoiceId],
queryFn: async () => {
const resp = await PurchaseRepository.GetDeliveryChallan(
purchaseInvoiceId
);
return resp.data;
},
enabled: !!purchaseInvoiceId,
});
};
export const usePurchase = (id) => {
return useQuery({
queryKey: ["purchase", id],
queryFn: async () => {
const resp = await PurchaseRepository.GetPurchase(id);
return resp.data;
},
enabled: !!id,
});
};
export const usePurchasePaymentHistory = (id) => {
return useQuery({
queryKey: ["purchase_payment_history", id],
queryFn: async () => {
const resp = await PurchaseRepository.GetPaymentHistory(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) => {
queryClient.invalidateQueries({ queryKey: ["purchase_list"] });
showToast("Purchase Invoice Created successfully", "success");
if (onSuccessCallback) onSuccessCallback();
},
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to create invoice",
"error"
);
},
});
};
export const useUpdatePurchaseInvoice = (onSuccessCallback) => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ purchaseId, payload }) =>
PurchaseRepository.UpdatePurchase(purchaseId, payload),
onSuccess: (data, variables) => {
queryClient.invalidateQueries({ queryKey: ["purchase_list"] });
queryClient.invalidateQueries({ queryKey: ["purchase"] });
showToast("Purchase Invoice Updated successfully", "success");
if (onSuccessCallback) onSuccessCallback();
},
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to create invoice",
"error"
);
},
});
};
export const useAddDeliverChallan = (onSuccessCallback) => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async (payload) =>
PurchaseRepository.addDelievryChallan(payload),
onSuccess: (data, variables) => {
queryClient.invalidateQueries({ queryKey: ["deliverliy_challane"] });
showToast("Challan added successfully", "success");
if (onSuccessCallback) onSuccessCallback();
},
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to create invoice",
"error"
);
},
});
};
export const useAddPurchasePayment =(onSuccessCallback)=>{
const queryClient = useQueryClient();
return useMutation({
mutationFn: async (payload) =>
PurchaseRepository.AddPayment(payload),
onSuccess: (data, variables) => {
queryClient.invalidateQueries({ queryKey: ["purchase_payment_history"] });
showToast("Payment added successfully", "success");
if (onSuccessCallback) onSuccessCallback();
},
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to Add payment",
"error"
);
},
});
}
export const useDeletePurchaseInvoice = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ id, isActive }) =>
await PurchaseRepository.deletePurchase(id, isActive),
onSuccess: (_, variable) => {
queryClient.invalidateQueries({ queryKey: ["purchase_list"] });
showToast(
`Purchase Invoice ${variable.isActive ? "restored" : "deleted"} successfully`,
"success"
);
},
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to delete branch",
"error"
);
},
});
};

77
src/hooks/useServiceProject.jsx
View File

@ -8,13 +8,14 @@ import { ServiceProjectRepository } from "../repositories/ServiceProjectReposito
import showToast from "../services/toastService";
//#region Service Project
export const useServiceProjects = (pageSize, pageNumber) => {
export const useServiceProjects = (pageSize, pageNumber, searchString) => {
return useQuery({
queryKey: ["serviceProjects", pageSize, pageNumber],
queryKey: ["serviceProjects", pageSize, pageNumber, searchString],
queryFn: async () => {
const response = await ServiceProjectRepository.GetServiceProjects(
pageSize,
pageNumber
pageNumber,
searchString
);
return response.data;
},
@ -59,8 +60,8 @@ export const useCreateServiceProject = (onSuccessCallback) => {
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to delete task",
error.message ||
"Failed to delete task",
"error"
);
},
@ -84,8 +85,8 @@ export const useUpdateServiceProject = (onSuccessCallback) => {
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to update project",
error.message ||
"Failed to update project",
"error"
);
},
@ -110,8 +111,8 @@ export const useActiveInActiveServiceProject = (onSuccessCallback) => {
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to update project",
error.message ||
"Failed to update project",
"error"
);
},
@ -138,8 +139,8 @@ export const useAllocationServiceProjectTeam = (onSuccessCallback) => {
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to update project",
error.message ||
"Failed to update project",
"error"
);
},
@ -148,11 +149,6 @@ export const useAllocationServiceProjectTeam = (onSuccessCallback) => {
//#endregion
//#region Service Jobs
export const useServiceProjectJobs = (
@ -163,7 +159,14 @@ export const useServiceProjectJobs = (
isArchive
) => {
return useQuery({
queryKey: ["serviceProjectJobs", pageSize, pageNumber, isActive, project, isArchive],
queryKey: [
"serviceProjectJobs",
pageSize,
pageNumber,
isActive,
project,
isArchive,
],
queryFn: async () => {
const resp = await ServiceProjectRepository.GetJobList(
pageSize,
@ -230,8 +233,8 @@ export const useAddCommentJob = (onSuccessCallback) => {
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to update project",
error.message ||
"Failed to update project",
"error"
);
},
@ -254,8 +257,8 @@ export const useCreateServiceProjectJob = (onSuccessCallback) => {
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to update project",
error.message ||
"Failed to update project",
"error"
);
},
@ -284,27 +287,19 @@ export const useUpdateServiceProjectJob = (onSuccessCallback) => {
}
},
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to update project",
error.message ||
"Failed to update project",
"error"
);
},
});
};
//#endregion
//#region Branch
export const useBranches = (
projectId,
@ -343,8 +338,8 @@ export const useBranchTypes = () => {
const resp = await ServiceProjectRepository.GetBranchTypeList();
return resp.data;
},
})
}
});
};
export const useBranchDetails = (id) => {
return useQuery({
@ -353,9 +348,9 @@ export const useBranchDetails = (id) => {
const resp = await ServiceProjectRepository.GetBranchDetail(id);
return resp.data;
},
enabled: !!id
})
}
enabled: !!id,
});
};
export const useCreateBranch = (onSuccessCallBack) => {
const queryClient = useQueryClient();
@ -401,7 +396,6 @@ export const useUpdateBranch = (onSuccessCallBack) => {
});
};
export const useDeleteBranch = () => {
const queryClient = useQueryClient();
@ -411,14 +405,17 @@ export const useDeleteBranch = () => {
onSuccess: (_, variable) => {
queryClient.invalidateQueries({ queryKey: ["branches"] });
showToast(`Branch ${variable.isActive ? "restored" : "deleted"} successfully`, "success");
showToast(
`Branch ${variable.isActive ? "restored" : "deleted"} successfully`,
"success"
);
},
onError: (error) => {
showToast(
error?.response?.data?.message ||
error.message ||
"Failed to delete branch",
error.message ||
"Failed to delete branch",
"error"
);
},

8
src/pages/Expense/ExpensePage.jsx
View File

@ -62,7 +62,7 @@ const ExpensePage = () => {
const [ViewDocument, setDocumentView] = useState({
IsOpen: false,
Image: null,
Images: null,
});
const IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE);
@ -208,10 +208,10 @@ const ExpensePage = () => {
<GlobalModel
isOpen
size="md"
key={ViewDocument.Image ?? "doc"}
closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
key={ViewDocument.Images ?? "doc"}
closeModal={() => setDocumentView({ IsOpen: false, Images: null })}
>
<PreviewDocument imageUrl={ViewDocument.Image} />
<PreviewDocument files={ViewDocument.Images} />
</GlobalModel>
)}
</div>

24
src/pages/ServiceProject/ServiceProjectDisplay.jsx
View File

@ -11,14 +11,18 @@ import GlobalModel from "../../components/common/GlobalModel";
import ManageServiceProject from "../../components/ServiceProject/ManageServiceProject";
import { SpinnerLoader } from "../../components/common/Loader";
import ServiceProjectCard from "../../components/ServiceProject/ServiceProjectTeam/ServiceProjectCard";
import ServiceProjectList from "../../components/ServiceProject/ServiceProjectTeam/ServiceProjectList";
import { useDebounce } from "../../utils/appUtils";
const ServiceProjectDisplay = ({ listView ,selectedStatuses }) => {
const ServiceProjectDisplay = ({ listView, selectedStatuses, searchTerm }) => {
const [currentPage, setCurrentPage] = useState(1);
const { manageServiceProject, setManageServiceProject } = useProjectContext();
const debouncedSearch = useDebounce(searchTerm, 500);
const { data, isLoading, isError, error } = useServiceProjects(
ITEMS_PER_PAGE,
currentPage
currentPage,
debouncedSearch
);
const paginate = (page) => {
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
@ -47,15 +51,20 @@ const ServiceProjectDisplay = ({ listView ,selectedStatuses }) => {
</div>
);
return (
<div className="row">
<div className="">
<div className="row">
{listView ? (
<p>List</p>
) : (
<ServiceProjectList data={filteredProjects}
currentPage={currentPage}
totalPages={data?.totalPages}
paginate={paginate}
isCore={false} />
) : filteredProjects?.length > 0 ? (
filteredProjects?.map((project) => (
<ServiceProjectCard key={project.id} project={project} isCore={false} />
))
)}
):(<div className="d-flex justify-content-center align-items-center page-min-h "><p>No Service projects available</p></div>)}
<div className="col-12 d-flex justify-content-start mt-3">
<Pagination
@ -82,6 +91,7 @@ const ServiceProjectDisplay = ({ listView ,selectedStatuses }) => {
</GlobalModel>
)}
</div>
</div>
);
};

18
src/pages/project/ProjectDetails.jsx
View File

@ -24,6 +24,9 @@ import { useProjectAccess } from "../../hooks/useProjectAccess";
import "./ProjectDetails.css";
import ProjectOrganizations from "../../components/Project/ProjectOrganizations";
import ProjectStatistics from "../../components/Project/ProjectStatistics";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { REGULARIZE_ATTENDANCE, SELF_ATTENDANCE, TEAM_ATTENDANCE } from "../../utils/constants";
const ProjectDetails = () => {
const projectId = useSelectedProject();
@ -34,6 +37,10 @@ const ProjectDetails = () => {
useProjectDetails(projectId);
const { canView, loading: permsLoading } = useProjectAccess(projectId);
const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
useEffect(() => {
if (!projectId && projectNames.length > 0) {
@ -82,13 +89,16 @@ const ProjectDetails = () => {
<div className="row">
<div className="col-lg-4 col-md-5 mt-2">
<AboutProject />
<ProjectOverview project={projectId} />
<div className="card"><ProjectStatistics project={projectId} /></div>
</div>
<div className="col-lg-8 col-md-7 mt-2">
<ProjectProgressChart ShowAllProject="false" DefaultRange="1M" />
<div className="mt-5">
<AttendanceOverview />
</div>
{(canRegularize || canTeamAttendance || canSelfAttendance) && (
<div className="mt-5">
<AttendanceOverview />
</div>
)}
</div>
</div>
);

137
src/pages/project/ProjectPage.jsx
View File

@ -1,4 +1,4 @@
import React, { createContext, useContext, useEffect, useState } from "react";
import React, { createContext, useContext, useEffect, useRef, useState } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import {
ITEMS_PER_PAGE,
@ -36,15 +36,17 @@ const ProjectPage = () => {
isOpen: false,
project: null,
});
const dropdownRef = useRef(null);
const [projectList, setProjectList] = useState([]);
const [listView, setListView] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [coreProjects, setCoreProjects] = useState(() => {
const storedValue = sessionStorage.getItem('whichProjectDisplay');
return storedValue === 'true';
const storedValue = sessionStorage.getItem("whichProjectDisplay");
return storedValue === "true";
});
const HasManageProject = useHasUserPermission(MANAGE_PROJECT);
const [currentPage, setCurrentPage] = useState(1);
const [open, setOpen] = useState(false);
const [selectedStatuses, setSelectedStatuses] = useState(
PROJECT_STATUS.map((s) => s.id)
@ -64,12 +66,20 @@ const ProjectPage = () => {
manageServiceProject,
};
const handleToggleProject = (value) => {
setCoreProjects(value);
sessionStorage.setItem("whichProjectDisplay", String(value));
};
useEffect(() => {
const handleClickOutside = (event) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
setOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
return (
<ProjectContext.Provider value={contextDispatcher}>
@ -105,14 +115,11 @@ const ProjectPage = () => {
>
Infra Project
</button>
</div>
</div>
{/* RIGHT SIDE — SEARCH + CARD/LIST + DROPDOWN */}
<div className="d-flex flex-wrap align-items-center justify-content-end">
{/* Search */}
<div className="me-2" style={{ minWidth: "200px" }}>
<input
@ -131,7 +138,8 @@ const ProjectPage = () => {
<div className="d-flex gap-2">
<button
type="button"
className={`btn btn-sm p-1 ${!listView ? "btn-primary" : "btn-outline-primary"}`}
className={`btn btn-sm p-1 ${!listView ? "btn-primary" : "btn-outline-primary"
}`}
onClick={() => setListView(false)}
title="Card View"
>
@ -140,7 +148,8 @@ const ProjectPage = () => {
<button
type="button"
className={`btn btn-sm p-1 ${listView ? "btn-primary" : "btn-outline-primary"}`}
className={`btn btn-sm p-1 ${listView ? "btn-primary" : "btn-outline-primary"
}`}
onClick={() => setListView(true)}
title="List View"
>
@ -149,41 +158,74 @@ const ProjectPage = () => {
</div>
{/* Dropdown Filter */}
<div className="dropdown me-2">
<a
className="dropdown-toggle hide-arrow cursor-pointer p-1"
data-bs-toggle="dropdown"
aria-expanded="false"
title="Filter"
<div className="dropdown me-2 position-relative">
<div
className="cursor-pointer p-1"
onClick={() => setOpen(!open)}
>
<i className="bx bx-slider-alt fs-5"></i>
</a>
<i
className={`bx bx-slider-alt fs-5 ${selectedStatuses.length !== PROJECT_STATUS.length ? "text-primary" : ""
}`}
></i>
<ul className="dropdown-menu p-2 text-capitalize">
{PROJECT_STATUS.map(({ id, label }) => (
<li key={id}>
<div className="form-check">
<input
className="form-check-input"
type="checkbox"
checked={selectedStatuses.includes(id)}
onChange={() => handleStatusChange(id)}
/>
<label className="form-check-label">{label}</label>
</div>
</li>
))}
</ul>
{selectedStatuses.length !== PROJECT_STATUS.length && (
<span className="badge bg-warning text-white rounded-pill position-absolute"
style={{
top: "-4px",
right: "-4px",
fontSize: "0.6rem",
padding: "2px 5px",
}}
>
{PROJECT_STATUS.length - selectedStatuses.length}
</span>
)}
</div>
{open && (
<ul
ref={dropdownRef}
className="dropdown-menu show p-2 text-capitalize"
onMouseDown={(e) => e.stopPropagation()} // IMPORTANT
>
{PROJECT_STATUS.map(({ id, label }) => (
<li key={id}>
<div className="form-check">
<input
className="form-check-input"
type="checkbox"
checked={selectedStatuses.includes(id)}
onClick={(e) => e.stopPropagation()} // IMPORTANT
onChange={() => handleStatusChange(id)}
/>
<label
className="form-check-label"
onClick={(e) => e.stopPropagation()} // OPTIONAL
>
{label}
</label>
</div>
</li>
))}
</ul>
)}
</div>
{HasManageProject && (
<button
type="button"
className="btn btn-primary btn-sm d-flex align-items-center my-2"
onClick={() =>
coreProjects
? setMangeProject({ isOpen: true, Project: null }) // Organization Project → Infra
: setManageServiceProject({ isOpen: true, Project: null }) // Service Project
onClick={
() =>
coreProjects
? setMangeProject({ isOpen: true, Project: null }) // Organization Project → Infra
: setManageServiceProject({
isOpen: true,
Project: null,
}) // Service Project
}
>
<i className="bx bx-plus-circle me-2"></i>
@ -195,11 +237,22 @@ const ProjectPage = () => {
</div>
</div>
{coreProjects ? <ProjectsDisplay listView={listView}
searchTerm={searchTerm}
selectedStatuses={selectedStatuses}
handleStatusChange={handleStatusChange} /> : <ServiceProjectDisplay listView={listView}
selectedStatuses={selectedStatuses} />}
{coreProjects ? (
<ProjectsDisplay
listView={listView}
searchTerm={searchTerm}
selectedStatuses={selectedStatuses}
handleStatusChange={handleStatusChange}
currentPage={currentPage}
setCurrentPage={setCurrentPage}
/>
) : (
<ServiceProjectDisplay
listView={listView}
searchTerm={searchTerm}
selectedStatuses={selectedStatuses}
/>
)}
</div>
</ProjectContext.Provider>
);

7
src/pages/project/ProjectsDisplay.jsx
View File

@ -10,6 +10,7 @@ import { useServiceProjects } from "../../hooks/useServiceProject";
import { ITEMS_PER_PAGE, PROJECT_STATUS } from "../../utils/constants";
import usePagination from "../../hooks/usePagination";
import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
import { useDebounce } from "../../utils/appUtils";
const ProjectsDisplay = ({
listView,
@ -26,8 +27,8 @@ const ProjectsDisplay = ({
} = useProjectContext();
const [projectList, setProjectList] = useState([]);
const { data, isLoading, isError, error } = useProjects(ITEMS_PER_PAGE, 1);
const debouncedSearch = useDebounce(searchTerm, 500);
const { data, isLoading, isError, error } = useProjects(ITEMS_PER_PAGE, 1, debouncedSearch);
const filteredProjects =
data?.data?.filter((project) => {
@ -98,7 +99,7 @@ const ProjectsDisplay = ({
);
return (
<div className="row">
<div className="">
{listView ? (
<ProjectListView
data={projectList}

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

@ -0,0 +1,178 @@
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";
import DeliveryChallane from "../../components/purchase/DeliveryChallane";
import PurchasePayment from "../../components/purchase/PurchasePayment";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGEPURCHASE_INVOICE } from "../../utils/constants";
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 [showDelete, setShowDelete] = useState(false);
const [showInactive, setShowInactive] = useState(false);
const [addChallan, setChallan] = useState({
isOpen: false,
purchaseId: null,
});
const [managePurchase, setManagePurchase] = useState({
isOpen: false,
purchaseId: null,
});
const [addPayment, setAddPayment] = useState({
isOpen: false,
purchaseId: null,
});
const [viewPurchaseState, setViewPurchase] = useState({
isOpen: false,
purchaseId: null,
});
const canCreatePurchase = useHasUserPermission(MANAGEPURCHASE_INVOICE);
const contextValue = {
setViewPurchase,
setManagePurchase,
setChallan,
setAddPayment,
};
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 px-sm-4 my-3">
<div className="row p-2">
<div className="col-12 col-sm-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 className="form-check form-switch d-inline-flex align-items-center ms-3">
<input
type="checkbox"
className="form-check-input"
id="inactiveEmployeesCheckbox"
checked={showInactive}
onChange={() => setShowInactive(!showInactive)}
/>
<label
htmlFor="inactiveEmployeesCheckbox"
className="ms-2 text-xs"
>
{!showInactive ? "Show Deleted" : "Hide Deleted"}
</label>
</div>
</div>
<div className="col-sm-6 text-end">
{canCreatePurchase && (
<button
className="btn btn-sm btn-primary"
onClick={() =>
setManagePurchase({
isOpen: true,
purchaseId: null,
})
}
>
<i className="bx bx-plus-circle me-2"></i>Add
</button>
)}
</div>
</div>
</div>
<PurchaseList searchString={searchText} isActive={showInactive} />
{managePurchase.isOpen && (
<GlobalModel
isOpen={managePurchase.isOpen}
size="lg"
closeModal={() =>
setManagePurchase({
isOpen: false,
purchaseId: null,
})
}
>
<ManagePurchase
onClose={() =>
setManagePurchase({
isOpen: false,
purchaseId: null,
})
}
purchaseId={managePurchase.purchaseId}
/>
</GlobalModel>
)}
{viewPurchaseState.isOpen && (
<GlobalModel
isOpen={viewPurchaseState.isOpen}
size="lg"
closeModal={() =>
setViewPurchase({ isOpen: false, purchaseId: null })
}
>
<ViewPurchase purchaseId={viewPurchaseState.purchaseId} />
</GlobalModel>
)}
{addChallan.isOpen && (
<GlobalModel
size="xl"
isOpen={addChallan.isOpen}
closeModal={() => setChallan({ isOpen: false, purchaseId: null })}
>
<DeliveryChallane
purchaseId={addChallan.purchaseId}
onClose={() => setChallan({ isOpen: false, purchaseId: null })}
/>
</GlobalModel>
)}
{addPayment.isOpen && (
<GlobalModel
size="xl"
isOpen={addPayment.isOpen}
closeModal={() =>
setAddPayment({ isOpen: false, purchaseId: null })
}
>
<PurchasePayment
onClose={() => setAddPayment({ isOpen: false, purchaseId: null })}
purchaseId={addPayment.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`),
getInvoiceAttachmentTypes:()=>api.get("/api/Master/invoice-attachment-type/list")
};

12
src/repositories/OrganizationRespository.jsx
View File

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

4
src/repositories/ProjectRepository.jsx
View File

@ -2,8 +2,8 @@ import { api } from "../utils/axiosClient";
const ProjectRepository = {
getProjectList: (pageSize, pageNumber) =>
api.get(`/api/project/list?pageSize=${pageSize}&pageNumber=${pageNumber}`),
getProjectList: (pageSize, pageNumber,searchString) =>
api.get(`/api/project/list?pageSize=${pageSize}&pageNumber=${pageNumber}&searchString=${searchString}`),
getProjectByprojectId: (projetid) =>
api.get(`/api/project/details/${projetid}`),

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

@ -0,0 +1,28 @@
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),
GetDeliveryChallan: (purchaseInvoiceId) =>
api.get(`/api/PurchaseInvoice/delivery-challan/list/${purchaseInvoiceId}`),
addDelievryChallan: (data) =>
api.post(`/api/PurchaseInvoice/delivery-challan/create`, data),
AddPayment: (data) => api.post(`/api/PurchaseInvoice/add/payment`, data),
GetPaymentHistory: (purchaseInvoiceId) =>
api.get(`/api/PurchaseInvoice/payment-history/list/${purchaseInvoiceId}`),
deletePurchase: (id, isActive = false) =>
api.delete(`/api/PurchaseInvoice/delete/${id}?isActive=${isActive}`),
};
// const filterPayload = JSON.stringify({
// sortFilters,
// groupByColumn: groupBy || null,
// });

4
src/repositories/ServiceProjectRepository.jsx
View File

@ -4,9 +4,9 @@ import { api } from "../utils/axiosClient";
export const ServiceProjectRepository = {
//#region Service Project
CreateServiceProject: (data) => api.post("/api/ServiceProject/create", data),
GetServiceProjects: (pageSize, pageNumber) =>
GetServiceProjects: (pageSize, pageNumber,searchString) =>
api.get(
`/api/ServiceProject/list?pageSize=${pageSize}&pageNumber=${pageNumber}`
`/api/ServiceProject/list?pageSize=${pageSize}&pageNumber=${pageNumber}&searchString=${searchString}`
),
GetServiceProject: (id) => api.get(`/api/ServiceProject/details/${id}`),
UpdateServiceProject: (id, data) =>

7
src/router/AppRoutes.jsx
View File

@ -62,6 +62,7 @@ import AdvancePaymentPage from "../pages/AdvancePayment/AdvancePaymentPage";
import ServiceProjectDetail from "../pages/ServiceProject/ServiceProjectDetail";
import ManageJob from "../components/ServiceProject/ServiceProjectJob/ManageJob";
import AdvancePaymentPage1 from "../pages/AdvancePayment/AdvancePaymentPage1";
import PurchasePage from "../pages/purchase/PurchasePage";
const router = createBrowserRouter(
[
{
@ -113,6 +114,8 @@ const router = createBrowserRouter(
{ path: "/activities/task", element: <TaskPlannng /> },
{ path: "/activities/reports", element: <Reports /> },
{ path: "/gallary", element: <ImageGalleryPage /> },
// Finance
{ path: "/expenses/:status?/:project?", element: <ExpensePage /> },
{ path: "/expenses", element: <ExpensePage /> },
{ path: "/payment-request", element: <PaymentRequestPage /> },
@ -120,6 +123,10 @@ const router = createBrowserRouter(
{ path: "/advance-payment", element: <AdvancePaymentPage1 /> },
{ path: "/advance-payment/:employeeId", element: <AdvancePaymentPage /> },
{ path: "/collection", element: <CollectionPage /> },
// Purchases and Inventory
{ path: "/purchase-invoice", element: <PurchasePage /> },
// Administration
{ path: "/masters", element: <MasterPage /> },
{ path: "/tenants", element: <TenantPage /> },
{ path: "/tenants/new-tenant", element: <CreateTenant /> },

3
src/services/signalRService.js
View File

@ -150,6 +150,9 @@ export function startSignalR(loggedUser) {
queryClient.invalidateQueries(["serviceProjects"]);
queryClient.invalidateQueries(["serviceProject"]);
}
if (keyword === "Project_Branch") {
queryClient.invalidateQueries(["branches"]);
}
if (keyword === "Service_Project_Allocation") {
queryClient.invalidateQueries(["serviceProjectTeam"]);

21
src/utils/constants.jsx
View File

@ -2,7 +2,6 @@ export const BASE_URL = process.env.VITE_BASE_URL;
// export const BASE_URL = "https://api.marcoaiot.com";
export const THRESH_HOLD = 48; // hours
export const DURATION_TIME = 10; // minutes
export const ITEMS_PER_PAGE = 20;
@ -66,8 +65,6 @@ export const PROCESS_EXPENSE = "ea5a1529-4ee8-4828-80ea-0e23c9d4dd11";
export const EXPENSE_MANAGE = "bdee29a2-b73b-402d-8dd1-c4b1f81ccbc3";
// --------------------------------Collection----------------------------
export const ADMIN_COLLECTION = "dbf17591-09fe-4c93-9e1a-12db8f5cc5de";
@ -76,6 +73,13 @@ export const CREATE_COLLECTION = "b93141fd-dbd3-4051-8f57-bf25d18e3555";
export const EDIT_COLLECTION = "455187b4-fef1-41f9-b3d0-025d0b6302c3";
export const ADDPAYMENT_COLLECTION = "061d9ccd-85b4-4cb0-be06-2f9f32cebb72";
// --------------------Purchase Invoice--------------------------------
export const VIEWSELF_PURCHASEINVOICE = "91e09825-512a-465e-82ad-fa355b305585";
export const VIEWALL_PURCHASEINVOICE = "d6ae78d3-a941-4cc4-8d0a-d40479be4211";
export const MANAGEPURCHASE_INVOICE = "68ff925d-8ebf-4034-a137-8d3317c56ca1";
export const DELETEPURCHASE_INVOICE = "a4b77638-bf31-42bb-afd4-d5bbd15ccadc";
export const ADD_DELIVERY_CHALLAN = "a4b77638-bf31-42bb-afd4-d5bbd15ccadc";
// ----------------------------Tenant-------------------------
export const SUPPER_TENANT = "d032cb1a-3f30-462c-bef0-7ace73a71c0b";
export const MANAGE_TENANTS = "00e20637-ce8d-4417-bec4-9b31b5e65092";
@ -98,7 +102,7 @@ export const EXPENSE_REJECTEDBY = [
];
export const EXPENSE_DRAFT = "297e0d8f-f668-41b5-bfea-e03b354251c8";
export const EXPENSE_MANAGEMENT = "a4e25142-449b-4334-a6e5-22f70e4732d7";
export const EXPENSE_CREATE = "b8586f67-dc19-49c3-b4af-224149efe1d3"
export const EXPENSE_CREATE = "b8586f67-dc19-49c3-b4af-224149efe1d3";
export const INR_CURRENCY_CODE = "78e96e4a-7ce0-4164-ae3a-c833ad45ec2c";
export const EXPENSE_PROCESSED = "61578360-3a49-4c34-8604-7b35a3787b95";
export const TENANT_STATUS = [
@ -165,7 +169,7 @@ export const EXPENSE_STATUS = {
approve_pending: "4068007f-c92f-4f37-a907-bc15fe57d4d8",
payment_processed: "61578360-3a49-4c34-8604-7b35a3787b95",
payment_done: "b8586f67-dc19-49c3-b4af-224149efe1d3",
}
};
export const UUID_REGEX =
/^\/employee\/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
@ -184,7 +188,7 @@ export const FREQUENCY_FOR_RECURRING = {
2: "Half-Yearly",
3: "Yearly",
4: "Daily",
5: "Weekly"
5: "Weekly",
};
export const PAYEE_RECURRING_EXPENSE = [
@ -206,9 +210,8 @@ export const PAYEE_RECURRING_EXPENSE = [
},
];
//#region Service Project and Jobs
export const STATUS_JOB_CLOSED = "3ddeefb5-ae3c-4e10-a922-35e0a452bb69"
export const STATUS_JOB_CLOSED = "3ddeefb5-ae3c-4e10-a922-35e0a452bb69";
//#endregion
@ -241,4 +244,4 @@ export const JOBS_STATUS_IDS = [
id: "75a0c8b8-9c6a-41af-80bf-b35bab722eb2",
label: "On Hold",
},
];
];

4
src/utils/staticContent.jsx Normal file
View File

@ -0,0 +1,4 @@
export const FILE_UPLOAD_INFO = `
If you want to upload a document, please select a document type
before uploading the document.
`;