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

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

Browse Source
This commit is contained in:
Kartik Sharma 2025-12-01 15:16:51 +05:30
commit 03fb5f7bc3
41 changed files with 1655 additions and 557 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -234,7 +234,9 @@ font-weight: normal;
.h-min { height: min-content; }
.h-max { height: max-content; }
.vh-50 {
height: 50vh !important;
}

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={{ maxWidth: "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{" "}

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

@ -1,80 +1,169 @@
import { useState } from "react";
import { useState, useRef, useEffect } from "react";
const PreviewDocument = ({ files = [] }) => {
const images = Array.isArray(files) ? files : [files];
const PreviewDocument = ({ imageUrl }) => {
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 zoomIn = () => setScale((prev) => Math.min(prev + 0.2, 3));
const zoomOut = () => setScale((prev) => Math.max(prev - 0.2, 0.4));
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 gap-3 mb-2">
<i
className="bx bx-rotate-right cursor-pointer fs-4"
title="Rotate"
onClick={() => setRotation((prev) => prev + 90)}
></i>
<i
className="bx bx-zoom-in cursor-pointer fs-4"
title="Zoom In"
onClick={zoomIn}
></i>
<i
className="bx bx-zoom-out cursor-pointer fs-4"
title="Zoom Out"
onClick={zoomOut}
></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 overflow-hidden"
style={{ minHeight: "80vh" }}
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 text-center mb-2">
Loading...
</div>
)}
{loading && <div className="text-secondary">Loading...</div>}
<div className="mb-3 d-flex justify-content-center align-items-center">
<img
src={imageUrl}
alt="Full View"
className="img-fluid"
style={{
maxHeight: "80vh",
objectFit: "contain",
display: loading ? "none" : "block",
transform: `rotate(${rotation}deg) scale(${scale})`,
transition: "transform 0.3s ease",
cursor: "grab",
}}
onLoad={() => setLoading(false)}
/>
<img
src={currentImage?.preSignedUrl}
alt="Preview"
draggable="false"
style={{
maxHeight: "60vh",
display: loading ? "none" : "block",
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="d-flex justify-content-between">
<div className="text-center text-muted mt-2 small">
Scroll = change image | Double click = reset
</div>
<div className="position-absolute bottom-0 start-0 m-2">
<button
className="btn btn-outline-secondary"
onClick={resetAll}
>
<i className="bx bx-reset"></i> Reset
</button>
<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>
</>
);
};
export default PreviewDocument;

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

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={

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>

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 });
}
}}

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/JobComments.jsx
View File

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

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()

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>

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

@ -457,6 +457,7 @@ export const SelectFieldSearch = ({
const handleSelect = (option) => {
if (!isMultiple) {
onChange(isFullObject ? option : option[valueKey]);
setOpen(false)
} else {
const exists = selectedList.some((e) => e[valueKey] === option[valueKey]);
const updated = exists

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

@ -58,139 +58,66 @@ const HoverPopup = ({
return () => document.removeEventListener("click", handler);
}, [Mode, visible, dispatch, id]);
// Positioning effect: respects align prop and stays inside boundary (drawer)
useEffect(() => {
if (!visible || !popupRef.current || !triggerRef.current) return;
// run in next frame so DOM/layout settles
requestAnimationFrame(() => {
const popup = popupRef.current;
// choose boundary: provided boundaryRef or nearest positioned parent (popup.parentElement)
const boundaryEl =
(boundaryRef && boundaryRef.current) || 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 popupRect = popup.getBoundingClientRect();
const parentRect = boundaryRect; // alias
const triggerCenterX = triggerRect.left + triggerRect.width / 2 - boundaryRect.left;
let left = triggerCenterX - popupRect.width / 2;
// Convert trigger center to parent coordinates
const triggerCenterX =
triggerRect.left + triggerRect.width / 2 - parentRect.left;
// preferred left so popup center aligns to trigger center:
const preferredLeft = triggerCenterX - 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;
}
// 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;
}
// 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;
}
// if centering would overflow left -> stick popup fully to left=0
if (preferredLeft < 0) {
setLeft(0);
return;
}
// fallback center
setLeft(leftIfCentered);
// Clamp to boundaries
left = Math.max(0, Math.min(left, boundaryRect.width - popupRect.width));
popup.style.left = `${left}px`;
});
}, [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
}}
>
return (
<div
className="d-inline-block"
ref={triggerRef}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
style={{ cursor: "pointer" }}
className="d-inline-block position-relative" // <-- ADD THIS !!
style={{ overflow: "visible" }}
>
{children}
</div>
{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,
top: "100%",
minWidth: "200px",
maxWidth: "300px",
wordWrap: "break-word",
}}
onClick={(e) => e.stopPropagation()}
>
{title && <h6 className="fw-semibold mb-2">{title}</h6>}
<div>{content}</div>
</div>
)}
</div>
);
};

