Merge branch 'Project_Branch_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Services_Bugs
This commit is contained in:
commit
00d5df5ebb
@ -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">
|
||||
@ -49,7 +56,7 @@ const Dashboard = () => {
|
||||
<div className="col-xxl-6 col-lg-6">
|
||||
<ProjectProgressChart />
|
||||
</div>
|
||||
{!isAllProjectsSelected && (
|
||||
{!isAllProjectsSelected && (canRegularize || canTeamAttendance || canSelfAttendance) && (
|
||||
<div className="col-12 col-md-6 mb-sm-0 mb-4">
|
||||
<AttendanceOverview />
|
||||
</div>
|
||||
@ -57,8 +64,10 @@ const Dashboard = () => {
|
||||
|
||||
{!isAllProjectsSelected && (
|
||||
<div className="col-xxl-4 col-lg-4">
|
||||
<div className="card h-100">
|
||||
<ProjectStatistics />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="col-12 col-xl-4 col-md-6">
|
||||
<div className="card ">
|
||||
@ -74,6 +83,9 @@ const Dashboard = () => {
|
||||
<div className="col-12 col-md-6">
|
||||
<ExpenseByProject />
|
||||
</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;
|
||||
@ -67,7 +67,7 @@ export const FilelistView = ({ files, viewFile }) => {
|
||||
e.preventDefault();
|
||||
viewFile({
|
||||
IsOpen: true,
|
||||
Image: file.preSignedUrl,
|
||||
Image: files,
|
||||
});
|
||||
}}
|
||||
>
|
||||
|
||||
@ -237,30 +237,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
</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="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")}
|
||||
>
|
||||
@ -338,33 +315,22 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
)}
|
||||
</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}
|
||||
/> */}
|
||||
|
||||
<AppFormController
|
||||
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")}
|
||||
>
|
||||
@ -504,7 +471,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
<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">
|
||||
{/* 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"
|
||||
title="Rotate"
|
||||
onClick={() => setRotation((prev) => prev + 90)}
|
||||
></i>
|
||||
|
||||
title="Rotate"
|
||||
/>
|
||||
<i
|
||||
className="bx bx-zoom-in cursor-pointer fs-4"
|
||||
title="Zoom In"
|
||||
onClick={zoomIn}
|
||||
></i>
|
||||
|
||||
title="Zoom In"
|
||||
/>
|
||||
<i
|
||||
className="bx bx-zoom-out cursor-pointer fs-4"
|
||||
title="Zoom Out"
|
||||
onClick={zoomOut}
|
||||
></i>
|
||||
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" }}
|
||||
>
|
||||
{loading && (
|
||||
<div className="text-secondary text-center mb-2">
|
||||
Loading...
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-3 d-flex justify-content-center align-items-center">
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt="Full View"
|
||||
className="img-fluid"
|
||||
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={{
|
||||
maxHeight: "80vh",
|
||||
objectFit: "contain",
|
||||
minHeight: "70vh",
|
||||
userSelect: "none",
|
||||
borderRadius: "10px",
|
||||
}}
|
||||
>
|
||||
{loading && <div className="text-secondary">Loading...</div>}
|
||||
|
||||
<img
|
||||
src={currentImage?.preSignedUrl}
|
||||
alt="Preview"
|
||||
draggable="false"
|
||||
style={{
|
||||
maxHeight: "60vh",
|
||||
display: loading ? "none" : "block",
|
||||
transform: `rotate(${rotation}deg) scale(${scale})`,
|
||||
transition: "transform 0.3s ease",
|
||||
cursor: "grab",
|
||||
transform: `
|
||||
translate(${position.x}px, ${position.y}px)
|
||||
scale(${scale})
|
||||
rotate(${rotation}deg)
|
||||
`,
|
||||
transition: dragging ? "none" : "transform 0.2s ease",
|
||||
cursor: dragging ? "grabbing" : "grab",
|
||||
}}
|
||||
onLoad={() => setLoading(false)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="position-absolute bottom-0 start-0 m-2">
|
||||
<button
|
||||
className="btn btn-outline-secondary"
|
||||
onClick={resetAll}
|
||||
>
|
||||
<i className="bx bx-reset"></i> Reset
|
||||
</button>
|
||||
<div className="d-flex justify-content-between">
|
||||
<div className="text-center text-muted mt-2 small">
|
||||
Scroll = change image | Double click = reset
|
||||
</div>
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<i
|
||||
className="bx bx-chevron-left cursor-pointer fs-4"
|
||||
onClick={prevImage}
|
||||
/>
|
||||
<span>
|
||||
{index + 1} / {images.length}
|
||||
</span>
|
||||
<i
|
||||
className="bx bx-chevron-right cursor-pointer fs-4"
|
||||
onClick={nextImage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
export default PreviewDocument;
|
||||
|
||||
@ -393,7 +393,7 @@ const tdsPercentage = Number(watch("tdsPercentage")) || 0;
|
||||
if (isImage) {
|
||||
setDocumentView({
|
||||
IsOpen: true,
|
||||
Image: doc.preSignedUrl,
|
||||
Images: data?.documents,
|
||||
});
|
||||
}
|
||||
}}
|
||||
|
||||
@ -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
|
||||
@ -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>
|
||||
<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.
|
||||
</p>
|
||||
</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>
|
||||
|
||||
@ -166,7 +166,6 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
|
||||
}
|
||||
);
|
||||
};
|
||||
console.log("Tanish",filteredData)
|
||||
return (
|
||||
<>
|
||||
{IsDeleteModalOpen && (
|
||||
|
||||
@ -237,15 +237,17 @@ const ServiceBranch = () => {
|
||||
!isError &&
|
||||
(!data?.data || data.data.length === 0) && (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={columns.length + 1}
|
||||
className="text-center py-12"
|
||||
style={{ height: "200px" }}
|
||||
<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>
|
||||
|
||||
|
||||
@ -58,117 +58,43 @@ 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
|
||||
}}
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<div
|
||||
className="d-inline-block"
|
||||
|
||||
ref={triggerRef}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onClick={handleClick}
|
||||
style={{ cursor: "pointer" }}
|
||||
style={{ cursor: "pointer", display: "inline-block" }}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
@ -180,8 +106,9 @@ const HoverPopup = ({
|
||||
style={{
|
||||
zIndex: 2000,
|
||||
top: "100%",
|
||||
width: "max-content",
|
||||
minWidth: "120px",
|
||||
minWidth: "200px",
|
||||
maxWidth: "300px",
|
||||
wordWrap: "break-word",
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
|
||||
@ -4,6 +4,7 @@ const InputSuggestions = ({
|
||||
organizationList = [],
|
||||
value,
|
||||
onChange,
|
||||
size = "sm",
|
||||
error,
|
||||
disabled = false,
|
||||
}) => {
|
||||
@ -27,7 +28,7 @@ const InputSuggestions = ({
|
||||
return (
|
||||
<div className="mb-3 position-relative">
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
className={`form-control form-control-${size}`}
|
||||
value={value}
|
||||
onChange={handleInputChange}
|
||||
onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
|
||||
@ -57,8 +58,7 @@ const InputSuggestions = ({
|
||||
transition: "background-color 0.2s",
|
||||
}}
|
||||
onMouseDown={() => handleSelectSuggestion(org)}
|
||||
className={`dropdown-item ${
|
||||
org === value ? "active" : ""
|
||||
className={`dropdown-item ${org === value ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
{org}
|
||||
|
||||
@ -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" />
|
||||
{(canRegularize || canTeamAttendance || canSelfAttendance) && (
|
||||
<div className="mt-5">
|
||||
<AttendanceOverview />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user