admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://git.marcoaiot.com/admin/marco.pms.web into react-query

Browse Source
This commit is contained in:
Pramod Mahajan 2025-07-06 22:18:54 +05:30
commit 035ef6c099
28 changed files with 1578 additions and 451 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -1,11 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" lang="en" <html lang="en" lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" dir="ltr"
class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" data-theme="theme-default" data-assets-path="/assets/" data-template="vertical-menu-template" data-style="light">
dir="ltr"
data-theme="theme-default"
data-assets-path="/assets/"
data-template="vertical-menu-template"
data-style="light">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -30,6 +25,7 @@
<!-- Core CSS --> <!-- Core CSS -->
<link rel="stylesheet" href="/assets/vendor/css/core.css" class="template-customizer-core-css" /> <link rel="stylesheet" href="/assets/vendor/css/core.css" class="template-customizer-core-css" />
<link rel="stylesheet" href="/assets/vendor/css/theme-default.css" class="template-customizer-theme-css" /> <link rel="stylesheet" href="/assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
<link rel="stylesheet" href="/assets/css/core-extend.css" />
<link rel="stylesheet" href="/assets/css/default.css" /> <link rel="stylesheet" href="/assets/css/default.css" />
<link rel="stylesheet" href="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" /> <link rel="stylesheet" href="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />

12
public/assets/css/core-extend.css Normal file
View File

@ -0,0 +1,12 @@
:root,
[data-bs-theme="light"] {
--bs-nav-link-font-size: 0.7375rem;
}
.nav {
--bs-nav-link-font-size: 0.7375rem;
}
.card-header {
padding: 0.5rem var(--bs-card-cap-padding-x);
}

76
public/assets/css/default.css
View File

@ -1,7 +1,3 @@
/*
* demo.css
* File include item demo only specific css only
******************************************************************************/
#root { #root {
width: 100%; width: 100%;
@ -20,21 +16,28 @@
padding: 0 !important; padding: 0 !important;
} }
.menu .app-brand.demo { .menu .app-brand {
height: 64px; height: 64px;
margin-top: 12px; margin-top: 12px;
} }
.app-brand-logo.demo svg { .app-brand-logo svg {
width: 22px; width: 22px;
height: 38px; height: 38px;
} }
.app-brand-logo-sidebar { .app-brand-logo-sidebar {
width: 70px; width: 45px;
} }
.app-brand-text.demo { .app-brand-logo-login {
width: 100px;
}
.app-brand-logo-border {
border: 1px solid #d5d5d5;
}
.app-brand-text {
font-size: 1.75rem; font-size: 1.75rem;
letter-spacing: -0.5px; letter-spacing: -0.5px;
/* text-transform: lowercase; */ /* text-transform: lowercase; */
@ -61,39 +64,6 @@
* Content * Content
******************************************************************************/ ******************************************************************************/
.demo-blocks > * {
display: block !important;
}
.demo-inline-spacing > * {
margin: 1rem 0.375rem 0 0 !important;
}
/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
margin-top: 1rem !important;
margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
margin-top: 0 !important;
}
.demo-vertical-spacing-lg > * {
margin-top: 1.875rem !important;
margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
margin-top: 0 !important;
}
.demo-vertical-spacing-xl > * {
margin-top: 5rem !important;
margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
margin-top: 0 !important;
}
.rtl-only { .rtl-only {
display: none !important; display: none !important;
text-align: left !important; text-align: left !important;
@ -104,30 +74,6 @@
display: block !important; display: block !important;
} }
/*
* Layout demo
******************************************************************************/
.layout-demo-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 1rem;
}
.layout-demo-placeholder img {
width: 900px;
}
.layout-demo-info {
text-align: center;
margin-top: 1rem;
}
.infra-activity-table-header { .infra-activity-table-header {
border-top: 0; border-top: 0;
text-transform: capitalize !important; text-transform: capitalize !important;

BIN
public/img/brand/marco.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 43 KiB

BIN
public/img/brand/marco1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

95
src/assets/css/default.css
View File

@ -1,23 +1,3 @@
/*
* demo.css
* File include item demo only specific css only
******************************************************************************/
.menu .app-brand.demo {
height: 64px;
margin-top: 12px;
}
.app-brand-logo.demo svg {
width: 22px;
height: 38px;
}
.app-brand-text.demo {
font-size: 1.75rem;
letter-spacing: -0.5px;
}
/* ! For .layout-navbar-fixed added fix padding top to .layout-page */ /* ! For .layout-navbar-fixed added fix padding top to .layout-page */
/* Detached navbar */ /* Detached navbar */
.layout-navbar-fixed .layout-navbar-fixed
@ -43,43 +23,6 @@
z-index: auto; z-index: auto;
} }
/*
* Content
******************************************************************************/
.demo-blocks > * {
display: block !important;
}
.demo-inline-spacing > * {
margin: 1rem 0.375rem 0 0 !important;
}
/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
margin-top: 1rem !important;
margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
margin-top: 0 !important;
}
.demo-vertical-spacing-lg > * {
margin-top: 1.875rem !important;
margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
margin-top: 0 !important;
}
.demo-vertical-spacing-xl > * {
margin-top: 5rem !important;
margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
margin-top: 0 !important;
}
.rtl-only { .rtl-only {
display: none !important; display: none !important;
text-align: left !important; text-align: left !important;
@ -89,41 +32,3 @@
[dir="rtl"] .rtl-only { [dir="rtl"] .rtl-only {
display: block !important; display: block !important;
} }
/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
#dropdown-variation-demo .btn-group .text-truncate {
width: 231px;
position: relative;
}
#dropdown-variation-demo .btn-group .text-truncate::after {
position: absolute;
top: 45%;
right: 0.65rem;
}
}
/*
* Layout demo
******************************************************************************/
.layout-demo-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 1rem;
}
.layout-demo-placeholder img {
width: 900px;
}
.layout-demo-info {
text-align: center;
margin-top: 1rem;
}

45
src/components/Dashboard/ProjectProgressChart.jsx
View File

