diff --git a/public/assets/css/core-extend.css b/public/assets/css/core-extend.css index 3a8406cb..3783f2e7 100644 --- a/public/assets/css/core-extend.css +++ b/public/assets/css/core-extend.css @@ -470,3 +470,34 @@ font-weight: normal; .fs-md-xlarge { font-size: 170% !important; } .fs-md-xxlarge { font-size: calc(1.725rem + 5.7vw) !important; } } +/* ====================== Thin Scrollbar (Global) ====================== */ + +.job-scroll-wrapper { + max-height: 350px; + overflow-y: auto; + padding-right: 8px; + + /* Firefox thin scrollbar */ + scrollbar-width: thin; + scrollbar-color: #c8c8c8 transparent; +} + +/* Chrome, Edge, Safari */ +.job-scroll-wrapper::-webkit-scrollbar { + width: 4px; +} + +.job-scroll-wrapper::-webkit-scrollbar-track { + background: transparent; +} + +.job-scroll-wrapper::-webkit-scrollbar-thumb { + background-color: #c8c8c8; + border-radius: 20px; +} + +.job-scroll-wrapper::-webkit-scrollbar-thumb:hover { + background-color: #a0a0a0; +} + + diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index e918629d..2de8d444 100644 --- a/src/components/Dashboard/Dashboard.jsx +++ b/src/components/Dashboard/Dashboard.jsx @@ -72,7 +72,7 @@ const Dashboard = () => { {!isAllProjectsSelected && (canRegularize || canTeamAttendance || canSelfAttendance) && (
- +
)} @@ -83,10 +83,11 @@ const Dashboard = () => { )} - - {/*
- -
*/} + {isAllProjectsSelected && ( +
+ +
+ )} ); diff --git a/src/components/Dashboard/ServiceJobs.jsx b/src/components/Dashboard/ServiceJobs.jsx index 987addda..5b2f572a 100644 --- a/src/components/Dashboard/ServiceJobs.jsx +++ b/src/components/Dashboard/ServiceJobs.jsx @@ -1,9 +1,24 @@ 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"; const ServiceJobs = () => { + const { projectId } = useParams(); + const { data, isLoading, isError } = useJobsProgression(projectId); + + const jobs = data || {}; + + 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 ( -
-
+
+
Service Jobs
@@ -14,221 +29,113 @@ const ServiceJobs = () => {
- {/* Tabs */} + {/* ---------------- Tabs ---------------- */}
    -
  • - -
    • -
  • - -
    • -
  • - -
    • + {tabMapping.map((t, index) => ( +
  • + +
    • + ))}
- {/* Tab Content */} + {/* ---------------- Tab Content ---------------- */}
- {/* ---------------------- NEW TAB ---------------------- */} -
- {/* Entry 1 */} -
    -
  • - - - -
    -
    - Sender -
    -
    Myrtle Ullrich
    -

    101 Boulder, California(CA), 95959

    + {isLoading && ( +
    + +
    + )} + + + {isError && ( +

    Failed to load jobs

    + )} + + {!isLoading && + !isError && + tabMapping.map((t, index) => { + const list = jobs[t.key] || []; + + return ( +
    + {list.length === 0 ? ( +

    + No jobs found +

    + + ) : ( +
    + {list.map((job, i) => ( + +
      + + {/* Assigned By */} +
    • + + + +
      +
      + + Assigned By + +
      +
      {job.assignedBy}
      +

      + {formatUTCToLocalTime(job.assignedAt)} +

      +
      +
      • + + {/* Project */} +
    • + + + +
      +
      + Project +
      +
      {job.project}
      +

      {job.title}

      +
      +
      • +
    + + {/* Divider */} + {i < list.length - 1 && ( +
    + )} +     + ))} +
    + )}
    -
    • -
  • - - - -
    -
    - Receiver -
    -
    Barry Schowalter
    -

    939 Orange, California(CA), 92118

    -
    -
    • -
- -
- - {/* Entry 2 */} -
    -
  • - - - -
    -
    - Sender -
    -
    Veronica Herman
    -

    162 Windsor, California(CA), 95492

    -
    -
    • -
  • - - - -
    -
    - Receiver -
    -
    Helen Jacobs
    -

    487 Sunset, California(CA), 94043

    -
    -
    • -
-
- - {/* ---------------------- PREPARING TAB ---------------------- */} -
- - {/* Entry 1 */} -
    -
  • - - - -
    -
    - Sender -
    -
    Oliver Grant
    -

    220 Pine St, California(CA), 95765

    -
    -
    • - -
  • - - - -
    -
    - Receiver -
    -
    Samantha Lee
    -

    744 Bay Area, California(CA), 94016

    -
    -
    • -
- -
- - {/* Entry 2 */} -
    -
  • - - - -
    -
    - Sender -
    -
    Marcus Howard
    -

    58 Avenue, California(CA), 95376

    -
    -
    • - -
  • - - - -
    -
    - Receiver -
    -
    Daniel Foster
    -

    312 Marina, California(CA), 94109

    -
    -
    • -
-
- - {/* ---------------------- SHIPPING TAB ---------------------- */} -
- - {/* Entry 1 */} -
    -
  • - - - -
    -
    - Sender -
    -
    James Carter
    -

    441 Market St, California(CA), 94111

    -
    -
    • - -
  • - - - -
    -
    - Receiver -
    -
    Linda Moore
    -

    990 Willow Road, California(CA), 94025

    -
    -
    • -
- -
- - {/* Entry 2 */} -
    -
  • - - - -
    -
    - Sender -
    -
    Sarah Bennett
    -

    882 Canyon Rd, California(CA), 94704

    -
    -
    • - -
  • - - - -
    -
    - Receiver -
    -
    George Simmons
    -

    19 Palm St, California(CA), 93001

    -
    -
    • -
-
- + ); + })}
-
); diff --git a/src/components/ServiceProject/ServiceProjectProfile.jsx b/src/components/ServiceProject/ServiceProjectProfile.jsx index 6ef359ff..689c2ae9 100644 --- a/src/components/ServiceProject/ServiceProjectProfile.jsx +++ b/src/components/ServiceProject/ServiceProjectProfile.jsx @@ -7,6 +7,7 @@ import GlobalModel from "../common/GlobalModel"; import { SpinnerLoader } from "../common/Loader"; import ServiceBranch from "./ServiceProjectBranch/ServiceBranch"; import ServiceProfile from "./ServiceProfile"; +import ServiceJobs from "../Dashboard/ServiceJobs"; const ServiceProjectProfile = () => { const { projectId } = useParams(); @@ -34,12 +35,15 @@ const ServiceProjectProfile = () => {
- +
+
+ +
); diff --git a/src/hooks/useDashboard_Data.jsx b/src/hooks/useDashboard_Data.jsx index 1a9d724a..af024331 100644 --- a/src/hooks/useDashboard_Data.jsx +++ b/src/hooks/useDashboard_Data.jsx @@ -178,6 +178,15 @@ export const useExpenseStatus = (projectId) => { }, }); }; +export const useJobsProgression = (projectId) => { + return useQuery({ + queryKey: ["jobs_Progression", projectId], + queryFn: async () => { + const resp = await GlobalRepository.getJobsProgression(projectId); + return resp.data; + }, + }); +}; export const useExpenseDataByProject = (projectId, categoryId, months) => { return useQuery({ diff --git a/src/repositories/GlobalRepository.jsx b/src/repositories/GlobalRepository.jsx index 2516020a..7bee2d1c 100644 --- a/src/repositories/GlobalRepository.jsx +++ b/src/repositories/GlobalRepository.jsx @@ -64,6 +64,8 @@ const GlobalRepository = { getExpenseStatus: (projectId) => api.get(`/api/Dashboard/expense/pendings${projectId ? `?projectId=${projectId}` : ""}`), + getJobsProgression: (projectId) => api.get(`/api/Dashboard/job/progression${projectId ? `?projectId=${projectId}` : ""}`), + getExpenseDataByProject: (projectId, categoryId, months) => { let url = `api/Dashboard/expense/monthly` const queryParams = [];