Compare commits
No commits in common. "58187db80ad7abe46ea83ea610c8a8610c5528c4" and "10ee3796d3cd3fdc3b4809048cd02d06ddba403a" have entirely different histories.
58187db80a
...
10ee3796d3
10
index.html
10
index.html
@ -1,6 +1,11 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" dir="ltr"
|
<html lang="en" lang="en"
|
||||||
data-theme="theme-default" data-assets-path="/assets/" data-template="vertical-menu-template" data-style="light">
|
class="light-style layout-navbar-fixed layout-menu-fixed layout-compact"
|
||||||
|
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" />
|
||||||
@ -25,7 +30,6 @@
|
|||||||
<!-- 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" />
|
||||||
|
|||||||
@ -1,12 +0,0 @@
|
|||||||
: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);
|
|
||||||
}
|
|
||||||
@ -1,3 +1,7 @@
|
|||||||
|
/*
|
||||||
|
* demo.css
|
||||||
|
* File include item demo only specific css only
|
||||||
|
******************************************************************************/
|
||||||
#root {
|
#root {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@ -16,28 +20,21 @@
|
|||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu .app-brand {
|
.menu .app-brand.demo {
|
||||||
height: 64px;
|
height: 64px;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-brand-logo svg {
|
.app-brand-logo.demo svg {
|
||||||
width: 22px;
|
width: 22px;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-brand-logo-sidebar {
|
.app-brand-logo-sidebar {
|
||||||
width: 45px;
|
width: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-brand-logo-login {
|
.app-brand-text.demo {
|
||||||
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; */
|
||||||
@ -64,6 +61,39 @@
|
|||||||
* 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;
|
||||||
@ -74,6 +104,30 @@
|
|||||||
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;
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
@ -1,3 +1,23 @@
|
|||||||
|
/*
|
||||||
|
* 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
|
||||||
@ -23,6 +43,43 @@
|
|||||||
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;
|
||||||
@ -32,3 +89,41 @@
|
|||||||
[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;
|
||||||
|
}
|
||||||
|
|||||||
@ -4,15 +4,12 @@ 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(DefaultRange);
|
const [range, setRange] = useState("15D");
|
||||||
const [showAllEmployees, setShowAllEmployees] = useState(false);
|
const [showAllEmployees, setShowAllEmployees] = useState(false);
|
||||||
|
|
||||||
const getDaysFromRange = (range) => {
|
const getDaysFromRange = (range) => {
|
||||||
@ -85,7 +82,7 @@ const ProjectProgressChart = ({
|
|||||||
: selectedProjectData?.name;
|
: selectedProjectData?.name;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="card">
|
<div className="card h-100">
|
||||||
<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 */}
|
||||||
@ -96,7 +93,6 @@ 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">
|
||||||
{ShowAllProject == true && (
|
|
||||||
<div className="form-check form-switch mb-1 d-flex align-items-center">
|
<div className="form-check form-switch mb-1 d-flex align-items-center">
|
||||||
<input
|
<input
|
||||||
className="form-check-input"
|
className="form-check-input"
|
||||||
@ -113,7 +109,6 @@ const ProjectProgressChart = ({
|
|||||||
All Projects
|
All Projects
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</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>
|
||||||
|
|||||||
@ -19,10 +19,6 @@ 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);
|
||||||
@ -131,8 +127,6 @@ 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">
|
||||||
@ -155,15 +149,11 @@ 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="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"
|
className="bx bxs-edit bx-sm me-1 text-primary cursor-pointer"
|
||||||
onClick={() => setEditing(true)}
|
onClick={() => setEditing(true)}
|
||||||
></i>
|
></i>
|
||||||
|
|
||||||
|
|||||||
@ -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-primary cursor-pointer"
|
className="bx bx-recycle me-2 text-success cursor-pointer"
|
||||||
onClick={handleRestore}
|
onClick={handleRestore}
|
||||||
title="Restore"
|
title="Restore"
|
||||||
></i>
|
></i>
|
||||||
|
|||||||
@ -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">
|
<div className="app-brand demo">
|
||||||
<a href="index.html" className="app-brand-link">
|
<a href="index.html" className="app-brand-link">
|
||||||
<span className="app-brand-logo">
|
<span className="app-brand-logo demo">
|
||||||
<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 menu-text fw-bolder ms-2">Marco</span>
|
<span className="app-brand-text demo 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">
|
||||||
|
|||||||
@ -4,28 +4,40 @@ import menuData from "../../data/menuData.json";
|
|||||||
import {getCachedProfileData} from "../../slices/apiDataManager";
|
import {getCachedProfileData} from "../../slices/apiDataManager";
|
||||||
|
|
||||||
const Sidebar = () => {
|
const Sidebar = () => {
|
||||||
const navigate = useNavigate();
|
// const logineUser = getCachedProfileData()
|
||||||
|
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" style={{ paddingLeft: "30px" }}>
|
<div className="app-brand demo">
|
||||||
<Link to="/dashboard" className="app-brand-link">
|
<Link to="/dashboard" className="app-brand-link">
|
||||||
<span className="app-brand-logo rounded-circle app-brand-logo-border">
|
<span className="app-brand-logo demo">
|
||||||
<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 menu-text fw-bold ms-2">PMS</span>
|
<span className="app-brand-text demo menu-text fw-bold ms-2">
|
||||||
|
PMS
|
||||||
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<a className="layout-menu-toggle menu-link text-large ms-auto">
|
<a
|
||||||
|
|
||||||
|
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>
|
||||||
@ -44,6 +56,87 @@ 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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -10,26 +10,12 @@ 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">
|
||||||
<ul className="list-unstyled my-3 ps-2">
|
<small className="card-text text-uppercase text-muted small">
|
||||||
<li className="d-flex align-items-center mb-3">
|
Profile
|
||||||
<i className="bx bx-cog"></i>
|
</small>
|
||||||
<span className="fw-medium mx-2">Name:</span>{" "}
|
<ul className="list-unstyled my-3">
|
||||||
<span>{projects_Details.name}</span>
|
<li className="d-flex align-items-center mb-4">
|
||||||
</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> {projects_Details.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>
|
||||||
@ -38,7 +24,7 @@ const AboutProject = () => {
|
|||||||
: "N/A"}
|
: "N/A"}
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="d-flex align-items-center mb-3">
|
<li className="d-flex align-items-center mb-4">
|
||||||
<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>
|
||||||
@ -47,18 +33,18 @@ const AboutProject = () => {
|
|||||||
: "N/A"}
|
: "N/A"}
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="d-flex align-items-center mb-3">
|
<li className="d-flex align-items-center mb-2">
|
||||||
<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-3">
|
<li className="d-flex align-items-center mb-4">
|
||||||
<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-3">
|
<li className="d-flex flex-column align-items-start mb-4">
|
||||||
<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>
|
||||||
|
|||||||
@ -20,9 +20,6 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
|
|||||||
const [addressLength, setAddressLength] = useState(0);
|
const [addressLength, setAddressLength] = useState(0);
|
||||||
const maxAddressLength = 500;
|
const maxAddressLength = 500;
|
||||||
|
|
||||||
const ACTIVE_STATUS_ID = "b74da4c2-d07e-46f2-9919-e75e49b12731";
|
|
||||||
const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
|
|
||||||
|
|
||||||
const projectSchema = z
|
const projectSchema = z
|
||||||
.object({
|
.object({
|
||||||
...(project?.id ? { id: z.string().optional() } : {}),
|
...(project?.id ? { id: z.string().optional() } : {}),
|
||||||
@ -54,7 +51,7 @@ const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
|
|||||||
(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
|
||||||
@ -79,12 +76,7 @@ const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
|
|||||||
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",
|
||||||
});
|
});
|
||||||
@ -108,14 +100,6 @@ const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
|
|||||||
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 );
|
||||||
@ -264,9 +248,8 @@ const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
|
|||||||
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>
|
||||||
|
|||||||
@ -1,87 +1,34 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import {
|
import {useEmployeesByProjectAllocated, useProjects} from "../../hooks/useProjects";
|
||||||
useEmployeesByProjectAllocated,
|
|
||||||
useProjects,
|
|
||||||
} from "../../hooks/useProjects";
|
|
||||||
import {formatNumber} from "../../utils/dateUtils";
|
import {formatNumber} from "../../utils/dateUtils";
|
||||||
import ProgressBar from "../common/ProgressBar";
|
|
||||||
|
|
||||||
const ProjectOverview = ({project}) =>{
|
const ProjectOverview = ({project}) =>{
|
||||||
const { projects } = useProjects();
|
const {projects} = useProjects()
|
||||||
|
|
||||||
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-3">
|
<li className="d-flex align-items-center mb-4">
|
||||||
<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>
|
<span>{formatNumber(project_detail?.plannedWork)
|
||||||
|
}</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="d-flex align-items-center mb-3">
|
<li className="d-flex align-items-center mb-4">
|
||||||
<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 mb-3">
|
<li className="d-flex align-items-center">
|
||||||
<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.completedWork
|
|
||||||
)
|
|
||||||
) || 0}{" "} */}
|
|
||||||
{
|
|
||||||
(formatNumber(project_detail.plannedWork),
|
|
||||||
"/",
|
|
||||||
formatNumber(project_detail.completedWork))
|
|
||||||
}
|
|
||||||
% 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> */}
|
|
||||||
<ProgressBar
|
|
||||||
completedWork={formatNumber(project_detail?.completedWork)}
|
|
||||||
plannedWork={formatNumber(project_detail?.plannedWork)}
|
|
||||||
className="m-0 text-info"
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import React, { useEffect, useRef } from "react";
|
|||||||
const DateRangePicker = ({
|
const DateRangePicker = ({
|
||||||
onRangeChange,
|
onRangeChange,
|
||||||
DateDifference = 7,
|
DateDifference = 7,
|
||||||
endDateMode = "yesterday",
|
endDateMode = "yesterday", // "today" or "yesterday"
|
||||||
}) => {
|
}) => {
|
||||||
const inputRef = useRef(null);
|
const inputRef = useRef(null);
|
||||||
|
|
||||||
@ -13,11 +13,8 @@ const DateRangePicker = ({
|
|||||||
endDate.setDate(endDate.getDate() - 1);
|
endDate.setDate(endDate.getDate() - 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
endDate.setHours(0, 0, 0, 0);
|
const startDate = new Date();
|
||||||
|
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",
|
||||||
@ -28,8 +25,8 @@ const DateRangePicker = ({
|
|||||||
static: true,
|
static: true,
|
||||||
clickOpens: true,
|
clickOpens: true,
|
||||||
onChange: (selectedDates, dateStr) => {
|
onChange: (selectedDates, dateStr) => {
|
||||||
const [startDateString, endDateString] = dateStr.split(" to ");
|
const [startDate, endDate] = dateStr.split(" to ");
|
||||||
onRangeChange?.({ startDate: startDateString, endDate: endDateString });
|
onRangeChange?.({ startDate, endDate });
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -46,7 +46,11 @@
|
|||||||
"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,
|
||||||
@ -59,12 +63,6 @@
|
|||||||
"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",
|
||||||
|
|||||||
@ -8,7 +8,6 @@ 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(
|
||||||
@ -17,9 +16,7 @@ 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>
|
||||||
|
|||||||
@ -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-2">
|
<div className="row mx-0 px-0 align-items-center mt-0">
|
||||||
<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: "550px" }}>
|
<div className="dropdown-menu p-0" style={{ minWidth: "700px" }}>
|
||||||
{/* Scrollable Filter Content */}
|
{/* Scrollable Filter Content */}
|
||||||
<div
|
<div
|
||||||
className="p-3"
|
className="p-3"
|
||||||
@ -319,19 +319,18 @@ const DirectoryPageHeader = ({
|
|||||||
>
|
>
|
||||||
<div className="d-flex gap-3">
|
<div className="d-flex gap-3">
|
||||||
{/* Created By */}
|
{/* Created By */}
|
||||||
<div style={{ flexBasis: "30%", maxHeight: "260px", overflowY: "auto" }}>
|
<div style={{ flex: 0.50, 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 form-check-input-sm"
|
className="form-check-input"
|
||||||
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}
|
||||||
@ -341,19 +340,18 @@ const DirectoryPageHeader = ({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Organization */}
|
{/* Organization */}
|
||||||
<div style={{ maxHeight: "260px", overflowY: "auto",overflowX: "hidden", }}>
|
<div style={{ flex: 1, 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 form-check-input-sm"
|
className="form-check-input"
|
||||||
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}
|
||||||
@ -446,12 +444,11 @@ 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 form-check-input-sm"
|
className="form-check-input"
|
||||||
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}
|
||||||
@ -466,12 +463,11 @@ 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 form-check-input-sm"
|
className="form-check-input"
|
||||||
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}
|
||||||
|
|||||||
@ -1,510 +1,8 @@
|
|||||||
// ImageGallery.js
|
import React from "react";
|
||||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
import { ComingSoonPage } from "../Misc/ComingSoonPage";
|
||||||
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 ImageGallery = () => {
|
const ImageGallary = () => {
|
||||||
const [images, setImages] = useState([]);
|
return <ComingSoonPage></ComingSoonPage>;
|
||||||
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);
|
export default ImageGallary;
|
||||||
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} > {floorName} > <strong> {workArea} >{" "}
|
|
||||||
{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)}
|
|
||||||
>
|
|
||||||
‹
|
|
||||||
</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)}
|
|
||||||
>
|
|
||||||
›
|
|
||||||
</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">✖</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 ImageGallery;
|
|
||||||
|
|||||||
@ -1,546 +0,0 @@
|
|||||||
/* 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;
|
|
||||||
}
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
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}`)
|
|
||||||
},
|
|
||||||
}
|
|
||||||
@ -1,103 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
@ -1,94 +0,0 @@
|
|||||||
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}>
|
|
||||||
‹ {/* 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}>
|
|
||||||
› {/* 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} >{" "}
|
|
||||||
{image.floorName} > {image.activityName}
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<strong>📝 Comments:</strong> {image.comment}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ImagePop;
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
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);
|
|
||||||
@ -14,12 +14,8 @@ export const AuthWrapper = ({ children }) => {
|
|||||||
to="/"
|
to="/"
|
||||||
className="app-brand-link gap-2"
|
className="app-brand-link gap-2"
|
||||||
>
|
>
|
||||||
<span className="app-brand-logo rounded-circle ">
|
<span className="app-brand-logo demo">
|
||||||
<img
|
<img src="/img/brand/marco.png" alt="marco-logo" />
|
||||||
src="/img/brand/marco.png"
|
|
||||||
alt="marco-logo"
|
|
||||||
className="app-brand-logo-login"
|
|
||||||
/>
|
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -52,6 +52,7 @@ 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");
|
||||||
@ -71,20 +72,23 @@ 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 className="modal-dialog" role="document">
|
<div
|
||||||
<div className="modal-header">
|
className="modal-dialog"
|
||||||
{" "}
|
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"
|
||||||
class="btn-close"
|
className="btn-close position-absolute"
|
||||||
data-bs-dismiss="modal"
|
style={{ top: "30px", right: "25px" }}
|
||||||
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" }}>
|
||||||
@ -93,7 +97,7 @@ const ChangePasswordPage = ({ onClose }) => {
|
|||||||
|
|
||||||
<form onSubmit={handleSubmit(onChangePassword)}>
|
<form onSubmit={handleSubmit(onChangePassword)}>
|
||||||
{/* Old Password */}
|
{/* Old Password */}
|
||||||
<div className="mb-3 text-start">
|
<div className="mb-3">
|
||||||
<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
|
||||||
@ -119,8 +123,8 @@ const ChangePasswordPage = ({ onClose }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* <div className="row"> */}
|
<div className="row">
|
||||||
<div className="mb-3 text-start">
|
<div className="mb-3 col-md-6">
|
||||||
<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
|
||||||
@ -136,7 +140,9 @@ const ChangePasswordPage = ({ onClose }) => {
|
|||||||
style={{ fontSize: "18px", color: "#6c757d" }}
|
style={{ fontSize: "18px", color: "#6c757d" }}
|
||||||
onClick={() => setHideNewPass(!hideNewPass)}
|
onClick={() => setHideNewPass(!hideNewPass)}
|
||||||
>
|
>
|
||||||
<i className={`bx ${hideNewPass ? "bx-hide" : "bx-show"}`} />
|
<i
|
||||||
|
className={`bx ${hideNewPass ? "bx-hide" : "bx-show"}`}
|
||||||
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{errors.newPassword && (
|
{errors.newPassword && (
|
||||||
@ -150,7 +156,7 @@ const ChangePasswordPage = ({ onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Confirm Password */}
|
{/* Confirm Password */}
|
||||||
<div className="mb-3 text-start">
|
<div className="mb-3 col-md-6">
|
||||||
<label className="form-label">Confirm New Password</label>
|
<label className="form-label">Confirm 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
|
||||||
@ -167,7 +173,9 @@ const ChangePasswordPage = ({ onClose }) => {
|
|||||||
onClick={() => setHideConfirmPass(!hideConfirmPass)}
|
onClick={() => setHideConfirmPass(!hideConfirmPass)}
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
className={`bx ${hideConfirmPass ? "bx-hide" : "bx-show"}`}
|
className={`bx ${
|
||||||
|
hideConfirmPass ? "bx-hide" : "bx-show"
|
||||||
|
}`}
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -180,14 +188,10 @@ const ChangePasswordPage = ({ onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
{/* Action Buttons */}
|
{/* Action Buttons */}
|
||||||
<div className="d-flex justify-content-center pt-2">
|
<div className="d-flex justify-content-end pt-2">
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn btn-primary btn-sm me-2"
|
className="btn btn-primary btn-sm me-2"
|
||||||
@ -204,6 +208,21 @@ 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>
|
||||||
|
|||||||
@ -11,11 +11,7 @@ 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 {
|
import { cacheData, clearCacheKey, getCachedData } from "../../slices/apiDataManager";
|
||||||
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";
|
||||||
@ -28,7 +24,6 @@ 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();
|
||||||
@ -160,15 +155,15 @@ const ProjectDetails = () => {
|
|||||||
data={[
|
data={[
|
||||||
{ label: "Home", link: "/dashboard" },
|
{ label: "Home", link: "/dashboard" },
|
||||||
{ label: "Projects", link: "/projects" },
|
{ label: "Projects", link: "/projects" },
|
||||||
{ label: `${project?.name ? project?.name : ""}`, link: null },
|
{ label: "Details", 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}
|
||||||
|
|||||||
@ -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: "/gallary", element: <ImageGallary /> },
|
{ path: "/activities/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 /> },
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user