@ -4,12 +4,15 @@ import { useProjects } from "../../hooks/useProjects";
import { useDashboard_Data } from "../../hooks/useDashboard_Data"; import { useDashboard_Data } from "../../hooks/useDashboard_Data";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
const ProjectProgressChart = () => { const ProjectProgressChart = ({
ShowAllProject = true,
DefaultRange = "15D",
}) => {
const selectedProject = useSelector( const selectedProject = useSelector(
(store) => store.localVariables.projectId (store) => store.localVariables.projectId
); );
const { projects } = useProjects(); const { projects } = useProjects();
const [range, setRange] = useState("15D"); const [range, setRange] = useState(DefaultRange);
const [showAllEmployees, setShowAllEmployees] = useState(false); const [showAllEmployees, setShowAllEmployees] = useState(false);
const getDaysFromRange = (range) => { const getDaysFromRange = (range) => {
@ -69,7 +72,7 @@ const ProjectProgressChart = () => {
); );
const lineChartCategoriesDates = sortedDashboardData.map((d) => const lineChartCategoriesDates = sortedDashboardData.map((d) =>
new Date(d.date).toLocaleDateString("en-US", { new Date(d.date).toLocaleDateString("en-US", {
weekday:"short", weekday: "short",
month: "short", month: "short",
day: "numeric", day: "numeric",
year: "numeric", year: "numeric",
@ -82,7 +85,7 @@ const ProjectProgressChart = () => {
: selectedProjectData?.name; : selectedProjectData?.name;
return ( return (
<div className="card h-100"> <div className="card">
<div className="card-header"> <div className="card-header">
<div className="d-flex flex-wrap justify-content-between align-items-start mb-2"> <div className="d-flex flex-wrap justify-content-between align-items-start mb-2">
{/* Left: Title */} {/* Left: Title */}
@ -93,22 +96,24 @@ const ProjectProgressChart = () => {
{/* Right: Checkbox and Project Name */} {/* Right: Checkbox and Project Name */}
<div className="d-flex flex-column align-items-start align-items-md-end text-start text-md-end mt-1 mt-md-0"> <div className="d-flex flex-column align-items-start align-items-md-end text-start text-md-end mt-1 mt-md-0">
<div className="form-check form-switch mb-1 d-flex align-items-center"> {ShowAllProject == true && (
<input <div className="form-check form-switch mb-1 d-flex align-items-center">
className="form-check-input" <input
type="checkbox" className="form-check-input"
role="switch" type="checkbox"
id="showAllEmployees" role="switch"
checked={showAllEmployees} id="showAllEmployees"
onChange={(e) => setShowAllEmployees(e.target.checked)} checked={showAllEmployees}
/> onChange={(e) => setShowAllEmployees(e.target.checked)}
<label />
className="form-check-label ms-2" <label
htmlFor="showAllEmployees" className="form-check-label ms-2"
> htmlFor="showAllEmployees"
All Projects >
</label> All Projects
</div> </label>
</div>
)}
{!showAllEmployees && selectedProjectName && ( {!showAllEmployees && selectedProjectName && (
<p className="text-muted mb-0 small"> <p className="text-muted mb-0 small">
<span className="card-subtitle">{selectedProjectName}</span> <span className="card-subtitle">{selectedProjectName}</span>

14
src/components/Directory/NoteCardDirectory.jsx
View File

@ -19,6 +19,10 @@ const NoteCardDirectory = ({
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [isDeleting, setIsDeleting] = useState(false); const [isDeleting, setIsDeleting] = useState(false);
const [isActivProcess, setActiveProcessing] = useState(false); const [isActivProcess, setActiveProcessing] = useState(false);
// State to manage hover status
const [isHovered, setIsHovered] = useState(false);
const handleUpdateNote = async () => { const handleUpdateNote = async () => {
try { try {
setIsLoading(true); setIsLoading(true);
@ -127,6 +131,8 @@ const NoteCardDirectory = ({
background: `${noteItem.isActive ? "" : "#f8f6f6"}`, background: `${noteItem.isActive ? "" : "#f8f6f6"}`,
}} }}
key={noteItem.id} key={noteItem.id}
onMouseEnter={() => setIsHovered(true)} // Set hover state to true on mouse enter
onMouseLeave={() => setIsHovered(false)} // Set hover state to false on mouse leave
> >
<div className="d-flex justify-content-between align-items-center mb-1"> <div className="d-flex justify-content-between align-items-center mb-1">
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
@ -149,11 +155,15 @@ const NoteCardDirectory = ({
</span> </span>
</div> </div>
</div> </div>
<div> <div
className={`absolute top-4 right-4 flex space-x-2 transition-opacity duration-300 ${
isHovered ? "opacity-100" : "opacity-0"
}`}
>
{noteItem.isActive ? ( {noteItem.isActive ? (
<> <>
<i <i
className="bx bxs-edit bx-sm me-1 text-primary cursor-pointer" className="p-2 bg-blue-500 text-white rounded-full shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75"
onClick={() => setEditing(true)} onClick={() => setEditing(true)}
></i> ></i>

2
src/components/Directory/NoteCardDirectoryEditable.jsx
View File

@ -184,7 +184,7 @@ const NoteCardDirectoryEditable = ({
<i className="bx bx-loader-alt bx-spin text-primary"></i> <i className="bx bx-loader-alt bx-spin text-primary"></i>
) : ( ) : (
<i <i
className="bx bx-recycle me-2 text-success cursor-pointer" className="bx bx-recycle me-2 text-primary cursor-pointer"
onClick={handleRestore} onClick={handleRestore}
title="Restore" title="Restore"
></i> ></i>

6
src/components/Layout/LayoutMenu.tsx
View File

@ -1,9 +1,9 @@
const LayoutMenu = () => { const LayoutMenu = () => {
return ( return (
<aside id="layout-menu" className="layout-menu menu-vertical menu bg-menu-theme"> <aside id="layout-menu" className="layout-menu menu-vertical menu bg-menu-theme">
<div className="app-brand demo"> <div className="app-brand">
<a href="index.html" className="app-brand-link"> <a href="index.html" className="app-brand-link">
<span className="app-brand-logo demo"> <span className="app-brand-logo">
<svg <svg
width="25" width="25"
viewBox="0 0 25 42" viewBox="0 0 25 42"
@ -58,7 +58,7 @@ const LayoutMenu = () => {
</g> </g>
</svg> </svg>
</span> </span>
<span className="app-brand-text demo menu-text fw-bolder ms-2">Marco</span> <span className="app-brand-text menu-text fw-bolder ms-2">Marco</span>
</a> </a>
<a href="javascript:void(0);" className="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none"> <a href="javascript:void(0);" className="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">

107
src/components/Layout/Sidebar.jsx
View File

@ -1,43 +1,31 @@
import React from "react"; import React from "react";
import { Link, NavLink, useLocation, useNavigate } from "react-router-dom"; import { Link, NavLink, useLocation, useNavigate } from "react-router-dom";
import menuData from "../../data/menuData.json"; import menuData from "../../data/menuData.json";
import {getCachedProfileData} from "../../slices/apiDataManager"; import { getCachedProfileData } from "../../slices/apiDataManager";
const Sidebar = () => { const Sidebar = () => {
// const logineUser = getCachedProfileData() const navigate = useNavigate();
const navigate = useNavigate()
// const handleLogout = (e) => {
// e.preventDefault();
// // logout();
// };
// const handleProfilePage = ()=>{
// navigate(`/employee/${profile?.employeeInfo?.id}?for=account`)
// }
return ( return (
<aside <aside
id="layout-menu" id="layout-menu"
className="layout-menu menu-vertical menu bg-menu-theme " className="layout-menu menu-vertical menu bg-menu-theme "
> >
<div className="app-brand demo"> <div className="app-brand" style={{ paddingLeft: "30px" }}>
<Link to="/dashboard" className="app-brand-link"> <Link to="/dashboard" className="app-brand-link">
<span className="app-brand-logo demo"> <span className="app-brand-logo rounded-circle app-brand-logo-border">
<img <img
className="app-brand-logo-sidebar" className="app-brand-logo-sidebar"
src="/img/brand/marco.png" src="/img/brand/marco.png"
alt="logo" alt="logo"
aria-label="logo image" aria-label="logo image"
style={{ margin: "5px", paddingRight: "5px" }}
/> />
</span> </span>
<span className="app-brand-text demo menu-text fw-bold ms-2"> <span className="app-brand-text menu-text fw-bold ms-2">PMS</span>
PMS
</span>
</Link> </Link>
<a <a className="layout-menu-toggle menu-link text-large ms-auto">
className="layout-menu-toggle menu-link text-large ms-auto"
>
<i className="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i> <i className="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
</a> </a>
</div> </div>
@ -56,87 +44,6 @@ const Sidebar = () => {
</React.Fragment> </React.Fragment>
))} ))}
</ul> </ul>
{/* <div className="dropdown py-sm-4 mt-sm-auto ms-auto ms-sm-0 flex-shrink-1 ps-5">
<a
href="#"
className="d-flex align-items-center text-decoration-none dropdown-toggle"
id="dropdownUser1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<img
src="https://github.com/mdo.png"
alt="hugenerd"
width="28"
height="28"
className="rounded-circle"
/>
<span className="d-none d-sm-inline mx-1">{ logineUser?.employeeInfo?.firstName}</span>
</a>
<ul className="dropdown-menu dropdown-menu-end">
<li onClick={handleProfilePage}>
<a aria-label="go to profile" className="dropdown-item">
<div className="d-flex">
<div className="flex-shrink-0 me-3">
<div className="avatar avatar-online">
<img
src="../assets/img/avatars/00.jpg"
className="w-px-40 h-auto rounded-circle"
alt="avatar-image"
aria-label="Avatar Image"
/>
</div>
</div>
<div className="flex-grow-1">
<span className="fw-medium d-block">{ logineUser?.employeeInfo?.firstName}</span>
<small className="text-muted">Admin</small>
</div>
</div>
</a>
</li>
<li>
<div className="dropdown-divider"></div>
</li>
<li onClick={handleProfilePage}>
<a aria-label="go to profile" className="dropdown-item" >
<i className="bx bx-user me-2"></i>
<span className="align-middle">My Profile</span>
</a>
</li>
<li>
<a aria-label="go to setting" className="dropdown-item" href="#">
<i className="bx bx-cog me-2"></i>
<span className="align-middle">Settings</span>
</a>
</li>
<li>
<a aria-label="go to billing" className="dropdown-item" href="#">
<span className="d-flex align-items-center align-middle">
<i className="flex-shrink-0 bx bx-credit-card me-2"></i>
<span className="flex-grow-1 align-middle ms-1">Billing</span>
<span className="flex-shrink-0 badge badge-center rounded-pill bg-danger w-px-20 h-px-20">
4
</span>
</span>
</a>
</li>
<li>
<div className="dropdown-divider"></div>
</li>
<li>
<a
aria-label="click to log out"
className="dropdown-item"
href="/logout" // Optional: Add this for accessibility, but it won't actually redirect
onClick={handleLogout}
>
<i className="bx bx-power-off me-2"></i>
<span className="align-middle">Log Out</span>
</a>
</li>
</ul>
</div> */}
</aside> </aside>
); );
}; };

32
src/components/Project/AboutProject.jsx
View File

@ -10,12 +10,26 @@ const AboutProject = () => {
<> <>
{projects_Details && ( {projects_Details && (
<div className="card mb-6"> <div className="card mb-6">
<div class="card-header text-start">
<h6 class="card-action-title mb-0">
{" "}
<i className="fa fa-building rounded-circle text-primary"></i>
<span className="ms-2">Project Profile</span>
</h6>
</div>
<div className="card-body"> <div className="card-body">
<small className="card-text text-uppercase text-muted small"> <ul className="list-unstyled my-3 ps-2">
Profile <li className="d-flex align-items-center mb-3">
</small> <i className="bx bx-cog"></i>
<ul className="list-unstyled my-3"> <span className="fw-medium mx-2">Name:</span>{" "}
<li className="d-flex align-items-center mb-4"> <span>{data.name}</span>
</li>
<li className="d-flex align-items-center mb-3">
<i className="bx bx-fingerprint"></i>
<span className="fw-medium mx-2">Nick Name:</span>{" "}
<span> {data.shortName} </span>
</li>
<li className="d-flex align-items-center mb-3">
<i className="bx bx-check"></i> <i className="bx bx-check"></i>
<span className="fw-medium mx-2">Start Date:</span>{" "} <span className="fw-medium mx-2">Start Date:</span>{" "}
<span> <span>
@ -24,7 +38,7 @@ const AboutProject = () => {
: "N/A"} : "N/A"}
</span> </span>
</li> </li>
<li className="d-flex align-items-center mb-4"> <li className="d-flex align-items-center mb-3">
<i className="bx bx-stop-circle"></i>{" "} <i className="bx bx-stop-circle"></i>{" "}
<span className="fw-medium mx-2">End Date:</span>{" "} <span className="fw-medium mx-2">End Date:</span>{" "}
<span> <span>
@ -33,18 +47,18 @@ const AboutProject = () => {
: "N/A"} : "N/A"}
</span> </span>
</li> </li>
<li className="d-flex align-items-center mb-2"> <li className="d-flex align-items-center mb-3">
<i className="bx bx-trophy"></i> <i className="bx bx-trophy"></i>
<span className="fw-medium mx-2">Status:</span>{" "} <span className="fw-medium mx-2">Status:</span>{" "}
<span>{projects_Details?.projectStatus?.status <span>{projects_Details?.projectStatus?.status
}</span> }</span>
</li> </li>
<li className="d-flex align-items-center mb-4"> <li className="d-flex align-items-center mb-3">
<i className="bx bx-user"></i> <i className="bx bx-user"></i>
<span className="fw-medium mx-2">Contact:</span>{" "} <span className="fw-medium mx-2">Contact:</span>{" "}
<span>{projects_Details.contactPerson}</span> <span>{projects_Details.contactPerson}</span>
</li> </li>
<li className="d-flex flex-column align-items-start mb-4"> <li className="d-flex flex-column align-items-start mb-3">
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<i className="bx bx-flag"></i> <i className="bx bx-flag"></i>
<span className="fw-medium mx-2">Address:</span> <span className="fw-medium mx-2">Address:</span>

30
src/components/Project/ManageProjectInfo.jsx
View File

@ -27,7 +27,7 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
shortName: z.string().optional(), shortName: z.string().optional(),
contactPerson: z contactPerson: z
.string() .string()
.min( 1, {message: "Contact Person Name is required"} ) .min(1, { message: "Contact Person Name is required" })
.regex(/^[A-Za-z\s]+$/, { .regex(/^[A-Za-z\s]+$/, {
message: "Contact Person must contain only letters", message: "Contact Person must contain only letters",
}), }),
@ -51,7 +51,7 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
(data) => { (data) => {
const start = new Date(data.startDate); const start = new Date(data.startDate);
const end = new Date(data.endDate); const end = new Date(data.endDate);
return end > start; return end >= start;
}, },
{ {
path: ["endDate"], // attaches the error to the endDate field path: ["endDate"], // attaches the error to the endDate field
@ -76,7 +76,12 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
projectAddress: project?.projectAddress || "", projectAddress: project?.projectAddress || "",
startDate: formatDate(project?.startDate) || currentDate, startDate: formatDate(project?.startDate) || currentDate,
endDate: formatDate(project?.endDate) || currentDate, endDate: formatDate(project?.endDate) || currentDate,
projectStatusId: String(project?.projectStatusId || "00000000-0000-0000-0000-000000000000"), // projectStatusId: String(project?.projectStatusId || "00000000-0000-0000-0000-000000000000"),
projectStatusId: project?.projectStatusId && project.projectStatusId !== DEFAULT_EMPTY_STATUS_ID
? String(project.projectStatusId)
: ACTIVE_STATUS_ID,
}, },
mode: "onChange", mode: "onChange",
}); });
@ -100,10 +105,18 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
setAddressLength(project?.projectAddress?.length || 0); setAddressLength(project?.projectAddress?.length || 0);
}, [project, reset]); }, [project, reset]);
/**
* Handles the form submission.
* @param {object} updatedProject - The project data from the form.
*/
const onSubmitForm = (updatedProject) => { const onSubmitForm = (updatedProject) => {
setLoading(true); setLoading(true);
handleSubmitForm( updatedProject, setLoading,reset ); handleSubmitForm(updatedProject, setLoading, reset);
}; };
const handleCancel = () => { const handleCancel = () => {
reset({ reset({
@ -248,8 +261,9 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
valueAsNumber: false, valueAsNumber: false,
})} })}
> >
<option disabled>Status</option> {/* <option disabled>Status</option>
<option value="b74da4c2-d07e-46f2-9919-e75e49b12731">Active</option> <option value="b74da4c2-d07e-46f2-9919-e75e49b12731">Active</option> */}
<option value={ACTIVE_STATUS_ID}>Active</option>
<option value="603e994b-a27f-4e5d-a251-f3d69b0498ba">On Hold</option> <option value="603e994b-a27f-4e5d-a251-f3d69b0498ba">On Hold</option>
<option value="cdad86aa-8a56-4ff4-b633-9c629057dfef">In Progress</option> <option value="cdad86aa-8a56-4ff4-b633-9c629057dfef">In Progress</option>
@ -313,4 +327,4 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
); );
}; };
export default ManageProjectInfo; export default ManageProjectInfo;

51
src/components/Project/ProjectOverview.jsx
View File

@ -8,27 +8,66 @@ const ProjectOverview = ({project}) =>{
const project_detail = projects.find( ( pro ) => pro.id == project ) const project_detail = projects.find( ( pro ) => pro.id == project )
return ( return (
<div className="card mb-6"> <div className="card mb-6">
<div className="card-header text-start">
<h6 className="card-action-title mb-0">
{" "}
<i className="fa fa-line-chart rounded-circle text-primary"></i>
<span className="ms-2">Project Statistics</span>
</h6>
</div>
<div className="card-body"> <div className="card-body">
<small className="card-text text-uppercase text-muted small">
Overview
</small>
<ul className="list-unstyled mb-0 mt-3 pt-1"> <ul className="list-unstyled mb-0 mt-3 pt-1">
<li className="d-flex align-items-center mb-4"> <li className="d-flex align-items-center mb-3">
<i className="bx bx-check"></i> <i className="bx bx-check"></i>
<span className="fw-medium mx-2">Task Planned:</span>{" "} <span className="fw-medium mx-2">Task Planned:</span>{" "}
<span>{formatNumber(project_detail?.plannedWork) <span>{formatNumber(project_detail?.plannedWork)
}</span> }</span>
</li> </li>
<li className="d-flex align-items-center mb-4"> <li className="d-flex align-items-center mb-3">
<i className="bx bx-star"></i> <i className="bx bx-star"></i>
<span className="fw-medium mx-2">Task Completed:</span>{" "} <span className="fw-medium mx-2">Task Completed:</span>{" "}
<span>{formatNumber(project_detail?.completedWork) }</span> <span>{formatNumber(project_detail?.completedWork) }</span>
</li> </li>
<li className="d-flex align-items-center"> <li className="d-flex align-items-center mb-3">
<i className="bx bx-user"></i> <i className="bx bx-user"></i>
<span className="fw-medium mx-2">Current team Size:</span>{" "} <span className="fw-medium mx-2">Current team Size:</span>{" "}
<span>{project_detail?.teamSize}</span> <span>{project_detail?.teamSize}</span>
</li> </li>
<li className=" mb-3">
{project_detail && (
<>
<div className="d-flex text-end mb-2 mt-5">
<small className="text-body text-muted ">
{Math.floor(
getProgressInNumber(
project_detail.plannedWork,
project_detail.completedWork
)
) || 0}{" "}
% Completed
</small>
</div>
<div
className="progress mb-4 rounded"
style={{ height: "8px" }}
>
<div
className="progress-bar rounded"
role="progressbar"
style={{
width: getProgress(
project_detail.plannedWork,
project_detail.completedWork
),
}}
aria-valuenow={project_detail.completedWork}
aria-valuemin="0"
aria-valuemax={project_detail.plannedWork}
></div>
</div>
</>
)}
</li>
</ul> </ul>
</div> </div>
</div> </div>

33
src/components/common/DateRangePicker.jsx
View File

@ -2,37 +2,40 @@ import React, { useEffect, useRef } from "react";
const DateRangePicker = ({ const DateRangePicker = ({
onRangeChange, onRangeChange,
DateDifference = 7, DateDifference = 7,
endDateMode = "yesterday", // "today" or "yesterday" endDateMode = "yesterday",
}) => { }) => {
const inputRef = useRef(null); const inputRef = useRef(null);
useEffect(() => { useEffect(() => {
const endDate = new Date(); const endDate = new Date();
if (endDateMode === "yesterday") { if (endDateMode === "yesterday") {
endDate.setDate(endDate.getDate() - 1); endDate.setDate(endDate.getDate() - 1);
} }
const startDate = new Date(); endDate.setHours(0, 0, 0, 0);
startDate.setDate(endDate.getDate() - DateDifference);
const startDate = new Date(endDate);
startDate.setDate(endDate.getDate() - (DateDifference - 1));
startDate.setHours(0, 0, 0, 0);
const fp = flatpickr(inputRef.current, { const fp = flatpickr(inputRef.current, {
mode: "range", mode: "range",
dateFormat: "Y-m-d", dateFormat: "Y-m-d",
altInput: true, altInput: true,
altFormat: "d-m-Y", altFormat: "d-m-Y",
defaultDate: [startDate, endDate], defaultDate: [startDate, endDate],
static: true, static: true,
clickOpens: true, clickOpens: true,
onChange: (selectedDates, dateStr) => { onChange: (selectedDates, dateStr) => {
const [startDate, endDate] = dateStr.split(" to "); const [startDateString, endDateString] = dateStr.split(" to ");
onRangeChange?.({ startDate, endDate }); onRangeChange?.({ startDate: startDateString, endDate: endDateString });
}, },
}); });
onRangeChange?.({ onRangeChange?.({
startDate: startDate.toLocaleDateString("en-CA"), startDate: startDate.toLocaleDateString("en-CA"),
endDate: endDate.toLocaleDateString("en-CA"), endDate: endDate.toLocaleDateString("en-CA"),
}); });
return () => { return () => {

12
src/data/menuData.json
View File

@ -46,11 +46,7 @@
"available": true, "available": true,
"link": "/activities/reports" "link": "/activities/reports"
}, },
{
"text": "Image Gallary",
"available": true,
"link": "/activities/gallary"
},
{ {
"text": "Daily Expenses", "text": "Daily Expenses",
"available": true, "available": true,
@ -63,6 +59,12 @@
"icon": "bx bx-group", "icon": "bx bx-group",
"available": true, "available": true,
"link": "/directory" "link": "/directory"
},
{
"text": "Image Gallary",
"icon": "bx bx-images",
"available": true,
"link": "/gallary"
}, },
{ {
"text": "Administration", "text": "Administration",

3
src/main.tsx
View File

@ -8,6 +8,7 @@ import { Provider } from 'react-redux';
import { store } from './store/store'; import { store } from './store/store';
import { ModalProvider } from './ModalContext.jsx'; import { ModalProvider } from './ModalContext.jsx';
import { ChangePasswordProvider } from './components/Context/ChangePasswordContext.jsx'; import { ChangePasswordProvider } from './components/Context/ChangePasswordContext.jsx';
import { ModalProvider1 } from './pages/Gallary/ModalContext.jsx';
createRoot(document.getElementById('root')!).render( createRoot(document.getElementById('root')!).render(
@ -16,7 +17,9 @@ createRoot(document.getElementById('root')!).render(
<Provider store={ store }> <Provider store={ store }>
<ModalProvider> <ModalProvider>
<ChangePasswordProvider > <ChangePasswordProvider >
<ModalProvider1>
<App /> <App />
</ModalProvider1>
</ChangePasswordProvider> </ChangePasswordProvider>
</ModalProvider> </ModalProvider>
</Provider> </Provider>

20
src/pages/Directory/DirectoryPageHeader.jsx
View File

@ -278,7 +278,7 @@ const DirectoryPageHeader = ({
</div> </div>
<hr className="my-0 mb-2" style={{ borderTop: "1px solid #dee2e6" }} /> <hr className="my-0 mb-2" style={{ borderTop: "1px solid #dee2e6" }} />
<div className="row mx-0 px-0 align-items-center mt-0"> <div className="row mx-0 px-0 align-items-center mt-2">
<div className="col-12 col-md-6 mb-2 px-5 d-flex align-items-center gap-4"> <div className="col-12 col-md-6 mb-2 px-5 d-flex align-items-center gap-4">
<input <input
@ -306,7 +306,7 @@ const DirectoryPageHeader = ({
)} )}
</a> </a>
<div className="dropdown-menu p-0" style={{ minWidth: "700px" }}> <div className="dropdown-menu p-0" style={{ minWidth: "550px" }}>
{/* Scrollable Filter Content */} {/* Scrollable Filter Content */}
<div <div
className="p-3" className="p-3"
@ -319,18 +319,19 @@ const DirectoryPageHeader = ({
> >
<div className="d-flex gap-3"> <div className="d-flex gap-3">
{/* Created By */} {/* Created By */}
<div style={{ flex: 0.50, maxHeight: "260px", overflowY: "auto" }}> <div style={{ flexBasis: "30%", maxHeight: "260px", overflowY: "auto" }}>
<div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}> <div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
<p className="text-muted mb-2 pt-2">Created By</p> <p className="text-muted mb-2 pt-2">Created By</p>
</div> </div>
{allCreators.map((name, idx) => ( {allCreators.map((name, idx) => (
<div className="form-check mb-1" key={`creator-${idx}`}> <div className="form-check mb-1" key={`creator-${idx}`}>
<input <input
className="form-check-input" className="form-check-input form-check-input-sm"
type="checkbox" type="checkbox"
id={`creator-${idx}`} id={`creator-${idx}`}
checked={selectedCreators.includes(name)} checked={selectedCreators.includes(name)}
onChange={() => handleToggleCreator(name)} onChange={() => handleToggleCreator(name)}
style={{ width: "1rem", height: "1rem" }}
/> />
<label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}> <label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}>
{name} {name}
@ -340,18 +341,19 @@ const DirectoryPageHeader = ({
</div> </div>
{/* Organization */} {/* Organization */}
<div style={{ flex: 1, maxHeight: "260px", overflowY: "auto",overflowX: "hidden", }}> <div style={{ maxHeight: "260px", overflowY: "auto",overflowX: "hidden", }}>
<div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}> <div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
<p className="text-muted mb-2 pt-2">Organization</p> <p className="text-muted mb-2 pt-2">Organization</p>
</div> </div>
{filteredOrganizations.map((org, idx) => ( {filteredOrganizations.map((org, idx) => (
<div className="form-check mb-1" key={`org-${idx}`}> <div className="form-check mb-1" key={`org-${idx}`}>
<input <input
className="form-check-input" className="form-check-input form-check-input-sm"
type="checkbox" type="checkbox"
id={`org-${idx}`} id={`org-${idx}`}
checked={selectedOrgs.includes(org)} checked={selectedOrgs.includes(org)}
onChange={() => handleToggleOrg(org)} onChange={() => handleToggleOrg(org)}
style={{ width: "1rem", height: "1rem" }}
/> />
<label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}> <label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}>
{org} {org}
@ -444,11 +446,12 @@ const DirectoryPageHeader = ({
{filteredBuckets.map(({ id, name }) => ( {filteredBuckets.map(({ id, name }) => (
<div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}> <div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
<input <input
className="form-check-input" className="form-check-input form-check-input-sm"
type="checkbox" type="checkbox"
id={`bucket-${id}`} id={`bucket-${id}`}
checked={tempSelectedBucketIds.includes(id)} checked={tempSelectedBucketIds.includes(id)}
onChange={() => handleTempBucketChange(id)} onChange={() => handleTempBucketChange(id)}
style={{ width: "1rem", height: "1rem" }}
/> />
<label className="form-check-label text-nowrap text-small" htmlFor={`bucket-${id}`}> <label className="form-check-label text-nowrap text-small" htmlFor={`bucket-${id}`}>
{name} {name}
@ -463,11 +466,12 @@ const DirectoryPageHeader = ({
{filteredCategories.map(({ id, name }) => ( {filteredCategories.map(({ id, name }) => (
<div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}> <div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
<input <input
className="form-check-input" className="form-check-input form-check-input-sm"
type="checkbox" type="checkbox"
id={`cat-${id}`} id={`cat-${id}`}
checked={tempSelectedCategoryIds.includes(id)} checked={tempSelectedCategoryIds.includes(id)}
onChange={() => handleTempCategoryChange(id)} onChange={() => handleTempCategoryChange(id)}
style={{ width: "1rem", height: "1rem" }}
/> />
<label className="form-check-label text-nowrap text-small" htmlFor={`cat-${id}`}> <label className="form-check-label text-nowrap text-small" htmlFor={`cat-${id}`}>
{name} {name}

512
src/pages/Gallary/ImageGallary.jsx
View File

@ -1,8 +1,510 @@
import React from "react"; // ImageGallery.js
import { ComingSoonPage } from "../Misc/ComingSoonPage"; import React, { useState, useEffect, useRef, useCallback } from "react";
import "./ImageGallery.css";
import { ImageGalleryAPI } from "./ImageGalleryAPI";
import moment from "moment";
import { useSelector } from "react-redux";
import { useModal } from "./ModalContext";
import ImagePop from "./ImagePop";
import Avatar from "../../components/common/Avatar";
import DateRangePicker from "../../components/common/DateRangePicker"; // Assuming this is the path to your DateRangePicker
const ImageGallary = () => { const ImageGallery = () => {
return <ComingSoonPage></ComingSoonPage>; const [images, setImages] = useState([]);
const selectedProjectId = useSelector((store) => store.localVariables.projectId);
const { openModal } = useModal();
const yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD');
const [selectedFilters, setSelectedFilters] = useState({
building: [],
floor: [],
activity: [],
uploadedBy: [],
workCategory: [],
workArea: [],
startDate: "",
endDate: "",
});
const [appliedFilters, setAppliedFilters] = useState({
buildingIds: null,
floorIds: null,
activityIds: null,
uploadedByIds: null,
workCategoryIds: null,
workAreaIds: null,
startDate: null,
endDate: null,
});
const [collapsedFilters, setCollapsedFilters] = useState({
dateRange: false,
building: false,
floor: false,
activity: false,
uploadedBy: false,
workCategory: false,
workArea: false,
});
const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false);
const [hoveredImage, setHoveredImage] = useState(null);
const [loading, setLoading] = useState(true);
const imageGroupRefs = useRef({});
const filterPanelRef = useRef(null);
const filterButtonRef = useRef(null);
useEffect(() => {
const handleClickOutside = (event) => {
if (
filterPanelRef.current &&
!filterPanelRef.current.contains(event.target) &&
filterButtonRef.current &&
!filterButtonRef.current.contains(event.target)
) {
setIsFilterPanelOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
useEffect(() => {
if (!selectedProjectId) {
setImages([]);
setLoading(false);
return;
}
setLoading(true);
ImageGalleryAPI.ImagesGet(selectedProjectId, appliedFilters)
.then((res) => {
setImages(res.data);
})
.catch((err) => {
console.error("Error fetching images:", err);
setImages([]);
})
.finally(() => {
setLoading(false);
});
}, [selectedProjectId, appliedFilters]);
const getUniqueValuesWithIds = useCallback(
(idKey, nameKey) => {
const uniqueMap = new Map();
images.forEach((img) => {
if (img[idKey] && img[nameKey]) {
uniqueMap.set(img[idKey], img[nameKey]);
}
});
return Array.from(uniqueMap.entries());
},
[images]
);
const getUniqueUploadedByUsers = useCallback(() => {
const uniqueUsersMap = new Map();
images.forEach((img) => {
if (img.uploadedBy && img.uploadedBy.id) {
const fullName = `${img.uploadedBy.firstName || ""} ${
img.uploadedBy.lastName || ""
}`.trim();
if (fullName) {
uniqueUsersMap.set(img.uploadedBy.id, fullName);
}
}
});
return Array.from(uniqueUsersMap.entries());
}, [images]);
const buildings = getUniqueValuesWithIds("buildingId", "buildingName");
const floors = getUniqueValuesWithIds("floorIds", "floorName");
const activities = getUniqueValuesWithIds("activityId", "activityName");
const workAreas = getUniqueValuesWithIds("workAreaId", "workAreaName");
const uploadedByUsers = getUniqueUploadedByUsers();
const workCategories = getUniqueValuesWithIds("workCategoryId", "workCategoryName");
const toggleFilter = useCallback((type, itemId, itemName) => {
setSelectedFilters((prev) => {
const current = prev[type];
const isSelected = current.some((item) => item[0] === itemId);
const newArray = isSelected
? current.filter((item) => item[0] !== itemId)
: [...current, [itemId, itemName]];
return {
...prev,
[type]: newArray,
};
});
}, []);
const setDateRange = useCallback(({ startDate, endDate }) => {
setSelectedFilters((prev) => ({
...prev,
startDate: startDate || "",
endDate: endDate || "",
}));
}, []);
const toggleCollapse = useCallback((type) => {
setCollapsedFilters((prev) => ({
...prev,
[type]: !prev[type],
}));
}, []);
const handleApplyFilters = useCallback(() => {
const payload = {
buildingIds:
selectedFilters.building.length > 0
? selectedFilters.building.map((item) => item[0])
: null,
floorIds:
selectedFilters.floor.length > 0
? selectedFilters.floor.map((item) => item[0])
: null,
workAreaIds:
selectedFilters.workArea.length > 0
? selectedFilters.workArea.map((item) => item[0])
: null,
workCategoryIds:
selectedFilters.workCategory.length > 0
? selectedFilters.workCategory.map((item) => item[0])
: null,
activityIds:
selectedFilters.activity.length > 0
? selectedFilters.activity.map((item) => item[0])
: null,
uploadedByIds:
selectedFilters.uploadedBy.length > 0
? selectedFilters.uploadedBy.map((item) => item[0])
: null,
startDate: selectedFilters.startDate || null,
endDate: selectedFilters.endDate || null,
};
setAppliedFilters(payload);
setIsFilterPanelOpen(false);
}, [selectedFilters]);
const handleClearAllFilters = useCallback(() => {
const initialStateSelected = {
building: [],
floor: [],
activity: [],
uploadedBy: [],
workCategory: [],
workArea: [],
startDate: "",
endDate: "",
};
setSelectedFilters(initialStateSelected);
const initialStateApplied = {
buildingIds: null,
floorIds: null,
activityIds: null,
uploadedByIds: null,
workCategoryIds: null,
workAreaIds: null,
startDate: null,
endDate: null,
};
setAppliedFilters(initialStateApplied);
}, []);
const filteredImages = images.filter((img) => {
const uploadedAtMoment = moment(img.uploadedAt);
const startDateMoment = appliedFilters.startDate
? moment(appliedFilters.startDate)
: null;
const endDateMoment = appliedFilters.endDate
? moment(appliedFilters.endDate)
: null;
const isWithinDateRange =
(!startDateMoment || uploadedAtMoment.isSameOrAfter(startDateMoment, "day")) &&
(!endDateMoment || uploadedAtMoment.isSameOrBefore(endDateMoment, "day"));
const passesCategoryFilters =
(appliedFilters.buildingIds === null ||
appliedFilters.buildingIds.includes(img.buildingId)) &&
(appliedFilters.floorIds === null ||
appliedFilters.floorIds.includes(img.floorIds)) &&
(appliedFilters.activityIds === null ||
appliedFilters.activityIds.includes(img.activityId)) &&
(appliedFilters.workAreaIds === null ||
appliedFilters.workAreaIds.includes(img.workAreaId)) &&
(appliedFilters.uploadedByIds === null ||
appliedFilters.uploadedByIds.includes(img.uploadedBy?.id)) &&
(appliedFilters.workCategoryIds === null ||
appliedFilters.workCategoryIds.includes(img.workCategoryId));
return isWithinDateRange && passesCategoryFilters;
});
const imagesByActivityUser = {};
filteredImages.forEach((img) => {
const userName = `${img.uploadedBy?.firstName || ""} ${
img.uploadedBy?.lastName || ""
}`.trim();
const workArea = img.workAreaName || "Unknown";
const key = `${img.activityName}__${userName}__${workArea}`;
if (!imagesByActivityUser[key]) imagesByActivityUser[key] = [];
imagesByActivityUser[key].push(img);
});
const scrollLeft = useCallback((key) => {
imageGroupRefs.current[key]?.scrollBy({ left: -200, behavior: "smooth" });
}, []);
const scrollRight = useCallback((key) => {
imageGroupRefs.current[key]?.scrollBy({ left: 200, behavior: "smooth" });
}, []);
const renderFilterCategory = (label, items, type) => (
<div className={`dropdown ${collapsedFilters[type] ? "collapsed" : ""}`}>
<div className="dropdown-header" onClick={() => toggleCollapse(type)}>
<strong>{label}</strong>
<div className="header-controls">
{type === "dateRange" && (selectedFilters.startDate || selectedFilters.endDate) && (
<button
className="clear-button"
onClick={(e) => {
e.stopPropagation();
setSelectedFilters((prev) => ({ ...prev, startDate: "", endDate: "" }));
}}
>
Clear
</button>
)}
{type !== "dateRange" &&
selectedFilters[type] &&
selectedFilters[type].length > 0 && (
<button
className="clear-button"
onClick={(e) => {
e.stopPropagation();
setSelectedFilters((prev) => ({ ...prev, [type]: [] }));
}}
>
Clear
</button>
)}
<span className="collapse-icon">
{collapsedFilters[type] ? '+' : '-'}
</span>
</div>
</div>
{!collapsedFilters[type] && (
<div className="dropdown-content">
{type === "dateRange" ? (
null
) : (
items.map((item) => {
const itemId = item[0];
const itemName = item[1];
const isChecked = selectedFilters[type].some(
(selectedItem) => selectedItem[0] === itemId
);
return (
<label key={itemId}>
<input
type="checkbox"
checked={isChecked}
onChange={() => toggleFilter(type, itemId, itemName)}
/>
{itemName}
</label>
);
})
)}
</div>
)}
</div>
);
return (
<div className={`gallery-container ${isFilterPanelOpen ? "filter-panel-open" : ""}`}>
<div className="main-content">
<div className="activity-section">
{loading ? (
<div className="spinner-container">
<div className="spinner" />
</div>
) : Object.entries(imagesByActivityUser).length > 0 ? (
Object.entries(imagesByActivityUser).map(([key, imgs]) => {
const [activity, userName, workArea] = key.split("__");
const { buildingName, floorName, uploadedAt, workCategoryName } = imgs[0];
const date = moment(uploadedAt).format("YYYY-MM-DD");
const time = moment(uploadedAt).format("hh:mm A");
return (
<div key={key} className="grouped-section">
<div className="group-heading">
<div className="d-flex flex-column">
<div className="d-flex align-items-center mb-1">
<Avatar
size="xxs"
firstName={imgs[0].uploadedBy?.firstName}
lastName={imgs[0].uploadedBy?.lastName}
className="me-2"
/>
<div className="d-flex flex-column align-items-start">
<strong className="user-name-text">
{imgs[0].uploadedBy?.firstName}{" "}
{imgs[0].uploadedBy?.lastName}
</strong>
<span className="me-2">
{date} {time}
</span>
</div>
</div>
</div>
<div className="location-line">
<div>
{buildingName} &gt; {floorName} &gt; <strong> {workArea} &gt;{" "}
{activity}</strong>
</div>
{workCategoryName && (
<div className="work-category-display ms-2">
<span className="badge bg-label-primary rounded-pill d-flex align-items-center gap-1">
{workCategoryName}
</span>
</div>
)}
</div>
</div>
<div className="image-group-wrapper">
<button
className="scroll-arrow left-arrow"
onClick={() => scrollLeft(key)}
>
&#8249;
</button>
<div
className="image-group-horizontal"
ref={(el) => (imageGroupRefs.current[key] = el)}
>
{imgs.map((img, idx) => {
const hoverDate = moment(img.uploadedAt).format("YYYY-MM-DD");
const hoverTime = moment(img.uploadedAt).format("hh:mm A");
return (
<div
key={img.imageUrl}
className="image-card"
onClick={() =>
openModal(<ImagePop images={imgs} initialIndex={idx} />)
}
onMouseEnter={() => setHoveredImage(img)}
onMouseLeave={() => setHoveredImage(null)}
>
<div className="image-wrapper">
<img src={img.imageUrl} alt={`Image ${idx + 1}`} />
</div>
{hoveredImage === img && (
<div className="image-hover-description">
<p>
<strong>Date:</strong> {hoverDate}
</p>
<p>
<strong>Time:</strong> {hoverTime}
</p>
<p>
<strong>Activity:</strong> {img.activityName}
</p>
</div>
)}
</div>
);
})}
</div>
<button
className="scroll-arrow right-arrow"
onClick={() => scrollRight(key)}
>
&#8250;
</button>
</div>
</div>
);
})
) : (
<p style={{ textAlign: "center", color: "#777", marginTop: "50px" }}>
No images match the selected filters.
</p>
)}
</div>
</div>
<div className="filter-drawer-wrapper">
<button
className={`filter-button btn-primary ${isFilterPanelOpen ? "" : "closed-icon"}`}
onClick={() => setIsFilterPanelOpen(!isFilterPanelOpen)}
ref={filterButtonRef}
>
{isFilterPanelOpen ? (
<>
Filter <span className="ms-1">&#10006;</span> {/* Added ms-1 for spacing */}
</>
) : (
<>
<i className="fa-solid fa-filter ms-1 fs-5"></i>
</>
)}
</button>
<div className={`filter-panel ${isFilterPanelOpen ? "open" : ""}`} ref={filterPanelRef}>
<div className={`dropdown ${collapsedFilters.dateRange ? 'collapsed' : ''}`}>
<div className="dropdown-header" onClick={() => toggleCollapse('dateRange')}>
<strong>Date Range</strong>
<span className="collapse-icon">
{collapsedFilters.dateRange ? '+' : '-'}
</span>
</div>
{!collapsedFilters.dateRange && (
<div className="datepicker" >
<DateRangePicker
onRangeChange={setDateRange}
defaultStartDate={selectedFilters.startDate || yesterday}
defaultEndDate={selectedFilters.endDate || moment().format('YYYY-MM-DD')}
startDate={selectedFilters.startDate}
endDate={selectedFilters.endDate}
/>
</div>
)}
</div>
{renderFilterCategory("Building", buildings, "building")}
{renderFilterCategory("Floor", floors, "floor")}
{renderFilterCategory("Work Area", workAreas, "workArea")}
{renderFilterCategory("Activity", activities, "activity")}
{renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
{renderFilterCategory("Work Category", workCategories, "workCategory")}
<div className="filter-actions">
<button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>
Clear All
</button>
<button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>
Apply Filters
</button>
</div>
</div>
</div>
</div>
);
}; };
export default ImageGallary; export default ImageGallery;

546
src/pages/Gallary/ImageGallery.css Normal file
View File

@ -0,0 +1,546 @@
/* ImageGallery.css */
.gallery-container {
display: grid;
grid-template-columns: 1fr 50px;
gap: 4px;
padding: 25px;
font-family: sans-serif;
height: calc(100vh - 20px);
box-sizing: border-box;
background-color: #f7f9fc;
transition: grid-template-columns 0.3s ease-in-out;
}
.gallery-container.filter-panel-open {
grid-template-columns: 1fr 350px;
}
.main-content {
overflow-y: auto;
max-height: 100%;
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: #a7a7a7 #f1f1f1;
}
.main-content::-webkit-scrollbar {
width: 8px;
}
.main-content::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.main-content::-webkit-scrollbar-thumb {
background: #a7a7a7;
border-radius: 10px;
}
.main-content::-webkit-scrollbar-thumb:hover {
background: #888;
}
.filter-drawer-wrapper {
flex-shrink: 0;
max-height: 100%;
box-sizing: border-box;
position: relative;
scrollbar-width: none;
-ms-overflow-style: none;
}
.filter-drawer-wrapper::-webkit-scrollbar {
display: none;
}
.filter-button {
color: white;
padding: 8px 12px;
font-size: 14px;
border: none;
border-radius: 6px;
cursor: pointer;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: background-color 0.2s ease, box-shadow 0.2s ease, width 0.3s ease-in-out,
height 0.3s ease-in-out, border-radius 0.3s ease-in-out, padding 0.3s ease-in-out;
position: absolute;
top: 0;
right: 0;
height: 40px;
width: 40px;
z-index: 100;
}
.gallery-container.filter-panel-open .filter-button {
width: calc(100% - 1px);
height: auto;
padding: 8px 12px;
border-radius: 6px 6px 0 0;
justify-content: space-between;
}
.filter-button.closed-icon {
padding: 0;
font-size: 20px;
}
.filter-button:hover {
background-color: #4f46e5;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.filter-panel {
display: flex;
flex-direction: column;
gap: 8px;
background-color: #fff;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 100%;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: calc(100% - 40px);
padding-top: 37px;
overflow-y: hidden;
opacity: 0;
transform: translateY(-10px);
transition: max-height 0.3s ease-out, opacity 0.3s ease-out,
transform 0.3s ease-out, border-radius 0.3s ease-in-out;
}
.filter-panel.open {
max-height: calc(100% - 0px);
opacity: 1;
transform: translateY(0);
overflow-y: auto;
padding-bottom: 0px;
/* Adjusted padding-bottom */
}
.dropdown {
transition: all 0.3s ease-in-out;
}
.dropdown-content {
display: block;
position: static;
box-shadow: none;
padding: 4px 10px;
border-radius: 0 0 4px 4px;
max-height: 150px;
/* Default max-height for scrollable dropdowns */
overflow-y: auto;
/* Default overflow for scrollable dropdowns */
transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}
.dropdown.collapsed .dropdown-content {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
}
.dropdown-content::-webkit-scrollbar {
width: 6px;
}
.dropdown-content::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.dropdown-content::-webkit-scrollbar-thumb {
background: #c0c0c0;
border-radius: 10px;
}
.dropdown-content::-webkit-scrollbar-thumb:hover {
background: #a7a7a7;
}
/* --- New styles for Date Range Picker dropdown --- */
.dropdown strong:contains("Date Range") + .header-controls + .dropdown-content {
max-height: none;
/* Remove max-height */
overflow-y: visible;
/* Allow content to dictate height */
}
.dropdown strong:contains("Date Range") + .header-controls + .dropdown-content::-webkit-scrollbar {
display: none;
/* Hide scrollbar for Webkit browsers */
}
/* --- End new styles --- */
.dropdown-content label {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 0px;
font-size: 12px;
font-weight: 500;
color: #333;
cursor: pointer;
transition: background 0.2s;
}
.dropdown-content label:hover {
background-color: #eef2ff;
}
.dropdown-content input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 3px;
border: 1px solid #c7d2fe;
background-color: #fff;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
}
.dropdown-content input[type="checkbox"]:checked {
background-color: #6366f1;
border-color: #6366f1;
}
.dropdown-content input[type="checkbox"]:checked::after {
content: "✔";
font-size: 10px;
color: white;
position: absolute;
}
.dropdown-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 10px;
background-color: #eef2ff;
border-bottom: 1px solid #c7d2fe;
font-weight: bold;
font-size: 13px;
color: #333;
cursor: pointer;
position: sticky;
top: 0;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: background-color 0.3s ease, border-bottom 0.3s ease;
}
.dropdown.collapsed .dropdown-header {
border-bottom: none;
border-radius: 4px;
box-shadow: none;
}
.clear-button {
font-size: 10px;
background: none;
border: none;
color: #6366f1;
cursor: pointer;
padding: 3px 6px;
border-radius: 4px;
transition: background-color 0.2s ease;
flex-shrink: 0;
}
.clear-button:hover {
background-color: #eef2ff;
}
.header-controls {
display: flex;
align-items: center;
gap: 8px;
}
/* New style for the collapse icon */
.collapse-icon {
font-size: 16px; /* Adjust size as needed */
color: #6366f1;
margin-left: 8px; /* Space between clear button and icon */
transition: transform 0.2s ease;
}
.dropdown.collapsed .collapse-icon {
transform: rotate(0deg); /* No rotation for collapsed */
}
/* Original toggle-icon styles (if they still exist and are needed) */
.toggle-icon {
font-size: 10px;
color: #6366f1;
transition: transform 0.2s ease;
}
.dropdown .toggle-icon {
transform: rotate(0deg);
}
.dropdown.collapsed .toggle-icon {
transform: rotate(-90deg);
}
.date-range-inputs {
display: flex;
flex-direction: column;
gap: 10px;
padding: 5px 0;
}
.date-range-inputs label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 500;
color: #333;
}
.date-input {
flex-grow: 1;
padding: 6px 8px;
border: 1px solid #c7d2fe;
border-radius: 4px;
font-size: 12px;
color: #333;
background-color: #fff;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.date-input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.grouped-section {
margin-bottom: 5px;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 10px;
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.group-heading {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 3px;
font-size: 12px;
flex-wrap: wrap;
padding-bottom: 8px;
border-bottom: 1px dashed #eee;
}
.group-heading > div {
margin-right: 15px;
}
.datetime-line {
font-size: 12px;
color: #777;
margin-top: 0px;
}
.location-line {
font-size: 12px;
color: #555;
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.work-category-display {
margin-top: 4px;
padding: 2px 6px;
border-radius: 5px;
font-size: 12px;
color: #555;
}
.image-group-wrapper {
position: relative;
display: flex;
align-items: center;
padding: 0 0px;
}
.image-group-horizontal {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: hidden;
gap: 3px;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
width: 100%;
}
.scroll-arrow {
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
border-radius: 50%;
width: 30px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 18px;
z-index: 10;
position: absolute;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.3s ease, background-color 0.2s ease;
pointer-events: none;
}
.image-group-wrapper:hover .scroll-arrow {
opacity: 1;
pointer-events: auto;
}
.scroll-arrow:hover {
background-color: rgba(0, 0, 0, 0.7);
}
.left-arrow {
left: 5px;
}
.right-arrow {
right: 5px;
}
.image-card {
width: 150px;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
cursor: pointer;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
}
.image-card:hover {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
hr {
display: none;
}
.image-wrapper img {
width: 100%;
height: 100px;
object-fit: cover;
display: block;
border-radius: 8px 8px 0 0;
}
.image-hover-description {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.75);
color: white;
padding: 5px 8px;
box-sizing: border-box;
font-size: 11px;
line-height: 1.4;
text-align: left;
opacity: 0;
transform: translateY(100%);
transition: opacity 0.2s ease-out, transform 0.2s ease-out;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
pointer-events: none;
}
.image-card:hover .image-hover-description {
opacity: 1;
transform: translateY(0);
}
.image-hover-description p {
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
}
.spinner {
border: 6px solid #f3f3f3;
border-top: 6px solid #6658f6;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.filter-actions {
display: flex;
justify-content: end;
margin-top: auto;
padding-top: 10px;
position: sticky;
bottom: 0;
z-index: 10;
padding-bottom: 5px;
gap: 8px;
}
.datepicker {
margin-right: 135px;
margin-top: 6px;
}

9
src/pages/Gallary/ImageGalleryAPI.jsx Normal file
View File

@ -0,0 +1,9 @@
import { api } from "../../utils/axiosClient";
export const ImageGalleryAPI = {
ImagesGet: (projectId, filter) => {
const payloadJsonString = JSON.stringify(filter);
return api.get(`/api/image/images/${projectId}?filter=${payloadJsonString}`)
},
}

103
src/pages/Gallary/ImagePop.css Normal file
View File

@ -0,0 +1,103 @@
.image-modal-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 9999; /* High z-index to ensure it's on top */
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85); /* Dark semi-transparent background */
display: flex;
justify-content: center;
align-items: center;
}
.image-modal-content {
background: #fff;
padding: 24px;
max-width: 90%; /* Responsive max-width */
max-height: 100%; /* Responsive max-height */
border-radius: 12px;
position: relative;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
text-align: center;
display: flex; /* Use flexbox for internal layout */
flex-direction: column;
align-items: center;
justify-content: center;
}
.modal-image {
max-width: 100%;
max-height: 70vh; /* Limits image height to 70% of viewport height */
border-radius: 10px;
object-fit: contain; /* Ensures the whole image is visible without cropping */
margin-bottom: 20px;
flex-shrink: 0; /* Prevent image from shrinking if content is too large */
}
.image-details {
text-align: left;
color: #444;
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 0;
width: 100%; /* Ensure details section takes full width */
}
.image-details p {
margin: 4px 0; /* Reduce vertical space between lines in details */
}
.close-button {
position: absolute;
top: 1px; /* Position relative to the modal content */
right: 8px;
font-size: 30px;
background: none;
border: none;
color: black; /* White color for visibility on dark overlay */
cursor: pointer;
padding: 0;
line-height: 1;
z-index: 10000; /* Ensure it's above everything else */
}
/* Styles for the navigation buttons */
.nav-button {
position: absolute;
top: 50%; /* Vertically center them */
transform: translateY(-50%); /* Adjust for perfect vertical centering */
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
color: white;
border: none;
padding: 10px 15px;
font-size: 30px;
cursor: pointer;
z-index: 1000; /* Ensure buttons are above the image */
border-radius: 50%; /* Make them circular */
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease; /* Smooth hover effect */
}
.nav-button:hover {
background-color: rgba(0, 0, 0, 0.8); /* Darker on hover */
}
.nav-button.prev-button {
left: 0px; /* Position left arrow */
}
.nav-button.next-button {
right: 0px; /* Position right arrow */
}
/* Style for disabled buttons (optional) */
.nav-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}

94
src/pages/Gallary/ImagePop.jsx Normal file
View File

@ -0,0 +1,94 @@
import React, { useState, useEffect } from "react";
import "./ImagePop.css";
import { useModal } from "./ModalContext";
import moment from "moment";
const ImagePop = ({ images, initialIndex = 0 }) => {
const { closeModal } = useModal();
// State to keep track of the currently displayed image's index
const [currentIndex, setCurrentIndex] = useState(initialIndex);
// Effect to update currentIndex if the initialIndex prop changes (e.g., if the modal is reused)
useEffect(() => {
setCurrentIndex(initialIndex);
}, [initialIndex, images]);
// If no images are provided or the array is empty, don't render
if (!images || images.length === 0) return null;
// Get the current image based on currentIndex
const image = images[currentIndex];
// Fallback if for some reason the image at the current index doesn't exist
if (!image) return null;
// Format details for display
const fullName = `${image.uploadedBy?.firstName || ""} ${
image.uploadedBy?.lastName || ""
}`.trim();
const date = moment(image.uploadedAt).format("YYYY-MM-DD");
const time = moment(image.uploadedAt).format("hh:mm A");
// Handler for navigating to the previous image
const handlePrev = () => {
setCurrentIndex((prevIndex) => Math.max(0, prevIndex - 1));
};
// Handler for navigating to the next image
const handleNext = () => {
setCurrentIndex((prevIndex) =>
Math.min(images.length - 1, prevIndex + 1)
);
};
// Determine if previous/next buttons should be enabled/visible
const hasPrev = currentIndex > 0;
const hasNext = currentIndex < images.length - 1;
return (
<div className="image-modal-overlay">
<div className="image-modal-content">
{/* Close button */}
<button className="close-button" onClick={closeModal}>
×
</button>
{/* Previous button, only shown if there's a previous image */}
{hasPrev && (
<button className="nav-button prev-button" onClick={handlePrev}>
&#8249; {/* Unicode for single left angle quotation mark */}
</button>
)}
{/* The main image display */}
<img src={image.imageUrl} alt="Preview" className="modal-image" />
{/* Next button, only shown if there's a next image */}
{hasNext && (
<button className="nav-button next-button" onClick={handleNext}>
&#8250; {/* Unicode for single right angle quotation mark */}
</button>
)}
{/* Image details */}
<div className="image-details">
<p>
<strong>👤 Uploaded By:</strong> {fullName}
</p>
<p>
<strong>📅 Date:</strong> {date} {time}
</p>
<p>
<strong>🏢 Location:</strong> {image.buildingName} &gt;{" "}
{image.floorName} &gt; {image.activityName}
</p>
<p>
<strong>📝 Comments:</strong> {image.comment}
</p>
</div>
</div>
</div>
);
};
export default ImagePop;

23
src/pages/Gallary/ModalContext.jsx Normal file
View File

@ -0,0 +1,23 @@
import React, { createContext, useContext, useState } from "react";
const ModalContext = createContext();
export const ModalProvider1 = ({ children }) => {
const [modalContent, setModalContent] = useState(null);
const openModal = (content) => setModalContent(content);
const closeModal = () => setModalContent(null);
return (
<ModalContext.Provider value={{ openModal, closeModal }}>
{children}
{modalContent && (
<div className="global-modal-wrapper">
{modalContent}
</div>
)}
</ModalContext.Provider>
);
};
export const useModal = () => useContext(ModalContext);

8
src/pages/authentication/AuthWrapper.jsx
View File

@ -14,8 +14,12 @@ export const AuthWrapper = ({ children }) => {
to="/" to="/"
className="app-brand-link gap-2" className="app-brand-link gap-2"
> >
<span className="app-brand-logo demo"> <span className="app-brand-logo rounded-circle ">
<img src="/img/brand/marco.png" alt="marco-logo" /> <img
src="/img/brand/marco.png"
alt="marco-logo"
className="app-brand-logo-login"
/>
</span> </span>
</Link> </Link>
</div> </div>

169
src/pages/authentication/ChangePassword.jsx
View File

@ -52,7 +52,6 @@ const ChangePasswordPage = ({ onClose }) => {
oldPassword: data.oldPassword, oldPassword: data.oldPassword,
newPassword: data.newPassword, newPassword: data.newPassword,
}; };
console.log(formData);
setLoading(true); setLoading(true);
await AuthRepository.changepassword(formData); await AuthRepository.changepassword(formData);
showToast("Your Password changed Successfully", "success"); showToast("Your Password changed Successfully", "success");
@ -72,23 +71,20 @@ const ChangePasswordPage = ({ onClose }) => {
role="dialog" role="dialog"
style={{ display: "flex", backgroundColor: "rgba(0,0,0,0.5)" }} style={{ display: "flex", backgroundColor: "rgba(0,0,0,0.5)" }}
> >
<div <div className="modal-dialog" role="document">
className="modal-dialog" <div className="modal-header">
role="document" {" "}
style={{
maxWidth: "600px",
width: "100%",
}}
>
<div className="modal-content p-4 rounded shadow bg-white position-relative">
{/* Close Button */}
<button <button
type="button" type="button"
className="btn-close position-absolute" class="btn-close"
style={{ top: "30px", right: "25px" }} data-bs-dismiss="modal"
style={{ top: "40px", right: "15px" }}
aria-label="Close" aria-label="Close"
onClick={onClose}
></button> ></button>
</div>
<div className="modal-content p-10 rounded shadow bg-white position-relative">
{/* Close Button */}
<h5 className="mb-2">Change Password</h5> <h5 className="mb-2">Change Password</h5>
<p className="mb-4" style={{ fontSize: "14px" }}> <p className="mb-4" style={{ fontSize: "14px" }}>
@ -97,7 +93,7 @@ const ChangePasswordPage = ({ onClose }) => {
<form onSubmit={handleSubmit(onChangePassword)}> <form onSubmit={handleSubmit(onChangePassword)}>
{/* Old Password */} {/* Old Password */}
<div className="mb-3"> <div className="mb-3 text-start">
<label className="form-label">Old Password</label> <label className="form-label">Old Password</label>
<div className="input-group input-group-merge d-flex align-items-center border rounded px-2"> <div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
<input <input
@ -123,75 +119,75 @@ const ChangePasswordPage = ({ onClose }) => {
)} )}
</div> </div>
<div className="row"> {/* <div className="row"> */}
<div className="mb-3 col-md-6"> <div className="mb-3 text-start">
<label className="form-label">New Password</label> <label className="form-label">New Password</label>
<div className="input-group input-group-merge d-flex align-items-center border rounded px-2"> <div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
<input <input
type={hideNewPass ? "password" : "text"} type={hideNewPass ? "password" : "text"}
className="form-control form-control-sm border-0 shadow-none" className="form-control form-control-sm border-0 shadow-none"
{...register("newPassword")} {...register("newPassword")}
placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
style={{ flex: 1 }} style={{ flex: 1 }}
/> />
<button <button
type="button" type="button"
className="btn btn-link p-0 ms-2" className="btn btn-link p-0 ms-2"
style={{ fontSize: "18px", color: "#6c757d" }} style={{ fontSize: "18px", color: "#6c757d" }}
onClick={() => setHideNewPass(!hideNewPass)} onClick={() => setHideNewPass(!hideNewPass)}
> >
<i <i className={`bx ${hideNewPass ? "bx-hide" : "bx-show"}`} />
className={`bx ${hideNewPass ? "bx-hide" : "bx-show"}`} </button>
/>
</button>
</div>
{errors.newPassword && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.newPassword.message}
</div>
)}
</div> </div>
{errors.newPassword && (
{/* Confirm Password */} <div
<div className="mb-3 col-md-6"> className="danger-text text-start"
<label className="form-label">Confirm New Password</label> style={{ fontSize: "12px" }}
<div className="input-group input-group-merge d-flex align-items-center border rounded px-2"> >
<input {errors.newPassword.message}
type={hideConfirmPass ? "password" : "text"}
className="form-control form-control-sm border-0 shadow-none"
{...register("confirmPassword")}
placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
style={{ flex: 1 }}
/>
<button
type="button"
className="btn btn-link p-0 ms-2"
style={{ fontSize: "18px", color: "#6c757d" }}
onClick={() => setHideConfirmPass(!hideConfirmPass)}
>
<i
className={`bx ${
hideConfirmPass ? "bx-hide" : "bx-show"
}`}
/>
</button>
</div> </div>
{errors.confirmPassword && ( )}
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.confirmPassword.message}
</div>
)}
</div>
</div> </div>
{/* Confirm Password */}
<div className="mb-3 text-start">
<label className="form-label">Confirm New Password</label>
<div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
<input
type={hideConfirmPass ? "password" : "text"}
className="form-control form-control-sm border-0 shadow-none"
{...register("confirmPassword")}
placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
style={{ flex: 1 }}
/>
<button
type="button"
className="btn btn-link p-0 ms-2"
style={{ fontSize: "18px", color: "#6c757d" }}
onClick={() => setHideConfirmPass(!hideConfirmPass)}
>
<i
className={`bx ${hideConfirmPass ? "bx-hide" : "bx-show"}`}
/>
</button>
</div>
{errors.confirmPassword && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.confirmPassword.message}
</div>
)}
</div>
{/* </div> */}
<div className="d-flex justify-content-center pt-2">
Your password must have at least 8 characters and include a lower
case latter, an uppercase letter, a number, and a special
character.
</div>
{/* Action Buttons */} {/* Action Buttons */}
<div className="d-flex justify-content-end pt-2"> <div className="d-flex justify-content-center pt-2">
<button <button
type="submit" type="submit"
className="btn btn-primary btn-sm me-2" className="btn btn-primary btn-sm me-2"
@ -208,21 +204,6 @@ const ChangePasswordPage = ({ onClose }) => {
Cancel Cancel
</button> </button>
</div> </div>
<div className="mb-3 text-start ">
<p className="p-0 m-0">Password must be:</p>
<p className="p-0 m-0">- at least 8 characters long</p>
<p className="p-0 m-0">
- must contain one uppercase, one lowercase letter, at least one
number, at least one special character
</p>
{/* <p className="p-0 m-0">
- must contain at least one lowercase letter
</p>
<p className="p-0 m-0">- must contain at least one number</p>
<p className="p-0 m-0">
- must contain at least one special character
</p> */}
</div>
</form> </form>
</div> </div>
</div> </div>

15
src/pages/project/ProjectDetails.jsx
View File

@ -11,7 +11,11 @@ import ProjectInfra from "../../components/Project/ProjectInfra";
import Loader from "../../components/common/Loader"; import Loader from "../../components/common/Loader";
import WorkPlan from "../../components/Project/WorkPlan"; import WorkPlan from "../../components/Project/WorkPlan";
import Breadcrumb from "../../components/common/Breadcrumb"; import Breadcrumb from "../../components/common/Breadcrumb";
import { cacheData, clearCacheKey, getCachedData } from "../../slices/apiDataManager"; import {
cacheData,
clearCacheKey,
getCachedData,
} from "../../slices/apiDataManager";
import ProjectRepository from "../../repositories/ProjectRepository"; import ProjectRepository from "../../repositories/ProjectRepository";
import { ActivityeRepository } from "../../repositories/MastersRepository"; import { ActivityeRepository } from "../../repositories/MastersRepository";
import "./ProjectDetails.css"; import "./ProjectDetails.css";
@ -24,6 +28,7 @@ import { setProjectId } from "../../slices/localVariablesSlice";
import { ComingSoonPage } from "../Misc/ComingSoonPage"; import { ComingSoonPage } from "../Misc/ComingSoonPage";
import Directory from "../Directory/Directory"; import Directory from "../Directory/Directory";
import eventBus from "../../services/eventBus"; import eventBus from "../../services/eventBus";
import ProjectProgressChart from "../../components/Dashboard/ProjectProgressChart";
const ProjectDetails = () => { const ProjectDetails = () => {
let { projectId } = useParams(); let { projectId } = useParams();
@ -140,7 +145,7 @@ const ProjectDetails = () => {
refetch() refetch()
} }
}, },
[project,handleDataChange] [project, handleDataChange]
); );
useEffect(() => { useEffect(() => {
eventBus.on("project", handler); eventBus.on("project", handler);
@ -155,15 +160,15 @@ const ProjectDetails = () => {
data={[ data={[
{ label: "Home", link: "/dashboard" }, { label: "Home", link: "/dashboard" },
{ label: "Projects", link: "/projects" }, { label: "Projects", link: "/projects" },
{ label: "Details", link: null }, { label: `${project?.name ? project?.name : ""}`, link: null },
]} ]}
></Breadcrumb> ></Breadcrumb>
<div className="row"> <div className="row">
{projectLoading && <p>Loading....</p>} {projectLoading && <p>Loading....</p>}
{!projectLoading && project && ( {/* {!projectLoading && project && (
<ProjectBanner project_data={project}></ProjectBanner> <ProjectBanner project_data={project}></ProjectBanner>
)} )} */}
<ProjectNav <ProjectNav
onPillClick={handlePillClick} onPillClick={handlePillClick}

2
src/router/AppRoutes.jsx
View File

@ -75,7 +75,7 @@ const router = createBrowserRouter(
{ path: "/activities/records/:projectId?", element: <DailyTask /> }, { path: "/activities/records/:projectId?", element: <DailyTask /> },
{ path: "/activities/task", element: <TaskPlannng /> }, { path: "/activities/task", element: <TaskPlannng /> },
{ path: "/activities/reports", element: <Reports /> }, { path: "/activities/reports", element: <Reports /> },
{ path: "/activities/gallary", element: <ImageGallary /> }, { path: "/gallary", element: <ImageGallary /> },
{ path: "/masters", element: <MasterPage /> }, { path: "/masters", element: <MasterPage /> },
{ path: "/help/support", element: <Support /> }, { path: "/help/support", element: <Support /> },
{ path: "/help/docs", element: <Documentation /> }, { path: "/help/docs", element: <Documentation /> },