Correction in weidget.
This commit is contained in:
parent
e10a6ff14c
commit
e8886577d8
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useJobsProgression } from "../../hooks/useDashboard_Data";
|
||||
import { SpinnerLoader } from "../common/Loader";
|
||||
@ -7,55 +7,90 @@ import { useServiceProject } from "../../hooks/useServiceProject";
|
||||
|
||||
const ServiceJobs = () => {
|
||||
const { projectId } = useParams();
|
||||
|
||||
const { data, isLoading, isError } = useJobsProgression(projectId);
|
||||
const jobs = data || {};
|
||||
const { data: projectData, isLoading: projectLoading } = useServiceProject(projectId);
|
||||
|
||||
const { data: projectData, isLoading: projectLoading } =
|
||||
useServiceProject(projectId);
|
||||
|
||||
const [activeTab, setActiveTab] = useState("tab-new");
|
||||
|
||||
// 👇 prevents re-running auto logic after first load
|
||||
const hasInitializedTab = useRef(false);
|
||||
|
||||
const tabMapping = [
|
||||
{ id: "tab-new", label: "My Jobs", key: "myJobs" },
|
||||
{ id: "tab-preparing", label: "Assigned", key: "assignedJobs" },
|
||||
{ id: "tab-shipping", label: "In Progress", key: "inProgressJobs" },
|
||||
{ id: "tab-preparing", label: "Assigned", key: "assignedJobs" },
|
||||
];
|
||||
|
||||
/* ---------- INITIAL TAB SELECTION ONLY ---------- */
|
||||
useEffect(() => {
|
||||
if (hasInitializedTab.current || !jobs) return;
|
||||
|
||||
if (jobs.myJobs?.length > 0) {
|
||||
setActiveTab("tab-new");
|
||||
} else if (jobs.inProgressJobs?.length > 0) {
|
||||
setActiveTab("tab-shipping");
|
||||
} else {
|
||||
setActiveTab("tab-preparing");
|
||||
}
|
||||
|
||||
hasInitializedTab.current = true;
|
||||
}, [jobs]);
|
||||
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<div>
|
||||
<div className="card page-min-h">
|
||||
{/* Header */}
|
||||
<div className="card-header d-flex justify-content-between">
|
||||
<div className="card-title mb-0 text-start">
|
||||
<h5 className="mb-1 fw-bold">Service Jobs</h5>
|
||||
<p className="card-subtitle">
|
||||
{projectLoading ? "Loading..." : projectData?.name || "All Projects"}
|
||||
{projectLoading
|
||||
? "Loading..."
|
||||
: projectData?.name || "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">
|
||||
{tabMapping.map((t, index) => (
|
||||
<li className="nav-item" key={t.id}>
|
||||
{/* Tabs */}
|
||||
<ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced">
|
||||
{tabMapping.map((tab) => (
|
||||
<li className="nav-item" key={tab.id}>
|
||||
<button
|
||||
className={`nav-link ${index === 0 ? "active" : ""}`}
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target={`#${t.id}`}
|
||||
type="button"
|
||||
className={`nav-link ${
|
||||
activeTab === tab.id ? "active" : ""
|
||||
}`}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
>
|
||||
{t.label}
|
||||
{tab.label}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* ---------------- Tab Content ---------------- */}
|
||||
{/* Content */}
|
||||
<div className="tab-content border-0 mx-1 text-start">
|
||||
|
||||
{isLoading && (
|
||||
<div className="text-center" style={{ height: "250px", display: "flex", justifyContent: "center", alignItems: "center" }}>
|
||||
<div
|
||||
className="text-center"
|
||||
style={{
|
||||
height: "250px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<SpinnerLoader />
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{isError && (
|
||||
<p
|
||||
className="text-center"
|
||||
@ -69,19 +104,19 @@ const ServiceJobs = () => {
|
||||
>
|
||||
No data found
|
||||
</p>
|
||||
|
||||
)}
|
||||
|
||||
{!isLoading &&
|
||||
!isError &&
|
||||
tabMapping.map((t, index) => {
|
||||
const list = jobs[t.key] || [];
|
||||
tabMapping.map((tab) => {
|
||||
const list = jobs[tab.key] || [];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={t.id}
|
||||
className={`tab-pane fade ${index === 0 ? "show active" : ""}`}
|
||||
id={t.id}
|
||||
key={tab.id}
|
||||
className={`tab-pane fade ${
|
||||
activeTab === tab.id ? "show active" : ""
|
||||
}`}
|
||||
>
|
||||
{list.length === 0 ? (
|
||||
<p
|
||||
@ -96,24 +131,19 @@ const ServiceJobs = () => {
|
||||
>
|
||||
No jobs found
|
||||
</p>
|
||||
|
||||
) : (
|
||||
<div className="job-scroll-wrapper">
|
||||
{list.map((job, i) => (
|
||||
<React.Fragment key={i}>
|
||||
{list.map((job, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<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>
|
||||
<small className="text-success text-uppercase">
|
||||
Assigned By
|
||||
</small>
|
||||
<h6 className="my-50">{job.assignedBy}</h6>
|
||||
<p className="text-body mb-0">
|
||||
{formatUTCToLocalTime(job.assignedAt)}
|
||||
@ -121,23 +151,23 @@ const ServiceJobs = () => {
|
||||
</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>
|
||||
<small className="text-primary text-uppercase">
|
||||
Project
|
||||
</small>
|
||||
<h6 className="my-50">{job.project}</h6>
|
||||
<p className="text-body mb-0">{job.title}</p>
|
||||
<p className="text-body mb-0">
|
||||
{job.title}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Divider */}
|
||||
{i < list.length - 1 && (
|
||||
{index < list.length - 1 && (
|
||||
<div className="border-1 border-light border-top border-dashed my-4"></div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
|
||||
@ -9,6 +9,8 @@ const ReportsDonutCard = ({
|
||||
donutClass = "",
|
||||
footer = "Team members present on the site",
|
||||
chartColor,
|
||||
legend1 = "Completed",
|
||||
legend2 = "Pending"
|
||||
}) => {
|
||||
return (
|
||||
<div className="border-top card border-primary py-4 px-2">
|
||||
@ -24,7 +26,10 @@ const ReportsDonutCard = ({
|
||||
completed={value}
|
||||
total={total}
|
||||
/>
|
||||
<ReportsLegend />
|
||||
<ReportsLegend
|
||||
legend1={legend1}
|
||||
legend2={legend2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,19 +1,14 @@
|
||||
const ReportsLegend = () => {
|
||||
const ReportsLegend = ({legend1, legend2}) => {
|
||||
return (
|
||||
<div className=" d-inline-flex flex-column text-start gap-2 pe-5">
|
||||
<div className=" d-flex align-items-center gap-2">
|
||||
<span className="reports-legend-color reports-legend-green"></span>
|
||||
<span>Completed</span>
|
||||
<span>{legend1}</span>
|
||||
</div>
|
||||
|
||||
<div className=" d-flex align-items-center gap-2">
|
||||
<span className="reports-legend-color reports-legend-blue"></span>
|
||||
<span>In Progress</span>
|
||||
</div>
|
||||
|
||||
<div className=" d-flex align-items-center gap-2">
|
||||
<span className="reports-legend-color reports-legend-gray"></span>
|
||||
<span>Pending</span>
|
||||
<span>{legend2}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -24,6 +24,8 @@ const ReportDPR = ({ project, date }) => {
|
||||
title={"TODAY'S ATTENDANCE"}
|
||||
total={data?.totalEmployees}
|
||||
value={data?.todaysAttendances}
|
||||
legend1="Today's Attendance"
|
||||
legend2="Total Employees"
|
||||
/>
|
||||
<ReportsDonutCard
|
||||
title={"DAILY TASKS COMPLETED"}
|
||||
@ -31,6 +33,8 @@ const ReportDPR = ({ project, date }) => {
|
||||
value={data?.totalPlannedWork}
|
||||
chartColor={"blue"}
|
||||
footer=""
|
||||
legend1="Completed Work"
|
||||
legend2="Planned Work"
|
||||
/>
|
||||
|
||||
<ReportsDonutCard
|
||||
@ -39,6 +43,8 @@ const ReportDPR = ({ project, date }) => {
|
||||
value={data?.totalCompletedWork}
|
||||
chartColor={"green"}
|
||||
footer=""
|
||||
legend1="Completed Work"
|
||||
legend2="Planned Work"
|
||||
/>
|
||||
|
||||
<div className="border-top card border-warning py-4 px-2">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user