Adding Dashboard a Jobs Weidget.
This commit is contained in:
parent
4a47b1d0fa
commit
bc0540a0b7
File diff suppressed because it is too large
Load Diff
@ -10,7 +10,7 @@ const formatDate = (dateStr) => {
|
|||||||
const date = new Date(dateStr);
|
const date = new Date(dateStr);
|
||||||
return date.toLocaleDateString("en-GB", {
|
return date.toLocaleDateString("en-GB", {
|
||||||
day: "2-digit",
|
day: "2-digit",
|
||||||
month: "long",
|
month: "short",
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -36,7 +36,7 @@ const Dashboard = () => {
|
|||||||
const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
|
const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
|
||||||
const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
|
const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
|
||||||
|
|
||||||
const { data,isLoading,isError } = useGetCollectionOverview();
|
const { data, isLoading, isError } = useGetCollectionOverview();
|
||||||
return (
|
return (
|
||||||
<div className="container-fluid mt-5">
|
<div className="container-fluid mt-5">
|
||||||
<div className="row gy-4">
|
<div className="row gy-4">
|
||||||
@ -47,17 +47,15 @@ const Dashboard = () => {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className={`${
|
className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"
|
||||||
!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"
|
}`}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
<Teams />
|
<Teams />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className={`${
|
className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"
|
||||||
!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"
|
}`}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
<TasksCard />
|
<TasksCard />
|
||||||
</div>
|
</div>
|
||||||
@ -86,7 +84,7 @@ const Dashboard = () => {
|
|||||||
</div>
|
</div>
|
||||||
{!isAllProjectsSelected &&
|
{!isAllProjectsSelected &&
|
||||||
(canRegularize || canTeamAttendance || canSelfAttendance) && (
|
(canRegularize || canTeamAttendance || canSelfAttendance) && (
|
||||||
<div className="col-12 col-md-6 mb-sm-0 mb-4">
|
<div className="col-12 col-md-8 mb-sm-0 mb-4">
|
||||||
<AttendanceOverview />
|
<AttendanceOverview />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@ -98,6 +96,11 @@ const Dashboard = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
{isAllProjectsSelected && (
|
||||||
|
<div className="col-12 col-md-6 mb-sm-0 mb-4">
|
||||||
|
<ServiceJobs />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div className="col-md-8">
|
<div className="col-md-8">
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<CollectionOverviewSkeleton />
|
<CollectionOverviewSkeleton />
|
||||||
|
|||||||
@ -1,234 +1,156 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { useParams } from "react-router-dom";
|
||||||
|
import { useJobsProgression } from "../../hooks/useDashboard_Data";
|
||||||
|
import { SpinnerLoader } from "../common/Loader";
|
||||||
|
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||||
|
import { useServiceProject } from "../../hooks/useServiceProject";
|
||||||
|
|
||||||
const ServiceJobs = () => {
|
const ServiceJobs = () => {
|
||||||
|
const { projectId } = useParams();
|
||||||
|
const { data, isLoading, isError } = useJobsProgression(projectId);
|
||||||
|
|
||||||
|
const jobs = data || {};
|
||||||
|
const { data: projectData, isLoading: projectLoading } = useServiceProject(projectId);
|
||||||
|
const tabMapping = [
|
||||||
|
{ id: "tab-new", label: "My Jobs", key: "allJobs" },
|
||||||
|
{ id: "tab-preparing", label: "Assigned", key: "assignedJobs" },
|
||||||
|
{ id: "tab-shipping", label: "In Progress", key: "inProgressJobs" },
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="col-xxl-4 col-lg-6">
|
<div className="">
|
||||||
<div className="card h-100">
|
<div className="card page-min-h">
|
||||||
<div className="card-header d-flex justify-content-between">
|
<div className="card-header d-flex justify-content-between">
|
||||||
<div className="card-title mb-0 text-start">
|
<div className="card-title mb-0 text-start">
|
||||||
<h5 className="mb-1">Service Jobs</h5>
|
<h5 className="mb-1 fw-bold">Service Jobs</h5>
|
||||||
<p className="card-subtitle">All Projects</p>
|
<p className="card-subtitle">
|
||||||
|
{projectLoading ? "Loading..." : projectData?.name || "All Projects"}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="card-body p-0">
|
<div className="card-body p-0">
|
||||||
<div className="nav-align-top">
|
<div className="nav-align-top">
|
||||||
|
|
||||||
{/* Tabs */}
|
{/* ---------------- Tabs ---------------- */}
|
||||||
<ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
|
<ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
|
||||||
<li className="nav-item">
|
{tabMapping.map((t, index) => (
|
||||||
<button className="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-new">
|
<li className="nav-item" key={t.id}>
|
||||||
My Jobs
|
<button
|
||||||
</button>
|
className={`nav-link ${index === 0 ? "active" : ""}`}
|
||||||
</li>
|
data-bs-toggle="tab"
|
||||||
<li className="nav-item">
|
data-bs-target={`#${t.id}`}
|
||||||
<button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-preparing">
|
>
|
||||||
Assigned
|
{t.label}
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
<li className="nav-item">
|
))}
|
||||||
<button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-shipping">
|
|
||||||
In Progress
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
{/* Tab Content */}
|
{/* ---------------- Tab Content ---------------- */}
|
||||||
<div className="tab-content border-0 mx-1 text-start">
|
<div className="tab-content border-0 mx-1 text-start">
|
||||||
|
|
||||||
{/* ---------------------- NEW TAB ---------------------- */}
|
{isLoading && (
|
||||||
<div className="tab-pane fade show active" id="tab-new">
|
<div className="text-center" style={{ height: "250px", display: "flex", justifyContent: "center", alignItems: "center" }}>
|
||||||
{/* Entry 1 */}
|
<SpinnerLoader />
|
||||||
<ul className="timeline mb-0">
|
</div>
|
||||||
<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>
|
{isError && (
|
||||||
<div className="timeline-event ps-1">
|
<p
|
||||||
<div className="timeline-header">
|
className="text-center"
|
||||||
<small className="text-success text-uppercase">Sender</small>
|
style={{
|
||||||
</div>
|
height: "250px",
|
||||||
<h6 className="my-50">Myrtle Ullrich</h6>
|
display: "flex",
|
||||||
<p className="text-body mb-0">101 Boulder, California(CA), 95959</p>
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
margin: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
No data found
|
||||||
|
</p>
|
||||||
|
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!isLoading &&
|
||||||
|
!isError &&
|
||||||
|
tabMapping.map((t, index) => {
|
||||||
|
const list = jobs[t.key] || [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={t.id}
|
||||||
|
className={`tab-pane fade ${index === 0 ? "show active" : ""}`}
|
||||||
|
id={t.id}
|
||||||
|
>
|
||||||
|
{list.length === 0 ? (
|
||||||
|
<p
|
||||||
|
className="text-center"
|
||||||
|
style={{
|
||||||
|
height: "250px",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
margin: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
No jobs found
|
||||||
|
</p>
|
||||||
|
|
||||||
|
) : (
|
||||||
|
<div className="job-scroll-wrapper">
|
||||||
|
{list.map((job, i) => (
|
||||||
|
<React.Fragment key={i}>
|
||||||
|
<ul className="timeline mb-0">
|
||||||
|
|
||||||
|
{/* Assigned By */}
|
||||||
|
<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">
|
||||||
|
Assigned By
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
<h6 className="my-50">{job.assignedBy}</h6>
|
||||||
|
<p className="text-body mb-0">
|
||||||
|
{formatUTCToLocalTime(job.assignedAt)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
{/* Project */}
|
||||||
|
<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">Project</small>
|
||||||
|
</div>
|
||||||
|
<h6 className="my-50">{job.project}</h6>
|
||||||
|
<p className="text-body mb-0">{job.title}</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{/* Divider */}
|
||||||
|
{i < list.length - 1 && (
|
||||||
|
<div className="border-1 border-light border-top border-dashed my-4"></div>
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -21,6 +21,7 @@ import InputSuggestions from "../common/InputSuggestion";
|
|||||||
import Label from "../common/Label";
|
import Label from "../common/Label";
|
||||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||||
import SelectField from "../common/Forms/SelectField";
|
import SelectField from "../common/Forms/SelectField";
|
||||||
|
import { BUCKET_BG_CLASSES } from "../../utils/constants";
|
||||||
|
|
||||||
const ManageContact = ({ contactId, closeModal }) => {
|
const ManageContact = ({ contactId, closeModal }) => {
|
||||||
// fetch master data
|
// fetch master data
|
||||||
@ -456,15 +457,25 @@ const ManageContact = ({ contactId, closeModal }) => {
|
|||||||
{/* Buckets */}
|
{/* Buckets */}
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-md-12 mt-3 text-start">
|
<div className="col-md-12 mt-3 text-start">
|
||||||
<label className="form-label mb-2">Select Bucket</label>
|
<Label className="form-label mb-2" required>Select Bucket</Label>
|
||||||
<ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
|
|
||||||
|
<div
|
||||||
|
className="d-flex flex-wrap gap-3 p-1"
|
||||||
|
style={{
|
||||||
|
maxHeight: "200px",
|
||||||
|
overflowY: "auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
{bucketsLoaging && <p>Loading...</p>}
|
{bucketsLoaging && <p>Loading...</p>}
|
||||||
{buckets?.map((item) => (
|
|
||||||
<li
|
{buckets?.map((item, index) => (
|
||||||
|
<div
|
||||||
key={item.id}
|
key={item.id}
|
||||||
className="list-inline-item flex-shrink-0 me-6 mb-1"
|
className={`card p-2 shadow-sm flex-shrink-0 ${BUCKET_BG_CLASSES[index % BUCKET_BG_CLASSES.length]}`}
|
||||||
|
onClick={() => handleCheckboxChange(item.id)}
|
||||||
>
|
>
|
||||||
<div className="form-check">
|
|
||||||
|
<div className="form-check m-0">
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
className="form-check-input"
|
className="form-check-input"
|
||||||
@ -472,16 +483,17 @@ const ManageContact = ({ contactId, closeModal }) => {
|
|||||||
checked={watchBucketIds.includes(item.id)}
|
checked={watchBucketIds.includes(item.id)}
|
||||||
onChange={() => handleCheckboxChange(item.id)}
|
onChange={() => handleCheckboxChange(item.id)}
|
||||||
/>
|
/>
|
||||||
<label
|
<label className="form-check-label ms-0" htmlFor={`item-${item.id}`}>
|
||||||
className="form-check-label"
|
|
||||||
htmlFor={`item-${item.id}`}
|
|
||||||
>
|
|
||||||
{item.name}
|
{item.name}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
))}
|
))}
|
||||||
</ul>
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className="text-start mt-3 mb-3">
|
||||||
{errors.bucketIds && (
|
{errors.bucketIds && (
|
||||||
<small className="danger-text">{errors.bucketIds.message}</small>
|
<small className="danger-text">{errors.bucketIds.message}</small>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -113,7 +113,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="branchName"
|
id="branchName"
|
||||||
className="form-control form-control-sm"
|
className="form-control form-control-md"
|
||||||
{...register("branchName")}
|
{...register("branchName")}
|
||||||
placeholder="Enter Branch"
|
placeholder="Enter Branch"
|
||||||
/>
|
/>
|
||||||
@ -147,7 +147,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="googleMapUrl"
|
id="googleMapUrl"
|
||||||
className="form-control form-control-sm"
|
className="form-control form-control-md"
|
||||||
{...register("googleMapUrl")}
|
{...register("googleMapUrl")}
|
||||||
/>
|
/>
|
||||||
{errors.googleMapUrl && (
|
{errors.googleMapUrl && (
|
||||||
@ -183,7 +183,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Contact Name"
|
placeholder="Contact Name"
|
||||||
className="form-control form-control-sm"
|
className="form-control form-control-md"
|
||||||
value={item.contactPerson}
|
value={item.contactPerson}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const list = [...contacts];
|
const list = [...contacts];
|
||||||
@ -198,7 +198,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Designation"
|
placeholder="Designation"
|
||||||
className="form-control form-control-sm"
|
className="form-control form-control-md"
|
||||||
value={item.designation}
|
value={item.designation}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const list = [...contacts];
|
const list = [...contacts];
|
||||||
@ -220,7 +220,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Number"
|
placeholder="Number"
|
||||||
className="form-control form-control-sm"
|
className="form-control form-control-md"
|
||||||
maxLength={10}
|
maxLength={10}
|
||||||
value={num}
|
value={num}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
@ -267,7 +267,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
className="form-control form-control-sm"
|
className="form-control form-control-md"
|
||||||
value={email}
|
value={email}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const list = [...contacts];
|
const list = [...contacts];
|
||||||
@ -328,7 +328,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
|
|||||||
</Label>
|
</Label>
|
||||||
<textarea
|
<textarea
|
||||||
id="address"
|
id="address"
|
||||||
className="form-control form-control-sm"
|
className="form-control "
|
||||||
{...register("address")}
|
{...register("address")}
|
||||||
/>
|
/>
|
||||||
{errors.address && (
|
{errors.address && (
|
||||||
|
|||||||
@ -7,6 +7,7 @@ import GlobalModel from "../common/GlobalModel";
|
|||||||
import { SpinnerLoader } from "../common/Loader";
|
import { SpinnerLoader } from "../common/Loader";
|
||||||
import ServiceBranch from "./ServiceProjectBranch/ServiceBranch";
|
import ServiceBranch from "./ServiceProjectBranch/ServiceBranch";
|
||||||
import ServiceProfile from "./ServiceProfile";
|
import ServiceProfile from "./ServiceProfile";
|
||||||
|
import ServiceJobs from "../Dashboard/ServiceJobs";
|
||||||
|
|
||||||
const ServiceProjectProfile = () => {
|
const ServiceProjectProfile = () => {
|
||||||
const { projectId } = useParams();
|
const { projectId } = useParams();
|
||||||
@ -40,6 +41,9 @@ const ServiceProjectProfile = () => {
|
|||||||
<div className="col-md-6 col-lg-7 order-2 mb-6">
|
<div className="col-md-6 col-lg-7 order-2 mb-6">
|
||||||
<ServiceBranch />
|
<ServiceBranch />
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-md-6 col-lg-5 order-2 mb-6">
|
||||||
|
<ServiceJobs/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -202,3 +202,13 @@ export const useGetCollectionOverview = (projectId) => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const useJobsProgression = (projectId) => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ["serviceProjectJobs", projectId],
|
||||||
|
queryFn: async () => {
|
||||||
|
const resp = await GlobalRepository.getJobsProgression(projectId);
|
||||||
|
return resp.data;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -84,7 +84,9 @@ const GlobalRepository = {
|
|||||||
|
|
||||||
getAttendanceOverview: (projectId, days) => api.get(`/api/dashboard/attendance-overview/${projectId}?days=${days}`),
|
getAttendanceOverview: (projectId, days) => api.get(`/api/dashboard/attendance-overview/${projectId}?days=${days}`),
|
||||||
|
|
||||||
getCollectionOverview:(projectId) =>api.get(`/api/Dashboard/collection-overview`)
|
getCollectionOverview:(projectId) =>api.get(`/api/Dashboard/collection-overview`),
|
||||||
|
|
||||||
|
getJobsProgression: (projectId) => api.get(`/api/Dashboard/job/progression${projectId ? `?projectId=${projectId}` : ""}`),
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -258,3 +258,16 @@ export const JOBS_STATUS_IDS = [
|
|||||||
label: "On Hold",
|
label: "On Hold",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
export const BUCKET_BG_CLASSES = [
|
||||||
|
"bg-label-primary bg-opacity-10",
|
||||||
|
"bg-label-secondary bg-opacity-10",
|
||||||
|
"bg-label-success bg-opacity-10",
|
||||||
|
"bg-label-info bg-opacity-10",
|
||||||
|
"bg-label-warning bg-opacity-10",
|
||||||
|
"bg-label-danger bg-opacity-10",
|
||||||
|
"bg-label-dark bg-opacity-10",
|
||||||
|
"bg-label-primary bg-opacity-25",
|
||||||
|
"bg-label-success bg-opacity-25",
|
||||||
|
"bg-label-info bg-opacity-25",
|
||||||
|
];
|
||||||
Loading…
x
Reference in New Issue
Block a user