Compare commits
52 Commits
main
...
Multiple_F
| Author | SHA1 | Date | |
|---|---|---|---|
| 6fa2cc4ef0 | |||
| cb9d263730 | |||
| f0d21b14a2 | |||
| 9ce47a9232 | |||
| 5818b84760 | |||
| f9a0098adb | |||
| 00d5df5ebb | |||
| 40b11d209c | |||
| cb00bd4f35 | |||
| aec6930e11 | |||
| 44e1e16d19 | |||
| 76826f8cee | |||
| 09428b1ff1 | |||
| e5bfc6be44 | |||
| d987bd2a51 | |||
| bd1a97716c | |||
| e0789cda3a | |||
| 73f5b46a40 | |||
| 9234253c97 | |||
| 2b4f086318 | |||
| 1c41c00d72 | |||
| b8d3e58428 | |||
| 1b3e090211 | |||
| 339a5ff257 | |||
| 528255c2bd | |||
| 909022b034 | |||
| 271787812b | |||
| 0eb3cc61a3 | |||
| ea0e38f100 | |||
| d27546073f | |||
| a1a8dd4447 | |||
| 80717f0458 | |||
| 4dbfe2bd48 | |||
| c2c8dabdd4 | |||
| 54ca807436 | |||
| 6e57108f8e | |||
| 219161f15e | |||
| 86039552c8 | |||
| e8ebbe4d76 | |||
| 3d7a404d1f | |||
| e041e0fe8a | |||
| 082df5fad3 | |||
| cfcf80b6c2 | |||
| 7617146512 | |||
| 711dfb8f00 | |||
| cf430881dc | |||
| 80f5dbd639 | |||
| 998284f398 | |||
| 82c1dc4b8e | |||
| b8df8a2bde | |||
| 5d773b0680 | |||
| f13005a031 |
@ -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" />
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
}
|
||||
|
||||
.app-brand-text {
|
||||
font-size: 1.75rem;
|
||||
font-size: 1rem;
|
||||
letter-spacing: -0.5px;
|
||||
/* text-transform: lowercase; */
|
||||
}
|
||||
|
||||
@ -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");
|
||||
});
|
||||
});
|
||||
|
||||
@ -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}>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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
237
src/components/Dashboard/ServiceJobs.jsx
Normal 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;
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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{" "}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
16
src/components/InfoBlock/WarningBlock.jsx
Normal 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
|
||||
@ -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>
|
||||
|
||||
@ -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={
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -166,7 +166,6 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
|
||||
}
|
||||
);
|
||||
};
|
||||
console.log("Tanish",filteredData)
|
||||
return (
|
||||
<>
|
||||
{IsDeleteModalOpen && (
|
||||
|
||||
@ -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 });
|
||||
}
|
||||
}}
|
||||
|
||||
|
||||
@ -62,15 +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-secondary" : "btn-outline-secondary"}`}
|
||||
onClick={() => setShowArchive(!showArchive)}
|
||||
>
|
||||
<i className="bx bx-archive bx-sm me-1 mt-1"></i> 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 */}
|
||||
@ -79,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 */}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -150,7 +150,7 @@ const JobComments = ({ data }) => {
|
||||
type="submit"
|
||||
disabled={!watch("comment")?.trim() || isPending}
|
||||
>
|
||||
Send
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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()
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -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
111
src/components/common/SigleFileUploader.jsx
Normal 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
68
src/components/purchase/DeliverChallanList.jsx
Normal 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
200
src/components/purchase/DeliveryChallane.jsx
Normal 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;
|
||||
234
src/components/purchase/ManagePurchase.jsx
Normal file
234
src/components/purchase/ManagePurchase.jsx
Normal file
@ -0,0 +1,234 @@
|
||||
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: "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, 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,
|
||||
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 (activeTab !== 2) return;
|
||||
|
||||
if (purchaseId) {
|
||||
const payload = generatePatchOps(formData);
|
||||
updatePurchase({ purchaseId, payload });
|
||||
} else {
|
||||
CreateInvoice(formData);
|
||||
}
|
||||
},
|
||||
[activeTab, 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}>
|
||||
<form
|
||||
onKeyDown={(e) =>
|
||||
e.key === "Enter" && activeTab !== 2 && e.preventDefault()
|
||||
}
|
||||
onSubmit={purchaseOrder.handleSubmit(onSubmit)}
|
||||
>
|
||||
{stepsConfig[activeTab].component}
|
||||
|
||||
{/* Buttons */}
|
||||
<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>
|
||||
|
||||
<div>
|
||||
{activeTab < stepsConfig.length - 1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={handleNext}
|
||||
disabled={isPending || isUpdating}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
disabled={isPending || isUpdating}
|
||||
>
|
||||
{isPending || isUpdating ? "Please Wait" : "Submit"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</AppFormProvider>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManagePurchase;
|
||||
158
src/components/purchase/PurchaseList.jsx
Normal file
158
src/components/purchase/PurchaseList.jsx
Normal file
@ -0,0 +1,158 @@
|
||||
import React, { useState } from "react";
|
||||
import { usePurchasesList } from "../../hooks/usePurchase";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import Pagination from "../common/Pagination";
|
||||
import { PurchaseColumn } from "./Purchasetable";
|
||||
import { SpinnerLoader } from "../common/Loader";
|
||||
import { useDebounce } from "../../utils/appUtils";
|
||||
import { usePurchaseContext } from "../../pages/purchase/PurchasePage";
|
||||
|
||||
const PurchaseList = ({ searchString }) => {
|
||||
const { setViewPurchase, setManagePurchase, setChallan } =
|
||||
usePurchaseContext();
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const debounceSearch = useDebounce(searchString, 300);
|
||||
const { data, isLoading } = usePurchasesList(
|
||||
ITEMS_PER_PAGE,
|
||||
currentPage,
|
||||
true,
|
||||
{},
|
||||
debounceSearch
|
||||
);
|
||||
|
||||
const paginate = (page) => {
|
||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
||||
setCurrentPage(page);
|
||||
}
|
||||
};
|
||||
|
||||
const visibleColumns = PurchaseColumn.filter((col) => !col.hidden);
|
||||
|
||||
return (
|
||||
<div className="card mt-2 page-min-h px-sm-4">
|
||||
<div className="table-responsive 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">
|
||||
<div className="py-6 py-12">
|
||||
<SpinnerLoader />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{!isLoading && data?.data?.length === 0 && (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={visibleColumns.length}
|
||||
className="text-center py-4"
|
||||
colSpan={4}
|
||||
>
|
||||
No Data Found
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{!isLoading &&
|
||||
data?.data?.map((item, index) => (
|
||||
<tr key={item?.id || index}>
|
||||
{visibleColumns.map((col) => (
|
||||
<td key={col.key} className={col.className || ""}>
|
||||
{col.render ? col.render(item) : item[col.key] || "NA"}
|
||||
</td>
|
||||
))}
|
||||
<td >
|
||||
<div className="dropdown z-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i
|
||||
className="bx bx-dots-vertical-rounded bx-sm text-muted"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
data-bs-placement="top"
|
||||
data-bs-custom-class="tooltip-dark"
|
||||
title="More Action"
|
||||
></i>
|
||||
</button>
|
||||
<ul className="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item cursor-pointer"
|
||||
onClick={() =>
|
||||
setViewPurchase({
|
||||
isOpen: true,
|
||||
purchaseId: item.id,
|
||||
})
|
||||
}
|
||||
>
|
||||
<i className="bx bx-show me-2"></i>
|
||||
<span className="align-left">view</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<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"
|
||||
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>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{data?.data?.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={data.totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PurchaseList;
|
||||
232
src/components/purchase/PurchasePartyDetails.jsx
Normal file
232
src/components/purchase/PurchasePartyDetails.jsx
Normal file
@ -0,0 +1,232 @@
|
||||
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 ${
|
||||
errors?.title ? "is-invalid" : ""
|
||||
}`}
|
||||
{...register("title")}
|
||||
/>
|
||||
|
||||
{errors?.title && (
|
||||
<div className="danger-text">{errors.title.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Project ID */}
|
||||
<div className="col-12 col-md-6">
|
||||
<SelectProjectField
|
||||
className={`form-control form-control-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
|
||||
{...field}
|
||||
label="Organization"
|
||||
placeholder="Select Organization"
|
||||
required
|
||||
valueKey="id"
|
||||
labelKey="name"
|
||||
useFetchHook={useGlobaleOrganizations}
|
||||
hookParams={[ITEMS_PER_PAGE, 1]}
|
||||
error={errors?.organizationId?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</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 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 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" required>
|
||||
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" required>
|
||||
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;
|
||||
308
src/components/purchase/PurchasePaymentDetails.jsx
Normal file
308
src/components/purchase/PurchasePaymentDetails.jsx
Normal file
@ -0,0 +1,308 @@
|
||||
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");
|
||||
|
||||
useEffect(() => {
|
||||
const base = parseFloat(baseAmount) || 0;
|
||||
const tax = parseFloat(taxAmount) || 0;
|
||||
|
||||
if (base || tax) {
|
||||
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-1 text-start">
|
||||
<div className="col-12 col-md-4">
|
||||
<Label htmlFor="baseAmount" required>
|
||||
Base Amount
|
||||
</Label>
|
||||
|
||||
<input
|
||||
id="baseAmount"
|
||||
type="number"
|
||||
className="form-control form-control-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" required>
|
||||
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="totalAmount" required>
|
||||
Total Amount
|
||||
</Label>
|
||||
|
||||
<input
|
||||
id="totalAmount"
|
||||
type="number"
|
||||
className="form-control form-control-xs"
|
||||
{...register("totalAmount", { valueAsNumber: true })}
|
||||
readOnly
|
||||
/>
|
||||
|
||||
{errors?.totalAmount && (
|
||||
<div className="small danger-text mt-1">
|
||||
{errors.totalAmount.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="transportCharges">Transport Charges</Label>
|
||||
|
||||
<input
|
||||
id="transportCharges"
|
||||
type="number"
|
||||
className="form-control form-control-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="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" required>
|
||||
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;
|
||||
188
src/components/purchase/PurchaseSchema.jsx
Normal file
188
src/components/purchase/PurchaseSchema.jsx
Normal file
@ -0,0 +1,188 @@
|
||||
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),
|
||||
});
|
||||
|
||||
|
||||
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().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.number().nullable(),
|
||||
description: z.string().min(1, { message: "Description is required" }),
|
||||
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: null,
|
||||
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,
|
||||
};
|
||||
131
src/components/purchase/PurchaseTransportDetails.jsx
Normal file
131
src/components/purchase/PurchaseTransportDetails.jsx
Normal 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" required>
|
||||
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
60
src/components/purchase/Purchasetable.jsx
Normal 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
243
src/components/purchase/ViewPurchase.jsx
Normal 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;
|
||||
@ -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;
|
||||
|
||||
@ -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();
|
||||
|
||||
|
||||
@ -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();
|
||||
},
|
||||
|
||||
122
src/hooks/usePurchase.jsx
Normal file
122
src/hooks/usePurchase.jsx
Normal file
@ -0,0 +1,122 @@
|
||||
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 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"
|
||||
);
|
||||
},
|
||||
});
|
||||
};
|
||||
@ -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,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>
|
||||
);
|
||||
|
||||
133
src/pages/purchase/PurchasePage.jsx
Normal file
133
src/pages/purchase/PurchasePage.jsx
Normal file
@ -0,0 +1,133 @@
|
||||
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";
|
||||
|
||||
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 [addChallan, setChallan] = useState({
|
||||
isOpen: false,
|
||||
purchaseId: null,
|
||||
});
|
||||
const [managePurchase, setManagePurchase] = useState({
|
||||
isOpen: false,
|
||||
purchaseId: null,
|
||||
});
|
||||
const [viewPurchaseState, setViewPurchase] = useState({
|
||||
isOpen: false,
|
||||
purchaseId: null,
|
||||
});
|
||||
|
||||
const contextValue = {
|
||||
setViewPurchase,
|
||||
setManagePurchase,
|
||||
setChallan,
|
||||
};
|
||||
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>
|
||||
<di className="col-sm-6 text-end">
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() =>
|
||||
setManagePurchase({
|
||||
isOpen: true,
|
||||
purchaseId: null,
|
||||
})
|
||||
}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>Add
|
||||
</button>
|
||||
</di>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PurchaseList searchString={searchText} />
|
||||
{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>
|
||||
)}
|
||||
</div>
|
||||
</PurchaseContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default PurchasePage;
|
||||
@ -157,4 +157,7 @@ export const MasterRespository = {
|
||||
),
|
||||
|
||||
getTeamRole: () => api.get(`/api/Master/team-roles/list`),
|
||||
|
||||
|
||||
getInvoiceAttachmentTypes:()=>api.get("/api/Master/invoice-attachment-type/list")
|
||||
};
|
||||
|
||||
@ -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;
|
||||
|
||||
22
src/repositories/PurchaseRepository.jsx
Normal file
22
src/repositories/PurchaseRepository.jsx
Normal file
@ -0,0 +1,22 @@
|
||||
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),
|
||||
};
|
||||
|
||||
// const filterPayload = JSON.stringify({
|
||||
// sortFilters,
|
||||
// groupByColumn: groupBy || null,
|
||||
// });
|
||||
@ -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 /> },
|
||||
|
||||
4
src/utils/staticContent.jsx
Normal file
4
src/utils/staticContent.jsx
Normal 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.
|
||||
`;
|
||||
Loading…
x
Reference in New Issue
Block a user