8
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)}
@ -57,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;

195
src/components/purchase/ManagePurchase.jsx
View File

@ -1,78 +1,146 @@
import React, { useState } from "react";
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 } from "../../hooks/usePurchase";
const ManagePurchase = ({ onClose }) => {
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 = [
{
name: "Party Details",
icon: "bx bx-user bx-md",
subtitle: "Supplier & project information",
component: <PurchasePartyDetails />,
},
{
name: "Invoice & Transport",
icon: "bx bx-receipt bx-md",
subtitle: "Invoice, eWay bill & transport info",
component: <PurchaseTransportDetails />,
},
{
name: "Payment Details",
icon: "bx bx-credit-card bx-md",
subtitle: "Amount, tax & due date",
component: <PurchasePaymentDetails />,
},
];
const stepsConfig = useMemo(
() => [
{
name: "Party Details",
icon: "bx bx-user bx-md",
subtitle: "Supplier & project information",
component: <PurchasePartyDetails purchase={data} />,
},
{
name: "Invoice & Transport",
icon: "bx bx-receipt bx-md",
subtitle: "Invoice, eWay bill & transport info",
component: <PurchaseTransportDetails />,
},
{
name: "Payment Details",
icon: "bx bx-credit-card bx-md",
subtitle: "Amount, tax & due date",
component: <PurchasePaymentDetails purchaseId={purchaseId} />,
},
],
[data, purchaseId]
);
const purchaseOrder = useAppForm({
resolver: zodResolver(PurchaseSchema),
defaultValues: defaultPurchaseValue,
mode: "onChange",
shouldUnregister: false,
});
const {reset} = purchaseOrder;
const handleNext = async () => {
const currentStepFields = getStepFields(activeTab);
const valid = await purchaseOrder.trigger(currentStepFields);
const { reset, formState } = purchaseOrder;
if (valid) {
setCompletedTabs((prev) => [...new Set([...prev, activeTab])]);
setActiveTab((prev) => Math.min(prev + 1, stepsConfig.length - 1));
}
};
useEffect(() => {
if (!purchaseId || !data) return;
const handlePrev = () => {
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()
reset();
onClose();
});
const onSubmit = (formData) => {
let payload = formData;
CreateInvoice(payload);
};
const { mutate: updatePurchase, isPending: isUpdating } =
useUpdatePurchaseInvoice(() => {
reset();
onClose();
});
const onSubmit = useCallback(
(formData) => {
if (activeTab !== 2) return;
if (purchaseId) {
const payload = generatePatchOps(formData);
updatePurchase({ purchaseId, payload });
} else {
CreateInvoice(formData);
}
},
[activeTab, purchaseId, generatePatchOps, updatePurchase, CreateInvoice]
);
return (
<div
id="wizard-property-listing"
className="bs-stepper horizontically mt-2 b-secondry px-1 py-1 shadow-none border-0"
>
{/* Header */}
<div className="bs-stepper 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;
@ -81,11 +149,15 @@ const ManagePurchase = ({ onClose }) => {
return (
<React.Fragment key={step.name}>
<div
className={`step ${isActive ? "active" : ""} ${
className={`step text-truncate ${isActive ? "active" : ""} ${
isCompleted ? "crossed" : ""
}`}
>
<button type="button" className="step-trigger">
<button
type="button"
className={`step-trigger`}
onClick={() => purchaseId && setActiveTab(index)}
>
<span className="bs-stepper-circle">
{isCompleted ? (
<i className="bx bx-check"></i>
@ -109,12 +181,21 @@ const ManagePurchase = ({ onClose }) => {
})}
</div>
{/* Content */}
<div className="bs-stepper-content py-2">
{/* --- Form Content --- */}
<div className="bs-stepper-content py-2 px-3">
<AppFormProvider {...purchaseOrder}>
<form onSubmit={purchaseOrder.handleSubmit(onSubmit)}>
<form
onSubmitCapture={(e) => {
if (activeTab !== 2) {
e.preventDefault();
e.stopPropagation();
}
}}
onSubmit={purchaseOrder.handleSubmit(onSubmit)}
>
{stepsConfig[activeTab].component}
{/* Buttons */}
<div className="d-flex justify-content-between mt-4">
<button
type="button"
@ -124,21 +205,27 @@ const ManagePurchase = ({ onClose }) => {
>
Previous
</button>
<di>
<div>
{activeTab < stepsConfig.length - 1 ? (
<button
type="button"
className="btn btn-sm btn-primary"
onClick={handleNext}
disabled={isPending || isUpdating}
>
Next <i className="bx bx-sm bx-right-arrow"></i>
Next
</button>
) : (
<button type="submit" className="btn btn-sm btn-primary">
{isPending ? "Please Wait" : "SUbmit"}
<button
type={activeTab == 2 ? "submit" : "button"}
className="btn btn-sm btn-primary"
disabled={isPending || isUpdating}
>
{isPending || isUpdating ? "Please Wait" : "Submit"}
</button>
)}
</di>
</div>
</div>
</form>
</AppFormProvider>

45
src/components/purchase/PurchaseList.jsx
View File

@ -8,7 +8,8 @@ import { useDebounce } from "../../utils/appUtils";
import { usePurchaseContext } from "../../pages/purchase/PurchasePage";
const PurchaseList = ({ searchString }) => {
const { setViewPurchase } = usePurchaseContext();
const { setViewPurchase, setManagePurchase, setChallan } =
usePurchaseContext();
const [currentPage, setCurrentPage] = useState(1);
const debounceSearch = useDebounce(searchString, 300);
const { data, isLoading } = usePurchasesList(
@ -28,8 +29,8 @@ const PurchaseList = ({ searchString }) => {
const visibleColumns = PurchaseColumn.filter((col) => !col.hidden);
return (
<div className="card mt-2">
<div className="table-responsive px-3">
<div className="card mt-2 page-min-h px-sm-4">
<div className="table-responsive px-2">
<table className="datatables-users table border-top text-nowrap">
<thead>
<tr>
@ -46,7 +47,7 @@ const PurchaseList = ({ searchString }) => {
{/* LOADING */}
{isLoading && (
<tr>
<td colSpan={3} colSpan={visibleColumns.length}>
<td colSpan={visibleColumns.length + 1} className="border-0">
<div className="py-6 py-12">
<SpinnerLoader />
</div>
@ -57,8 +58,7 @@ const PurchaseList = ({ searchString }) => {
<tr>
<td
colSpan={visibleColumns.length}
className="text-center py-4"
colSpan={4}
className="text-center py-4 border-0"
>
No Data Found
</td>
@ -73,7 +73,7 @@ const PurchaseList = ({ searchString }) => {
{col.render ? col.render(item) : item[col.key] || "NA"}
</td>
))}
<td>
<td >
<div className="dropdown z-2">
<button
type="button"
@ -101,20 +101,37 @@ const PurchaseList = ({ searchString }) => {
})
}
>
<i className="bx bx-eye me-2"></i>
<i className="bx bx-show me-2"></i>
<span className="align-left">view</span>
</a>
</li>
<li>
<a className="dropdown-item cursor-pointer">
<i className="bx bx-trash me-2"></i>
<span className="align-left">Add</span>
<a
className="dropdown-item cursor-pointer"
onClick={() =>
setManagePurchase({
isOpen: true,
purchaseId: item.id,
})
}
>
<i className="bx bx-edit me-2"></i>
<span className="align-left">Edit</span>
</a>
</li>
<li>
<a className="dropdown-item cursor-pointer">
<i className="bx bx-trash me-2"></i>
<span className="align-left">Delete</span>
<a
className="dropdown-item cursor-pointer"
onClick={() =>
setChallan({
isOpen: true,
purchaseId: item.id,
})
}
>
<i className="bx bx-file bx-plus me-2"></i>
<span className="align-left">Add Delivery Challan</span>
</a>
</li>
</ul>

70
src/components/purchase/PurchasePartyDetails.jsx
View File

@ -1,12 +1,19 @@
import React from "react";
import { AppFormController, useAppFormContext } from "../../hooks/appHooks/useAppForm";
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 {
useGlobaleOrganizations,
useOrganization,
useOrganizationsList,
} from "../../hooks/useOrganization";
import { ITEMS_PER_PAGE } from "../../utils/constants";
const PurchasePartyDetails = () => {
@ -18,9 +25,8 @@ const PurchasePartyDetails = () => {
formState: { errors },
} = useAppFormContext();
return (
<div className="row g-2 text-start">
<div className="row g-3 text-start">
{/* Title */}
<div className="col-12 col-md-6">
<Label htmlFor="title" required>
@ -30,7 +36,7 @@ const PurchasePartyDetails = () => {
<input
id="title"
type="text"
className={`form-control form-control-md ${
className={`form-control form-control-xs ${
errors?.title ? "is-invalid" : ""
}`}
{...register("title")}
@ -44,7 +50,7 @@ const PurchasePartyDetails = () => {
{/* Project ID */}
<div className="col-12 col-md-6">
<SelectProjectField
className={`form-control form-control-md ${
className={`form-control form-control-xs ${
errors?.projectId ? "is-invalid" : ""
}`}
label="Project"
@ -61,40 +67,27 @@ const PurchasePartyDetails = () => {
/>
</div>
{/* Organization */}
<div className="col-12 col-md-6">
{/* <input
id="organizationId"
type="text"
className={`form-control form-control-md `}
{...register("organizationId")}
/> */}
<div className="col-12 col-md-6 my-0">
<AppFormController
name="organizationId"
control={control}
render={({ field }) => (
<SelectFieldSearch
{...field}
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}
hookParams={[ITEMS_PER_PAGE, 1]}
error={errors?.organizationId?.message}
/>
)}
/>
</div>
{/* Supplier */}
<div className="col-12 col-md-6">
<div className="col-12 col-md-6 my-0">
<AppFormController
name="supplierId"
control={control}
@ -108,25 +101,20 @@ const PurchasePartyDetails = () => {
valueKey="id"
labelKey="name"
useFetchHook={useGlobaleOrganizations}
hookParams={[ITEMS_PER_PAGE,1]}
errors={errors?.organizationId}
hookParams={[ITEMS_PER_PAGE, 1]}
errors={errors.supplierId}
/>
)}
/>
{errors?.supplierId && (
<div className="danger-text">{errors.supplierId.message}</div>
)}
</div>
{/* Billing Address */}
<div className="col-12 col-md-6">
<div className="col-12 col-md-6 my-0">
<Label htmlFor="billingAddress">Billing Address</Label>
<textarea
id="billingAddress"
rows="2"
className={`form-control form-control-md `}
className={`form-control form-control-xs `}
{...register("billingAddress")}
/>
@ -135,13 +123,13 @@ const PurchasePartyDetails = () => {
)}
</div>
<div className="col-12 col-md-6">
<div className="col-12 col-md-6 my-0 mb-1">
<Label htmlFor="shippingAddress">Shipping Address</Label>
<textarea
id="shippingAddress"
rows="2"
className={`form-control form-control-md `}
className={`form-control form-control-xs `}
{...register("shippingAddress")}
/>
@ -151,7 +139,7 @@ const PurchasePartyDetails = () => {
</div>
{/* Purchase Order Number */}
<div className="col-12 col-md-6">
<div className="col-12 col-md-6 ">
<Label htmlFor="purchaseOrderNumber" required>
Purchase Order Number
</Label>
@ -159,7 +147,7 @@ const PurchasePartyDetails = () => {
<input
id="purchaseOrderNumber"
type="text"
className={`form-control form-control-md `}
className={`form-control form-control-xs `}
{...register("purchaseOrderNumber")}
/>
@ -171,7 +159,7 @@ const PurchasePartyDetails = () => {
</div>
{/* Purchase Order Date */}
<div className="col-12 col-md-6">
<div className="col-12 col-md-6 mb-1">
<Label htmlFor="purchaseOrderDate" required>
Purchase Order Date
</Label>
@ -179,6 +167,7 @@ const PurchasePartyDetails = () => {
<DatePicker
control={control}
name="purchaseOrderDate"
size="xs"
className={` w-full ${
errors?.purchaseOrderDate ? "is-invalid" : ""
}`}
@ -205,7 +194,7 @@ const PurchasePartyDetails = () => {
</div>
)}
</div>
<div className="col-12 col-md-6">
<div className="col-12 col-md-6 mb-1">
<Label htmlFor="proformaInvoiceAmountt">Proforma Amount</Label>
<input
id="proformaInvoiceAmount"
@ -220,13 +209,14 @@ const PurchasePartyDetails = () => {
</div>
)}
</div>
<div className="col-12 col-md-6">
<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 && (

190
src/components/purchase/PurchasePaymentDetails.jsx
View File

@ -1,11 +1,21 @@
import React, { useEffect } from "react";
import Label from "../common/Label";
import { useAppFormContext } from "../../hooks/appHooks/useAppForm";
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 = () => {
const PurchasePaymentDetails = ({ purchaseId = null }) => {
const { data, isLoading, error, isError } = useInvoiceAttachmentTypes();
const { data: InvoiceDocTypes, isLoading: invoiceDocLoading } =
useInvoiceAttachmentTypes();
const {
register,
watch,
@ -25,9 +35,78 @@ const PurchasePaymentDetails = () => {
setValue("totalAmount", (base + tax).toFixed(2));
}
}, [baseAmount, taxAmount, 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-2 text-start">
<div className="row g-1 text-start">
<div className="col-12 col-md-4">
<Label htmlFor="baseAmount" required>
Base Amount
@ -36,8 +115,8 @@ const PurchasePaymentDetails = () => {
<input
id="baseAmount"
type="number"
className="form-control form-control-md"
{...register("baseAmount")}
className="form-control form-control-xs"
{...register("baseAmount", { valueAsNumber: true })}
/>
{errors?.baseAmount && (
@ -55,8 +134,8 @@ const PurchasePaymentDetails = () => {
<input
id="taxAmount"
type="number"
className="form-control form-control-md"
{...register("taxAmount")}
className="form-control form-control-xs"
{...register("taxAmount", { valueAsNumber: true })}
/>
{errors?.taxAmount && (
@ -74,8 +153,8 @@ const PurchasePaymentDetails = () => {
<input
id="totalAmount"
type="number"
className="form-control form-control-md"
{...register("totalAmount")}
className="form-control form-control-xs"
{...register("totalAmount", { valueAsNumber: true })}
readOnly
/>
@ -92,8 +171,8 @@ const PurchasePaymentDetails = () => {
<input
id="transportCharges"
type="number"
className="form-control form-control-md"
{...register("transportCharges")}
className="form-control form-control-xs"
{...register("transportCharges", { valueAsNumber: true })}
/>
{errors?.transportCharges && (
@ -110,6 +189,7 @@ const PurchasePaymentDetails = () => {
name={"paymentDueDate"}
control={control}
className="w-full"
size="xs"
/>
{errors?.paymentDueDate && (
@ -119,7 +199,7 @@ const PurchasePaymentDetails = () => {
)}
</div>
<div className="col-12">
<div className="col-12 mb-2">
<Label htmlFor="description" required>
Description
</Label>
@ -127,7 +207,7 @@ const PurchasePaymentDetails = () => {
<textarea
id="description"
rows="3"
className="form-control form-control-md"
className="form-control form-control-xs"
{...register("description")}
/>
@ -137,6 +217,90 @@ const PurchasePaymentDetails = () => {
</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>
);
};

137
src/components/purchase/PurchaseSchema.jsx
View File

@ -1,39 +1,31 @@
import { z } from "zod";
import { normalizeAllowedContentTypes } from "../../utils/appUtils";
export const AttachmentSchema = (allowedContentType, maxSizeAllowedInMB) => {
const allowedTypes = normalizeAllowedContentTypes(allowedContentType);
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
const ALLOWED_TYPES = [
"application/pdf",
"image/png",
"image/jpg",
"image/jpeg",
];
return z.object({
fileName: z.string().min(1, { message: "File name is required" }),
base64Data: z.string().min(1, { message: "File data is required" }),
invoiceAttachmentTypeId: z
.string()
.min(1, { message: "File data is required" }),
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)
});
contentType: z
.string()
.min(1, { message: "MIME type is required" })
.refine(
(val) => (allowedTypes.length ? allowedTypes.includes(val) : true),
{
message: `File type must be one of: ${allowedTypes.join(", ")}`,
}
),
fileSize: z
.number()
.int()
.nonnegative("fileSize must be ≥ 0")
.max(
(maxSizeAllowedInMB ?? 25) * 1024 * 1024,
`fileSize must be ≤ ${maxSizeAllowedInMB ?? 25}MB`
),
description: z.string().optional().default(""),
isActive: z.boolean(),
});
};
export const PurchaseSchema = z.object({
title: z.string().min(1, { message: "Title is required" }),
@ -49,7 +41,7 @@ export const PurchaseSchema = z.object({
proformaInvoiceNumber: z.string().nullable(),
proformaInvoiceDate: z.coerce.date().nullable(),
proformaInvoiceAmount: z.string().nullable(),
proformaInvoiceAmount: z.coerce.number().optional(),
invoiceNumber: z.string().nullable(),
invoiceDate: z.coerce.date().nullable(),
@ -59,21 +51,19 @@ export const PurchaseSchema = z.object({
acknowledgmentDate: z.coerce.date().nullable(),
acknowledgmentNumber: z.string().nullable(),
baseAmount: z.string().min(1, { message: "Base amount is required" }),
taxAmount: z.string().min(1, { message: "Tax amount is required" }),
totalAmount: z.string().min(1, { message: "Total amount is required" }),
baseAmount: z.number().min(1, { message: "Base amount is required" }),
taxAmount: z.number().min(1, { message: "Tax amount is required" }),
totalAmount: z.number().min(1, { message: "Total amount is required" }),
paymentDueDate: z.coerce.date().nullable(),
transportCharges: z.string().nullable(),
transportCharges: z.number().nullable(),
description: z.string().min(1, { message: "Description is required" }),
invoiceAttachmentTypeId:z.string().nullable(),
attachments: z
.array(AttachmentSchema)
attachments: z.array(AttachmentSchema([], 25)).optional(),
});
// deliveryChallanNo: z
// .string()
// .min(1, { message: "Delivery Challan No is required" }),
// deliveryDate: z.string().min(1, { message: "Delevery Date is required" }),
// shippingAddress: z.string().min(1, { message: "Delevery Date is required" }),
export const defaultPurchaseValue = {
title: "",
@ -88,7 +78,7 @@ export const defaultPurchaseValue = {
proformaInvoiceNumber: null,
proformaInvoiceDate: null,
proformaInvoiceAmount: null,
proformaInvoiceAmount: 0,
invoiceNumber: null,
invoiceDate: null,
@ -98,13 +88,13 @@ export const defaultPurchaseValue = {
acknowledgmentNumber: null,
acknowledgmentDate: null,
baseAmount: "",
taxAmount: "",
totalAmount: "",
baseAmount: 0,
taxAmount: 0,
totalAmount: 0,
paymentDueDate: null,
transportCharges: null,
description: "",
invoiceAttachmentTypeId:null,
attachments: [],
};
@ -138,9 +128,62 @@ export const getStepFields = (stepIndex) => {
"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,
};

16
src/components/purchase/PurchaseTransportDetails.jsx
View File

@ -10,7 +10,7 @@ const PurchaseTransportDetails = () => {
} = useAppFormContext();
return (
<div className="row g-2 text-start">
<div className="row g-3 text-start">
{/* Invoice Number */}
<div className="col-12 col-md-6">
<Label htmlFor="invoiceNumber" required>
@ -20,7 +20,7 @@ const PurchaseTransportDetails = () => {
<input
id="invoiceNumber"
type="text"
className="form-control form-control-md"
className="form-control form-control-xs"
{...register("invoiceNumber")}
/>
@ -36,7 +36,7 @@ const PurchaseTransportDetails = () => {
<Label htmlFor="invoiceDate">Invoice Date</Label>
<DatePicker control={control} name="invoiceDate" className="w-full"/>
<DatePicker control={control} name="invoiceDate" className="w-full" size="xs"/>
{errors?.invoiceDate && (
<div className="small text-danger mt-1">
@ -52,7 +52,7 @@ const PurchaseTransportDetails = () => {
<input
id="eWayBillNumber"
type="text"
className="form-control form-control-md"
className="form-control form-control-xs"
{...register("eWayBillNumber")}
/>
@ -84,7 +84,7 @@ const PurchaseTransportDetails = () => {
<input
id="invoiceReferenceNumber"
type="text"
className="form-control form-control-md"
className="form-control form-control-xs"
{...register("invoiceReferenceNumber")}
/>
@ -102,7 +102,7 @@ const PurchaseTransportDetails = () => {
<input
id="acknowledgmentNumber"
type="text"
className="form-control form-control-md"
className="form-control form-control-xs"
{...register("acknowledgmentNumber")}
/>
@ -113,10 +113,10 @@ const PurchaseTransportDetails = () => {
)}
</div>
<div className="col-12 col-md-6">
<div className="col-12 col-md-6 mb-2">
<Label htmlFor="acknowledgmentDate">Acknowledgment Date</Label>
<DatePicker control={control} name="acknowledgmentDate" className="w-full"/>
<DatePicker control={control} name="acknowledgmentDate" className="w-full" size="xs"/>
{errors?.acknowledgmentDate && (
<div className="small text-danger mt-1">

6
src/components/purchase/Purchasetable.jsx
View File

@ -26,13 +26,13 @@ export const PurchaseColumn = [
{
key: "project",
label: "Project",
className: "text-start d-none d-sm-table-cell",
className: "text-start ",
render: (item) => <span>{item?.project?.name || "NA"}</span>,
},
{
key: "supplier",
label: "Supplier",
className: "text-start d-none d-sm-table-cell",
className: "text-start ",
render: (item) => <span>{item?.supplier?.name || "NA"}</span>,
},
{
@ -52,7 +52,7 @@ export const PurchaseColumn = [
{
key: "totalAmount",
label: "Total Amount",
className: " text-end w-min",
className: "text-end",
render: (item) => (
<span>{formatFigure(item?.totalAmount, { type: "currency" })}</span>
),

6
src/hooks/useOrganization.js
View File

@ -39,13 +39,13 @@ export const useOrganizationModal = () => {
// ================================Query=============================================================
export const useGlobaleOrganizations = (pageSize, pageNumber, searchString) => {
export const useGlobaleOrganizations = (pageSize, pageNumber,id, searchString) => {
return useQuery({
queryKey: ["global_organization",pageSize, pageNumber, searchString],
queryKey: ["global_organization",pageSize, pageNumber,id, searchString],
queryFn: async () => {
const resp = await OrganizationRepository.getGlobalOrganization(
pageSize,
pageNumber,
pageNumber,id,
searchString
);
return resp.data;

58
src/hooks/usePurchase.jsx
View File

@ -31,6 +31,19 @@ export const usePurchasesList = (
});
};
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],
@ -49,6 +62,7 @@ export const useCreatePurchaseInvoice = (onSuccessCallback) => {
mutationFn: async (payload) =>
await PurchaseRepository.CreatePurchase(payload),
onSuccess: (data, variables) => {
queryClient.invalidateQueries({ queryKey: ["purchase_list"] });
showToast("Purchase Invoice Created successfully", "success");
if (onSuccessCallback) onSuccessCallback();
},
@ -62,3 +76,47 @@ export const useCreatePurchaseInvoice = (onSuccessCallback) => {
},
});
};
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"
);
},
});
};

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

@ -63,7 +63,7 @@ const ExpensePage = () => {
const [ViewDocument, setDocumentView] = useState({
IsOpen: false,
Image: null,
Images: null,
});
const IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE);
@ -260,10 +260,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>

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>
);

59
src/pages/purchase/PurchasePage.jsx
View File

@ -5,6 +5,7 @@ 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";
export const PurchaseContext = createContext();
export const usePurchaseContext = () => {
@ -18,7 +19,14 @@ export const usePurchaseContext = () => {
};
const PurchasePage = () => {
const [searchText, setSearchText] = useState("");
const [addePurchase, setAddedPurchase] = useState(false);
const [addChallan, setChallan] = useState({
isOpen: false,
purchaseId: null,
});
const [managePurchase, setManagePurchase] = useState({
isOpen: false,
purchaseId: null,
});
const [viewPurchaseState, setViewPurchase] = useState({
isOpen: false,
purchaseId: null,
@ -26,8 +34,9 @@ const PurchasePage = () => {
const contextValue = {
setViewPurchase,
setManagePurchase,
setChallan,
};
console.log(ViewPurchase);
return (
<PurchaseContext.Provider value={contextValue}>
<div className="container-fluid">
@ -38,9 +47,9 @@ const PurchasePage = () => {
{ label: "Purchase" },
]}
/>
<div className="card">
<div className="card px-sm-4 my-3">
<div className="row p-2">
<div className="col-12 col-md-6 text-start">
<div className="col-12 col-sm-6 text-start">
{" "}
<label className="mb-0">
<input
@ -53,10 +62,15 @@ const PurchasePage = () => {
/>
</label>
</div>
<di className="col-6 text-end">
<di className="col-sm-6 text-end">
<button
className="btn btn-sm btn-primary"
onClick={() => setAddedPurchase(true)}
onClick={() =>
setManagePurchase({
isOpen: true,
purchaseId: null,
})
}
>
<i className="bx bx-plus-circle me-2"></i>Add
</button>
@ -65,13 +79,26 @@ const PurchasePage = () => {
</div>
<PurchaseList searchString={searchText} />
{addePurchase && (
{managePurchase.isOpen && (
<GlobalModel
isOpen={addePurchase}
isOpen={managePurchase.isOpen}
size="lg"
closeModal={() => setAddedPurchase(false)}
closeModal={() =>
setManagePurchase({
isOpen: false,
purchaseId: null,
})
}
>
<ManagePurchase onClose={() => setAddedPurchase(false)} />
<ManagePurchase
onClose={() =>
setManagePurchase({
isOpen: false,
purchaseId: null,
})
}
purchaseId={managePurchase.purchaseId}
/>
</GlobalModel>
)}
@ -86,6 +113,18 @@ const PurchasePage = () => {
<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>
)}
</div>
</PurchaseContext.Provider>
);

6
src/repositories/OrganizationRespository.jsx
View File

@ -41,9 +41,11 @@ const OrganizationRepository = {
return api.get(url);
},
getGlobalOrganization: (pageSize, pageNumber, searchString) =>
getGlobalOrganization: (pageSize, pageNumber, searchString, id) =>
api.get(
`/api/Organization/list/basic?pageSize=${pageSize}&pageNumber=${pageNumber}&searchString=${searchString}`
`/api/Organization/list/basic?pageSize=${pageSize}&pageNumber=${pageNumber}${
id ? `&id=${id}` : ""
}&searchString=${searchString}`
),
};

4
src/repositories/PurchaseRepository.jsx
View File

@ -10,6 +10,10 @@ export const PurchaseRepository = {
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),
};
// const filterPayload = JSON.stringify({

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.
`;