From 7ed6a7e5b9c478b1e6d21acee0b0da654e41e501 Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Fri, 5 Sep 2025 16:53:48 +0530 Subject: [PATCH] UI Changes in Assign Employee popup, Attendance tabs, Dashboard heading will be same. --- src/components/Activities/Attendance.jsx | 16 ++- src/components/Activities/AttendcesLogs.jsx | 36 +++---- src/components/Activities/Regularization.jsx | 23 ++-- src/components/Dashboard/AttendanceChart.jsx | 72 ++++++------- .../Dashboard/ProjectCompletionChart.jsx | 2 +- .../Dashboard/ProjectProgressChart.jsx | 2 +- src/components/Project/AboutProject.jsx | 8 +- src/components/Project/MapUser.css | 19 ++++ src/components/Project/MapUsers.jsx | 1 + src/components/Project/ProjectOverview.jsx | 6 +- src/pages/Activities/AttendancePage.jsx | 102 ++++++++++-------- src/pages/Activities/DailyTask.jsx | 15 +-- src/pages/project/ProjectDetails.jsx | 6 +- 13 files changed, 177 insertions(+), 131 deletions(-) create mode 100644 src/components/Project/MapUser.css diff --git a/src/components/Activities/Attendance.jsx b/src/components/Activities/Attendance.jsx index eb7dc500..6d751b12 100644 --- a/src/components/Activities/Attendance.jsx +++ b/src/components/Activities/Attendance.jsx @@ -114,7 +114,10 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => { return ( <> -
+
Date : {formatUTCToLocalTime(todayDate)}
@@ -209,7 +212,11 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => { ))} {!attendance && ( - No employees assigned to the project! + + + No employees assigned to the project! + + )} @@ -258,7 +265,10 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => { )} ) : ( -
+
{searchTerm ? "No results found for your search." : attendanceList.length === 0 diff --git a/src/components/Activities/AttendcesLogs.jsx b/src/components/Activities/AttendcesLogs.jsx index 681783be..faf4bdc5 100644 --- a/src/components/Activities/AttendcesLogs.jsx +++ b/src/components/Activities/AttendcesLogs.jsx @@ -42,7 +42,7 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => { const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" }); const dispatch = useDispatch(); const [loading, setLoading] = useState(false); - const [showPending,setShowPending] = useState(false) + const [showPending, setShowPending] = useState(false) const [isRefreshing, setIsRefreshing] = useState(false); const [processedData, setProcessedData] = useState([]); @@ -245,17 +245,16 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
refetch()} />
-
+
{isLoading ? ( -
+

Loading...

) : filteredSearchData?.length > 0 ? ( @@ -284,9 +283,9 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => { const previousAttendance = arr[index - 1]; const previousDate = previousAttendance ? moment( - previousAttendance.checkInTime || - previousAttendance.checkOutTime - ).format("YYYY-MM-DD") + previousAttendance.checkInTime || + previousAttendance.checkOutTime + ).format("YYYY-MM-DD") : null; if (!previousDate || currentDate !== previousDate) { @@ -346,12 +345,15 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => { ) : ( -
No Record Available !
+
No Record Available !
)}
{paginatedAttendances?.length == 0 && filteredSearchData?.length > 0 && ( -
- No Pending Record Available ! +
+ No Record Available !
)} {filteredSearchData.length > ITEMS_PER_PAGE && ( @@ -369,9 +371,8 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => { (pageNumber) => (
    • ))}
  • - -
    • -
    + return ( +
    + {/* Header */} +
    +
    +
    Attendance Overview
    +

    Role-wise present count

    +
    +
    + + + +
    +
    {/* Content */}
    diff --git a/src/components/Dashboard/ProjectCompletionChart.jsx b/src/components/Dashboard/ProjectCompletionChart.jsx index f0c85179..8ce4b13a 100644 --- a/src/components/Dashboard/ProjectCompletionChart.jsx +++ b/src/components/Dashboard/ProjectCompletionChart.jsx @@ -19,7 +19,7 @@ const ProjectCompletionChart = () => {
    -
    Projects
    +
    Projects

    Projects Completion Status

    diff --git a/src/components/Dashboard/ProjectProgressChart.jsx b/src/components/Dashboard/ProjectProgressChart.jsx index f80bb0d5..61747f6c 100644 --- a/src/components/Dashboard/ProjectProgressChart.jsx +++ b/src/components/Dashboard/ProjectProgressChart.jsx @@ -90,7 +90,7 @@ const ProjectProgressChart = ({
    {/* Left: Title */}
    -
    Project Progress
    +
    Project Progress

    Progress Overview by Project

    diff --git a/src/components/Project/AboutProject.jsx b/src/components/Project/AboutProject.jsx index 248a9141..686d8616 100644 --- a/src/components/Project/AboutProject.jsx +++ b/src/components/Project/AboutProject.jsx @@ -51,13 +51,13 @@ const AboutProject = () => { )} {projects_Details && ( <> -
    +
    -
    +
    {" "} - Project Profile -
    + Project Profile +
      diff --git a/src/components/Project/MapUser.css b/src/components/Project/MapUser.css new file mode 100644 index 00000000..33c61852 --- /dev/null +++ b/src/components/Project/MapUser.css @@ -0,0 +1,19 @@ +/* For Webkit browsers (Chrome, Edge, Safari) */ +.modal-dialog-scrollable::-webkit-scrollbar { + width: 6px; /* smaller width */ +} + +.modal-dialog-scrollable::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.3); /* scrollbar color */ + border-radius: 10px; +} + +.modal-dialog-scrollable::-webkit-scrollbar-track { + background: transparent; +} + +/* For Firefox */ +.modal-dialog-scrollable { + scrollbar-width: thin; /* shrinks scrollbar */ + scrollbar-color: rgba(0, 0, 0, 0.3) transparent; +} diff --git a/src/components/Project/MapUsers.jsx b/src/components/Project/MapUsers.jsx index a464225f..7aecb456 100644 --- a/src/components/Project/MapUsers.jsx +++ b/src/components/Project/MapUsers.jsx @@ -4,6 +4,7 @@ import { useAllEmployees } from "../../hooks/useEmployees"; import useSearch from "../../hooks/useSearch"; import AssignEmployeeTable from "./AssignEmployeeTable"; import showToast from "../../services/toastService"; +import "./MapUser.css"; const MapUsers = ({ projectId, diff --git a/src/components/Project/ProjectOverview.jsx b/src/components/Project/ProjectOverview.jsx index 27c6d27e..f5cb219e 100644 --- a/src/components/Project/ProjectOverview.jsx +++ b/src/components/Project/ProjectOverview.jsx @@ -167,11 +167,11 @@ const ProjectOverview = ({ project }) => { return (
      -
      +
      {" "} - Project Statistics -
      + Project Statistics +
        diff --git a/src/pages/Activities/AttendancePage.jsx b/src/pages/Activities/AttendancePage.jsx index c2c65623..717af11a 100644 --- a/src/pages/Activities/AttendancePage.jsx +++ b/src/pages/Activities/AttendancePage.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useCallback } from "react"; +import React, { useState, useEffect } from "react"; import { cacheData, clearCacheKey, @@ -26,7 +26,7 @@ import { useQueryClient } from "@tanstack/react-query"; const AttendancePage = () => { const [activeTab, setActiveTab] = useState("all"); const [ShowPending, setShowPending] = useState(false); - const [searchTerm, setSearchTerm] = useState(""); + const [searchTerm, setSearchTerm] = useState(""); const queryClient = useQueryClient(); const loginUser = getCachedProfileData(); @@ -117,60 +117,70 @@ const AttendancePage = () => { { label: "Attendance", link: null }, ]} > -
        -
          -
        • - -
          • -
        • - +
          • +
        • + -
          • -
        • - +
          • + +
        • + -
          • + onClick={() => handleTabChange("regularization")} + data-bs-toggle="tab" + data-bs-target="#navs-top-messages" + > + Regularization + + +
        +
        - {/* 🔹 Search box placed after Regularization tab */} -
      • - setSearchTerm(e.target.value)} - style={{ minWidth: "200px" }} - /> -
        • -
      + {/* Single search input that moves */} +
      + setSearchTerm(e.target.value)} + style={{ minWidth: "200px" }} + /> +
      +
      +
      {selectedProject ? ( diff --git a/src/pages/Activities/DailyTask.jsx b/src/pages/Activities/DailyTask.jsx index 73f1ccba..e512f560 100644 --- a/src/pages/Activities/DailyTask.jsx +++ b/src/pages/Activities/DailyTask.jsx @@ -173,12 +173,12 @@ const DailyTask = () => { currentSelectedBuilding={filters.selectedBuilding} currentSelectedFloors={filters.selectedFloors} currentSelectedActivities={filters.selectedActivities} - selectedProject={selectedProject} + selectedProject={selectedProject} />
      {/* --- Table --- */} -
      +
      @@ -193,14 +193,16 @@ const DailyTask = () => { {taskLoading && ( - )} {!taskLoading && groupedTasks.length === 0 && ( - + )} {!taskLoading && @@ -211,7 +213,7 @@ const DailyTask = () => { {tasks.map((task, idx) => ( -
      - + +
      No Reports Found + No Reports Found +
      +
      {task.workItem.activityMaster?.activityName || "No Activity Name"}
      {task.workItem.workArea?.floor?.building?.name} › {task.workItem.workArea?.floor?.floorName} › {task.workItem.workArea?.areaName} @@ -239,6 +241,7 @@ const DailyTask = () => {
      +
    diff --git a/src/pages/project/ProjectDetails.jsx b/src/pages/project/ProjectDetails.jsx index 1df27bb9..74a90ca9 100644 --- a/src/pages/project/ProjectDetails.jsx +++ b/src/pages/project/ProjectDetails.jsx @@ -80,13 +80,13 @@ const ProjectDetails = () => { return ( <>
    -
    +
    -
    +
    -
    +