Compare commits
No commits in common. "main" and "Kartik_Task#1303" have entirely different histories.
main
...
Kartik_Tas
@ -9,274 +9,4 @@
|
||||
}
|
||||
.table_header_border {
|
||||
border-bottom:2px solid var(--bs-table-border-color) ;
|
||||
}
|
||||
|
||||
|
||||
.text-xxs { font-size: 0.55rem; } /* 8px */
|
||||
.text-xs { font-size: 0.75rem; } /* 12px */
|
||||
.text-sm { font-size: 0.875rem; } /* 14px */
|
||||
.text-base { font-size: 1rem; } /* 16px */
|
||||
.text-lg { font-size: 1.125rem; } /* 18px */
|
||||
.text-xl { font-size: 1.25rem; } /* 20px */
|
||||
.text-2xl { font-size: 1.5rem; } /* 24px */
|
||||
.text-3xl { font-size: 1.875rem; } /* 30px */
|
||||
.text-4xl { font-size: 2.25rem; } /* 36px */
|
||||
.text-5xl { font-size: 3rem; } /* 48px */
|
||||
.text-6xl { font-size: 3.75rem; } /* 60px */
|
||||
.text-7xl { font-size: 4.5rem; } /* 72px */
|
||||
.text-8xl { font-size: 6rem; } /* 96px */
|
||||
.text-9xl { font-size: 8rem; } /* 128px */
|
||||
|
||||
|
||||
/* */
|
||||
|
||||
.w-0 { width: 0px; }
|
||||
.w-px { width: 1px; }
|
||||
.w-1 { width: 0.25rem; } /* 4px */
|
||||
.w-2 { width: 0.5rem; } /* 8px */
|
||||
.w-3 { width: 0.75rem; } /* 12px */
|
||||
.w-4 { width: 1rem; } /* 16px */
|
||||
.w-5 { width: 1.25rem; } /* 20px */
|
||||
.w-6 { width: 1.5rem; } /* 24px */
|
||||
.w-8 { width: 2rem; } /* 32px */
|
||||
.w-10 { width: 2.5rem; } /* 40px */
|
||||
.w-12 { width: 3rem; } /* 48px */
|
||||
.w-16 { width: 4rem; } /* 64px */
|
||||
.w-20 { width: 5rem; } /* 80px */
|
||||
.w-24 { width: 6rem; } /* 96px */
|
||||
.w-32 { width: 8rem; } /* 128px */
|
||||
.w-40 { width: 10rem; } /* 160px */
|
||||
.w-48 { width: 12rem; } /* 192px */
|
||||
.w-56 { width: 14rem; } /* 224px */
|
||||
.w-64 { width: 16rem; } /* 256px */
|
||||
.w-auto { width: auto; }
|
||||
.w-full { width: 100%; }
|
||||
.w-screen{ width: 100vw; }
|
||||
.w-min { width: min-content; }
|
||||
.w-max { width: max-content; }
|
||||
|
||||
|
||||
|
||||
.h-0 { height: 0px; }
|
||||
.h-px { height: 1px; }
|
||||
.h-1 { height: 0.25rem; } /* 4px */
|
||||
.h-2 { height: 0.5rem; } /* 8px */
|
||||
.h-3 { height: 0.75rem; } /* 12px */
|
||||
.h-4 { height: 1rem; } /* 16px */
|
||||
.h-5 { height: 1.25rem; } /* 20px */
|
||||
.h-6 { height: 1.5rem; } /* 24px */
|
||||
.h-8 { height: 2rem; } /* 32px */
|
||||
.h-10 { height: 2.5rem; } /* 40px */
|
||||
.h-12 { height: 3rem; } /* 48px */
|
||||
.h-16 { height: 4rem; } /* 64px */
|
||||
.h-20 { height: 5rem; } /* 80px */
|
||||
.h-24 { height: 6rem; } /* 96px */
|
||||
.h-32 { height: 8rem; } /* 128px */
|
||||
.h-40 { height: 10rem; } /* 160px */
|
||||
.h-48 { height: 12rem; } /* 192px */
|
||||
.h-56 { height: 14rem; } /* 224px */
|
||||
.h-64 { height: 16rem; } /* 256px */
|
||||
.h-auto { height: auto; }
|
||||
.h-full { height: 100%; }
|
||||
.h-screen{ height: 100vh; }
|
||||
.h-min { height: min-content; }
|
||||
.h-max { height: max-content; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ==========================
|
||||
Base Font Sizes (mobile first)
|
||||
========================== */
|
||||
.text-xxs { font-size: 0.55rem; } /* 8px */
|
||||
.text-xs { font-size: 0.75rem; } /* 12px */
|
||||
.text-sm { font-size: 0.875rem; } /* 14px */
|
||||
.text-base{ font-size: 1rem; } /* 16px */
|
||||
.text-lg { font-size: 1.125rem; } /* 18px */
|
||||
.text-xl { font-size: 1.25rem; } /* 20px */
|
||||
.text-2xl { font-size: 1.5rem; } /* 24px */
|
||||
.text-3xl { font-size: 1.875rem; } /* 30px */
|
||||
.text-4xl { font-size: 2.25rem; } /* 36px */
|
||||
.text-5xl { font-size: 3rem; } /* 48px */
|
||||
.text-6xl { font-size: 3.75rem; } /* 60px */
|
||||
.text-7xl { font-size: 4.5rem; } /* 72px */
|
||||
.text-8xl { font-size: 6rem; } /* 96px */
|
||||
.text-9xl { font-size: 8rem; } /* 128px */
|
||||
|
||||
/* ==========================
|
||||
Base Heights
|
||||
========================== */
|
||||
.h-0 { height: 0; }
|
||||
.h-px { height: 1px; }
|
||||
.h-1 { height: 0.25rem; } /* 4px */
|
||||
.h-2 { height: 0.5rem; } /* 8px */
|
||||
.h-3 { height: 0.75rem; } /* 12px */
|
||||
.h-4 { height: 1rem; } /* 16px */
|
||||
.h-5 { height: 1.25rem; } /* 20px */
|
||||
.h-6 { height: 1.5rem; } /* 24px */
|
||||
.h-8 { height: 2rem; } /* 32px */
|
||||
.h-10 { height: 2.5rem; } /* 40px */
|
||||
.h-12 { height: 3rem; } /* 48px */
|
||||
.h-16 { height: 4rem; } /* 64px */
|
||||
.h-20 { height: 5rem; } /* 80px */
|
||||
.h-24 { height: 6rem; } /* 96px */
|
||||
.h-32 { height: 8rem; } /* 128px */
|
||||
.h-40 { height: 10rem; } /* 160px */
|
||||
.h-48 { height: 12rem; } /* 192px */
|
||||
.h-56 { height: 14rem; } /* 224px */
|
||||
.h-64 { height: 16rem; } /* 256px */
|
||||
.h-full { height: 100%; }
|
||||
.h-screen{ height: 100vh; }
|
||||
|
||||
/* ==========================
|
||||
Base Widths
|
||||
========================== */
|
||||
.w-0 { width: 0; }
|
||||
.w-px { width: 1px; }
|
||||
.w-1 { width: 0.25rem; }
|
||||
.w-2 { width: 0.5rem; }
|
||||
.w-3 { width: 0.75rem; }
|
||||
.w-4 { width: 1rem; }
|
||||
.w-5 { width: 1.25rem; }
|
||||
.w-6 { width: 1.5rem; }
|
||||
.w-8 { width: 2rem; }
|
||||
.w-10 { width: 2.5rem; }
|
||||
.w-12 { width: 3rem; }
|
||||
.w-16 { width: 4rem; }
|
||||
.w-20 { width: 5rem; }
|
||||
.w-24 { width: 6rem; }
|
||||
.w-32 { width: 8rem; }
|
||||
.w-40 { width: 10rem; }
|
||||
.w-48 { width: 12rem; }
|
||||
.w-56 { width: 14rem; }
|
||||
.w-64 { width: 16rem; }
|
||||
.w-full { width: 100%; }
|
||||
.w-screen{ width: 100vw; }
|
||||
|
||||
/* ==========================
|
||||
Responsive Variants
|
||||
========================== */
|
||||
@media (min-width: 576px) { /* sm */
|
||||
/* Font */
|
||||
.text-xxs-sm { font-size: 0.55rem; }
|
||||
.text-xs-sm { font-size: 0.75rem; }
|
||||
.text-sm-sm { font-size: 0.875rem; }
|
||||
.text-base-sm{ font-size: 1rem; }
|
||||
.text-lg-sm { font-size: 1.125rem; }
|
||||
.text-xl-sm { font-size: 1.25rem; }
|
||||
.text-2xl-sm{ font-size: 1.5rem; }
|
||||
|
||||
/* Height */
|
||||
.h-1-sm{ height: 0.25rem; }
|
||||
.h-2-sm{ height: 0.5rem; }
|
||||
.h-3-sm{ height: 0.75rem; }
|
||||
.h-4-sm{ height: 1rem; }
|
||||
.h-5-sm{ height: 1.25rem; }
|
||||
.h-6-sm{ height: 1.5rem; }
|
||||
.h-8-sm{ height: 2rem; }
|
||||
.h-10-sm{ height: 2.5rem; }
|
||||
|
||||
/* Width */
|
||||
.w-1-sm{ width: 0.25rem; }
|
||||
.w-2-sm{ width: 0.5rem; }
|
||||
.w-3-sm{ width: 0.75rem; }
|
||||
.w-4-sm{ width: 1rem; }
|
||||
.w-5-sm{ width: 1.25rem; }
|
||||
.w-6-sm{ width: 1.5rem; }
|
||||
.w-8-sm{ width: 2rem; }
|
||||
.w-10-sm{ width: 2.5rem; }
|
||||
}
|
||||
|
||||
@media (min-width: 768px) { /* md */
|
||||
/* Font */
|
||||
.text-xxs-md { font-size: 0.55rem; }
|
||||
.text-xs-md { font-size: 0.75rem; }
|
||||
.text-sm-md { font-size: 0.875rem; }
|
||||
.text-base-md{ font-size: 1rem; }
|
||||
.text-lg-md { font-size: 1.125rem; }
|
||||
.text-xl-md { font-size: 1.25rem; }
|
||||
.text-2xl-md{ font-size: 1.5rem; }
|
||||
|
||||
/* Height */
|
||||
.h-1-md{ height: 0.25rem; }
|
||||
.h-2-md{ height: 0.5rem; }
|
||||
.h-3-md{ height: 0.75rem; }
|
||||
.h-4-md{ height: 1rem; }
|
||||
.h-5-md{ height: 1.25rem; }
|
||||
.h-6-md{ height: 1.5rem; }
|
||||
.h-8-md{ height: 2rem; }
|
||||
.h-10-md{ height: 2.5rem; }
|
||||
|
||||
/* Width */
|
||||
.w-1-md{ width: 0.25rem; }
|
||||
.w-2-md{ width: 0.5rem; }
|
||||
.w-3-md{ width: 0.75rem; }
|
||||
.w-4-md{ width: 1rem; }
|
||||
.w-5-md{ width: 1.25rem; }
|
||||
.w-6-md{ width: 1.5rem; }
|
||||
.w-8-md{ width: 2rem; }
|
||||
.w-10-md{ width: 2.5rem; }
|
||||
}
|
||||
|
||||
@media (min-width: 992px) { /* lg */
|
||||
/* Font */
|
||||
.text-xxs-lg { font-size: 0.55rem; }
|
||||
.text-xs-lg { font-size: 0.75rem; }
|
||||
.text-sm-lg { font-size: 0.875rem; }
|
||||
.text-base-lg{ font-size: 1rem; }
|
||||
.text-lg-lg { font-size: 1.125rem; }
|
||||
.text-xl-lg { font-size: 1.25rem; }
|
||||
.text-2xl-lg{ font-size: 1.5rem; }
|
||||
|
||||
/* Height */
|
||||
.h-1-lg{ height: 0.25rem; }
|
||||
.h-2-lg{ height: 0.5rem; }
|
||||
.h-3-lg{ height: 0.75rem; }
|
||||
.h-4-lg{ height: 1rem; }
|
||||
.h-5-lg{ height: 1.25rem; }
|
||||
.h-6-lg{ height: 1.5rem; }
|
||||
.h-8-lg{ height: 2rem; }
|
||||
.h-10-lg{ height: 2.5rem; }
|
||||
|
||||
/* Width */
|
||||
.w-1-lg{ width: 0.25rem; }
|
||||
.w-2-lg{ width: 0.5rem; }
|
||||
.w-3-lg{ width: 0.75rem; }
|
||||
.w-4-lg{ width: 1rem; }
|
||||
.w-5-lg{ width: 1.25rem; }
|
||||
.w-6-lg{ width: 1.5rem; }
|
||||
.w-8-lg{ width: 2rem; }
|
||||
.w-10-lg{ width: 2.5rem; }
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) { /* xl */
|
||||
/* Font */
|
||||
.text-xxs-xl { font-size: 0.55rem; }
|
||||
.text-xs-xl { font-size: 0.75rem; }
|
||||
.text-sm-xl { font-size: 0.875rem; }
|
||||
.text-base-xl{ font-size: 1rem; }
|
||||
.text-lg-xl { font-size: 1.125rem; }
|
||||
.text-xl-xl { font-size: 1.25rem; }
|
||||
.text-2xl-xl{ font-size: 1.5rem; }
|
||||
|
||||
/* Height */
|
||||
.h-1-xl{ height: 0.25rem; }
|
||||
.h-2-xl{ height: 0.5rem; }
|
||||
.h-3-xl{ height: 0.75rem; }
|
||||
.h-4-xl{ height: 1rem; }
|
||||
.h-5-xl{ height: 1.25rem; }
|
||||
.h-6-xl{ height: 1.5rem; }
|
||||
.h-8-xl{ height: 2rem; }
|
||||
.h-10-xl{ height: 2.5rem; }
|
||||
|
||||
/* Width */
|
||||
.w-1-xl{ width: 0.25rem; }
|
||||
.w-2-xl{ width: 0.5rem; }
|
||||
.w-3-xl{ width: 0.75rem; }
|
||||
.w-4-xl{ width: 1rem; }
|
||||
.w-5-xl{ width: 1.25rem; }
|
||||
.w-6-xl{ width: 1.5rem; }
|
||||
.w-8-xl{ width: 2rem; }
|
||||
.w-10-xl{ width: 2.5rem; }
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
4
public/assets/vendor/css/core.css
vendored
4
public/assets/vendor/css/core.css
vendored
@ -18613,10 +18613,6 @@ li:not(:first-child) .dropdown-item,
|
||||
min-height: 70vh !important;
|
||||
}
|
||||
|
||||
.modal-min-h{
|
||||
min-height: 60vh !important;
|
||||
}
|
||||
|
||||
.flex-fill {
|
||||
flex: 1 1 auto !important;
|
||||
}
|
||||
|
||||
@ -1,20 +1,17 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { useOrganizationModal } from "./hooks/useOrganization";
|
||||
import OrganizationModal from "./components/Organization/OrganizationModal";
|
||||
import { useAuthModal, useModal } from "./hooks/useAuth";
|
||||
import { useAuthModal } from "./hooks/useAuth";
|
||||
import SwitchTenant from "./pages/authentication/SwitchTenant";
|
||||
import ChangePasswordPage from "./pages/authentication/ChangePassword";
|
||||
|
||||
const ModalProvider = () => {
|
||||
const { isOpen, onClose } = useOrganizationModal();
|
||||
const { isOpen: isAuthOpen } = useAuthModal();
|
||||
const {isOpen:isChangePass} = useModal("ChangePassword")
|
||||
|
||||
return (
|
||||
<>
|
||||
{isOpen && <OrganizationModal />}
|
||||
{isAuthOpen && <SwitchTenant />}
|
||||
{isChangePass && <ChangePasswordPage /> }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -12,7 +12,7 @@ import { useQueryClient } from "@tanstack/react-query";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
|
||||
const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizationId, }) => {
|
||||
const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizationId, includeInactive, date }) => {
|
||||
const queryClient = useQueryClient();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
@ -24,7 +24,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
|
||||
loading: attLoading,
|
||||
recall: attrecall,
|
||||
isFetching
|
||||
} = useAttendance(selectedProject, organizationId);
|
||||
} = useAttendance(selectedProject, organizationId, includeInactive, date);
|
||||
const filteredAttendance = ShowPending
|
||||
? attendance?.filter(
|
||||
(att) => att?.checkInTime !== null && att?.checkOutTime === null
|
||||
|
||||
@ -5,11 +5,7 @@ import { convertShortTime } from "../../utils/dateUtils";
|
||||
import RenderAttendanceStatus from "./RenderAttendanceStatus";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import DateRangePicker from "../common/DateRangePicker";
|
||||
import {
|
||||
clearCacheKey,
|
||||
getCachedData,
|
||||
useSelectedProject,
|
||||
} from "../../slices/apiDataManager";
|
||||
import { clearCacheKey, getCachedData, useSelectedProject } from "../../slices/apiDataManager";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import AttendanceRepository from "../../repositories/AttendanceRepository";
|
||||
import { useAttendancesLogs } from "../../hooks/useAttendance";
|
||||
@ -37,142 +33,223 @@ const usePagination = (data, itemsPerPage) => {
|
||||
};
|
||||
};
|
||||
|
||||
const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
|
||||
const selectedProject = useSelectedProject();
|
||||
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
|
||||
const dispatch = useDispatch();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showPending, setShowPending] = useState(false);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
|
||||
// const selectedProject = useSelector(
|
||||
// (store) => store.localVariables.projectId
|
||||
// );
|
||||
const selectedProject = useSelectedProject();
|
||||
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
|
||||
const dispatch = useDispatch();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showPending, setShowPending] = useState(false)
|
||||
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const [processedData, setProcessedData] = useState([]);
|
||||
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
const isSameDay = (dateStr) => {
|
||||
if (!dateStr) return false;
|
||||
const d = new Date(dateStr);
|
||||
d.setHours(0, 0, 0, 0);
|
||||
return d.getTime() === today.getTime();
|
||||
};
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
|
||||
const isBeforeToday = (dateStr) => {
|
||||
if (!dateStr) return false;
|
||||
const d = new Date(dateStr);
|
||||
d.setHours(0, 0, 0, 0);
|
||||
return d.getTime() < today.getTime();
|
||||
};
|
||||
const isSameDay = (dateStr) => {
|
||||
if (!dateStr) return false;
|
||||
const d = new Date(dateStr);
|
||||
d.setHours(0, 0, 0, 0);
|
||||
return d.getTime() === today.getTime();
|
||||
};
|
||||
|
||||
const sortByName = (a, b) => {
|
||||
const nameA = (a.firstName + a.lastName).toLowerCase();
|
||||
const nameB = (b.firstName + b.lastName).toLowerCase();
|
||||
return nameA.localeCompare(nameB);
|
||||
};
|
||||
const isBeforeToday = (dateStr) => {
|
||||
if (!dateStr) return false;
|
||||
const d = new Date(dateStr);
|
||||
d.setHours(0, 0, 0, 0);
|
||||
return d.getTime() < today.getTime();
|
||||
};
|
||||
|
||||
const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
|
||||
selectedProject,
|
||||
dateRange.startDate,
|
||||
dateRange.endDate,
|
||||
organizationId
|
||||
);
|
||||
const sortByName = (a, b) => {
|
||||
const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
|
||||
const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
|
||||
return nameA?.localeCompare(nameB);
|
||||
};
|
||||
|
||||
const processedData = useMemo(() => {
|
||||
const filteredData = showPending
|
||||
? data.filter((item) => item.checkOutTime === null)
|
||||
: data;
|
||||
|
||||
const group1 = filteredData.filter((d) => d.activity === 1 && isSameDay(d.checkInTime)).sort(sortByName);
|
||||
const group2 = filteredData.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime)).sort(sortByName);
|
||||
const group3 = filteredData.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime)).sort(sortByName);
|
||||
const group4 = filteredData.filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime));
|
||||
const group5 = filteredData.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime)).sort(sortByName);
|
||||
const group6 = filteredData.filter((d) => d.activity === 5).sort(sortByName);
|
||||
|
||||
const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
|
||||
|
||||
const groupedByDate = sortedList.reduce((acc, item) => {
|
||||
const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
|
||||
if (date) {
|
||||
acc[date] = acc[date] || [];
|
||||
acc[date].push(item);
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
|
||||
return sortedDates.flatMap((date) => groupedByDate[date]);
|
||||
}, [data, showPending]);
|
||||
|
||||
const filteredSearchData = useMemo(() => {
|
||||
if (!searchTerm) return processedData;
|
||||
|
||||
const lowercased = searchTerm.toLowerCase();
|
||||
return processedData.filter((item) =>
|
||||
`${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased)
|
||||
const {
|
||||
data = [],
|
||||
isLoading,
|
||||
error,
|
||||
refetch,
|
||||
isFetching,
|
||||
} = useAttendancesLogs(
|
||||
selectedProject,
|
||||
dateRange.startDate,
|
||||
dateRange.endDate,
|
||||
organizationId
|
||||
);
|
||||
}, [processedData, searchTerm]);
|
||||
const filtering = (data) => {
|
||||
const filteredData = showPending
|
||||
? data.filter((item) => item.checkOutTime === null)
|
||||
: data;
|
||||
|
||||
const {
|
||||
currentPage,
|
||||
totalPages,
|
||||
currentItems: paginatedAttendances,
|
||||
paginate,
|
||||
resetPage,
|
||||
} = usePagination(filteredSearchData, 20);
|
||||
const group1 = filteredData
|
||||
.filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group2 = filteredData
|
||||
.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group3 = filteredData
|
||||
.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group4 = filteredData.filter(
|
||||
(d) => d.activity === 4 && isBeforeToday(d.checkOutTime)
|
||||
);
|
||||
const group5 = filteredData
|
||||
.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group6 = filteredData
|
||||
.filter((d) => d.activity === 5)
|
||||
.sort(sortByName);
|
||||
|
||||
useEffect(() => {
|
||||
resetPage();
|
||||
}, [filteredSearchData]);
|
||||
const sortedList = [
|
||||
...group1,
|
||||
...group2,
|
||||
...group3,
|
||||
...group4,
|
||||
...group5,
|
||||
...group6,
|
||||
];
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
const { startDate, endDate } = dateRange;
|
||||
const checkIn = msg.response.checkInTime.substring(0, 10);
|
||||
// Group by date
|
||||
const groupedByDate = sortedList.reduce((acc, item) => {
|
||||
const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
|
||||
if (date) {
|
||||
acc[date] = acc[date] || [];
|
||||
acc[date].push(item);
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
if (selectedProject === msg.projectId && startDate <= checkIn && checkIn <= endDate) {
|
||||
queryClient.setQueriesData(["attendanceLogs"], (oldData) => {
|
||||
if (!oldData) {
|
||||
queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
|
||||
return;
|
||||
}
|
||||
return oldData.map((record) =>
|
||||
record.id === msg.response.id ? { ...record, ...msg.response } : record
|
||||
);
|
||||
});
|
||||
resetPage();
|
||||
const sortedDates = Object.keys(groupedByDate).sort(
|
||||
(a, b) => new Date(b) - new Date(a)
|
||||
);
|
||||
|
||||
const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
|
||||
setProcessedData(finalData);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
filtering(data);
|
||||
}, [data, showPending]);
|
||||
|
||||
// New useEffect to handle search filtering
|
||||
const filteredSearchData = useMemo(() => {
|
||||
if (!searchTerm) {
|
||||
return processedData;
|
||||
}
|
||||
},
|
||||
[selectedProject, dateRange, resetPage]
|
||||
);
|
||||
const lowercasedSearchTerm = searchTerm.toLowerCase();
|
||||
return processedData.filter((item) => {
|
||||
const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
|
||||
return fullName.includes(lowercasedSearchTerm);
|
||||
});
|
||||
}, [processedData, searchTerm]);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("attendance_log", handler);
|
||||
return () => eventBus.off("attendance_log", handler);
|
||||
}, [handler]);
|
||||
// const filteredSearchData = useMemo(() => {
|
||||
// let tempData = processedData;
|
||||
|
||||
const employeeHandler = useCallback(
|
||||
(msg) => {
|
||||
const { startDate, endDate } = dateRange;
|
||||
if (data.some((item) => item.employeeId == msg.employeeId)) {
|
||||
refetch();
|
||||
}
|
||||
},
|
||||
[data, refetch]
|
||||
);
|
||||
// if (searchTerm) {
|
||||
// const lowercasedSearchTerm = searchTerm.toLowerCase();
|
||||
// tempData = tempData.filter((item) => {
|
||||
// const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
|
||||
// return fullName.includes(lowercasedSearchTerm);
|
||||
// });
|
||||
// }
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("employee", employeeHandler);
|
||||
return () => eventBus.off("employee", employeeHandler);
|
||||
}, [employeeHandler]);
|
||||
// if (filters?.selectedOrganization) {
|
||||
// tempData = tempData.filter(
|
||||
// (item) => item.organization?.name === filters.selectedOrganization
|
||||
// );
|
||||
// }
|
||||
|
||||
// if (filters?.selectedServices?.length > 0) {
|
||||
// tempData = tempData.filter((item) =>
|
||||
// filters.selectedServices.includes(item.service?.name)
|
||||
// );
|
||||
// }
|
||||
|
||||
// return tempData;
|
||||
// }, [processedData, searchTerm, filters]);
|
||||
|
||||
|
||||
const {
|
||||
currentPage,
|
||||
totalPages,
|
||||
currentItems: paginatedAttendances,
|
||||
paginate,
|
||||
resetPage,
|
||||
} = usePagination(filteredSearchData, 20);
|
||||
|
||||
useEffect(() => {
|
||||
resetPage();
|
||||
}, [filteredSearchData, resetPage]);
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
const { startDate, endDate } = dateRange;
|
||||
const checkIn = msg.response.checkInTime.substring(0, 10);
|
||||
if (
|
||||
selectedProject === msg.projectId &&
|
||||
startDate <= checkIn &&
|
||||
checkIn <= endDate
|
||||
) {
|
||||
queryClient.setQueriesData(["attendanceLogs"], (oldData) => {
|
||||
if (!oldData) {
|
||||
queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
|
||||
return;
|
||||
}
|
||||
const updatedAttendance = oldData.map((record) =>
|
||||
record.id === msg.response.id
|
||||
? { ...record, ...msg.response }
|
||||
: record
|
||||
);
|
||||
filtering(updatedAttendance);
|
||||
return updatedAttendance;
|
||||
});
|
||||
resetPage();
|
||||
}
|
||||
},
|
||||
[selectedProject, dateRange, filtering, resetPage]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("attendance_log", handler);
|
||||
return () => eventBus.off("attendance_log", handler);
|
||||
}, [handler]);
|
||||
|
||||
const employeeHandler = useCallback(
|
||||
(msg) => {
|
||||
const { startDate, endDate } = dateRange;
|
||||
if (data.some((item) => item.employeeId == msg.employeeId)) {
|
||||
// dispatch(
|
||||
// fetchAttendanceData({
|
||||
// ,
|
||||
// fromDate: startDate,
|
||||
// toDate: endDate,
|
||||
// })
|
||||
// );
|
||||
|
||||
refetch()
|
||||
}
|
||||
},
|
||||
[selectedProject, dateRange, data, refetch]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("employee", employeeHandler);
|
||||
return () => eventBus.off("employee", employeeHandler);
|
||||
}, [employeeHandler]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="dataTables_length text-start py-2 d-flex justify-content-between "
|
||||
className="dataTables_length text-start py-2 d-flex justify-content-between"
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<div className="d-flex align-items-center my-0 ">
|
||||
@ -180,7 +257,7 @@ useEffect(() => {
|
||||
onRangeChange={setDateRange}
|
||||
defaultStartDate={yesterday}
|
||||
/>
|
||||
<div className="form-check form-switch text-start ms-1 ms-md-2 align-items-center mb-0">
|
||||
<div className="form-check form-switch text-start m-0 ms-5">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
@ -193,16 +270,11 @@ useEffect(() => {
|
||||
<label className="form-check-label ms-0">Show Pending</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div
|
||||
className="table-responsive text-nowrap"
|
||||
style={{ minHeight: "200px" }}
|
||||
>
|
||||
<div className="table-responsive text-nowrap" style={{ minHeight: "200px" }}>
|
||||
{isLoading ? (
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center"
|
||||
style={{ height: "200px" }}
|
||||
>
|
||||
<div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
|
||||
<p className="text-secondary">Loading...</p>
|
||||
</div>
|
||||
) : filteredSearchData?.length > 0 ? (
|
||||
@ -215,8 +287,7 @@ useEffect(() => {
|
||||
<th className="border-top-1">Date</th>
|
||||
<th>Organization</th>
|
||||
<th>
|
||||
<i className="bx bxs-down-arrow-alt text-success"></i>{" "}
|
||||
Check-In
|
||||
<i className="bx bxs-down-arrow-alt text-success"></i> Check-In
|
||||
</th>
|
||||
<th>
|
||||
<i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
|
||||
@ -232,9 +303,9 @@ useEffect(() => {
|
||||
const previousAttendance = arr[index - 1];
|
||||
const previousDate = previousAttendance
|
||||
? moment(
|
||||
previousAttendance.checkInTime ||
|
||||
previousAttendance.checkOutTime
|
||||
).format("YYYY-MM-DD")
|
||||
previousAttendance.checkInTime ||
|
||||
previousAttendance.checkOutTime
|
||||
).format("YYYY-MM-DD")
|
||||
: null;
|
||||
|
||||
if (!previousDate || currentDate !== previousDate) {
|
||||
@ -273,7 +344,7 @@ useEffect(() => {
|
||||
attendance.checkInTime || attendance.checkOutTime
|
||||
).format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
<td>{attendance.organizationName || "--"}</td>
|
||||
<td>{attendance.organizationName || "--"}</td>
|
||||
<td>{convertShortTime(attendance.checkInTime)}</td>
|
||||
<td>
|
||||
{attendance.checkOutTime
|
||||
@ -295,12 +366,7 @@ useEffect(() => {
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<div className="my-12">
|
||||
<span className="text-secondary">
|
||||
No data available for the selected date range. Please Select
|
||||
another date.
|
||||
</span>
|
||||
</div>
|
||||
<div className="my-12"><span className="text-secondary">No data available for the selected date range. Please Select another date.</span></div>
|
||||
)}
|
||||
</div>
|
||||
{paginatedAttendances?.length == 0 && filteredSearchData?.length > 0 && (
|
||||
@ -326,9 +392,8 @@ useEffect(() => {
|
||||
(pageNumber) => (
|
||||
<li
|
||||
key={pageNumber}
|
||||
className={`page-item ${
|
||||
currentPage === pageNumber ? "active" : ""
|
||||
}`}
|
||||
className={`page-item ${currentPage === pageNumber ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
@ -340,9 +405,8 @@ useEffect(() => {
|
||||
)
|
||||
)}
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
|
||||
@ -33,7 +33,7 @@ const createSchema = (modeldata) => {
|
||||
const checkOut = new Date(checkIn);
|
||||
checkOut.setHours(hour, minute, 0, 0);
|
||||
|
||||
return checkOut >= checkIn;
|
||||
return checkOut > checkIn;
|
||||
}
|
||||
return true;
|
||||
}, {
|
||||
@ -96,12 +96,12 @@ const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="row p-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12 d-flex justify-content-center mb-4">
|
||||
<label className="fs-5 tex-semibold text-center">
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12 d-flex justify-content-center">
|
||||
<label className="fs-5 text-dark text-center">
|
||||
{modeldata?.checkInTime && !modeldata?.checkOutTime
|
||||
? "Check-Out "
|
||||
: "Check-In "}
|
||||
? "Check-out :"
|
||||
: "Check-in :"}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -120,7 +120,7 @@ const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
|
||||
modeldata?.checkInTime && !modeldata?.checkOutTime
|
||||
? formatDate(modeldata?.checkInTime?.split("T")[0]) || ""
|
||||
: formatDate(today)
|
||||
}
|
||||
}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import "../../components/Project/ProjectInfra.css";
|
||||
import BuildingModel from "../Project/Infrastructure/BuildingModel";
|
||||
@ -7,33 +8,25 @@ import WorkAreaModel from "../Project/Infrastructure/WorkAreaModel";
|
||||
import TaskModel from "../Project/Infrastructure/TaskModel";
|
||||
import ProjectRepository from "../../repositories/ProjectRepository";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import {
|
||||
useCurrentService,
|
||||
useProjectDetails,
|
||||
useProjectInfra,
|
||||
useProjects,
|
||||
} from "../../hooks/useProjects";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import {
|
||||
APPROVE_TASK,
|
||||
ASSIGN_REPORT_TASK,
|
||||
MANAGE_PROJECT_INFRA,
|
||||
} from "../../utils/constants";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import { refreshData, setProjectId } from "../../slices/localVariablesSlice";
|
||||
import {useProjectDetails, useProjectInfra, useProjects} from "../../hooks/useProjects";
|
||||
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
|
||||
import {APPROVE_TASK, ASSIGN_REPORT_TASK, MANAGE_PROJECT_INFRA} from "../../utils/constants";
|
||||
import {useDispatch, useSelector} from "react-redux";
|
||||
import {useProfile} from "../../hooks/useProfile";
|
||||
import {refreshData, setProjectId} from "../../slices/localVariablesSlice";
|
||||
import InfraTable from "../Project/Infrastructure/InfraTable";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
import Loader from "../common/Loader";
|
||||
|
||||
|
||||
|
||||
|
||||
const InfraPlanning = () => {
|
||||
const { profile: LoggedUser, refetch: fetchData } = useProfile();
|
||||
const dispatch = useDispatch();
|
||||
const selectedProject = useSelectedProject();
|
||||
const selectedService = useCurrentService();
|
||||
|
||||
const { projectInfra, isLoading, isError, error, isFetched } =
|
||||
useProjectInfra(selectedProject, selectedService || "" );
|
||||
const { projectInfra, isLoading, isError, error, isFetched } = useProjectInfra(selectedProject);
|
||||
|
||||
const canManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
|
||||
const canApproveTask = useHasUserPermission(APPROVE_TASK);
|
||||
@ -70,9 +63,9 @@ const InfraPlanning = () => {
|
||||
|
||||
return (
|
||||
<div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
|
||||
<div className="card-body" style={{ padding: "0.5rem" }}>
|
||||
<div className="row">
|
||||
<InfraTable buildings={projectInfra} projectId={selectedProject} />
|
||||
<div className="card-body" style={{ padding: "0.5rem" }}>
|
||||
<div className="row">
|
||||
<InfraTable buildings={projectInfra} projectId={selectedProject} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -80,3 +73,4 @@ const InfraPlanning = () => {
|
||||
};
|
||||
|
||||
export default InfraPlanning;
|
||||
|
||||
|
||||
@ -1,43 +1,25 @@
|
||||
import React, { useCallback, useEffect, useState, useMemo } from "react";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { convertShortTime, formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import { convertShortTime } from "../../utils/dateUtils";
|
||||
import RegularizationActions from "./RegularizationActions";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useRegularizationRequests } from "../../hooks/useAttendance";
|
||||
import moment from "moment";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import {
|
||||
cacheData,
|
||||
clearCacheKey,
|
||||
useSelectedProject,
|
||||
} from "../../slices/apiDataManager";
|
||||
import { cacheData, clearCacheKey, useSelectedProject } from "../../slices/apiDataManager";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import Pagination from "../../components/common/Pagination";
|
||||
|
||||
const Regularization = ({
|
||||
handleRequest,
|
||||
searchTerm,
|
||||
projectId,
|
||||
organizationId,
|
||||
IncludeInActive,
|
||||
}) => {
|
||||
const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, IncludeInActive }) => {
|
||||
const queryClient = useQueryClient();
|
||||
// var selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||
const selectedProject = useSelectedProject();
|
||||
const [regularizesList, setregularizedList] = useState([]);
|
||||
const { regularizes, loading, error, refetch } = useRegularizationRequests(
|
||||
selectedProject,
|
||||
organizationId,
|
||||
IncludeInActive
|
||||
);
|
||||
const { regularizes, loading, error, refetch } =
|
||||
useRegularizationRequests(selectedProject, organizationId, IncludeInActive);
|
||||
|
||||
useEffect(() => {
|
||||
if(!regularizes) return
|
||||
if(regularizes?.length) {
|
||||
setregularizedList(regularizes);
|
||||
|
||||
}
|
||||
}, [regularizes]);
|
||||
|
||||
const sortByName = (a, b) => {
|
||||
@ -72,15 +54,48 @@ const Regularization = ({
|
||||
}
|
||||
const lowercasedSearchTerm = searchTerm.toLowerCase();
|
||||
return sortedList.filter((item) => {
|
||||
const fullName = `${item?.firstName} ${item?.lastName}`.toLowerCase();
|
||||
const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
|
||||
return fullName.includes(lowercasedSearchTerm);
|
||||
});
|
||||
}, [regularizesList, searchTerm]);
|
||||
|
||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||
filteredSearchData,
|
||||
20
|
||||
);
|
||||
// const filteredSearchData = useMemo(() => {
|
||||
// let sortedList = [...regularizesList].sort(sortByName);
|
||||
|
||||
// // Search filter
|
||||
// if (searchTerm) {
|
||||
// const lowercasedSearchTerm = searchTerm.toLowerCase();
|
||||
// sortedList = sortedList.filter((item) => {
|
||||
// const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
|
||||
// return fullName.includes(lowercasedSearchTerm);
|
||||
// });
|
||||
// }
|
||||
|
||||
// // Organization filter
|
||||
// if (filters?.selectedOrganization) {
|
||||
// sortedList = sortedList.filter(
|
||||
// (item) => item.organization?.name === filters.selectedOrganization
|
||||
// );
|
||||
// }
|
||||
|
||||
// // Services filter
|
||||
// if (filters?.selectedServices?.length > 0) {
|
||||
// sortedList = sortedList.filter((item) =>
|
||||
// filters.selectedServices.includes(item.service?.name)
|
||||
// );
|
||||
// }
|
||||
|
||||
// return sortedList;
|
||||
// }, [regularizesList, searchTerm, filters]);
|
||||
|
||||
|
||||
const { currentPage, totalPages, currentItems, paginate } =
|
||||
usePagination(filteredSearchData, 20);
|
||||
|
||||
// Reset pagination when the search term or data changes
|
||||
useEffect(() => {
|
||||
|
||||
}, [filteredSearchData]);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("regularization", handler);
|
||||
@ -102,15 +117,9 @@ const Regularization = ({
|
||||
}, [employeeHandler]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="table-responsive text-nowrap pb-4"
|
||||
style={{ minHeight: "200px" }}
|
||||
>
|
||||
<div className="table-responsive text-nowrap pb-4" style={{ minHeight: "200px" }}>
|
||||
{loading ? (
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center"
|
||||
style={{ height: "200px" }}
|
||||
>
|
||||
<div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
|
||||
<p className="text-secondary">Loading...</p>
|
||||
</div>
|
||||
) : currentItems?.length > 0 ? (
|
||||
@ -126,21 +135,18 @@ const Regularization = ({
|
||||
<th>
|
||||
<i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
|
||||
</th>
|
||||
<th colSpan={2}>
|
||||
Requested By
|
||||
</th>
|
||||
<th >
|
||||
Requested At
|
||||
</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentItems?.map((att, index) => (
|
||||
<tr key={index}>
|
||||
<td colSpan={2}>
|
||||
<td colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
<Avatar firstName={att.firstName} lastName={att.lastName} />
|
||||
<Avatar
|
||||
firstName={att.firstName}
|
||||
lastName={att.lastName}
|
||||
/>
|
||||
<div className="d-flex flex-column">
|
||||
<a href="#" className="text-heading text-truncate">
|
||||
<span className="fw-normal">
|
||||
@ -156,23 +162,7 @@ const Regularization = ({
|
||||
|
||||
<td>{convertShortTime(att.checkInTime)}</td>
|
||||
<td>
|
||||
{att.requestedAt ? convertShortTime(att.checkOutTime) : "--"}
|
||||
</td>
|
||||
|
||||
<td colSpan={2}>
|
||||
{att.requestedBy ? ( <div className="d-flex justify-content-start align-items-center">
|
||||
<Avatar firstName={att?.requestedBy?.firstName} lastName={att?.requestedBy?.lastName} />
|
||||
<div className="d-flex flex-column">
|
||||
<a href="#" className="text-heading text-truncate">
|
||||
<span className="fw-normal">
|
||||
{att?.requestedBy?.firstName} {att?.requestedBy?.lastName}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>):(<small>--</small>)}
|
||||
</td>
|
||||
<td>
|
||||
{att?.requestedAt ? formatUTCToLocalTime(att.requestedAt,true) : "--"}
|
||||
{att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"}
|
||||
</td>
|
||||
<td className="text-center ">
|
||||
<RegularizationActions
|
||||
@ -185,6 +175,7 @@ const Regularization = ({
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
) : (
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center"
|
||||
@ -197,7 +188,7 @@ const Regularization = ({
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{/* {!loading && totalPages > 1 && (
|
||||
{!loading && totalPages > 1 && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1 mt-3">
|
||||
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
@ -235,14 +226,6 @@ const Regularization = ({
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)} */}
|
||||
|
||||
{totalPages > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -77,7 +77,7 @@ export const ReportTask = ({ report, closeModal }) => {
|
||||
return (
|
||||
<div className="container m-0">
|
||||
<div className="text-center">
|
||||
<p className="fs-5 fw-semibold">Report Task</p>
|
||||
<p className="fs-6 fw-semibold">Report Task</p>
|
||||
</div>
|
||||
<div className="mb-1 row text-start">
|
||||
<label htmlFor="html5-text-input" className="col-md-4 col-form-label">
|
||||
@ -101,14 +101,16 @@ export const ReportTask = ({ report, closeModal }) => {
|
||||
<label htmlFor="html5-email-input" className="col-md-4 col-form-label">
|
||||
Wrok Area :
|
||||
</label>
|
||||
<div className="col-md-8 text-start">
|
||||
<div className="text-wrap">
|
||||
{report?.workItem?.workArea?.floor?.building?.name} <i className="bx bx-chevron-right"></i>
|
||||
{report?.workItem?.workArea?.floor?.floorName} <i className="bx bx-chevron-right"></i>
|
||||
{report?.workItem?.workArea?.areaName}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-8 text-start text-wrap">
|
||||
<label className=" col-form-label">
|
||||
{" "}
|
||||
{report?.workItem?.workArea?.floor?.building?.name}{" "}
|
||||
<i className="bx bx-chevron-right"></i>{" "}
|
||||
{report?.workItem?.workArea?.floor?.floorName}{" "}
|
||||
<i className="bx bx-chevron-right"> </i>
|
||||
{report?.workItem?.workArea?.areaName}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-1 row text-start">
|
||||
<label htmlFor="html5-email-input" className="col-md-4 col-form-label">
|
||||
|
||||
@ -110,8 +110,6 @@ const ReportTaskComments = ({
|
||||
approvedTask: defaultCompletedTask || 0,
|
||||
});
|
||||
}, [defaultCompletedTask]);
|
||||
|
||||
const completed_Task = watch("approvedTask")
|
||||
return (
|
||||
<div className="p-2 p-sm-1">
|
||||
<div className="modal-body p-sm-4 p-0">
|
||||
@ -341,13 +339,13 @@ const ReportTaskComments = ({
|
||||
<div
|
||||
className={` ${
|
||||
actionAllow && !commentsData.approvedBy
|
||||
? " d-flex justify-content-between align-items-center"
|
||||
? " d-flex justify-content-between"
|
||||
: "text-end"
|
||||
} mt-2`}
|
||||
>
|
||||
<div
|
||||
className={`form-check ${
|
||||
!(actionAllow && !commentsData.approvedBy && defaultCompletedTask > completed_Task ) && "d-none"
|
||||
!(actionAllow && !commentsData.approvedBy) && "d-none"
|
||||
} `}
|
||||
>
|
||||
<input
|
||||
@ -385,7 +383,7 @@ const ReportTaskComments = ({
|
||||
: "Comment"}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<ul
|
||||
|
||||
@ -4,7 +4,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { string, z } from "zod";
|
||||
import {
|
||||
useActivitiesMaster,
|
||||
useServices,
|
||||
useWorkCategoriesMaster,
|
||||
} from "../../hooks/masterHook/useMaster";
|
||||
import showToast from "../../services/toastService";
|
||||
@ -26,8 +25,6 @@ const SubTask = ({ activity, onClose }) => {
|
||||
const { activities, loading } = useActivitiesMaster();
|
||||
const { categories, categoryLoading } = useWorkCategoriesMaster();
|
||||
const { Task, loading: TaskLoading } = useTaskById(activity?.id);
|
||||
const {data,isError,isLoading,error} = useServices();
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
@ -100,8 +97,8 @@ const SubTask = ({ activity, onClose }) => {
|
||||
};
|
||||
return (
|
||||
<div className="container-xxl my-1">
|
||||
<p className="fw-semibold fs-5">Create Sub Task</p>
|
||||
<form className="row g-2 text-start" onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<p className="fw-semibold">Create Sub Task</p>
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<div className="col-6">
|
||||
<label className="form-label">Building</label>
|
||||
<input
|
||||
@ -131,15 +128,27 @@ const SubTask = ({ activity, onClose }) => {
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<label className="form-label">Service</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
value={activity?.workItem?.activityMaster?.activityGroup?.service?.name || ""}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<label className="form-label">Work Category</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("workCategoryId")}
|
||||
onChange={handleCategoryChange}
|
||||
>
|
||||
<option value="">
|
||||
{categoryLoading ? "Loading..." : "-- Select Category --"}
|
||||
</option>
|
||||
{categoryData.map((category) => (
|
||||
<option key={category.id} value={category.id}>
|
||||
{category.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.workCategoryId && (
|
||||
<div className="danger-text">{errors.workCategoryId.message}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<label className="form-label">Select Activity</label>
|
||||
<select
|
||||
@ -163,27 +172,6 @@ const SubTask = ({ activity, onClose }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<label className="form-label">Work Category</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("workCategoryId")}
|
||||
onChange={handleCategoryChange}
|
||||
>
|
||||
<option value="">
|
||||
{categoryLoading ? "Loading..." : "-- Select Category --"}
|
||||
</option>
|
||||
{categoryData.map((category) => (
|
||||
<option key={category.id} value={category.id}>
|
||||
{category.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.workCategoryId && (
|
||||
<div className="danger-text">{errors.workCategoryId.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-4">
|
||||
<label className="form-label">Planned Work</label>
|
||||
<input
|
||||
@ -231,15 +219,7 @@ const SubTask = ({ activity, onClose }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="d-flex flex-row gap-3 justify-content-end py-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary"
|
||||
onClick={() => onClose()}
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<div className="col-12 text-center">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary me-2"
|
||||
@ -247,7 +227,14 @@ const SubTask = ({ activity, onClose }) => {
|
||||
>
|
||||
{isPending ? "Please wait..." : "Submit"}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-secondary"
|
||||
onClick={() => onClose()}
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
42
src/components/Context/ChangePasswordContext.jsx
Normal file
42
src/components/Context/ChangePasswordContext.jsx
Normal file
@ -0,0 +1,42 @@
|
||||
import React, { createContext, useState, useContext } from "react";
|
||||
import ChangePasswordPage from "../../pages/authentication/ChangePassword";
|
||||
|
||||
const ChangePasswordContext = createContext();
|
||||
|
||||
export const ChangePasswordProvider = ({ children }) => {
|
||||
const [isChangePasswordOpen, setIsChangePasswordOpen] = useState(false);
|
||||
|
||||
const openChangePassword = () => setIsChangePasswordOpen(true);
|
||||
const closeChangePassword = () => setIsChangePasswordOpen(false);
|
||||
|
||||
return (
|
||||
<ChangePasswordContext.Provider
|
||||
value={{ isChangePasswordOpen, openChangePassword, closeChangePassword }}
|
||||
>
|
||||
{children}
|
||||
|
||||
{isChangePasswordOpen && (
|
||||
<>
|
||||
{/* This is the main Bootstrap modal container */}
|
||||
{/* It provides the fixed positioning and high z-index */}
|
||||
<div
|
||||
className="modal fade show" // 'fade' for animation, 'show' to make it visible
|
||||
style={{ display: 'block' }} // Explicitly set display: block for immediate visibility
|
||||
tabIndex="-1" // Makes the modal focusable
|
||||
role="dialog" // ARIA role for accessibility
|
||||
aria-labelledby="changePasswordModalLabel" // Link to a heading for accessibility
|
||||
aria-modal="true" // Indicate it's a modal dialog
|
||||
>
|
||||
{/* The ChangePasswordPage component itself contains the modal-dialog and modal-content */}
|
||||
<ChangePasswordPage onClose={closeChangePassword} />
|
||||
</div>
|
||||
|
||||
{/* The modal backdrop */}
|
||||
<div className="modal-backdrop fade show"></div>
|
||||
</>
|
||||
)}
|
||||
</ChangePasswordContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useChangePassword = () => useContext(ChangePasswordContext);
|
||||
@ -1,107 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { useCurrentService } from "../../hooks/useProjects";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
import { FormProvider, useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import {
|
||||
TaskReportDefaultValue,
|
||||
TaskReportFilterSchema,
|
||||
} from "./TaskRportScheam";
|
||||
import { DateRangePicker1 } from "../common/DateRangePicker";
|
||||
import SelectMultiple from "../common/SelectMultiple";
|
||||
import { localToUtc } from "../../utils/appUtils";
|
||||
import { useTaskFilter } from "../../hooks/useTasks";
|
||||
|
||||
const TaskReportFilterPanel = ({ handleFilter }) => {
|
||||
const [resetKey, setResetKey] = useState(0);
|
||||
const selectedProject = useSelectedProject();
|
||||
const selectedService = useCurrentService();
|
||||
const { data } = useTaskFilter(selectedProject);
|
||||
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(TaskReportFilterSchema),
|
||||
defaultValues: TaskReportDefaultValue,
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
reset,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = methods;
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
const filterPayload = {
|
||||
...formData,
|
||||
dateFrom: localToUtc(formData.dateFrom),
|
||||
dateTo: localToUtc(formData.dateTo),
|
||||
};
|
||||
handleFilter(filterPayload);
|
||||
};
|
||||
|
||||
const onClear = () => {
|
||||
setResetKey((prev) => prev + 1);
|
||||
handleFilter(TaskReportDefaultValue);
|
||||
reset(TaskReportDefaultValue);
|
||||
};
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
|
||||
<div className="mb-3 w-100">
|
||||
<label className="fw-semibold">Choose Date Range:</label>
|
||||
<DateRangePicker1
|
||||
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
||||
startField="dateFrom"
|
||||
endField="dateTo"
|
||||
resetSignal={resetKey}
|
||||
defaultRange={false}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="row mb-2">
|
||||
<SelectMultiple
|
||||
name="buildingIds"
|
||||
label="Building"
|
||||
options={data?.buildings}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
<div className="row mb-2">
|
||||
<SelectMultiple
|
||||
name="floorIds"
|
||||
label="Floor"
|
||||
options={data?.floors}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
<div className="row mb-2">
|
||||
<SelectMultiple
|
||||
name="activityIds"
|
||||
label="Activities"
|
||||
options={data?.activities}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-end py-3 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-label-secondary btn-sm"
|
||||
onClick={onClear}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary btn-sm">
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskReportFilterPanel;
|
||||
@ -1,301 +0,0 @@
|
||||
import React, { useState, useEffect, useMemo } from "react";
|
||||
import { useTaskList } from "../../hooks/useTasks";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
import { useProjectName } from "../../hooks/useProjects";
|
||||
import DailyProgrssReport, {
|
||||
useDailyProgrssContext,
|
||||
} from "../../pages/DailyProgressReport/DailyProgrssReport";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
import {
|
||||
APPROVE_TASK,
|
||||
ASSIGN_REPORT_TASK,
|
||||
ITEMS_PER_PAGE,
|
||||
} from "../../utils/constants";
|
||||
import { formatNumber, formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import Pagination from "../common/Pagination";
|
||||
import { TaskReportListSkeleton } from "./TaskRepprtListSkeleton";
|
||||
import HoverPopup from "../common/HoverPopup";
|
||||
|
||||
const TaskReportList = () => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [filters, setFilters] = useState({
|
||||
selectedBuilding: "",
|
||||
selectedFloors: [],
|
||||
selectedActivities: [],
|
||||
});
|
||||
const dispatch = useDispatch();
|
||||
const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK);
|
||||
const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK);
|
||||
|
||||
const { service, openModal, closeModal,filter } = useDailyProgrssContext();
|
||||
const selectedProject = useSelectedProject();
|
||||
const { projectNames } = useProjectName();
|
||||
|
||||
const { data, isLoading, isError, error } = useTaskList(
|
||||
selectedProject,
|
||||
ITEMS_PER_PAGE,
|
||||
currentPage,
|
||||
service,filter
|
||||
);
|
||||
|
||||
const ProgrssReportColumn = [
|
||||
{
|
||||
key: "activity",
|
||||
label: "Activity",
|
||||
getValue: (task) => task.workItem.activityMaster?.activityName || "N/A",
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
key: "assigned",
|
||||
label: "Total Assigned",
|
||||
getValue: (task) => task.plannedTask ?? "N/A",
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
key: "completed",
|
||||
label: "Completed",
|
||||
getValue: (task) => task.completedTask ?? "N/A",
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
key: "assignAt",
|
||||
label: "Assign Date",
|
||||
getValue: (task) =>
|
||||
task.assignmentDate ? formatUTCToLocalTime(task.assignmentDate) : "N/A",
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
key: "team",
|
||||
label: "Team",
|
||||
getValue: (task) =>
|
||||
task.teamMembers?.map((m) => `${m.firstName} ${m.lastName}`).join(", ") ||
|
||||
"N/A",
|
||||
align: "text-start",
|
||||
},
|
||||
];
|
||||
|
||||
const paginate = (page) => {
|
||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
||||
setCurrentPage(page);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedProject && projectNames.length > 0) {
|
||||
dispatch(setProjectId(projectNames[0].id));
|
||||
}
|
||||
}, [selectedProject, projectNames, dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
setFilters({
|
||||
selectedBuilding: "",
|
||||
selectedFloors: [],
|
||||
selectedActivities: [],
|
||||
});
|
||||
}, [selectedProject]);
|
||||
|
||||
// Filter and Group wise data
|
||||
|
||||
const filteredTasks = useMemo(() => {
|
||||
if (!data?.data) return [];
|
||||
return data?.data.filter((task) => {
|
||||
const { selectedBuilding, selectedFloors, selectedActivities } = filters;
|
||||
|
||||
if (
|
||||
selectedBuilding &&
|
||||
task?.workItem?.workArea?.floor?.building?.name !== selectedBuilding
|
||||
)
|
||||
return false;
|
||||
if (
|
||||
selectedFloors.length > 0 &&
|
||||
!selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)
|
||||
)
|
||||
return false;
|
||||
if (
|
||||
selectedActivities.length > 0 &&
|
||||
!selectedActivities.includes(
|
||||
task?.workItem?.activityMaster?.activityName
|
||||
)
|
||||
)
|
||||
return false;
|
||||
|
||||
return true;
|
||||
});
|
||||
}, [data?.data, filters, currentPage]);
|
||||
|
||||
const groupedTasks = useMemo(() => {
|
||||
const groups = {};
|
||||
filteredTasks.forEach((task) => {
|
||||
const date = task.assignmentDate.split("T")[0];
|
||||
if (!groups[date]) groups[date] = [];
|
||||
groups[date].push(task);
|
||||
});
|
||||
return Object.keys(groups)
|
||||
.sort((a, b) => new Date(b) - new Date(a))
|
||||
.map((date) => ({ date, tasks: groups[date] }));
|
||||
}, [filteredTasks, paginate, currentPage, selectedProject]);
|
||||
|
||||
const renderTeamMembers = (task, refIndex) => (
|
||||
<div
|
||||
key={refIndex}
|
||||
tabIndex="0"
|
||||
className="d-flex align-items-center avatar-group justify-content-center"
|
||||
data-bs-toggle="popover"
|
||||
data-bs-trigger="focus"
|
||||
data-bs-placement="left"
|
||||
data-bs-html="true"
|
||||
data-bs-content={`
|
||||
<div class="border border-secondary rounded custom-popover p-2 px-3">
|
||||
${task.teamMembers
|
||||
.map(
|
||||
(m) => `
|
||||
<div class="d-flex align-items-center gap-2 mb-2">
|
||||
<div class="avatar avatar-xs">
|
||||
<span class="avatar-initial rounded-circle bg-label-primary">
|
||||
${m?.firstName?.charAt(0) || ""}${m?.lastName?.charAt(0) || ""
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<span>${m.firstName} ${m.lastName}</span>
|
||||
</div>`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
`}
|
||||
>
|
||||
{task.teamMembers.slice(0, 3).map((m) => (
|
||||
<div
|
||||
key={m.id}
|
||||
className="avatar avatar-xs"
|
||||
title={`${m.firstName} ${m.lastName}`}
|
||||
>
|
||||
<span className="avatar-initial rounded-circle bg-label-primary">
|
||||
{m?.firstName.slice(0, 1)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{task.teamMembers.length > 3 && (
|
||||
<div
|
||||
className="avatar avatar-xs"
|
||||
title={`${task.teamMembers.length - 3} more`}
|
||||
>
|
||||
<span className="avatar-initial rounded-circle bg-label-secondary">
|
||||
+{task.teamMembers.length - 3}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (isLoading) return <TaskReportListSkeleton />;
|
||||
if (isError) return <div>Loading....</div>;
|
||||
return (
|
||||
<div className="mt-2 table-responsive text-nowrap">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-start">Activity</th>
|
||||
<th>
|
||||
<span>
|
||||
Total Pending{" "}
|
||||
<HoverPopup
|
||||
title="Total Pending Task"
|
||||
content={<p>This shows the total pending tasks for each activity on that date.</p>}
|
||||
>
|
||||
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
||||
</HoverPopup>
|
||||
</span>
|
||||
</th>
|
||||
<th>
|
||||
<span>
|
||||
Reported/Planned{" "}
|
||||
<HoverPopup
|
||||
title="Reported and Planned Task"
|
||||
content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
|
||||
>
|
||||
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
||||
</HoverPopup>
|
||||
</span>
|
||||
</th>
|
||||
<th>Assign Date</th>
|
||||
<th>Team</th>
|
||||
<th className="text-center">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{groupedTasks.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={6} className="text-center align-middle" style={{ height: "200px", borderBottom: "none" }}>
|
||||
No reports available
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{groupedTasks.map(({ date, tasks }) => (
|
||||
<React.Fragment key={date}>
|
||||
<tr className="table-row-header text-start">
|
||||
<td colSpan={6}>
|
||||
<strong>{formatUTCToLocalTime(date)}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
{tasks.map((task, idx) => (
|
||||
<tr key={task.id || idx}>
|
||||
<td className="flex-wrap text-start">
|
||||
<div>
|
||||
{task.workItem.activityMaster?.activityName || "No Activity Name"}
|
||||
</div>
|
||||
<div className="text-sm py-2">
|
||||
{task.workItem.workArea?.floor?.building?.name} ›{" "}
|
||||
{task.workItem.workArea?.floor?.floorName} ›{" "}
|
||||
{task.workItem.workArea?.areaName}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{formatNumber(task.workItem.plannedWork)}
|
||||
</td>
|
||||
<td>{`${formatNumber(task.completedTask)} / ${formatNumber(task.plannedTask)}`}</td>
|
||||
<td>{formatUTCToLocalTime(task.assignmentDate)}</td>
|
||||
<td className="text-center">{renderTeamMembers(task, idx)}</td>
|
||||
<td className="text-center">
|
||||
<div className="d-flex justify-content-end gap-2">
|
||||
{ReportTaskRights && !task.reportedDate && (
|
||||
<button className="btn btn-xs btn-primary" onClick={() => openModal("report", task)}>
|
||||
Report
|
||||
</button>
|
||||
)}
|
||||
{ApprovedTaskRights && task.reportedDate && !task.approvedBy && (
|
||||
<button
|
||||
className="btn btn-xs btn-warning"
|
||||
onClick={() => openModal("comments", { task, isActionAllow: true })}
|
||||
>
|
||||
QC
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-xs btn-primary"
|
||||
onClick={() => openModal("comments", { task, isActionAllow: false })}
|
||||
>
|
||||
Comment
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{data?.data?.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={data.totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskReportList;
|
||||
@ -1,62 +0,0 @@
|
||||
|
||||
const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
|
||||
<div
|
||||
className={`skeleton mb-2 ${className}`}
|
||||
style={{
|
||||
height,
|
||||
width,
|
||||
}}
|
||||
></div>
|
||||
);
|
||||
export const TaskReportListSkeleton = () => {
|
||||
const skeletonRows = 8; // Number of placeholder rows
|
||||
|
||||
return (
|
||||
<div>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Activity</th>
|
||||
<th>Assigned</th>
|
||||
<th>Completed</th>
|
||||
<th>Assign On</th>
|
||||
<th>Team</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[...Array(skeletonRows)].map((_, idx) => (
|
||||
<tr key={idx}>
|
||||
<td>
|
||||
<SkeletonLine height={16} width="70%" />
|
||||
<SkeletonLine height={12} width="50%" />
|
||||
</td>
|
||||
<td>
|
||||
<SkeletonLine height={16} width="60%" />
|
||||
</td>
|
||||
<td>
|
||||
<SkeletonLine height={16} width="60%" />
|
||||
</td>
|
||||
<td>
|
||||
<SkeletonLine height={16} width="80%" />
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<div className="d-flex justify-content-center gap-1">
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<SkeletonLine key={i} height={24} width={24} className="rounded-circle" />
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="d-flex justify-content-end gap-2">
|
||||
<SkeletonLine height={24} width="60px" />
|
||||
<SkeletonLine height={24} width="60px" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,17 +0,0 @@
|
||||
import { z } from "zod";
|
||||
|
||||
export const TaskReportFilterSchema = z.object({
|
||||
buildingIds: z.array(z.string()).optional(),
|
||||
floorIds: z.array(z.string()).optional(),
|
||||
activityIds: z.array(z.string()).optional(),
|
||||
dateFrom: z.string().optional(),
|
||||
dateTo: z.string().optional(),
|
||||
});
|
||||
|
||||
export const TaskReportDefaultValue = {
|
||||
buildingIds:[],
|
||||
floorIds:[],
|
||||
activityIds:[],
|
||||
dateFrom:null,
|
||||
dateTo:null
|
||||
}
|
||||
@ -1,194 +1,194 @@
|
||||
// import React, { useState, useEffect } from "react";
|
||||
// import LineChart from "../Charts/LineChart";
|
||||
// import { useProjects } from "../../hooks/useProjects";
|
||||
// import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data";
|
||||
// import ApexChart from "../Charts/Circlechart";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import LineChart from "../Charts/LineChart";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data";
|
||||
import ApexChart from "../Charts/Circlechart";
|
||||
|
||||
// const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId";
|
||||
const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId";
|
||||
|
||||
// const Activity = () => {
|
||||
// const { projects } = useProjects();
|
||||
// const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
|
||||
// const [selectedDate, setSelectedDate] = useState(today);
|
||||
// const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
|
||||
// const initialProjectId = storedProjectId || "all";
|
||||
// const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
|
||||
// const [displayedProjectName, setDisplayedProjectName] = useState("Select Project");
|
||||
// const [activeTab, setActiveTab] = useState("all");
|
||||
const Activity = () => {
|
||||
const { projects } = useProjects();
|
||||
const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
|
||||
const [selectedDate, setSelectedDate] = useState(today);
|
||||
const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
|
||||
const initialProjectId = storedProjectId || "all";
|
||||
const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
|
||||
const [displayedProjectName, setDisplayedProjectName] = useState("Select Project");
|
||||
const [activeTab, setActiveTab] = useState("all");
|
||||
|
||||
// const { dashboard_Activitydata: ActivityData, isLoading, error: isError } =
|
||||
// useDashboard_ActivityData(selectedDate, selectedProjectId);
|
||||
const { dashboard_Activitydata: ActivityData, isLoading, error: isError } =
|
||||
useDashboard_ActivityData(selectedDate, selectedProjectId);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (selectedProjectId === "all") {
|
||||
// setDisplayedProjectName("All Projects");
|
||||
// } else if (projects) {
|
||||
// const foundProject = projects.find((p) => p.id === selectedProjectId);
|
||||
// setDisplayedProjectName(foundProject ? foundProject.name : "Select Project");
|
||||
// } else {
|
||||
// setDisplayedProjectName("Select Project");
|
||||
// }
|
||||
useEffect(() => {
|
||||
if (selectedProjectId === "all") {
|
||||
setDisplayedProjectName("All Projects");
|
||||
} else if (projects) {
|
||||
const foundProject = projects.find((p) => p.id === selectedProjectId);
|
||||
setDisplayedProjectName(foundProject ? foundProject.name : "Select Project");
|
||||
} else {
|
||||
setDisplayedProjectName("Select Project");
|
||||
}
|
||||
|
||||
// localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
|
||||
// }, [selectedProjectId, projects]);
|
||||
localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
|
||||
}, [selectedProjectId, projects]);
|
||||
|
||||
// const handleProjectSelect = (projectId) => {
|
||||
// setSelectedProjectId(projectId);
|
||||
// };
|
||||
const handleProjectSelect = (projectId) => {
|
||||
setSelectedProjectId(projectId);
|
||||
};
|
||||
|
||||
// const handleDateChange = (e) => {
|
||||
// setSelectedDate(e.target.value);
|
||||
// };
|
||||
const handleDateChange = (e) => {
|
||||
setSelectedDate(e.target.value);
|
||||
};
|
||||
|
||||
// return (
|
||||
// <div className="card h-100">
|
||||
// <div className="card-header">
|
||||
// <div className="d-flex flex-wrap justify-content-between align-items-center mb-0">
|
||||
// <div className="card-title mb-0 text-start">
|
||||
// <h5 className="mb-1">Activity</h5>
|
||||
// <p className="card-subtitle text-primary">Activity Progress Chart</p>
|
||||
// </div>
|
||||
return (
|
||||
<div className="card h-100">
|
||||
<div className="card-header">
|
||||
<div className="d-flex flex-wrap justify-content-between align-items-center mb-0">
|
||||
<div className="card-title mb-0 text-start">
|
||||
<h5 className="mb-1">Activity</h5>
|
||||
<p className="card-subtitle">Activity Progress Chart</p>
|
||||
</div>
|
||||
|
||||
// <div className="btn-group">
|
||||
// <button
|
||||
// className="btn btn-outline-primary btn-sm dropdown-toggle"
|
||||
// type="button"
|
||||
// data-bs-toggle="dropdown"
|
||||
// aria-expanded="false"
|
||||
// >
|
||||
// {displayedProjectName}
|
||||
// </button>
|
||||
// <ul className="dropdown-menu">
|
||||
// <li>
|
||||
// <button className="dropdown-item" onClick={() => handleProjectSelect("all")}>
|
||||
// All Projects
|
||||
// </button>
|
||||
// </li>
|
||||
// {projects?.map((project) => (
|
||||
// <li key={project.id}>
|
||||
// <button
|
||||
// className="dropdown-item"
|
||||
// onClick={() => handleProjectSelect(project.id)}
|
||||
// >
|
||||
// {project.name}
|
||||
// </button>
|
||||
// </li>
|
||||
// ))}
|
||||
// </ul>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
<div className="btn-group">
|
||||
<button
|
||||
className="btn btn-outline-primary btn-sm dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{displayedProjectName}
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleProjectSelect("all")}>
|
||||
All Projects
|
||||
</button>
|
||||
</li>
|
||||
{projects?.map((project) => (
|
||||
<li key={project.id}>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={() => handleProjectSelect(project.id)}
|
||||
>
|
||||
{project.name}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// {/* ✅ Date Picker Aligned Left with Padding */}
|
||||
// <div className="d-flex justify-content-start ps-3 mb-3">
|
||||
// <div style={{ width: "150px" }}>
|
||||
// <input
|
||||
// type="date"
|
||||
// className="form-control"
|
||||
// value={selectedDate}
|
||||
// onChange={handleDateChange}
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
{/* ✅ Date Picker Aligned Left with Padding */}
|
||||
<div className="d-flex justify-content-start ps-3 mb-3">
|
||||
<div style={{ width: "150px" }}>
|
||||
<input
|
||||
type="date"
|
||||
className="form-control"
|
||||
value={selectedDate}
|
||||
onChange={handleDateChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// {/* Tabs */}
|
||||
// <ul className="nav nav-tabs " role="tablist">
|
||||
// <li className="nav-item">
|
||||
// <button
|
||||
// type="button"
|
||||
// className={`nav-link ${activeTab === "all" ? "active" : ""}`}
|
||||
// onClick={() => setActiveTab("all")}
|
||||
// data-bs-toggle="tab"
|
||||
// >
|
||||
// Summary
|
||||
// </button>
|
||||
// </li>
|
||||
// <li className="nav-item">
|
||||
// <button
|
||||
// type="button"
|
||||
// className={`nav-link ${activeTab === "logs" ? "active" : ""}`}
|
||||
// onClick={() => setActiveTab("logs")}
|
||||
// data-bs-toggle="tab"
|
||||
// >
|
||||
// Details
|
||||
// </button>
|
||||
// </li>
|
||||
// </ul>
|
||||
{/* Tabs */}
|
||||
<ul className="nav nav-tabs " role="tablist">
|
||||
<li className="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
className={`nav-link ${activeTab === "all" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("all")}
|
||||
data-bs-toggle="tab"
|
||||
>
|
||||
Summary
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
className={`nav-link ${activeTab === "logs" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("logs")}
|
||||
data-bs-toggle="tab"
|
||||
>
|
||||
Details
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
// <div className="card-body">
|
||||
// {activeTab === "all" && (
|
||||
// <div className="row justify-content-between">
|
||||
// <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
|
||||
// {isLoading ? (
|
||||
// <p>Loading activity data...</p>
|
||||
// ) : isError ? (
|
||||
// <p>No data available.</p>
|
||||
// ) : (
|
||||
// ActivityData && (
|
||||
// <>
|
||||
// <h5 className="fw-bold mb-0 text-start w-80">
|
||||
// <i className="bx bx-task text-info"></i> Allocated Task
|
||||
// </h5>
|
||||
// <h4 className="mb-0 fw-bold">
|
||||
// {ActivityData.totalCompletedWork?.toLocaleString()}/
|
||||
// {ActivityData.totalPlannedWork?.toLocaleString()}
|
||||
// </h4>
|
||||
// <small className="text-muted">Completed / Assigned</small>
|
||||
// <div style={{ maxWidth: "180px" }}>
|
||||
// <ApexChart />
|
||||
// </div>
|
||||
// </>
|
||||
// )
|
||||
// )}
|
||||
// </div>
|
||||
<div className="card-body">
|
||||
{activeTab === "all" && (
|
||||
<div className="row justify-content-between">
|
||||
<div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
|
||||
{isLoading ? (
|
||||
<p>Loading activity data...</p>
|
||||
) : isError ? (
|
||||
<p>No data available.</p>
|
||||
) : (
|
||||
ActivityData && (
|
||||
<>
|
||||
<h5 className="fw-bold mb-0 text-start w-80">
|
||||
<i className="bx bx-task text-info"></i> Allocated Task
|
||||
</h5>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{ActivityData.totalCompletedWork?.toLocaleString()}/
|
||||
{ActivityData.totalPlannedWork?.toLocaleString()}
|
||||
</h4>
|
||||
<small className="text-muted">Completed / Assigned</small>
|
||||
<div style={{ maxWidth: "180px" }}>
|
||||
<ApexChart />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
||||
// <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
|
||||
// {!isLoading && !isError && ActivityData && (
|
||||
// <>
|
||||
// <h5 className="fw-bold mb-0 text-start w-110">
|
||||
// <i className="bx bx-task text-info"></i> Activities
|
||||
// </h5>
|
||||
// <h4 className="mb-0 fw-bold">
|
||||
// {ActivityData.totalCompletedWork?.toLocaleString()}/
|
||||
// {ActivityData.totalPlannedWork?.toLocaleString()}
|
||||
// </h4>
|
||||
// <small className="text-muted ">Pending / Assigned</small>
|
||||
// <div style={{ maxWidth: "180px" }}>
|
||||
// <ApexChart />
|
||||
// </div>
|
||||
// </>
|
||||
// )}
|
||||
// </div>
|
||||
// </div>
|
||||
// )}
|
||||
<div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
|
||||
{!isLoading && !isError && ActivityData && (
|
||||
<>
|
||||
<h5 className="fw-bold mb-0 text-start w-110">
|
||||
<i className="bx bx-task text-info"></i> Activities
|
||||
</h5>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{ActivityData.totalCompletedWork?.toLocaleString()}/
|
||||
{ActivityData.totalPlannedWork?.toLocaleString()}
|
||||
</h4>
|
||||
<small className="text-muted ">Pending / Assigned</small>
|
||||
<div style={{ maxWidth: "180px" }}>
|
||||
<ApexChart />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
// {activeTab === "logs" && (
|
||||
// <div className="table-responsive">
|
||||
// <table className="table table-bordered table-hover">
|
||||
// <thead>
|
||||
// <tr>
|
||||
// <th>Activity / Location</th>
|
||||
// <th>Assigned / Completed</th>
|
||||
// </tr>
|
||||
// </thead>
|
||||
// <tbody>
|
||||
// {[{
|
||||
// activity: "Code Review / Remote",
|
||||
// assignedToday: 3,
|
||||
// completed: 2
|
||||
// }].map((log, index) => (
|
||||
// <tr key={index}>
|
||||
// <td>{log.activity}</td>
|
||||
// <td>{log.assignedToday} / {log.completed}</td>
|
||||
// </tr>
|
||||
// ))}
|
||||
// </tbody>
|
||||
// </table>
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
{activeTab === "logs" && (
|
||||
<div className="table-responsive">
|
||||
<table className="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Activity / Location</th>
|
||||
<th>Assigned / Completed</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[{
|
||||
activity: "Code Review / Remote",
|
||||
assignedToday: 3,
|
||||
completed: 2
|
||||
}].map((log, index) => (
|
||||
<tr key={index}>
|
||||
<td>{log.activity}</td>
|
||||
<td>{log.assignedToday} / {log.completed}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// export default Activity;
|
||||
export default Activity;
|
||||
|
||||
@ -179,7 +179,7 @@ const ListViewContact = ({ data, Pagination }) => {
|
||||
<tr style={{ height: "200px" }}>
|
||||
<td
|
||||
colSpan={contactList.length + 1}
|
||||
className="text-center border-0 align-middle"
|
||||
className="text-center align-middle"
|
||||
>
|
||||
No contacts found
|
||||
</td>
|
||||
|
||||
@ -23,6 +23,7 @@ const ManageBucket1 = () => {
|
||||
const handleClose = () => {
|
||||
setAction(null);
|
||||
setSelectedBucket(null);
|
||||
setDeleteId(null);
|
||||
};
|
||||
const { mutate: createBucket, isPending: creating } = useCreateBucket(() => {
|
||||
handleClose();
|
||||
@ -48,26 +49,23 @@ const ManageBucket1 = () => {
|
||||
<p className="fs-5 fw-semibold m-0">Manage Buckets</p>
|
||||
</div>
|
||||
|
||||
{action ? (
|
||||
{action == "create" ? (
|
||||
<>
|
||||
{action && (
|
||||
<div>
|
||||
<BucketForm
|
||||
selectedBucket={selectedBucket}
|
||||
mode={action} // pass create | edit
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={() => {
|
||||
setAction(null);
|
||||
setSelectedBucket(null);
|
||||
}}
|
||||
isPending={creating || updating}
|
||||
/>
|
||||
{action === "edit" && (
|
||||
<AssignedBucket
|
||||
selectedBucket={selectedBucket}
|
||||
handleClose={handleClose}
|
||||
/>)}
|
||||
</div>
|
||||
<BucketForm
|
||||
selectedBucket={selectedBucket}
|
||||
mode={action} // pass create | edit
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={() => {
|
||||
setAction(null);
|
||||
setSelectedBucket(null);
|
||||
}}
|
||||
isPending={creating || updating}
|
||||
/>
|
||||
{action === "edit" && selectedBucket && (
|
||||
<AssignedBucket
|
||||
selectedBucket={selectedBucket}
|
||||
handleClose={handleClose}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
@ -93,19 +91,11 @@ const ManageBucket1 = () => {
|
||||
buckets={data}
|
||||
loading={isLoading}
|
||||
searchTerm={searchTerm}
|
||||
onDelete={(id) => setDeleteBucket({ isOpen: true, bucketId: id })}
|
||||
onEdit={(b) => {
|
||||
setAction("edit")
|
||||
setSelectedBucket(b)
|
||||
}}
|
||||
onDelete={(id) => setDeleteBucket({isOpen:true,bucketId:id})}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default ManageBucket1;
|
||||
|
||||
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ import Label from "../common/Label";
|
||||
const ManageContact = ({ contactId, closeModal }) => {
|
||||
// fetch master data
|
||||
const { buckets, loading: bucketsLoaging } = useBuckets();
|
||||
const { data:projects, loading: projectLoading } = useProjects();
|
||||
const { projects, loading: projectLoading } = useProjects();
|
||||
const { contactCategory, loading: contactCategoryLoading } =
|
||||
useContactCategory();
|
||||
const { organizationList } = useOrganization();
|
||||
|
||||
@ -96,7 +96,7 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
|
||||
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
||||
startField="startDate"
|
||||
endField="endDate"
|
||||
defaultRange={false}
|
||||
defaultRange={true}
|
||||
resetSignal={resetKey}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
|
||||
@ -118,7 +118,7 @@ const Documents = ({ Document_Entity, Entity }) => {
|
||||
return (
|
||||
<DocumentContext.Provider value={contextValues}>
|
||||
<div className="mt-5">
|
||||
<div className="card page-min-h d-flex p-2">
|
||||
<div className="card d-flex p-2">
|
||||
<div className="row align-items-center">
|
||||
{/* Search */}
|
||||
<div className="d-flex col-8 col-md-8 col-lg-4 mb-md-0 align-items-center">
|
||||
@ -149,11 +149,30 @@ const Documents = ({ Document_Entity, Entity }) => {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="col-6 col-md-6 col-lg-8 text-end">
|
||||
{/* <span
|
||||
className="text-tiny text-muted p-1 border-0 bg-none lead mx-3 cursor-pointer"
|
||||
disabled={isRefetching}
|
||||
onClick={() => {
|
||||
setSearchText("");
|
||||
setFilter(DocumentFilterDefaultValues);
|
||||
refetchFn && refetchFn();
|
||||
}}
|
||||
>
|
||||
Refresh
|
||||
<i
|
||||
className={`bx bx-refresh ms-1 ${
|
||||
isRefetching ? "bx-spin" : ""
|
||||
}`}
|
||||
></i>
|
||||
</span> */}
|
||||
|
||||
{(isSelf || canUploadDocument) && (
|
||||
<button
|
||||
className="btn btn-sm btn-primary me-3"
|
||||
type="button"
|
||||
title="Add New Document"
|
||||
className="p-1 bg-primary rounded-circle cursor-pointer"
|
||||
onClick={() =>
|
||||
setManageDoc({
|
||||
document: null,
|
||||
@ -161,10 +180,7 @@ const Documents = ({ Document_Entity, Entity }) => {
|
||||
})
|
||||
}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
<span className="d-none d-md-inline-block">
|
||||
Add New Document
|
||||
</span>
|
||||
<i className="bx bx-plus fs-4 text-white"></i>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
172
src/components/Employee/DemoTable.jsx
Normal file
172
src/components/Employee/DemoTable.jsx
Normal file
@ -0,0 +1,172 @@
|
||||
import React from "react";
|
||||
|
||||
const DemoTable = () => {
|
||||
return (
|
||||
<div className="content-wrapper">
|
||||
<div className="container-fluid">
|
||||
<div className="card">
|
||||
<div className="card-datatable table-responsive">
|
||||
<table className="datatables-basic table border-top">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th>id</th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Date</th>
|
||||
<th>Salary</th>
|
||||
<th>Status</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="offcanvas offcanvas-end" id="add-new-record">
|
||||
<div className="offcanvas-header border-bottom">
|
||||
<h5 className="offcanvas-title" id="exampleModalLabel">
|
||||
New Record
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close text-reset"
|
||||
data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div className="offcanvas-body flex-grow-1">
|
||||
<form
|
||||
className="add-new-record pt-0 row g-2"
|
||||
id="form-add-new-record"
|
||||
onsubmit="return false"
|
||||
>
|
||||
<div className="col-sm-12">
|
||||
<label className="form-label" for="basicFullname">
|
||||
Full Name
|
||||
</label>
|
||||
<div className="input-group input-group-merge">
|
||||
<span id="basicFullname2" className="input-group-text">
|
||||
<i className="bx bx-user"></i>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
id="basicFullname"
|
||||
className="form-control dt-full-name"
|
||||
name="basicFullname"
|
||||
placeholder="John Doe"
|
||||
aria-label="John Doe"
|
||||
aria-describedby="basicFullname2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-12">
|
||||
<label className="form-label" for="basicPost">
|
||||
Post
|
||||
</label>
|
||||
<div className="input-group input-group-merge">
|
||||
<span id="basicPost2" className="input-group-text">
|
||||
<i className="bx bxs-briefcase"></i>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
id="basicPost"
|
||||
name="basicPost"
|
||||
className="form-control dt-post"
|
||||
placeholder="Web Developer"
|
||||
aria-label="Web Developer"
|
||||
aria-describedby="basicPost2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-12">
|
||||
<label className="form-label" for="basicEmail">
|
||||
Email
|
||||
</label>
|
||||
<div className="input-group input-group-merge">
|
||||
<span className="input-group-text">
|
||||
<i className="bx bx-envelope"></i>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
id="basicEmail"
|
||||
name="basicEmail"
|
||||
className="form-control dt-email"
|
||||
placeholder="john.doe@example.com"
|
||||
aria-label="john.doe@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-text">
|
||||
You can use letters, numbers & periods
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-12">
|
||||
<label className="form-label" for="basicDate">
|
||||
Joining Date
|
||||
</label>
|
||||
<div className="input-group input-group-merge">
|
||||
<span id="basicDate2" className="input-group-text">
|
||||
<i className="bx bx-calendar"></i>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control dt-date"
|
||||
id="basicDate"
|
||||
name="basicDate"
|
||||
aria-describedby="basicDate2"
|
||||
placeholder="MM/DD/YYYY"
|
||||
aria-label="MM/DD/YYYY"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-12">
|
||||
<label className="form-label" for="basicSalary">
|
||||
Salary
|
||||
</label>
|
||||
<div className="input-group input-group-merge">
|
||||
<span id="basicSalary2" className="input-group-text">
|
||||
<i className="bx bx-dollar"></i>
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
id="basicSalary"
|
||||
name="basicSalary"
|
||||
className="form-control dt-salary"
|
||||
placeholder="12000"
|
||||
aria-label="12000"
|
||||
aria-describedby="basicSalary2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-12">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary data-submit me-sm-4 me-1"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
<button
|
||||
type="reset"
|
||||
className="btn btn-outline-secondary"
|
||||
data-bs-dismiss="offcanvas"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="my-12" />
|
||||
|
||||
<hr className="my-12" />
|
||||
|
||||
<hr className="my-12" />
|
||||
</div>
|
||||
|
||||
<div className="content-backdrop fade"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DemoTable;
|
||||
@ -14,24 +14,28 @@ import { FormProvider, useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { localToUtc } from "../../utils/appUtils";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
const EmpAttendance = () => {
|
||||
const { employeeId } = useParams();
|
||||
const EmpAttendance = ({ employee }) => {
|
||||
const [attendances, setAttendnaces] = useState([]);
|
||||
const [selectedDate, setSelectedDate] = useState("");
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [attendanceId, setAttendanecId] = useState();
|
||||
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(
|
||||
z.object({
|
||||
startDate: z.string(),
|
||||
endDate: z.string(),
|
||||
})
|
||||
),
|
||||
defaultValues: {
|
||||
startDate: moment().subtract(6, "days").format("DD-MM-YYYY"),
|
||||
endDate: moment().format("DD-MM-YYYY"),
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
},
|
||||
});
|
||||
const { watch } = methods;
|
||||
|
||||
const [startDate, endDate] = watch(["startDate", "endDate"]);
|
||||
const { control, register, handleSubmit, reset, watch } = methods;
|
||||
const startDate = watch("startDate");
|
||||
const endDate = watch("endDate");
|
||||
const {
|
||||
data = [],
|
||||
isLoading: loading,
|
||||
@ -40,21 +44,76 @@ const EmpAttendance = () => {
|
||||
error,
|
||||
refetch,
|
||||
} = useAttendanceByEmployee(
|
||||
employeeId,
|
||||
startDate ? localToUtc(startDate) : null,
|
||||
endDate ? localToUtc(endDate) : null
|
||||
employee,
|
||||
localToUtc(startDate),
|
||||
localToUtc(endDate)
|
||||
);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const sorted = [...data].sort(
|
||||
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
const isSameDay = (dateStr) => {
|
||||
if (!dateStr) return false;
|
||||
const d = new Date(dateStr);
|
||||
d.setHours(0, 0, 0, 0);
|
||||
return d.getTime() === today.getTime();
|
||||
};
|
||||
|
||||
const isBeforeToday = (dateStr) => {
|
||||
if (!dateStr) return false;
|
||||
const d = new Date(dateStr);
|
||||
d.setHours(0, 0, 0, 0);
|
||||
return d.getTime() < today.getTime();
|
||||
};
|
||||
|
||||
const sortByName = (a, b) => {
|
||||
const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
|
||||
const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
|
||||
return nameA?.localeCompare(nameB);
|
||||
};
|
||||
|
||||
const group1 = data
|
||||
.filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group2 = data
|
||||
.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group3 = data
|
||||
.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group4 = data
|
||||
.filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group5 = data.filter((d) => d.activity === 5).sort(sortByName);
|
||||
|
||||
|
||||
const uniqueMap = new Map();
|
||||
|
||||
[...group1, ...group2, ...group3, ...group4, ...group5].forEach((rec) => {
|
||||
const date = moment(rec.checkInTime || rec.checkOutTime).format(
|
||||
"YYYY-MM-DD"
|
||||
);
|
||||
const key = `${rec.employeeId}-${date}`;
|
||||
const existing = uniqueMap.get(key);
|
||||
if (
|
||||
!existing ||
|
||||
new Date(rec.checkInTime || rec.checkOutTime) >
|
||||
new Date(existing.checkInTime || existing.checkOutTime)
|
||||
) {
|
||||
uniqueMap.set(key, rec);
|
||||
}
|
||||
});
|
||||
|
||||
const sortedFinalList = [...uniqueMap.values()].sort(
|
||||
(a, b) =>
|
||||
new Date(b?.checkInTime).getTime() - new Date(a?.checkInTime).getTime()
|
||||
new Date(b.checkInTime || b.checkOutTime) -
|
||||
new Date(a.checkInTime || a.checkOutTime)
|
||||
);
|
||||
|
||||
console.log(sorted);
|
||||
|
||||
const currentDate = new Date().toLocaleDateString("en-CA");
|
||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||
sorted,
|
||||
sortedFinalList,
|
||||
ITEMS_PER_PAGE
|
||||
);
|
||||
|
||||
@ -64,6 +123,7 @@ const EmpAttendance = () => {
|
||||
};
|
||||
const closeModal = () => setIsModalOpen(false);
|
||||
|
||||
const onSubmit = (formData) => {};
|
||||
return (
|
||||
<>
|
||||
{isModalOpen && (
|
||||
@ -76,10 +136,20 @@ const EmpAttendance = () => {
|
||||
className="dataTables_length text-start py-2 d-flex justify-content-between "
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<div className="col-4 col-md-3 my-0 ">
|
||||
<div className="col-3 my-0 ">
|
||||
<>
|
||||
<FormProvider {...methods}>
|
||||
<DateRangePicker1 />
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
className="p-2 text-start"
|
||||
>
|
||||
<DateRangePicker1
|
||||
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
||||
startField="startDate"
|
||||
endField="endDate"
|
||||
defaultRange={true}
|
||||
/>
|
||||
</form>
|
||||
</FormProvider>
|
||||
</>
|
||||
</div>
|
||||
@ -164,7 +234,7 @@ const EmpAttendance = () => {
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
{!loading && data.length > 20 && (
|
||||
{!loading && sortedFinalList.length > 20 && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
|
||||
import { useChangePassword } from "../../components/Context/ChangePasswordContext";
|
||||
import GlobalModel from "../common/GlobalModel";
|
||||
import ManageEmployee from "./ManageEmployee";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import { useModal } from "../../hooks/useAuth";
|
||||
|
||||
const EmpBanner = ({ profile, loggedInUser }) => {
|
||||
const {onOpen} = useModal("ChangePassword")
|
||||
const { openChangePassword } = useChangePassword();
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
return (
|
||||
@ -87,7 +86,7 @@ const EmpBanner = ({ profile, loggedInUser }) => {
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center mt-4">
|
||||
{profile?.isActive && (
|
||||
{profile?.isActive && ( // ✅ show only if active
|
||||
<li className="list-inline-item">
|
||||
<button
|
||||
className="btn btn-sm btn-primary btn-block"
|
||||
@ -102,7 +101,7 @@ const EmpBanner = ({ profile, loggedInUser }) => {
|
||||
{profile?.id === loggedInUser?.employeeInfo?.id && (
|
||||
<button
|
||||
className="btn btn-sm btn-outline-primary btn-block"
|
||||
onClick={onOpen}
|
||||
onClick={() => openChangePassword()}
|
||||
>
|
||||
Change Password
|
||||
</button>
|
||||
|
||||
7
src/components/Employee/EmployeeList.jsx
Normal file
7
src/components/Employee/EmployeeList.jsx
Normal file
@ -0,0 +1,7 @@
|
||||
import React from "react";
|
||||
|
||||
const EmployeeList = () => {
|
||||
return <div>EmployeeList</div>;
|
||||
};
|
||||
|
||||
export default EmployeeList;
|
||||
@ -1,124 +0,0 @@
|
||||
import { z } from "zod"
|
||||
|
||||
|
||||
const mobileNumberRegex = /^[0-9]\d{9}$/;
|
||||
|
||||
export const employeeSchema =
|
||||
z.object({
|
||||
firstName: z.string().min(1, { message: "First Name is required" }),
|
||||
middleName: z.string().optional(),
|
||||
lastName: z.string().min(1, { message: "Last Name is required" }),
|
||||
email: z
|
||||
.string()
|
||||
.max(80, "Email cannot exceed 80 characters")
|
||||
.optional()
|
||||
.refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
|
||||
message: "Invalid email format",
|
||||
})
|
||||
.refine(
|
||||
(val) => {
|
||||
if (!val) return true;
|
||||
const [local, domain] = val.split("@");
|
||||
return (
|
||||
val.length <= 320 && local?.length <= 64 && domain?.length <= 255
|
||||
);
|
||||
},
|
||||
{
|
||||
message: "Email local or domain part is too long",
|
||||
}
|
||||
),
|
||||
currentAddress: z
|
||||
.string()
|
||||
.min(1, { message: "Current Address is required" })
|
||||
.max(500, { message: "Address cannot exceed 500 characters" }),
|
||||
birthDate: z
|
||||
.string()
|
||||
.min(1, { message: "Birth Date is required" })
|
||||
.refine(
|
||||
(date, ctx) => {
|
||||
return new Date(date) <= new Date();
|
||||
},
|
||||
{
|
||||
message: "Birth date cannot be in the future",
|
||||
}
|
||||
),
|
||||
joiningDate: z
|
||||
.string()
|
||||
.min(1, { message: "Joining Date is required" })
|
||||
.refine(
|
||||
(date, ctx) => {
|
||||
return new Date(date) <= new Date();
|
||||
},
|
||||
{
|
||||
message: "Joining date cannot be in the future",
|
||||
}
|
||||
),
|
||||
emergencyPhoneNumber: z
|
||||
.string()
|
||||
.min(1, { message: "Phone Number is required" })
|
||||
.regex(mobileNumberRegex, { message: "Invalid phone number " }),
|
||||
emergencyContactPerson: z
|
||||
.string()
|
||||
.min(1, { message: "Emergency Contact Person is required" })
|
||||
.regex(/^[A-Za-z\s]+$/, {
|
||||
message: "Emergency Contact Person must contain only letters",
|
||||
}),
|
||||
aadharNumber: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine((val) => !val || /^\d{12}$/.test(val), {
|
||||
message: "Aadhar card must be exactly 12 digits long",
|
||||
}),
|
||||
gender: z
|
||||
.string()
|
||||
.min(1, { message: "Gender is required" })
|
||||
.refine((val) => val !== "Select Gender", {
|
||||
message: "Please select a gender",
|
||||
}),
|
||||
panNumber: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
|
||||
message: "Invalid PAN number",
|
||||
}),
|
||||
permanentAddress: z
|
||||
.string()
|
||||
.min(1, { message: "Permanent Address is required" })
|
||||
.max(500, { message: "Address cannot exceed 500 characters" }),
|
||||
phoneNumber: z
|
||||
.string()
|
||||
.min(1, { message: "Phone Number is required" })
|
||||
.regex(mobileNumberRegex, { message: "Invalid phone number " }),
|
||||
jobRoleId: z.string().min(1, { message: "Role is required" }),
|
||||
organizationId:z.string().min(1,{message:"Organization is required"}),
|
||||
hasApplicationAccess:z.boolean().default(false),
|
||||
}).refine((data) => {
|
||||
if (data.hasApplicationAccess) {
|
||||
return data.email && data.email.trim() !== "";
|
||||
}
|
||||
return true;
|
||||
}, {
|
||||
message: "Email is required when employee has access",
|
||||
path: ["email"],
|
||||
});
|
||||
|
||||
|
||||
export const defatEmployeeObj = {
|
||||
firstName: "",
|
||||
middleName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
currentAddress: "",
|
||||
birthDate: "",
|
||||
joiningDate: "",
|
||||
emergencyPhoneNumber: "",
|
||||
emergencyContactPerson: "",
|
||||
aadharNumber: "",
|
||||
gender: "",
|
||||
panNumber: "",
|
||||
permanentAddress: "",
|
||||
phoneNumber: "",
|
||||
jobRoleId: null,
|
||||
organizationId:"",
|
||||
hasApplicationAccess:false
|
||||
}
|
||||
@ -1,37 +1,36 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import showToast from "../../services/toastService";
|
||||
import EmployeeRepository from "../../repositories/EmployeeRepository";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
|
||||
import { z } from "zod";
|
||||
import useMaster from "../../hooks/masterHook/useMaster";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { formatDate } from "../../utils/dateUtils";
|
||||
import { useEmployeeProfile, useUpdateEmployee } from "../../hooks/useEmployees";
|
||||
import {
|
||||
useEmployeeProfile,
|
||||
useUpdateEmployee,
|
||||
} from "../../hooks/useEmployees";
|
||||
|
||||
cacheData,
|
||||
clearCacheKey,
|
||||
getCachedData,
|
||||
} from "../../slices/apiDataManager";
|
||||
import { clearApiCacheKey } from "../../slices/apiCacheSlice";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import Label from "../common/Label";
|
||||
import DatePicker from "../common/DatePicker";
|
||||
import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
|
||||
import { useOrganizationsList } from "../../hooks/useOrganization";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
|
||||
const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
const mobileNumberRegex = /^[0-9]\d{9}$/;
|
||||
|
||||
const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
|
||||
const dispatch = useDispatch();
|
||||
const { mutate: updateEmployee, isPending } = useUpdateEmployee();
|
||||
const {
|
||||
data: organzationList,
|
||||
isLoading,
|
||||
isError,
|
||||
error: EempError,
|
||||
} = useOrganizationsList(ITEMS_PER_PAGE, 1, true);
|
||||
|
||||
const {
|
||||
employee,
|
||||
error,
|
||||
loading: empLoading,
|
||||
refetch,
|
||||
refetch
|
||||
} = useEmployeeProfile(employeeId);
|
||||
|
||||
useEffect(() => {
|
||||
@ -39,7 +38,6 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
}, [employeeId]);
|
||||
|
||||
const [disabledEmail, setDisabledEmail] = useState(false);
|
||||
|
||||
const { data: job_role, loading } = useMaster();
|
||||
const [isloading, setLoading] = useState(false);
|
||||
const navigation = useNavigate();
|
||||
@ -47,9 +45,98 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
const [currentAddressLength, setCurrentAddressLength] = useState(0);
|
||||
const [permanentAddressLength, setPermanentAddressLength] = useState(0);
|
||||
|
||||
const userSchema = z.object({
|
||||
...(employeeId ? { id: z.string().optional() } : {}),
|
||||
firstName: z.string().min(1, { message: "First Name is required" }),
|
||||
middleName: z.string().optional(),
|
||||
lastName: z.string().min(1, { message: "Last Name is required" }),
|
||||
email: z
|
||||
.string()
|
||||
.max(80, "Email cannot exceed 80 characters")
|
||||
.optional()
|
||||
.refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
|
||||
message: "Invalid email format",
|
||||
})
|
||||
.refine(
|
||||
(val) => {
|
||||
if (!val) return true;
|
||||
const [local, domain] = val.split("@");
|
||||
return (
|
||||
val.length <= 320 && local?.length <= 64 && domain?.length <= 255
|
||||
);
|
||||
},
|
||||
{
|
||||
message: "Email local or domain part is too long",
|
||||
}
|
||||
),
|
||||
currentAddress: z
|
||||
.string()
|
||||
.min(1, { message: "Current Address is required" })
|
||||
.max(500, { message: "Address cannot exceed 500 characters" }),
|
||||
birthDate: z
|
||||
.string()
|
||||
.min(1, { message: "Birth Date is required" })
|
||||
.refine(
|
||||
(date, ctx) => {
|
||||
return new Date(date) <= new Date();
|
||||
},
|
||||
{
|
||||
message: "Birth date cannot be in the future",
|
||||
}
|
||||
),
|
||||
joiningDate: z
|
||||
.string()
|
||||
.min(1, { message: "Joining Date is required" })
|
||||
.refine(
|
||||
(date, ctx) => {
|
||||
return new Date(date) <= new Date();
|
||||
},
|
||||
{
|
||||
message: "Joining date cannot be in the future",
|
||||
}
|
||||
),
|
||||
emergencyPhoneNumber: z
|
||||
.string()
|
||||
.min(1, { message: "Phone Number is required" })
|
||||
.regex(mobileNumberRegex, { message: "Invalid phone number " }),
|
||||
emergencyContactPerson: z
|
||||
.string()
|
||||
.min(1, { message: "Emergency Contact Person is required" })
|
||||
.regex(/^[A-Za-z\s]+$/, {
|
||||
message: "Emergency Contact Person must contain only letters",
|
||||
}),
|
||||
aadharNumber: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine((val) => !val || /^\d{12}$/.test(val), {
|
||||
message: "Aadhar card must be exactly 12 digits long",
|
||||
}),
|
||||
gender: z
|
||||
.string()
|
||||
.min(1, { message: "Gender is required" })
|
||||
.refine((val) => val !== "Select Gender", {
|
||||
message: "Please select a gender",
|
||||
}),
|
||||
panNumber: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
|
||||
message: "Invalid PAN number",
|
||||
}),
|
||||
permanentAddress: z
|
||||
.string()
|
||||
.min(1, { message: "Permanent Address is required" })
|
||||
.max(500, { message: "Address cannot exceed 500 characters" }),
|
||||
phoneNumber: z
|
||||
.string()
|
||||
.min(1, { message: "Phone Number is required" })
|
||||
.regex(mobileNumberRegex, { message: "Invalid phone number " }),
|
||||
jobRoleId: z.string().min(1, { message: "Role is required" }),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
refetch();
|
||||
}, []);
|
||||
refetch()
|
||||
}, [])
|
||||
|
||||
const {
|
||||
register,
|
||||
@ -60,8 +147,25 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
reset,
|
||||
getValues,
|
||||
} = useForm({
|
||||
resolver: zodResolver(employeeSchema),
|
||||
defaultValues: defatEmployeeObj,
|
||||
resolver: zodResolver(userSchema),
|
||||
defaultValues: {
|
||||
id: currentEmployee?.id || null,
|
||||
firstName: currentEmployee?.firstName || "",
|
||||
middleName: currentEmployee?.middleName || "",
|
||||
lastName: currentEmployee?.lastName || "",
|
||||
email: currentEmployee?.email || "",
|
||||
currentAddress: currentEmployee?.currentAddress || "",
|
||||
birthDate: formatDate(currentEmployee?.birthDate) || "",
|
||||
joiningDate: formatDate(currentEmployee?.joiningDate) || "",
|
||||
emergencyPhoneNumber: currentEmployee?.emergencyPhoneNumber || "",
|
||||
emergencyContactPerson: currentEmployee?.emergencyContactPerson || "",
|
||||
aadharNumber: currentEmployee?.aadharNumber || "",
|
||||
gender: currentEmployee?.gender || "",
|
||||
panNumber: currentEmployee?.panNumber || "",
|
||||
permanentAddress: currentEmployee?.permanentAddress || "",
|
||||
phoneNumber: currentEmployee?.phoneNumber || "",
|
||||
jobRoleId: currentEmployee?.jobRoleId.toString() || null,
|
||||
},
|
||||
mode: "onChange",
|
||||
});
|
||||
|
||||
@ -72,13 +176,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
data.email = null;
|
||||
}
|
||||
|
||||
const payload = { ...data };
|
||||
|
||||
if (employeeId) {
|
||||
payload.id = employeeId;
|
||||
}
|
||||
|
||||
updateEmployee(payload, {
|
||||
updateEmployee({ ...data, IsAllEmployee }, {
|
||||
onSuccess: () => {
|
||||
reset();
|
||||
onClosed();
|
||||
@ -86,6 +184,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && !error && employee) {
|
||||
setCurrentEmployee(employee);
|
||||
@ -96,47 +195,37 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
reset(
|
||||
currentEmployee
|
||||
? {
|
||||
id: currentEmployee.id || null,
|
||||
firstName: currentEmployee.firstName || "",
|
||||
middleName: currentEmployee.middleName || "",
|
||||
lastName: currentEmployee.lastName || "",
|
||||
email: currentEmployee.email || "",
|
||||
currentAddress: currentEmployee.currentAddress || "",
|
||||
birthDate: formatDate(currentEmployee.birthDate) || "",
|
||||
joiningDate: formatDate(currentEmployee.joiningDate) || "",
|
||||
emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
|
||||
emergencyContactPerson:
|
||||
currentEmployee.emergencyContactPerson || "",
|
||||
aadharNumber: currentEmployee.aadharNumber || "",
|
||||
gender: currentEmployee.gender || "",
|
||||
panNumber: currentEmployee.panNumber || "",
|
||||
permanentAddress: currentEmployee.permanentAddress || "",
|
||||
phoneNumber: currentEmployee.phoneNumber || "",
|
||||
jobRoleId: currentEmployee.jobRoleId?.toString() || "",
|
||||
organizationId: currentEmployee.organizationId || "",
|
||||
hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
|
||||
}
|
||||
id: currentEmployee.id || null,
|
||||
firstName: currentEmployee.firstName || "",
|
||||
middleName: currentEmployee.middleName || "",
|
||||
lastName: currentEmployee.lastName || "",
|
||||
email: currentEmployee.email || "",
|
||||
currentAddress: currentEmployee.currentAddress || "",
|
||||
birthDate: formatDate(currentEmployee.birthDate) || "",
|
||||
joiningDate: formatDate(currentEmployee.joiningDate) || "",
|
||||
emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
|
||||
emergencyContactPerson:
|
||||
currentEmployee.emergencyContactPerson || "",
|
||||
aadharNumber: currentEmployee.aadharNumber || "",
|
||||
gender: currentEmployee.gender || "",
|
||||
panNumber: currentEmployee.panNumber || "",
|
||||
permanentAddress: currentEmployee.permanentAddress || "",
|
||||
phoneNumber: currentEmployee.phoneNumber || "",
|
||||
jobRoleId: currentEmployee.jobRoleId?.toString() || "",
|
||||
}
|
||||
: {}
|
||||
);
|
||||
setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
|
||||
setPermanentAddressLength(currentEmployee?.permanentAddress?.length || 0);
|
||||
}, [currentEmployee, reset]);
|
||||
|
||||
const hasAccessAplication = watch("hasApplicationAccess");
|
||||
return (
|
||||
<>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="p-sm-0 p-2">
|
||||
<div className="text-center">
|
||||
<p className="fs-5 fw-semibold">
|
||||
{" "}
|
||||
{employee ? "Update Employee" : "Create Employee"}
|
||||
</p>{" "}
|
||||
</div>
|
||||
<div className="text-center"><p className="fs-5 fw-semibold"> {employee ? "Update Employee" : "Create Employee"}</p> </div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-4">
|
||||
<Label className="form-text text-start" required>
|
||||
First Name
|
||||
</Label>
|
||||
<Label className="form-text text-start" required>First Name</Label>
|
||||
<input
|
||||
type="text"
|
||||
name="firstName"
|
||||
@ -155,10 +244,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
}}
|
||||
/>
|
||||
{errors.firstName && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
{errors.firstName.message}
|
||||
</div>
|
||||
)}
|
||||
@ -181,18 +267,14 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
}}
|
||||
/>
|
||||
{errors.middleName && (
|
||||
<div
|
||||
className="danger-text text-start "
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
<div className="danger-text text-start " style={{ fontSize: "12px" }}>
|
||||
{errors.middleName.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-4">
|
||||
<Label className="form-text text-start" required>
|
||||
Last Name
|
||||
</Label>
|
||||
<Label className="form-text text-start" required>Last Name</Label>
|
||||
<input
|
||||
type="text"
|
||||
{...register("lastName", {
|
||||
@ -209,24 +291,16 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
}}
|
||||
/>
|
||||
{errors.lastName && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
{errors.lastName.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-6">
|
||||
<Label
|
||||
htmlFor="email"
|
||||
className="text-start form-text"
|
||||
required={hasAccessAplication}
|
||||
>
|
||||
Email
|
||||
</Label>
|
||||
<div className="form-text text-start">Email</div>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
@ -247,9 +321,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
<Label className="form-text text-start" required>
|
||||
Phone Number
|
||||
</Label>
|
||||
<Label className="form-text text-start" required>Phone Number</Label>
|
||||
<input
|
||||
type="text"
|
||||
keyboardType="numeric"
|
||||
@ -273,9 +345,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
<div className="row mb-3"></div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-4">
|
||||
<Label className="form-text text-start" required>
|
||||
Gender
|
||||
</Label>
|
||||
<Label className="form-text text-start" required>Gender</Label>
|
||||
|
||||
<div className="input-group">
|
||||
<select
|
||||
@ -317,10 +387,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
</div>
|
||||
|
||||
{errors.birthDate && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
{errors.birthDate.message}
|
||||
</div>
|
||||
)}
|
||||
@ -341,10 +408,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
</div>
|
||||
|
||||
{errors.joiningDate && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
{errors.joiningDate.message}
|
||||
</div>
|
||||
)}
|
||||
@ -352,9 +416,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-6">
|
||||
<Label className="form-text text-start" required>
|
||||
Current Address
|
||||
</Label>
|
||||
<Label className="form-text text-start" required>Current Address</Label>
|
||||
|
||||
<textarea
|
||||
id="currentAddress"
|
||||
@ -366,11 +428,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
maxLength={500}
|
||||
onChange={(e) => {
|
||||
setCurrentAddressLength(e.target.value.length);
|
||||
// let react-hook-form still handle it
|
||||
register("currentAddress").onChange(e);
|
||||
}}
|
||||
></textarea>
|
||||
<div className="text-end muted">
|
||||
<small> {500 - currentAddressLength} characters left</small>
|
||||
<small>
|
||||
{" "}
|
||||
{500 - currentAddressLength} characters left
|
||||
</small>
|
||||
</div>
|
||||
{errors.currentAddress && (
|
||||
<div
|
||||
@ -400,7 +466,9 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
}}
|
||||
></textarea>
|
||||
<div className="text-end muted">
|
||||
<small>{500 - permanentAddressLength} characters left</small>
|
||||
<small>
|
||||
{500 - permanentAddressLength} characters left
|
||||
</small>
|
||||
</div>
|
||||
{errors.permanentAddress && (
|
||||
<div
|
||||
@ -412,55 +480,6 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* -------------- */}
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-6">
|
||||
<Label className="form-text text-start" required>
|
||||
Organization
|
||||
</Label>
|
||||
<div className="input-group">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("organizationId")}
|
||||
id="organizationId"
|
||||
aria-label=""
|
||||
>
|
||||
<option disabled value="">
|
||||
Select Organization
|
||||
</option>
|
||||
{organzationList?.data
|
||||
.sort((a, b) => a?.name?.localeCompare(b?.name))
|
||||
.map((item) => (
|
||||
<option value={item?.id} key={item?.id}>
|
||||
{item?.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{errors.organizationId && (
|
||||
<div
|
||||
className="danger-text text-start justify-content-center"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.organizationId.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 d-flex align-items-center mt-2">
|
||||
<label className="form-check-label d-flex align-items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input me-2"
|
||||
{...register("hasApplicationAccess")}
|
||||
/>
|
||||
Has Application Access ?
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --------------- */}
|
||||
<div className="row mb-3">
|
||||
{" "}
|
||||
<div className="divider">
|
||||
@ -469,9 +488,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-4">
|
||||
<Label className="form-text text-start" required>
|
||||
Official Designation
|
||||
</Label>
|
||||
<Label className="form-text text-start" required>Official Designation</Label>
|
||||
<div className="input-group">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
@ -584,6 +601,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{employeeId && (
|
||||
<div className="row mb-3 d-none">
|
||||
<div className="col-sm-12">
|
||||
<input type="text" name="id" {...register("id")} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="row text-end">
|
||||
<div className="col-sm-12">
|
||||
<button
|
||||
@ -600,11 +626,18 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
className="btn btn-sm btn-primary"
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? "Please Wait..." : employeeId ? "Update" : "Create"}
|
||||
{isPending
|
||||
? "Please Wait..."
|
||||
: employeeId
|
||||
? "Update"
|
||||
: "Create"}
|
||||
</button>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -117,7 +117,6 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
||||
endField="endDate"
|
||||
resetSignal={resetKey}
|
||||
defaultRange={false}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -201,12 +200,12 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
||||
<div className="d-flex justify-content-end py-3 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-label-secondary btn-sm"
|
||||
className="btn btn-label-secondary btn-xs"
|
||||
onClick={onClear}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary btn-sm">
|
||||
<button type="submit" className="btn btn-primary btn-xs">
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -28,7 +28,6 @@ import moment from "moment";
|
||||
import DatePicker from "../common/DatePicker";
|
||||
import ErrorPage from "../../pages/ErrorPage";
|
||||
import Label from "../common/Label";
|
||||
import EmployeeSearchInput from "../common/EmployeeSearchInput";
|
||||
|
||||
const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
const {
|
||||
@ -58,7 +57,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
});
|
||||
|
||||
const selectedproject = watch("projectId");
|
||||
|
||||
|
||||
const {
|
||||
projectNames,
|
||||
loading: projectLoading,
|
||||
@ -143,7 +142,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (expenseToEdit && data) {
|
||||
if (expenseToEdit && data ) {
|
||||
|
||||
reset({
|
||||
projectId: data.project.id || "",
|
||||
expensesTypeId: data.expensesType.id || "",
|
||||
@ -156,7 +156,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
supplerName: data.supplerName || "",
|
||||
amount: data.amount || "",
|
||||
noOfPersons: data.noOfPersons || "",
|
||||
gstNumber: data.gstNumber || "",
|
||||
gstNumber:data.gstNumber || "",
|
||||
billAttachments: data.documents
|
||||
? data.documents.map((doc) => ({
|
||||
fileName: doc.fileName,
|
||||
@ -183,7 +183,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
const onSubmit = (fromdata) => {
|
||||
let payload = {
|
||||
...fromdata,
|
||||
transactionDate: localToUtc(fromdata.transactionDate),
|
||||
transactionDate: localToUtc(fromdata.transactionDate)
|
||||
|
||||
};
|
||||
if (expenseToEdit) {
|
||||
const editPayload = { ...payload, id: data.id };
|
||||
@ -205,6 +206,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
if (StatusLoadding || projectLoading || ExpenseLoading || isLoading)
|
||||
return <ExpenseSkeleton />;
|
||||
|
||||
|
||||
return (
|
||||
<div className="container p-3">
|
||||
<h5 className="m-0">
|
||||
@ -213,9 +215,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-6">
|
||||
<Label className="form-label" required>
|
||||
Select Project
|
||||
</Label>
|
||||
<Label className="form-label" required>Select Project</Label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("projectId")}
|
||||
@ -296,11 +296,11 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<div className="col-md-6">
|
||||
<Label htmlFor="paidById" className="form-label" required>
|
||||
Paid By
|
||||
</Label>
|
||||
{/* <select
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
id="paymentModeId"
|
||||
{...register("paidById")}
|
||||
@ -321,14 +321,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
</select>
|
||||
{errors.paidById && (
|
||||
<small className="danger-text">{errors.paidById.message}</small>
|
||||
)} */}
|
||||
|
||||
<EmployeeSearchInput
|
||||
control={control}
|
||||
name="paidById"
|
||||
projectId={null}
|
||||
forAll={expenseToEdit ? true : false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -337,11 +330,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
<Label htmlFor="transactionDate" className="form-label" required>
|
||||
Transaction Date
|
||||
</Label>
|
||||
<DatePicker
|
||||
name="transactionDate"
|
||||
control={control}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
<DatePicker name="transactionDate" control={control} maxDate={new Date()}/>
|
||||
|
||||
{errors.transactionDate && (
|
||||
<small className="danger-text">
|
||||
@ -420,9 +409,9 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="col-md-6">
|
||||
<label htmlFor="statusId" className="form-label ">
|
||||
GST Number
|
||||
GST Number
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
@ -432,7 +421,9 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
{...register("gstNumber")}
|
||||
/>
|
||||
{errors.gstNumber && (
|
||||
<small className="danger-text">{errors.gstNumber.message}</small>
|
||||
<small className="danger-text">
|
||||
{errors.gstNumber.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -457,9 +448,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-12">
|
||||
<Label htmlFor="description" className="form-label" required>
|
||||
Description
|
||||
</Label>
|
||||
<Label htmlFor="description" className="form-label" required>Description</Label>
|
||||
<textarea
|
||||
id="description"
|
||||
className="form-control form-control-sm"
|
||||
@ -476,9 +465,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-12">
|
||||
<Label className="form-label" required>
|
||||
Upload Bill{" "}
|
||||
</Label>
|
||||
<Label className="form-label" required>Upload Bill </Label>
|
||||
|
||||
<div
|
||||
className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
|
||||
@ -562,7 +549,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
|
||||
<div className="d-flex justify-content-end gap-3">
|
||||
{" "}
|
||||
<button
|
||||
<button
|
||||
type="reset"
|
||||
disabled={isPending || createPending}
|
||||
onClick={handleClose}
|
||||
@ -581,6 +568,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
? "Update"
|
||||
: "Submit"}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -9,7 +9,7 @@ import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { defaultActionValues, ExpenseActionScheam } from "./ExpenseSchema";
|
||||
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
||||
import { getColorNameFromHex, getIconByFileType, localToUtc } from "../../utils/appUtils";
|
||||
import { getColorNameFromHex, getIconByFileType } from "../../utils/appUtils";
|
||||
import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import {
|
||||
@ -91,7 +91,9 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
const onSubmit = (formData) => {
|
||||
const Payload = {
|
||||
...formData,
|
||||
reimburseDate: localToUtc(formData.reimburseDate),
|
||||
reimburseDate: moment
|
||||
.utc(formData.reimburseDate, "DD-MM-YYYY")
|
||||
.toISOString(),
|
||||
expenseId: ExpenseId,
|
||||
comment: formData.comment,
|
||||
};
|
||||
@ -396,7 +398,6 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
name="reimburseDate"
|
||||
control={control}
|
||||
minDate={data?.transactionDate}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
{errors.reimburseDate && (
|
||||
<small className="danger-text">
|
||||
|
||||
@ -12,13 +12,14 @@ import useMaster from "../../hooks/masterHook/useMaster";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
||||
import Avatar from "../../components/common/Avatar";
|
||||
import { useChangePassword } from "../Context/ChangePasswordContext";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useProjectName } from "../../hooks/useProjects";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { MANAGE_PROJECT } from "../../utils/constants";
|
||||
import { useAuthModal, useLogout, useModal } from "../../hooks/useAuth";
|
||||
import { useAuthModal, useLogout } from "../../hooks/useAuth";
|
||||
|
||||
const Header = () => {
|
||||
const { profile } = useProfile();
|
||||
@ -27,7 +28,6 @@ const Header = () => {
|
||||
const { data, loading } = useMaster();
|
||||
const navigate = useNavigate();
|
||||
const {onOpen} = useAuthModal()
|
||||
const { onOpen:changePass } = useModal("ChangePassword");
|
||||
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
||||
const { mutate : logout,isPending:logouting} = useLogout()
|
||||
|
||||
@ -97,7 +97,7 @@ const Header = () => {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const { openChangePassword } = useChangePassword();
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
@ -189,8 +189,7 @@ const Header = () => {
|
||||
className="navbar-nav-right d-flex align-items-center justify-content-between"
|
||||
id="navbar-collapse"
|
||||
>
|
||||
<div className="d-flex align-items-center">
|
||||
{showProjectDropdown(location.pathname) && (
|
||||
{showProjectDropdown(location.pathname) && (
|
||||
<div className="align-items-center">
|
||||
<i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
|
||||
<div className="btn-group">
|
||||
@ -248,7 +247,6 @@ const Header = () => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ul className="navbar-nav flex-row align-items-center ms-md-auto">
|
||||
<li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
|
||||
@ -396,15 +394,6 @@ const Header = () => {
|
||||
</li>
|
||||
<li>
|
||||
<div className="dropdown-divider"></div>
|
||||
</li>
|
||||
<li onClick={()=>onOpen()}>
|
||||
{" "}
|
||||
<a
|
||||
className="dropdown-item cusor-pointer"
|
||||
>
|
||||
<i className="bx bx-transfer-alt me-2"></i>
|
||||
<span className="align-middle">Switch Workspace</span>
|
||||
</a>
|
||||
</li>
|
||||
<li onClick={handleProfilePage}>
|
||||
<a
|
||||
@ -424,7 +413,7 @@ const Header = () => {
|
||||
<span className="align-middle">Settings</span>
|
||||
</a>
|
||||
</li>
|
||||
<li onClick={changePass}>
|
||||
<li onClick={openChangePassword}>
|
||||
{" "}
|
||||
<a
|
||||
aria-label="go to profile"
|
||||
@ -435,7 +424,15 @@ const Header = () => {
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li onClick={()=>onOpen()}>
|
||||
{" "}
|
||||
<a
|
||||
className="dropdown-item cusor-pointer"
|
||||
>
|
||||
<i className="bx bx-transfer-alt me-2"></i>
|
||||
<span className="align-middle">Switch Tenant</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<div className="dropdown-divider"></div>
|
||||
</li>
|
||||
@ -443,7 +440,7 @@ const Header = () => {
|
||||
<a
|
||||
aria-label="click to log out"
|
||||
className="dropdown-item cusor-pointer"
|
||||
onClick={()=>logout()}
|
||||
onClick={()=>handleLogout()}
|
||||
>
|
||||
{logouting ? "Please Wait":<> <i className="bx bx-log-out me-2"></i>
|
||||
<span className="align-middle">SignOut</span></>}
|
||||
|
||||
@ -93,15 +93,8 @@ const AssignOrg = ({ setStep }) => {
|
||||
<div className="row text-black text-start mb-3">
|
||||
{/* Organization Info Display */}
|
||||
<div className="col-12 mb-3">
|
||||
<div className="d-flex justify-content-between align-items-center text-start mb-1">
|
||||
<div className="d-flex flex-row gap-2 align-items-center text-wrap">
|
||||
<img
|
||||
src="/public/assets/img/orgLogo.png"
|
||||
alt="logo"
|
||||
width={40}
|
||||
height={40}
|
||||
/> <p className="fw-semibold fs-6 m-0">{orgData.name}</p>
|
||||
</div>
|
||||
<div className="d-flex justify-content-between align-items-center text-start mb-2">
|
||||
<div className="fw-semibold text-wrap">{orgData.name}</div>
|
||||
<div className="text-end">
|
||||
<button
|
||||
type="button"
|
||||
@ -113,7 +106,7 @@ const AssignOrg = ({ setStep }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
@ -121,7 +114,7 @@ const AssignOrg = ({ setStep }) => {
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<i className="bx bx-sm bx-user me-1" /> Contact Person :
|
||||
Contact Person :
|
||||
</label>
|
||||
<div className="text-muted">{orgData.contactPerson}</div>
|
||||
</div>
|
||||
@ -132,7 +125,7 @@ const AssignOrg = ({ setStep }) => {
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
|
||||
Contact Number :
|
||||
</label>
|
||||
<div className="text-muted">{orgData.contactNumber}</div>
|
||||
</div>
|
||||
@ -143,7 +136,7 @@ const AssignOrg = ({ setStep }) => {
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<i className='bx bx-sm me-1 bx-envelope'></i> Email Address :
|
||||
Email Address :
|
||||
</label>
|
||||
<div className="text-muted">{orgData.email}</div>
|
||||
</div>
|
||||
@ -154,8 +147,7 @@ const AssignOrg = ({ setStep }) => {
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ maxWidth: "130px" }}
|
||||
>
|
||||
<i className="bx bx-sm me-1 bx-barcode"></i>
|
||||
Service Provider Id (SPRID) :
|
||||
Service provider Id (SPRID) :
|
||||
</label>
|
||||
<div className="text-muted">{orgData.sprid}</div>
|
||||
</div>
|
||||
@ -166,7 +158,7 @@ const AssignOrg = ({ setStep }) => {
|
||||
className="form-label me-1 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<i className='bx bx-sm me-1 bx-map'></i> Address :
|
||||
Address :
|
||||
</label>
|
||||
<div className="text-muted text-start">{orgData.address}</div>
|
||||
</div>
|
||||
@ -241,11 +233,11 @@ const AssignOrg = ({ setStep }) => {
|
||||
<div className="d-flex justify-content-between mt-5">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-outline-secondary"
|
||||
className="btn btn-xs btn-outline-secondary"
|
||||
onClick={handleBack}
|
||||
disabled={isPending}
|
||||
>
|
||||
<i className="bx bx-chevron-left"></i>Back
|
||||
<i className="bx bx-left-arrow-alt"></i> Back
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
@ -255,8 +247,8 @@ const AssignOrg = ({ setStep }) => {
|
||||
{isPending
|
||||
? "Please wait..."
|
||||
: flowType === "default"
|
||||
? "Assign to Organization"
|
||||
: "Assign to Project"}
|
||||
? "Assign Organization"
|
||||
: "Add"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -2,7 +2,6 @@ import React, { useEffect } from "react";
|
||||
import { FormProvider, useForm } from "react-hook-form";
|
||||
import {
|
||||
useCreateOrganization,
|
||||
useOrganization,
|
||||
useOrganizationModal,
|
||||
useUpdateOrganization,
|
||||
} from "../../hooks/useOrganization";
|
||||
@ -19,12 +18,6 @@ const ManagOrg = () => {
|
||||
const { data: service, isLoading } = useGlobalServices();
|
||||
const { flowType, orgData, startStep, onOpen, onClose, prevStep } =
|
||||
useOrganizationModal();
|
||||
const {
|
||||
data: organization,
|
||||
isLoading: organizationLoading,
|
||||
isError,
|
||||
error,
|
||||
} = useOrganization(orgData?.id);
|
||||
|
||||
const method = useForm({
|
||||
resolver: zodResolver(organizationSchema),
|
||||
@ -52,27 +45,25 @@ const ManagOrg = () => {
|
||||
onOpen({ startStep: 1 });
|
||||
onClose();
|
||||
});
|
||||
|
||||
// Prefill form if editing
|
||||
useEffect(() => {
|
||||
if (organization) {
|
||||
if (orgData) {
|
||||
console.log(orgData);
|
||||
reset({
|
||||
name: organization.name || "",
|
||||
contactPerson: organization.contactPerson || "",
|
||||
contactNumber: organization.contactNumber || "",
|
||||
email: organization.email || "",
|
||||
serviceIds: organization.services?.map((s) => s.id) || [],
|
||||
address: organization.address || "",
|
||||
name: orgData.name || "",
|
||||
contactPerson: orgData.contactPerson || "",
|
||||
contactNumber: orgData.contactNumber || "",
|
||||
email: orgData.email || "",
|
||||
serviceIds: orgData.services?.map((s) => s.id) || [],
|
||||
address: orgData.address || "",
|
||||
});
|
||||
}
|
||||
}, [organization, reset, service?.data]);
|
||||
}, [orgData, reset]);
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
let payload = { ...formData };
|
||||
if (organization?.id) {
|
||||
updateOrganization({
|
||||
orgId: organization.id,
|
||||
payload: { ...payload, id: organization.id },
|
||||
});
|
||||
const onSubmit = (payload) => {
|
||||
if (orgData?.id) {
|
||||
updateOrganization({ id: orgData.id, ...payload });
|
||||
} else {
|
||||
createOrganization(payload);
|
||||
}
|
||||
@ -151,11 +142,11 @@ const ManagOrg = () => {
|
||||
<div className="mb-1 text-start">
|
||||
<SelectMultiple
|
||||
name="serviceIds"
|
||||
label="Select Service"
|
||||
options={service?.data}
|
||||
labelKey="name"
|
||||
label="Services"
|
||||
required
|
||||
valueKey="id"
|
||||
IsLoading={isLoading}
|
||||
options={service?.data || []}
|
||||
required = {true}
|
||||
/>
|
||||
{errors.serviceIds && (
|
||||
<span className="danger-text">{errors.serviceIds.message}</span>
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
/* Default: hide scrollbar */
|
||||
.scrollable-tbody {
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.scrollable-tbody::-webkit-scrollbar {
|
||||
width: 0; /* Chrome, Safari */
|
||||
}
|
||||
|
||||
/* On hover: show scrollbar */
|
||||
.scrollable-tbody:hover {
|
||||
scrollbar-width: thin; /* Firefox */
|
||||
}
|
||||
.scrollable-tbody:hover::-webkit-scrollbar {
|
||||
width: 6px; /* Adjust width */
|
||||
}
|
||||
.scrollable-tbody:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.scrollable-tbody:hover::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
@ -10,15 +10,13 @@ import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { spridSchema } from "./OrganizationSchema";
|
||||
import { OrgCardSkeleton } from "./OrganizationSkeleton";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
|
||||
// Zod schema: only allow exactly 4 digits
|
||||
|
||||
const OrgPickerFromSPId = ({ title, placeholder }) => {
|
||||
const { onClose, startStep, flowType, onOpen, prevStep,orgData } =
|
||||
const { onClose, startStep, flowType, onOpen, prevStep } =
|
||||
useOrganizationModal();
|
||||
const clientQuery = useQueryClient()
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
@ -37,11 +35,8 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
|
||||
const onSubmit = (formdata) => {
|
||||
setSPRID(formdata.spridSearchText);
|
||||
};
|
||||
|
||||
const handleCrateOrg = () => {
|
||||
clientQuery.removeQueries({queryKey:["organization"]})
|
||||
onOpen({ startStep: 4,orgData:null })
|
||||
};
|
||||
|
||||
const handleOrg = (orgId) => {};
|
||||
const SP = watch("spridSearchText");
|
||||
return (
|
||||
<div className="d-block">
|
||||
@ -83,13 +78,16 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
|
||||
<div className="d-flex flex-row gap-2 text-start text-black ">
|
||||
<div className="mt-1">
|
||||
<img
|
||||
src="/public/assets/img/orgLogo.png"
|
||||
src="/public/assets/img/SP-Placeholdeer.svg"
|
||||
alt="logo"
|
||||
width={50}
|
||||
height={50}
|
||||
/>
|
||||
</div>
|
||||
<div className="d-flex flex-column p-0 m-0 cursor-pointer">
|
||||
<div
|
||||
className="d-flex flex-column p-0 m-0 cursor-pointer"
|
||||
onClick={() => onOpen({ startStep: 3, orgData: org })}
|
||||
>
|
||||
<span className="fs-6 fw-semibold">{org.name}</span>
|
||||
<div className="d-flex gap-2">
|
||||
<small
|
||||
@ -104,16 +102,6 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
|
||||
<small className="text-small fw-semibold">Address:</small>
|
||||
<div className="d-flex text-wrap">{org.address}</div>
|
||||
</div>
|
||||
<div className="m-0 p-0">
|
||||
{" "}
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => onOpen({ startStep: 3, orgData: org })}
|
||||
>
|
||||
Select
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@ -131,7 +119,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-primary mt-3"
|
||||
onClick={handleCrateOrg}
|
||||
onClick={() => onOpen({ startStep: 4 })}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
Create New Organization
|
||||
|
||||
@ -6,7 +6,6 @@ import {
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import Label from "../common/Label";
|
||||
import Pagination from "../common/Pagination";
|
||||
import "./OrgPicker.css"
|
||||
|
||||
const OrgPickerfromTenant = ({ title }) => {
|
||||
const [searchText, setSearchText] = useState("");
|
||||
@ -71,8 +70,8 @@ const OrgPickerfromTenant = ({ title }) => {
|
||||
|
||||
return (
|
||||
<div className="d-block">
|
||||
<div className="d-flex align-items-center gap-2 mb-1">
|
||||
<Label className="mb-0">{title}</Label>
|
||||
<div className="text-start mb-1">
|
||||
<Label className="text-secondary">{title}</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={searchText}
|
||||
@ -82,12 +81,11 @@ const OrgPickerfromTenant = ({ title }) => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{/* ---- Organization list ---- */}
|
||||
{isLoading ? (
|
||||
<div>Loading....</div>
|
||||
) : data && data?.data?.length > 0 ? (
|
||||
<div className="dataTables_wrapper no-footer pb-5">
|
||||
<div className="dataTables_wrapper no-footer pb-2">
|
||||
<table className="table dataTable text-nowrap">
|
||||
<thead>
|
||||
<tr className="table_header_border">
|
||||
@ -101,41 +99,28 @@ const OrgPickerfromTenant = ({ title }) => {
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<div
|
||||
className="scrollable-tbody overflow-y-auto"
|
||||
style={{ maxHeight: "350px" }}
|
||||
>
|
||||
<table className="table dataTable text-nowrap mb-0">
|
||||
<tbody>
|
||||
{Array.isArray(data.data) && data.data.length > 0
|
||||
? data.data.map((row, i) => (
|
||||
<tbody>
|
||||
{Array.isArray(data.data) && data.data.length > 0
|
||||
? data.data.map((row, i) => (
|
||||
<tr key={i}>
|
||||
{contactList.map((col) => (
|
||||
<td key={col.key} className={col.align}>
|
||||
{col.getValue(row)}
|
||||
</td>
|
||||
))}
|
||||
<td className="sticky-action-column p-0 bg-white">
|
||||
<div className="p-1">
|
||||
<span
|
||||
type="submit"
|
||||
className="btn btn-sm"
|
||||
onClick={() =>
|
||||
onOpen({ startStep: 3, orgData: row })
|
||||
}
|
||||
>
|
||||
<i class='bx bx-right-arrow-circle text-primary'></i>
|
||||
</span>
|
||||
</div>
|
||||
<td className="sticky-action-column bg-white">
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => onOpen({ startStep: 3, orgData: row })}
|
||||
>
|
||||
Select
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
: null}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
: null}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="d-flex flex-column align-items-center text-center text-wrap text-black gap-2">
|
||||
|
||||
@ -19,7 +19,6 @@ import AssignOrg from "./AssignOrg";
|
||||
import ManagOrg from "./ManagOrg";
|
||||
import OrgPickerFromSPId from "./OrgPickerFromSPId";
|
||||
import OrgPickerfromTenant from "./OrgPickerfromTenant";
|
||||
import ViewOrganization from "./ViewOrganization";
|
||||
|
||||
const OrganizationModal = () => {
|
||||
const { isOpen, orgData, startStep, onOpen, onClose, onToggle } =
|
||||
@ -54,14 +53,14 @@ const OrganizationModal = () => {
|
||||
};
|
||||
|
||||
const RenderTitle = useMemo(() => {
|
||||
if (orgData && startStep === 3 ) {
|
||||
if (orgData) {
|
||||
return "Assign Organization";
|
||||
}
|
||||
|
||||
if (startStep === 1) {
|
||||
return orgData && orgData !== null
|
||||
? "Add Organization"
|
||||
: "Choose Organization";
|
||||
: "Choose Organization1";
|
||||
}
|
||||
|
||||
if (startStep === 2) {
|
||||
@ -71,11 +70,8 @@ const OrganizationModal = () => {
|
||||
if (startStep === 3) {
|
||||
return "Assign Organization";
|
||||
}
|
||||
if(startStep === 5){
|
||||
return "Organization Details"
|
||||
}
|
||||
|
||||
return `${orgData ? "Update":"Create"} Organization`;
|
||||
return "Manage Organization";
|
||||
}, [startStep, orgData]);
|
||||
|
||||
const contentBody = (
|
||||
@ -98,9 +94,6 @@ const OrganizationModal = () => {
|
||||
|
||||
{/* ---------- STEP 3: Add New Organization ---------- */}
|
||||
{startStep === 4 && <ManagOrg />}
|
||||
|
||||
{/* ---------- STEP 3: View Organization ---------- */}
|
||||
{startStep === 5 && <ViewOrganization orgId={orgData}/>}
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@ -14,12 +14,12 @@ export const organizationSchema = z.object({
|
||||
contactPerson: z.string().min(1, { message: "Person name required" }),
|
||||
address: z.string().min(1, { message: "Address is required!" }),
|
||||
email: z
|
||||
.string().trim()
|
||||
.string()
|
||||
.min(1, { message: "Email is required" })
|
||||
.email("Invalid email address"),
|
||||
serviceIds: z
|
||||
.array(z.string())
|
||||
.min(1, { message: "Service isrequired" }),
|
||||
.min(1, { message: "Please insert service id" }),
|
||||
});
|
||||
|
||||
export const defaultOrganizationValues = {
|
||||
|
||||
@ -42,82 +42,3 @@ export const OrgCardSkeleton = () => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export const OrgDetailsSkeleton = () => {
|
||||
return (
|
||||
<div className="row text-start p-3">
|
||||
{/* Header */}
|
||||
<div className="col-12 mb-3">
|
||||
<div className="d-flex justify-content-between align-items-center">
|
||||
{/* Logo + Name */}
|
||||
<div className="d-flex flex-row gap-2 align-items-center">
|
||||
<SkeletonLine height={40} width={40} className="rounded-circle" />
|
||||
<SkeletonLine height={18} width="180px" />
|
||||
</div>
|
||||
|
||||
{/* Status Badge */}
|
||||
<SkeletonLine height={20} width="70px" className="rounded-pill" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section Title */}
|
||||
<div className="d-flex text-secondary mb-2">
|
||||
<SkeletonLine height={16} width="140px" />
|
||||
</div>
|
||||
|
||||
{/* Contact Person */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<SkeletonLine height={16} width="130px" className="me-2" />
|
||||
<SkeletonLine height={16} width="140px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Number */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<SkeletonLine height={16} width="130px" className="me-2" />
|
||||
<SkeletonLine height={16} width="140px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div className="col-md-12 mb-3">
|
||||
<div className="d-flex">
|
||||
<SkeletonLine height={16} width="130px" className="me-2" />
|
||||
<SkeletonLine height={16} width="220px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SPRID */}
|
||||
<div className="col-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<SkeletonLine height={16} width="130px" className="me-2" />
|
||||
<SkeletonLine height={16} width="160px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Employees */}
|
||||
<div className="col-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<SkeletonLine height={16} width="130px" className="me-2" />
|
||||
<SkeletonLine height={16} width="60px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Address */}
|
||||
<div className="col-12 mb-3">
|
||||
<div className="d-flex">
|
||||
<SkeletonLine height={16} width="130px" className="me-2" />
|
||||
<SkeletonLine height={16} width="100%" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section Title 2 */}
|
||||
<div className="d-flex text-secondary mb-2">
|
||||
<SkeletonLine height={16} width="200px" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -23,7 +23,7 @@ const OrganizationsList = ({searchText}) => {
|
||||
label: "Organization Name",
|
||||
getValue: (org) => (
|
||||
<div className="d-flex gap-2 py-1 ">
|
||||
<i className="bx bx-buildings"></i>
|
||||
<i class="bx bx-buildings"></i>
|
||||
<span
|
||||
className="text-truncate d-inline-block "
|
||||
style={{ maxWidth: "150px" }}
|
||||
@ -93,7 +93,7 @@ const OrganizationsList = ({searchText}) => {
|
||||
if (isError) return <div>{error?.message || "Something went wrong"}</div>;
|
||||
|
||||
return (
|
||||
<div className="card px-0 px-sm-4 pb-12 pt-5">
|
||||
<div className="card px-0 px-sm-4">
|
||||
<div className="card-datatable table-responsive" id="horizontal-example">
|
||||
<div className="dataTables_wrapper no-footer px-2">
|
||||
<table className="table border-top dataTable text-nowrap">
|
||||
@ -129,7 +129,7 @@ const OrganizationsList = ({searchText}) => {
|
||||
))}
|
||||
<td className="sticky-action-column ">
|
||||
<div className="d-flex justify-content-center gap-2">
|
||||
<i className="bx bx-show text-primary cursor-pointer" onClick={()=>onOpen({startStep:5,orgData:org.id,flowType:"view"})}></i>
|
||||
<i className="bx bx-show text-primary cursor-pointer" ></i>
|
||||
<i className="bx bx-edit text-secondary cursor-pointer" onClick={()=>onOpen({startStep:4,orgData:org,flowType:"edit"})}></i>
|
||||
<i className="bx bx-trash text-danger cursor-pointer"></i>
|
||||
</div>
|
||||
@ -142,7 +142,7 @@ const OrganizationsList = ({searchText}) => {
|
||||
colSpan={organizationsColumns.length + 1}
|
||||
className="text-center"
|
||||
>
|
||||
<p className="fw-semibold">{isLoading ? "Loading....":"Not Found Organization"}</p>
|
||||
<p className="fw-semibold">Not Found</p>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
@ -1,116 +0,0 @@
|
||||
import React from "react";
|
||||
import { useOrganization } from "../../hooks/useOrganization";
|
||||
import { OrgDetailsSkeleton } from "./OrganizationSkeleton";
|
||||
|
||||
const VieworgDataanization = ({ orgId }) => {
|
||||
const { data, isLoading, isError, error } = useOrganization(orgId);
|
||||
if (isLoading) return <OrgDetailsSkeleton />;
|
||||
if (isError) return <div>{error.message}</div>;
|
||||
return (
|
||||
<div className="row text-black text-black text-start ">
|
||||
{/* Header */}
|
||||
<div className="col-12 mb-3">
|
||||
<div className="d-flex justify-content-between align-items-center text-start mb-1">
|
||||
<div className="d-flex flex-row gap-2 align-items-center text-wrap">
|
||||
<img
|
||||
src="/public/assets/img/orgLogo.png"
|
||||
alt="logo"
|
||||
width={40}
|
||||
height={40}
|
||||
/>{" "}
|
||||
<p className="fw-semibold fs-6 m-0">{data?.name}</p>
|
||||
</div>
|
||||
<div className="text-end">
|
||||
<span
|
||||
className={`badge bg-label-${
|
||||
data?.isActive ? "primary" : "secondary"
|
||||
} `}
|
||||
>
|
||||
{data?.isActive ? "Active" : "In-Active"}{" "}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex text-secondary mb-2">
|
||||
{" "}
|
||||
<i className="bx bx-sm bx-info-circle me-1" /> Organization Info
|
||||
</div>
|
||||
{/* Contact Info */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<i className="bx bx-sm bx-user me-1" /> Contact Person :
|
||||
</label>
|
||||
<div className="text-muted">{data?.contactPerson}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<i className="bx bx-sm me-1 bx-phone"></i> Contact Number :
|
||||
</label>
|
||||
<div className="text-muted">{data?.contactNumber}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<i className="bx bx-sm me-1 bx-envelope"></i> Email Address :
|
||||
</label>
|
||||
<div className="text-muted">{data?.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ maxWidth: "130px" }}
|
||||
>
|
||||
<i className="bx bx-sm me-1 bx-barcode"></i>
|
||||
Service Provider Id (SPRID) :
|
||||
</label>
|
||||
<div className="text-muted">{data?.sprid}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ maxWidth: "130px" }}
|
||||
>
|
||||
<i className="bx bx-sm me-1 bx-group"></i>
|
||||
Employees :
|
||||
</label>
|
||||
<div className="text-muted">{data?.activeEmployeeCount}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-1 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<i className="bx bx-sm me-1 bx-map"></i> Address :
|
||||
</label>
|
||||
<div className="text-muted text-start">{data?.address}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex text-secondary mb-2">
|
||||
{" "}
|
||||
<i className="bx bx-sm bx-briefcase me-1" /> Projects And Services
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VieworgDataanization;
|
||||
@ -42,7 +42,7 @@ const AboutProject = () => {
|
||||
{IsOpenModal && (
|
||||
<GlobalModel isOpen={IsOpenModal} closeModal={() => setIsOpenModal(false)}>
|
||||
<ManageProjectInfo
|
||||
project={projects_Details?.id}
|
||||
project={projects_Details}
|
||||
handleSubmitForm={handleFormSubmit}
|
||||
onClose={() => setIsOpenModal(false)}
|
||||
isPending={isPending}
|
||||
|
||||
@ -1,26 +1,24 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||
import useMaster, { useServices } from "../../hooks/masterHook/useMaster";
|
||||
import useMaster from "../../hooks/masterHook/useMaster";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
|
||||
import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
|
||||
import { TasksRepository } from "../../repositories/ProjectRepository";
|
||||
import showToast from "../../services/toastService";
|
||||
import {
|
||||
useEmployeeForTaskAssign,
|
||||
useProjectAssignedOrganizationsName,
|
||||
useProjectAssignedServices,
|
||||
useProjectDetails,
|
||||
} from "../../hooks/useProjects";
|
||||
import { useProjectDetails } from "../../hooks/useProjects";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import { useCreateTask } from "../../hooks/useTasks";
|
||||
import Label from "../common/Label";
|
||||
|
||||
const TaskSchema = (maxPlanned) => {
|
||||
return z.object({
|
||||
const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
const maxPlanned =
|
||||
assignData?.workItem?.plannedWork - assignData?.workItem?.completedWork;
|
||||
|
||||
const schema = z.object({
|
||||
selectedEmployees: z
|
||||
.array(z.string())
|
||||
.min(1, { message: "At least one employee must be selected" }),
|
||||
@ -39,26 +37,20 @@ const TaskSchema = (maxPlanned) => {
|
||||
})
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
const planned = assignData?.workItem?.plannedWork || 0;
|
||||
const completed = assignData?.workItem?.completedWork || 0;
|
||||
const maxPlanned = planned - completed;
|
||||
|
||||
const [isHelpVisibleTarget, setIsHelpVisibleTarget] = useState(false);
|
||||
const helpPopupRefTarget = useRef(null);
|
||||
const [isHelpVisible, setIsHelpVisible] = useState(false);
|
||||
const [selectedService, setSelectedService] = useState(null);
|
||||
const [selectedOrganization, setSelectedOrganization] = useState(null);
|
||||
|
||||
const { mutate: assignTask, isPending: isSubmitting } = useCreateTask({
|
||||
onSuccessCallback: closedModel,
|
||||
onSuccessCallback: () => {
|
||||
closedModel();
|
||||
},
|
||||
});
|
||||
|
||||
const dropdownRef = useRef(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
// Close dropdown on outside click
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
||||
@ -71,47 +63,48 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
|
||||
const infoRef = useRef(null);
|
||||
const infoRef1 = useRef(null);
|
||||
|
||||
// State for search term
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof bootstrap !== "undefined") {
|
||||
infoRef.current &&
|
||||
if (infoRef.current) {
|
||||
new bootstrap.Popover(infoRef.current, {
|
||||
trigger: "focus",
|
||||
placement: "right",
|
||||
html: true,
|
||||
content: `<div>Total Pending tasks of the Activity</div>`,
|
||||
});
|
||||
}
|
||||
|
||||
infoRef1.current &&
|
||||
if (infoRef1.current) {
|
||||
new bootstrap.Popover(infoRef1.current, {
|
||||
trigger: "focus",
|
||||
placement: "right",
|
||||
html: true,
|
||||
content: `<div>Target task for today</div>`,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.warn("Bootstrap is not available. Popovers might not function.");
|
||||
}
|
||||
}, []);
|
||||
|
||||
const selectedProject = useSelectedProject();
|
||||
const { data: serviceList, isLoading: isServiceLoading } = useProjectAssignedServices(selectedProject);
|
||||
const { data: organizationList, isLoading: isOrgLoading } =
|
||||
useProjectAssignedOrganizationsName(selectedProject);
|
||||
const { data: employees, isLoading: isEmployeeLoading } =
|
||||
useEmployeeForTaskAssign(
|
||||
selectedProject,
|
||||
selectedService,
|
||||
selectedOrganization
|
||||
);
|
||||
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
const {
|
||||
employees,
|
||||
loading: employeeLoading,
|
||||
recallEmployeeData,
|
||||
} = useEmployeesAllOrByProjectId(false, selectedProject, false);
|
||||
const dispatch = useDispatch();
|
||||
const { loading, data: jobRoleData } = useMaster();
|
||||
const { loading } = useMaster();
|
||||
const { data: jobRoleData } = useMaster();
|
||||
|
||||
// Changed to an array to hold multiple selected roles
|
||||
const [selectedRoles, setSelectedRoles] = useState(["all"]);
|
||||
const [displayedSelection, setDisplayedSelection] = useState("");
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
@ -121,98 +114,133 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
reset,
|
||||
trigger,
|
||||
} = useForm({
|
||||
defaultValues: { selectedEmployees: [], description: "", plannedTask: "" },
|
||||
resolver: zodResolver(TaskSchema(maxPlanned)),
|
||||
defaultValues: {
|
||||
selectedEmployees: [],
|
||||
description: "",
|
||||
plannedTask: "",
|
||||
},
|
||||
resolver: zodResolver(schema),
|
||||
});
|
||||
|
||||
const handleCheckboxChange = (event, user) => {
|
||||
const updatedSelectedEmployees = event.target.checked
|
||||
? [...(watch("selectedEmployees") || []), user.id].filter(
|
||||
(v, i, a) => a.indexOf(v) === i
|
||||
)
|
||||
: (watch("selectedEmployees") || []).filter((id) => id !== user.id);
|
||||
const isChecked = event.target.checked;
|
||||
let updatedSelectedEmployees = watch("selectedEmployees") || [];
|
||||
|
||||
if (isChecked) {
|
||||
if (!updatedSelectedEmployees.includes(user.id)) {
|
||||
updatedSelectedEmployees = [...updatedSelectedEmployees, user.id];
|
||||
}
|
||||
} else {
|
||||
updatedSelectedEmployees = updatedSelectedEmployees?.filter(
|
||||
(id) => id !== user.id
|
||||
);
|
||||
}
|
||||
setValue("selectedEmployees", updatedSelectedEmployees);
|
||||
trigger("selectedEmployees");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(changeMaster("Job Role"));
|
||||
// Initial state should reflect "All Roles" selected
|
||||
setSelectedRoles(["all"]);
|
||||
}, [dispatch]);
|
||||
|
||||
// Modified handleRoleChange to handle multiple selections
|
||||
const handleRoleChange = (event, roleId) => {
|
||||
setSelectedRoles((prev) => {
|
||||
if (roleId === "all") return ["all"];
|
||||
const newRoles = prev.filter((r) => r !== "all");
|
||||
return newRoles.includes(roleId)
|
||||
? newRoles.filter((r) => r !== roleId)
|
||||
: [...newRoles, roleId];
|
||||
});
|
||||
// If 'all' is selected, clear other selections
|
||||
if (roleId === "all") {
|
||||
setSelectedRoles(["all"]);
|
||||
} else {
|
||||
setSelectedRoles((prevSelectedRoles) => {
|
||||
// If "all" was previously selected, remove it
|
||||
const newRoles = prevSelectedRoles.filter((role) => role !== "all");
|
||||
if (newRoles.includes(roleId)) {
|
||||
// If role is already selected, unselect it
|
||||
return newRoles.filter((id) => id !== roleId);
|
||||
} else {
|
||||
// If role is not selected, add it
|
||||
return [...newRoles, roleId];
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Update displayedSelection based on selectedRoles
|
||||
if (selectedRoles.includes("all")) {
|
||||
setDisplayedSelection("All Roles");
|
||||
} else if (selectedRoles.length > 0) {
|
||||
setDisplayedSelection(
|
||||
selectedRoles
|
||||
.map((id) => jobRoleData?.find((r) => String(r.id) === id)?.name)
|
||||
.filter(Boolean)
|
||||
.join(", ")
|
||||
);
|
||||
} else setDisplayedSelection("Select Roles");
|
||||
const selectedRoleNames = selectedRoles.map(roleId => {
|
||||
const role = jobRoleData?.find(r => String(r.id) === roleId);
|
||||
return role ? role.name : '';
|
||||
}).filter(Boolean); // Filter out empty strings for roles not found
|
||||
setDisplayedSelection(selectedRoleNames.join(', '));
|
||||
} else {
|
||||
setDisplayedSelection("Select Roles");
|
||||
}
|
||||
}, [selectedRoles, jobRoleData]);
|
||||
|
||||
const handleSearchChange = (e) => setSearchTerm(e.target.value);
|
||||
|
||||
const filteredEmployees = employees?.data?.filter((emp) => {
|
||||
const handleSearchChange = (event) => {
|
||||
setSearchTerm(event.target.value);
|
||||
};
|
||||
|
||||
// Filter employees first by role, then by search term AND job role name
|
||||
const filteredEmployees = employees?.filter((emp) => {
|
||||
const matchesRole =
|
||||
selectedRoles.includes("all") ||
|
||||
selectedRoles.includes(String(emp.jobRoleId));
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
selectedRoles.includes("all") || selectedRoles.includes(String(emp.jobRoleId));
|
||||
// Convert both first and last names and job role name to lowercase for case-insensitive matching
|
||||
const fullName = `${emp.firstName} ${emp.lastName}`.toLowerCase();
|
||||
const jobRoleName =
|
||||
jobRoleData
|
||||
?.find((role) => role.id === emp.jobRoleId)
|
||||
?.name?.toLowerCase() || "";
|
||||
return (
|
||||
matchesRole &&
|
||||
(fullName.includes(searchLower) || jobRoleName.includes(searchLower))
|
||||
);
|
||||
|
||||
const jobRoleName = jobRoleData?.find((role) => role.id === emp.jobRoleId)?.name?.toLowerCase() || "";
|
||||
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
// Check if the full name OR job role name includes the search term
|
||||
const matchesSearch = fullName.includes(searchLower) || jobRoleName.includes(searchLower);
|
||||
return matchesRole && matchesSearch;
|
||||
});
|
||||
|
||||
const jobRolesForDropdown = jobRoleData?.filter((role) =>
|
||||
new Set(employees?.data?.map((emp) => emp.jobRoleId).filter(Boolean)).has(
|
||||
role.id
|
||||
)
|
||||
// Determine unique job role IDs from the filtered employees (for dropdown options)
|
||||
const uniqueJobRoleIdsInFilteredEmployees = new Set(
|
||||
employees?.map(emp => emp.jobRoleId).filter(Boolean)
|
||||
);
|
||||
|
||||
// Filter jobRoleData to only include roles present in the uniqueJobRoleIdsInFilteredEmployees
|
||||
const jobRolesForDropdown = jobRoleData?.filter(role =>
|
||||
uniqueJobRoleIdsInFilteredEmployees.has(role.id)
|
||||
);
|
||||
|
||||
// Calculate the count of selected roles for display
|
||||
const selectedRolesCount = selectedRoles.includes("all")
|
||||
? 0
|
||||
? 0 // "All Roles" doesn't contribute to a specific count
|
||||
: selectedRoles.length;
|
||||
|
||||
const onSubmit = (data) => {
|
||||
const selectedEmployeeIds = data.selectedEmployees;
|
||||
|
||||
const taskTeamWithDetails = selectedEmployeeIds
|
||||
?.map((empId) => empId)
|
||||
?.filter(Boolean);
|
||||
const formattedData = {
|
||||
taskTeam: taskTeamWithDetails,
|
||||
plannedTask: data.plannedTask,
|
||||
description: data.description,
|
||||
assignmentDate: new Date().toISOString(),
|
||||
workItemId: assignData?.workItem.id,
|
||||
};
|
||||
assignTask({
|
||||
payload: {
|
||||
taskTeam: data.selectedEmployees.filter(Boolean),
|
||||
plannedTask: data.plannedTask,
|
||||
description: data.description,
|
||||
assignmentDate: new Date().toISOString(),
|
||||
workItemId: assignData?.workItem.id,
|
||||
},
|
||||
payload: formattedData,
|
||||
workAreaId: assignData?.workArea?.id,
|
||||
});
|
||||
};
|
||||
|
||||
function closedModel() {
|
||||
const closedModel = () => {
|
||||
reset();
|
||||
onClose();
|
||||
}
|
||||
|
||||
};
|
||||
return (
|
||||
<div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
|
||||
<p className="align-items-center flex-wrap m-0">Assign Task</p>
|
||||
<p className="align-items-center flex-wrap m-0 ">Assign Task</p>
|
||||
<div className="container my-3">
|
||||
<div className="mb-1">
|
||||
<p className="mb-0">
|
||||
@ -224,7 +252,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
assignData?.workArea?.areaName,
|
||||
assignData?.workItem?.activityMaster?.activityName,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.filter(Boolean) // Filter out any undefined/null values
|
||||
.map((item, index, array) => (
|
||||
<span key={index} className="d-flex align-items-center">
|
||||
{item}
|
||||
@ -240,64 +268,20 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
<div className="form-label text-start">
|
||||
<div className="row mb-1">
|
||||
<div className="col-12">
|
||||
<div className="row text-start">
|
||||
<div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center">
|
||||
<div>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
value={selectedOrganization || ""}
|
||||
onChange={(e) =>
|
||||
setSelectedOrganization(e.target.value)
|
||||
}
|
||||
>
|
||||
{isServiceLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">--Select Organization--</option>
|
||||
{organizationList?.map((org,index) => (
|
||||
<option key={`${org.id}-${index}`} value={org.id}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
value={selectedService || ""}
|
||||
onChange={(e) => setSelectedService(e.target.value)}
|
||||
>
|
||||
{isOrgLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">--Select Service--</option>
|
||||
{serviceList?.map((service,index) => (
|
||||
<option key={`${service.id}-${index}`} value={service.id}>
|
||||
{service.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-text text-start">
|
||||
<div
|
||||
className="col-12 col-md-4 d-flex flex-row gap-3 align-items-center justify-content-end"
|
||||
className="d-flex align-items-center form-text fs-7"
|
||||
ref={dropdownRef}
|
||||
>
|
||||
<span className="text-dark">Select Team</span>
|
||||
|
||||
{/* Dropdown */}
|
||||
<div className="dropdown position-relative d-inline-block">
|
||||
<a
|
||||
className={`dropdown-toggle hide-arrow cursor-pointer ${
|
||||
selectedRoles.includes("all") ||
|
||||
selectedRoles.length === 0
|
||||
className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") || selectedRoles.length === 0
|
||||
? "text-secondary"
|
||||
: "text-primary"
|
||||
}`}
|
||||
}`}
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
<i className="bx bx-slider-alt ms-2"></i>
|
||||
@ -306,7 +290,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
{/* Badge */}
|
||||
{selectedRolesCount > 0 && (
|
||||
<span
|
||||
className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white text-tiny"
|
||||
className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white"
|
||||
style={{
|
||||
fontSize: "0.65rem",
|
||||
minWidth: "18px",
|
||||
@ -336,9 +320,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
id="checkboxAllRoles"
|
||||
value="all"
|
||||
checked={selectedRoles.includes("all")}
|
||||
onChange={(e) =>
|
||||
handleRoleChange(e, e.target.value)
|
||||
}
|
||||
onChange={(e) => handleRoleChange(e, e.target.value)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label ms-2"
|
||||
@ -358,12 +340,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
type="checkbox"
|
||||
id={`checkboxRole-${role.id}`}
|
||||
value={role.id}
|
||||
checked={selectedRoles.includes(
|
||||
String(role.id)
|
||||
)}
|
||||
onChange={(e) =>
|
||||
handleRoleChange(e, e.target.value)
|
||||
}
|
||||
checked={selectedRoles.includes(String(role.id))}
|
||||
onChange={(e) => handleRoleChange(e, e.target.value)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label ms-2"
|
||||
@ -379,15 +357,14 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
</div>
|
||||
|
||||
{/* Search Box */}
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm ms-auto mb-2 mt-2"
|
||||
placeholder="Search employees or roles..."
|
||||
value={searchTerm}
|
||||
onChange={handleSearchChange}
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm ms-auto mb-2 mt-2"
|
||||
placeholder="Search employees or roles..."
|
||||
value={searchTerm}
|
||||
onChange={handleSearchChange}
|
||||
style={{ maxWidth: "200px" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -404,19 +381,19 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
>
|
||||
{selectedRoles?.length > 0 && (
|
||||
<div className="row">
|
||||
{isEmployeeLoading ? (
|
||||
{employeeLoading ? (
|
||||
<div className="col-12">
|
||||
<p className="text-center">Loading employees...</p>
|
||||
</div>
|
||||
) : filteredEmployees?.length > 0 ? (
|
||||
filteredEmployees.map((emp,index) => {
|
||||
filteredEmployees.map((emp) => {
|
||||
const jobRole = jobRoleData?.find(
|
||||
(role) => role?.id === emp?.jobRoleId
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${emp.index}-${index}`}
|
||||
key={emp.id}
|
||||
className="col-6 col-md-4 col-lg-3 mb-3"
|
||||
>
|
||||
<div className="form-check d-flex align-items-start">
|
||||
@ -464,7 +441,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
) : (
|
||||
<div className="col-12">
|
||||
<p className="text-center">
|
||||
No employees found for the selected filter.
|
||||
No employees found for the selected role.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@ -479,14 +456,12 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
{watch("selectedEmployees")?.length > 0 && (
|
||||
<div className="mt-1">
|
||||
<div className="text-start px-2">
|
||||
{watch("selectedEmployees")?.map((empId,ind) => {
|
||||
const emp = employees?.data?.find(
|
||||
(emp) => emp.id === empId
|
||||
);
|
||||
{watch("selectedEmployees")?.map((empId) => {
|
||||
const emp = employees.find((emp) => emp.id === empId);
|
||||
return (
|
||||
emp && (
|
||||
<span
|
||||
key={`${empId}-${ind}`}
|
||||
key={empId}
|
||||
className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
|
||||
>
|
||||
{emp.firstName} {emp.lastName}
|
||||
@ -531,12 +506,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
{assignData?.workItem?.plannedWork -
|
||||
assignData?.workItem?.completedWork}
|
||||
</strong>{" "}
|
||||
<u>
|
||||
{
|
||||
assignData?.workItem?.activityMaster
|
||||
?.unitOfMeasurement
|
||||
}
|
||||
</u>
|
||||
<u>{assignData?.workItem?.activityMaster?.unitOfMeasurement}</u>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
@ -567,15 +537,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
className="form-control form-control-sm"
|
||||
{...field}
|
||||
/>
|
||||
<span
|
||||
style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}
|
||||
>
|
||||
<u>
|
||||
{
|
||||
assignData?.workItem?.activityMaster
|
||||
?.unitOfMeasurement
|
||||
}
|
||||
</u>
|
||||
<span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}>
|
||||
<u>{assignData?.workItem?.activityMaster?.unitOfMeasurement}</u>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
@ -583,17 +546,19 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
</div>
|
||||
|
||||
{errors.plannedTask && (
|
||||
<div className="danger-text mt-1">
|
||||
{errors.plannedTask.message}
|
||||
</div>
|
||||
<div className="danger-text mt-1">{errors.plannedTask.message}</div>
|
||||
)}
|
||||
</div>
|
||||
<Label
|
||||
|
||||
{/* <label
|
||||
className="form-text fs-7 m-1 text-lg text-dark"
|
||||
htmlFor="descriptionTextarea"
|
||||
required
|
||||
htmlFor="descriptionTextarea" // Changed htmlFor for better accessibility
|
||||
>
|
||||
Description
|
||||
</label> */}
|
||||
<Label className="form-text fs-7 m-1 text-lg text-dark"
|
||||
htmlFor="descriptionTextarea" required>
|
||||
Description
|
||||
</Label>
|
||||
<Controller
|
||||
name="description"
|
||||
@ -627,6 +592,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
{isSubmitting ? "Please Wait" : "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -32,8 +32,9 @@ const EditActivityModal = ({
|
||||
building,
|
||||
floor,
|
||||
onClose,
|
||||
}) => {
|
||||
|
||||
} ) =>
|
||||
{
|
||||
|
||||
const { activities, loading: loadingActivities } = useActivitiesMaster();
|
||||
const { categories, loading: loadingCategories } = useWorkCategoriesMaster();
|
||||
const [selectedActivity, setSelectedActivity] = useState(null);
|
||||
@ -56,12 +57,13 @@ const EditActivityModal = ({
|
||||
comment: "",
|
||||
},
|
||||
});
|
||||
const { mutate: UpdateTask, isPending } = useManageTask({
|
||||
onSuccessCallback: (response) => {
|
||||
showToast(response?.message, "success")
|
||||
onClose()
|
||||
}
|
||||
});
|
||||
const { mutate: UpdateTask, isPending } = useManageTask({
|
||||
onSuccessCallback: (response) =>
|
||||
{
|
||||
showToast( response?.message, "success" )
|
||||
onClose()
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
|
||||
@ -80,33 +82,34 @@ const EditActivityModal = ({
|
||||
[categories]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!workItem) return;
|
||||
console.log(workItem)
|
||||
reset({
|
||||
activityID: String(
|
||||
workItem?.workItem?.activityId || workItem?.activityMaster?.id
|
||||
),
|
||||
workCategoryId: String(
|
||||
workItem?.workItem?.workCategoryId || workItem?.workCategoryMaster?.id
|
||||
),
|
||||
plannedWork:
|
||||
workItem?.workItem?.plannedWork || workItem?.plannedWork || 0,
|
||||
completedWork:
|
||||
workItem?.workItem?.completedWork || workItem?.completedWork || 0,
|
||||
comment: workItem?.workItem?.description || workItem?.description || "",
|
||||
});
|
||||
}, [workItem?.id, selectedActivity]);
|
||||
useEffect(() => {
|
||||
if (!workItem) return;
|
||||
console.log(workItem)
|
||||
reset({
|
||||
activityID: String(
|
||||
workItem?.workItem?.activityId || workItem?.activityMaster?.id
|
||||
),
|
||||
workCategoryId: String(
|
||||
workItem?.workItem?.workCategoryId || workItem?.workCategoryMaster?.id
|
||||
),
|
||||
plannedWork:
|
||||
workItem?.workItem?.plannedWork || workItem?.plannedWork || 0,
|
||||
completedWork:
|
||||
workItem?.workItem?.completedWork || workItem?.completedWork || 0,
|
||||
comment: workItem?.workItem?.description || workItem?.description || "",
|
||||
});
|
||||
}, [workItem?.id,selectedActivity]);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const selected = activities?.find((a) => a.id === activityID);
|
||||
setSelectedActivity(selected || null);
|
||||
setSelectedActivity( selected || null );
|
||||
}, [activityID, activities]);
|
||||
|
||||
const onSubmitForm = (data) => {
|
||||
const payload = {
|
||||
const onSubmitForm = (data) =>
|
||||
{
|
||||
const payload = {
|
||||
...data,
|
||||
id: workItem?.workItem?.id ?? workItem?.id,
|
||||
buildingID: building?.id,
|
||||
@ -122,9 +125,9 @@ const EditActivityModal = ({
|
||||
buildingId: building?.id,
|
||||
floorId: floor?.id,
|
||||
workAreaId: workArea?.id,
|
||||
previousCompletedWork: completedTask
|
||||
previousCompletedWork:completedTask
|
||||
});
|
||||
}
|
||||
}
|
||||
return (
|
||||
<form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<div className="text-center mb-1">
|
||||
@ -159,26 +162,14 @@ const EditActivityModal = ({
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Select Service</label>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
value={
|
||||
workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
|
||||
}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Select Activity</label>
|
||||
<select
|
||||
{...register("activityID")}
|
||||
className="form-select form-select-sm"
|
||||
disabled
|
||||
>
|
||||
<option >Select Activity</option>
|
||||
<option disabled>Select Activity</option>
|
||||
{loadingActivities ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
@ -273,7 +264,7 @@ const EditActivityModal = ({
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? "Please Wait..." : "Edit Task"}
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import WorkArea from "./WorkArea";
|
||||
const Floor = ({ floor, workAreas, forBuilding }) => {
|
||||
const Floor = ({ floor, workAreas, forBuilding,serviceId }) => {
|
||||
return (
|
||||
<React.Fragment key={floor.id}>
|
||||
{workAreas && workAreas.length > 0 ? (
|
||||
@ -10,6 +10,7 @@ const Floor = ({ floor, workAreas, forBuilding }) => {
|
||||
key={workArea.id}
|
||||
workArea={workArea}
|
||||
floor={floor}
|
||||
serviceId={serviceId}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
|
||||
@ -11,7 +11,7 @@ import {
|
||||
getCachedData,
|
||||
} from "../../../slices/apiDataManager";
|
||||
|
||||
const InfraTable = ({ buildings, projectId }) => {
|
||||
const InfraTable = ({ buildings, projectId, serviceId }) => {
|
||||
const [projectBuilding, setProjectBuilding] = useState([]);
|
||||
const [expandedBuildings, setExpandedBuildings] = useState([]);
|
||||
const [showFloorModal, setShowFloorModal] = useState(false);
|
||||
@ -90,6 +90,7 @@ const InfraTable = ({ buildings, projectId }) => {
|
||||
forBuilding={building}
|
||||
floor={floor}
|
||||
workAreas={floor.workAreas}
|
||||
serviceId={serviceId}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
|
||||
@ -3,12 +3,10 @@ import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import {
|
||||
useActivitiesByGroups,
|
||||
useActivitiesMaster,
|
||||
useGroups,
|
||||
useWorkCategoriesMaster,
|
||||
} from "../../../hooks/masterHook/useMaster";
|
||||
import { useManageTask, useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects";
|
||||
import { useManageTask, useProjectAssignedServices } from "../../../hooks/useProjects";
|
||||
import showToast from "../../../services/toastService";
|
||||
import Label from "../../common/Label";
|
||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
||||
@ -17,8 +15,6 @@ const taskSchema = z.object({
|
||||
buildingID: z.string().min(1, "Building is required"),
|
||||
floorId: z.string().min(1, "Floor is required"),
|
||||
workAreaId: z.string().min(1, "Work Area is required"),
|
||||
serviceId: z.string().min(1, "Service is required"),
|
||||
activityGroupId: z.string().min(1, "Activity Group is required"),
|
||||
activityID: z.string().min(1, "Activity is required"),
|
||||
workCategoryId: z.string().min(1, "Work Category is required"),
|
||||
plannedWork: z.number().min(1, "Planned Work must be greater than 0"),
|
||||
@ -31,8 +27,6 @@ const defaultModel = {
|
||||
buildingID: "",
|
||||
floorId: "",
|
||||
workAreaId: "",
|
||||
serviceId: "",
|
||||
activityGroupId: "",
|
||||
activityID: "",
|
||||
workCategoryId: "",
|
||||
plannedWork: 0,
|
||||
@ -41,42 +35,18 @@ const defaultModel = {
|
||||
};
|
||||
|
||||
const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
// const { activities, loading: activityLoading } = useActivitiesMaster();
|
||||
const { activities, loading: activityLoading } = useActivitiesMaster();
|
||||
const { categories, categoryLoading } = useWorkCategoriesMaster();
|
||||
|
||||
const projectId = useSelectedProject();
|
||||
|
||||
const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
|
||||
const { data: assignedOrganizations, isLoading: orgLoading } = useProjectAssignedOrganizationsName(projectId);
|
||||
|
||||
|
||||
|
||||
const [selectedService, setSelectedService] = useState("");
|
||||
const [selectedGroup, setSelectedGroup] = useState("");
|
||||
const { data: groupsResponse, isLoading: groupsLoading } = useGroups(selectedService);
|
||||
const groups = groupsResponse?.data ?? [];
|
||||
|
||||
const { data: activitiesResponse, isLoading: activitiesLoading } = useActivitiesByGroups(selectedGroup);
|
||||
const activities = activitiesResponse?.data ?? [];
|
||||
// Fetch Assigned Organizations (Activity Groups)
|
||||
|
||||
const [selectedOrg, setSelectedOrg] = useState("");
|
||||
const handleServiceChange = (e) => {
|
||||
const value = e.target.value;
|
||||
setSelectedService(value);
|
||||
setSelectedGroup("");
|
||||
setValue("activityGroupId", "");
|
||||
setValue("activityID", "");
|
||||
setSelectedService(e.target.value);
|
||||
};
|
||||
|
||||
const handleGroupChange = (e) => {
|
||||
const value = e.target.value;
|
||||
setSelectedGroup(value);
|
||||
setValue("activityGroupId", value);
|
||||
setValue("activityID", "");
|
||||
};
|
||||
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
@ -112,10 +82,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
const { mutate: CreateTask, isPending } = useManageTask({
|
||||
onSuccessCallback: (response) => {
|
||||
showToast(response?.message, "success");
|
||||
setValue("activityID",""),
|
||||
setValue("plannedWork",0),
|
||||
setValue("completedWork",0)
|
||||
setValue("comment","")
|
||||
onClose?.();
|
||||
},
|
||||
});
|
||||
useEffect(() => {
|
||||
@ -221,18 +188,15 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
{/* Services Selection */}
|
||||
{selectedWorkArea && (
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>Select Service</Label>
|
||||
<Label className="form-label">Select Services</Label>
|
||||
<select
|
||||
name="DataTables_Table_0_length"
|
||||
aria-controls="DataTables_Table_0"
|
||||
className="form-select form-select-sm"
|
||||
{...register("serviceId")}
|
||||
aria-label="Select Service"
|
||||
value={selectedService}
|
||||
// onChange={handleServiceChange}
|
||||
onChange={(e) => {
|
||||
handleServiceChange(e);
|
||||
setValue("serviceId", e.target.value);
|
||||
}}
|
||||
onChange={handleServiceChange}
|
||||
>
|
||||
<option value="">Select Service</option>
|
||||
{servicesLoading && <option>Loading...</option>}
|
||||
{assignedServices?.map((service) => (
|
||||
<option key={service.id} value={service.id}>
|
||||
@ -240,46 +204,35 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.buildingID && (
|
||||
<p className="danger-text">{errors.buildingID.message}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Activity Group (Organization) Selection */}
|
||||
{selectedService && (
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>Select Activity Group</Label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("activityGroupId")}
|
||||
value={selectedGroup}
|
||||
onChange={handleGroupChange}
|
||||
>
|
||||
<option value="">Select Group</option>
|
||||
{groupsLoading && <option>Loading...</option>}
|
||||
{groups?.map((g) => (
|
||||
<option key={g.id} value={g.id}>{g.name}</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.activityGroupId && <p className="danger-text">{errors.activityGroupId.message}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Activity Selection */}
|
||||
{selectedGroup && (
|
||||
{selectedWorkArea && (
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>Select Activity</Label>
|
||||
<select className="form-select form-select-sm" {...register("activityID")}>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("activityID")}
|
||||
>
|
||||
<option value="">Select Activity</option>
|
||||
{activitiesLoading && <option>Loading...</option>}
|
||||
{activities?.map((a) => (
|
||||
<option key={a.id} value={a.id}>{a.activityName}</option>
|
||||
{activityData.map((a) => (
|
||||
<option key={a.id} value={a.id}>
|
||||
{a.activityName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.activityID && <p className="danger-text">{errors.activityID.message}</p>}
|
||||
{errors.activityID && (
|
||||
<p className="danger-text">{errors.activityID.message}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{watchActivityId && (
|
||||
|
||||
{selectedWorkArea && (
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Select Work Category</label>
|
||||
<select
|
||||
@ -359,10 +312,9 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
// disabled={isSubmitting}
|
||||
disabled={isPending}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isPending ? "Please Wait..." : "Add Task"}
|
||||
{isSubmitting ? "Please Wait..." : "Add Task"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import WorkItem from "./WorkItem";
|
||||
import { useCurrentService, useProjectDetails, useProjectTasks } from "../../../hooks/useProjects";
|
||||
import { cacheData, useSelectedProject } from "../../../slices/apiDataManager";
|
||||
import { useProjectDetails, useProjectTasks } from "../../../hooks/useProjects";
|
||||
import { cacheData } from "../../../slices/apiDataManager";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { refreshData } from "../../../slices/localVariablesSlice";
|
||||
import ProjectRepository from "../../../repositories/ProjectRepository";
|
||||
@ -14,12 +14,10 @@ import {
|
||||
} from "../../../utils/constants";
|
||||
import { useParams } from "react-router-dom";
|
||||
import ProgressBar from "../../common/ProgressBar";
|
||||
import { formatNumber } from "../../../utils/dateUtils";
|
||||
import { useServices } from "../../../hooks/masterHook/useMaster";
|
||||
import {formatNumber} from "../../../utils/dateUtils";
|
||||
|
||||
const WorkArea = ({ workArea, floor, forBuilding }) => {
|
||||
const selectedProject = useSelectedProject()
|
||||
const selectedService = useCurrentService()
|
||||
const WorkArea = ({ workArea, floor, forBuilding,serviceId = null }) => {
|
||||
const selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||
const { projects_Details, loading } = useProjectDetails(selectedProject);
|
||||
const [IsExpandedArea, setIsExpandedArea] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
@ -27,7 +25,8 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
|
||||
|
||||
const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
|
||||
const ManageAndAssignTak = useHasUserPermission(ASSIGN_REPORT_TASK);
|
||||
const { ProjectTaskList, isLoading } = useProjectTasks(workArea.id, selectedService, IsExpandedArea);
|
||||
|
||||
const { ProjectTaskList, isLoading } = useProjectTasks(workArea.id,serviceId, IsExpandedArea);
|
||||
|
||||
const [workAreaStatus, setWorkAreaStatus] = useState({
|
||||
completed: 0,
|
||||
@ -82,8 +81,9 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
|
||||
aria-controls={`collapse-${workArea.id}`}
|
||||
>
|
||||
<i
|
||||
className={`bx me-2 toggle-icon ${IsExpandedArea ? "bx-minus-circle" : "bx-plus-circle"
|
||||
}`}
|
||||
className={`bx me-2 toggle-icon ${
|
||||
IsExpandedArea ? "bx-minus-circle" : "bx-plus-circle"
|
||||
}`}
|
||||
style={{
|
||||
fontSize: "1.2rem",
|
||||
color: "black",
|
||||
@ -104,13 +104,13 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="col-2">
|
||||
<ProgressBar
|
||||
completedWork={formatNumber(workArea?.completedWork)}
|
||||
plannedWork={formatNumber(workArea?.plannedWork)}
|
||||
className="m-0 my-2 " height="6px"rounded showLabel={true}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-2">
|
||||
<ProgressBar
|
||||
completedWork={formatNumber(workArea?.completedWork)}
|
||||
plannedWork={formatNumber(workArea?.plannedWork)}
|
||||
className="m-0 text-info"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</p>
|
||||
@ -120,17 +120,16 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
|
||||
className="accordion-collapse collapse"
|
||||
aria-labelledby={`heading-${workArea.id}`}
|
||||
>
|
||||
<div className="accordion-body px-6">
|
||||
{isLoading || ProjectTaskList === undefined ? (
|
||||
<div className="accordion-body px-1">
|
||||
{isLoading || ProjectTaskList === undefined ? (
|
||||
<div className="text-center py-2 text-muted">Loading activities...</div>
|
||||
) : ProjectTaskList?.length === 0 ? (
|
||||
) : ProjectTaskList?.length === 0 ? (
|
||||
<div className="text-center py-2 text-muted">No activities available for this work area.</div>
|
||||
) : ProjectTaskList?.length > 0 ? (
|
||||
):ProjectTaskList?.length > 0 ? (
|
||||
<table className="table table-sm mx-1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="infra-activity-table-header-first">Activity</th>
|
||||
<th className="infra-activity-table-header-second">Service</th>
|
||||
<th className="infra-activity-table-header d-sm-table-cell d-md-none">
|
||||
Status
|
||||
</th>
|
||||
@ -152,9 +151,9 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0">
|
||||
{ProjectTaskList.map((workItem, index) => (
|
||||
{ProjectTaskList.map((workItem,index) => (
|
||||
<WorkItem
|
||||
key={workItem.workItemId || `fallback-${index}`}
|
||||
key={workItem.workItemId || `fallback-${index}`}
|
||||
workItem={workItem}
|
||||
forBuilding={forBuilding}
|
||||
forFloor={floor}
|
||||
|
||||
@ -50,8 +50,8 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
||||
: "Work Area created Successfully",
|
||||
"success"
|
||||
);
|
||||
setValue("id", "0");
|
||||
setValue("areaName", "");
|
||||
reset({ id: "0", buildingId: "0", areaName: "", floorId: "0" });
|
||||
// onClose?.();
|
||||
},
|
||||
});
|
||||
|
||||
@ -194,7 +194,7 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
||||
<button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
|
||||
{isPending ? "Please Wait.." : watchWorkAreaId === "0" ? "Add Work Area" : "Update Work Area"}
|
||||
</button>
|
||||
|
||||
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
|
||||
@ -157,17 +157,7 @@ const WorkItem = ({
|
||||
: "NA"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center d-sm-table-cell ">
|
||||
{hasWorkItem
|
||||
? NewWorkItem?.workItem?.activityMaster?.activityGroupMaster?.service?.name ??
|
||||
workItem?.activityMaster?.activityGroupMaster?.service?.name ??
|
||||
"NA"
|
||||
: "NA"}
|
||||
{" "}
|
||||
{hasWorkItem
|
||||
? NewWorkItem?.workItem?.activityMaster?.activityGroupMaster?.service?.name
|
||||
: "NA"}
|
||||
</td>
|
||||
|
||||
{/* Status - visible only on small screens */}
|
||||
<td className="text-center d-sm-table-cell d-md-none">
|
||||
{hasWorkItem
|
||||
|
||||
@ -77,7 +77,13 @@ const ManageProject = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{isProjectCreated && (
|
||||
<div>
|
||||
<h3>Additional Content</h3>
|
||||
<p>Now that the project is created, you can access this content.</p>
|
||||
{/* Add more content here */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,24 +1,11 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { projectSchema, projectDefault } from "./ProjectSchema";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
|
||||
import { z } from "zod";
|
||||
import Label from "../common/Label";
|
||||
import DatePicker from "../common/DatePicker";
|
||||
import { useCreateProject, useProjectDetails, useUpdateProject } from "../../hooks/useProjects";
|
||||
|
||||
import {
|
||||
DEFAULT_EMPTY_STATUS_ID,
|
||||
ITEMS_PER_PAGE,
|
||||
PROJECT_STATUS,
|
||||
} from "../../utils/constants";
|
||||
import {
|
||||
useOrganizationModal,
|
||||
useOrganizationsList,
|
||||
} from "../../hooks/useOrganization";
|
||||
import { localToUtc } from "../../utils/appUtils";
|
||||
|
||||
const currentDate = new Date().toLocaleDateString("en-CA");
|
||||
const currentDate = new Date().toLocaleDateString('en-CA');
|
||||
const formatDate = (date) => {
|
||||
if (!date) {
|
||||
return currentDate;
|
||||
@ -27,23 +14,54 @@ const formatDate = (date) => {
|
||||
if (isNaN(d.getTime())) {
|
||||
return currentDate;
|
||||
}
|
||||
return d.toLocaleDateString("en-CA");
|
||||
return d.toLocaleDateString('en-CA');
|
||||
};
|
||||
const ManageProjectInfo = ({ project, onClose }) => {
|
||||
const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) => {
|
||||
const [CurrentProject, setCurrentProject] = useState();
|
||||
const [addressLength, setAddressLength] = useState(0);
|
||||
const maxAddressLength = 500;
|
||||
const { onOpen, startStep, flowType } = useOrganizationModal();
|
||||
|
||||
const ACTIVE_STATUS_ID = "b74da4c2-d07e-46f2-9919-e75e49b12731";
|
||||
const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
|
||||
|
||||
const { projects_Details, loading } = useProjectDetails(project);
|
||||
const { data, isLoading, isError, error } = useOrganizationsList(
|
||||
ITEMS_PER_PAGE,
|
||||
1,
|
||||
true
|
||||
);
|
||||
const { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()});
|
||||
const {mutate:CeateProject,isPending:isCreating} = useCreateProject(()=>{onClose?.()})
|
||||
const projectSchema = z
|
||||
.object({
|
||||
...(project?.id ? { id: z.string().optional() } : {}),
|
||||
name: z.string().min(1, { message: "Project Name is required" }),
|
||||
shortName: z.string().optional(),
|
||||
contactPerson: z
|
||||
.string()
|
||||
.min(1, { message: "Contact Person Name is required" })
|
||||
.regex(/^[A-Za-z\s]+$/, {
|
||||
message: "Contact Person must contain only letters",
|
||||
}),
|
||||
projectAddress: z
|
||||
.string()
|
||||
.min(1, { message: "Address is required" })
|
||||
.max(500, "Address must not exceed 150 characters"),
|
||||
startDate: z
|
||||
.string()
|
||||
.min(1, { message: "Start Date is required" })
|
||||
.default(currentDate),
|
||||
endDate: z
|
||||
.string()
|
||||
.min(1, { message: "End Date is required" })
|
||||
.default(currentDate),
|
||||
projectStatusId: z
|
||||
.string()
|
||||
.min(1, { message: "Status is required" })
|
||||
})
|
||||
.refine(
|
||||
(data) => {
|
||||
const start = new Date(data.startDate);
|
||||
const end = new Date(data.endDate);
|
||||
return end >= start;
|
||||
},
|
||||
{
|
||||
path: ["endDate"], // attaches the error to the endDate field
|
||||
message: "End Date must be greater than Start Date",
|
||||
}
|
||||
);
|
||||
|
||||
const {
|
||||
register,
|
||||
@ -54,66 +72,80 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
getValues,
|
||||
} = useForm({
|
||||
resolver: zodResolver(projectSchema),
|
||||
defaultValues: projectDefault,
|
||||
defaultValues: {
|
||||
id: project?.id || "",
|
||||
name: project?.name || "",
|
||||
shortName: project?.shortName || "",
|
||||
contactPerson: project?.contactPerson || "",
|
||||
projectAddress: project?.projectAddress || "",
|
||||
startDate: formatDate(project?.startDate) || currentDate,
|
||||
endDate: formatDate(project?.endDate) || currentDate,
|
||||
// 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",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (project && projects_Details)
|
||||
reset({
|
||||
name: projects_Details?.name || "",
|
||||
shortName: projects_Details?.shortName || "",
|
||||
contactPerson: projects_Details?.contactPerson || "",
|
||||
projectAddress: projects_Details?.projectAddress || "",
|
||||
startDate: formatDate(projects_Details?.startDate) || "",
|
||||
endDate: formatDate(projects_Details?.endDate) || "",
|
||||
projectStatusId:
|
||||
String(projects_Details?.projectStatus?.id) ||
|
||||
DEFAULT_EMPTY_STATUS_IDF,
|
||||
promoterId: projects_Details?.promoter?.id || "",
|
||||
pmcId: projects_Details?.pmc?.id || "",
|
||||
});
|
||||
setAddressLength(projects_Details?.projectAddress?.length || 0);
|
||||
}, [project, projects_Details, reset,data]);
|
||||
setCurrentProject(project);
|
||||
reset(
|
||||
project
|
||||
? {
|
||||
id: project?.id || "",
|
||||
name: project?.name || "",
|
||||
shortName: project?.shortName || "",
|
||||
contactPerson: project?.contactPerson || "",
|
||||
projectAddress: project?.projectAddress || "",
|
||||
startDate: formatDate(project?.startDate) || "",
|
||||
endDate: formatDate(project?.endDate) || "",
|
||||
projectStatusId: String(project?.projectStatus?.id) || "00000000-0000-0000-0000-000000000000",
|
||||
}
|
||||
: {}
|
||||
);
|
||||
setAddressLength(project?.projectAddress?.length || 0);
|
||||
}, [project, reset]);
|
||||
|
||||
const onSubmitForm = (formData) => {
|
||||
if (project) {
|
||||
let payload = {
|
||||
...formData,
|
||||
startDate: localToUtc(formData.startDate),
|
||||
endDate: localToUtc(formData.endDate),
|
||||
id: project,
|
||||
};
|
||||
UpdateProject({ projectId: project, payload: payload });
|
||||
}else{
|
||||
let payload = {
|
||||
...formData,
|
||||
startDate: localToUtc(formData.startDate),
|
||||
endDate: localToUtc(formData.endDate),
|
||||
};
|
||||
CeateProject(payload)
|
||||
}
|
||||
/**
|
||||
|
||||
* Handles the form submission.
|
||||
|
||||
* @param {object} updatedProject - The project data from the form.
|
||||
|
||||
*/
|
||||
|
||||
const onSubmitForm = (updatedProject) => {
|
||||
|
||||
handleSubmitForm(updatedProject);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
reset(projectDefault);
|
||||
reset({
|
||||
id: project?.id || "",
|
||||
name: project?.name || "",
|
||||
shortName: project?.shortName || "",
|
||||
contactPerson: project?.contactPerson || "",
|
||||
projectAddress: project?.projectAddress || "",
|
||||
startDate: formatDate(project?.startDate) || currentDate,
|
||||
endDate: formatDate(project?.endDate) || currentDate,
|
||||
projectStatusId: String(project?.projectStatus?.id || "00000000-0000-0000-0000-000000000000"),
|
||||
});
|
||||
onClose();
|
||||
};
|
||||
const handleOrganizaioFinder = () => {
|
||||
onClose();
|
||||
onOpen({ startStep: 2, flowType: "default" });
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<div className="p-sm-2 p-2">
|
||||
|
||||
<div className="text-center mb-2">
|
||||
<h5 className="mb-2">{project ? "Edit Project" : "Create Project"}</h5>
|
||||
<h5 className="mb-2">
|
||||
{project?.id ? "Edit Project" : "Create Project"}
|
||||
</h5>
|
||||
</div>
|
||||
<form
|
||||
className="row g-2 text-start"
|
||||
onSubmit={handleSubmit(onSubmitForm)}
|
||||
>
|
||||
<form className="row g-2 text-start" onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<div className="col-12 col-md-12">
|
||||
<Label htmlFor="name" required>
|
||||
Project Name
|
||||
@ -193,10 +225,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
/>
|
||||
|
||||
{errors.startDate && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
{errors.startDate.message}
|
||||
</div>
|
||||
)}
|
||||
@ -211,21 +240,18 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
name="endDate"
|
||||
control={control}
|
||||
placeholder="DD-MM-YYYY"
|
||||
minDate={getValues("startDate")} // optional: restrict future dates
|
||||
minDate={getValues("startDate")} // optional: restrict future dates
|
||||
className="w-100"
|
||||
/>
|
||||
|
||||
{errors.endDate && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
{errors.endDate.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 ">
|
||||
<div className="col-12 col-md-6">
|
||||
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||
Status
|
||||
</label>
|
||||
@ -239,11 +265,15 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
valueAsNumber: false,
|
||||
})}
|
||||
>
|
||||
{PROJECT_STATUS.map((status) => (
|
||||
<option key={status.id} value={status.id}>
|
||||
{status.label}
|
||||
</option>
|
||||
))}
|
||||
{/* <option disabled>Status</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="cdad86aa-8a56-4ff4-b633-9c629057dfef">In Progress</option>
|
||||
<option value="ef1c356e-0fe0-42df-a5d3-8daee355492d">Inactive</option>
|
||||
|
||||
<option value="33deaef9-9af1-4f2a-b443-681ea0d04f81">Completed</option>
|
||||
</select>
|
||||
{errors.projectStatusId && (
|
||||
<div
|
||||
@ -254,83 +284,6 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 ">
|
||||
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||
Promoter
|
||||
</label>
|
||||
<select
|
||||
className="select2 form-select form-select-sm"
|
||||
aria-label="Default select example"
|
||||
{...register("promoterId", {
|
||||
required: "Promoter is required",
|
||||
valueAsNumber: false,
|
||||
})}
|
||||
>
|
||||
{isLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">Select Promoter</option>
|
||||
{data?.data?.map((org) => (
|
||||
<option key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
{errors.promoterId && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.promoterId.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 ">
|
||||
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||
PMC
|
||||
</label>
|
||||
<select
|
||||
className="select2 form-select form-select-sm"
|
||||
aria-label="Default select example"
|
||||
{...register("pmcId", {
|
||||
required: "Promoter is required",
|
||||
valueAsNumber: false,
|
||||
})}
|
||||
>
|
||||
{isLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">Select PMC</option>
|
||||
{data?.data?.map((org) => (
|
||||
<option key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
{errors.pmcId && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.pmcId.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="d-flex justify-content-between text-secondary text-tiny text-wrap">
|
||||
<span>
|
||||
<i className="bx bx-sm bx-info-circle"></i> Not found PMC and
|
||||
Pomoter, find through SPRID or create new
|
||||
</span>
|
||||
<small className="cursor-pointer" onClick={handleOrganizaioFinder} >
|
||||
<i className="bx bx-plus-circle text-primary"></i>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-12">
|
||||
<Label htmlFor="projectAddress" required>
|
||||
@ -348,7 +301,6 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-end" style={{ fontSize: "12px" }}>
|
||||
{maxAddressLength - addressLength} characters left
|
||||
</div>
|
||||
@ -367,21 +319,22 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
className="btn btn-label-secondary btn-sm me-2"
|
||||
onClick={handleCancel}
|
||||
aria-label="Close"
|
||||
disabled={isPending || isCreating || loading}
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary btn-sm"
|
||||
disabled={isPending || isCreating || loading}
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending||isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
|
||||
{isPending ? "Please Wait..." : project?.id ? "Update" : "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManageProjectInfo;
|
||||
export default ManageProjectInfo;
|
||||
211
src/components/Project/MapUsers.jsx
Normal file
211
src/components/Project/MapUsers.jsx
Normal file
@ -0,0 +1,211 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import EmployeeRepository from "../../repositories/EmployeeRepository";
|
||||
import { useAllEmployees } from "../../hooks/useEmployees";
|
||||
import useSearch from "../../hooks/useSearch";
|
||||
import AssignEmployeeTable from "./AssignEmployeeTable";
|
||||
import showToast from "../../services/toastService";
|
||||
import "./MapUser.css";
|
||||
|
||||
const MapUsers = ({
|
||||
projectId,
|
||||
onClose,
|
||||
empJobRoles,
|
||||
onSubmit,
|
||||
allocation,
|
||||
assignedLoading,
|
||||
setAssignedLoading,
|
||||
}) => {
|
||||
const {
|
||||
employeesList,
|
||||
loading: employeeLoading,
|
||||
error,
|
||||
} = useAllEmployees(false);
|
||||
const [selectedEmployees, setSelectedEmployees] = useState([]);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
|
||||
const handleAllocationData = Array.isArray(allocation) ? allocation : [];
|
||||
|
||||
const allocationEmployees = employeesList.map((employee) => {
|
||||
const allocationItem = handleAllocationData.find(
|
||||
(alloc) => alloc.employeeId === employee.id
|
||||
);
|
||||
return {
|
||||
...employee,
|
||||
isActive: allocationItem ? allocationItem.isActive : false,
|
||||
jobRoleId: allocationItem ? allocationItem.jobRoleId : employee.jobRoleId,
|
||||
};
|
||||
});
|
||||
|
||||
function parseDate(dateStr) {
|
||||
return new Date(dateStr.split(".")[0]);
|
||||
}
|
||||
|
||||
const latestAllocations = handleAllocationData.reduce((acc, alloc) => {
|
||||
const existingAlloc = acc[alloc.employeeId];
|
||||
|
||||
if (!existingAlloc) {
|
||||
acc[alloc.employeeId] = alloc;
|
||||
} else {
|
||||
const existingDate = parseDate(
|
||||
existingAlloc.reAllocationDate || existingAlloc.allocationDate
|
||||
);
|
||||
const newDate = parseDate(alloc.reAllocationDate || alloc.allocationDate);
|
||||
|
||||
if (newDate > existingDate) {
|
||||
acc[alloc.employeeId] = alloc;
|
||||
}
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const allocationEmployeesData = employeesList
|
||||
.map((employee) => {
|
||||
const allocationItem = latestAllocations[employee.id];
|
||||
return {
|
||||
...employee,
|
||||
isActive: allocationItem ? allocationItem.isActive : false,
|
||||
};
|
||||
})
|
||||
.filter((employee) => employee.isActive === false);
|
||||
|
||||
const { filteredData, setSearchQuery } = useSearch(
|
||||
allocationEmployeesData,
|
||||
searchText
|
||||
);
|
||||
|
||||
const handleRoleChange = (employeeId, newRoleId) => {
|
||||
setSelectedEmployees((prevSelectedEmployees) =>
|
||||
prevSelectedEmployees.map((emp) =>
|
||||
emp.id === employeeId ? { ...emp, jobRoleId: newRoleId } : emp
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (employeeId) => {
|
||||
setSelectedEmployees((prevSelectedEmployees) => {
|
||||
const updatedEmployees = [...prevSelectedEmployees];
|
||||
const employeeIndex = updatedEmployees.findIndex(
|
||||
(emp) => emp.id === employeeId
|
||||
);
|
||||
|
||||
if (employeeIndex !== -1) {
|
||||
const isSelected = !updatedEmployees[employeeIndex].isSelected;
|
||||
updatedEmployees[employeeIndex].isSelected = isSelected;
|
||||
} else {
|
||||
updatedEmployees.push({
|
||||
id: employeeId,
|
||||
isSelected: true,
|
||||
});
|
||||
}
|
||||
return updatedEmployees;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
setAssignedLoading(true);
|
||||
const selected = selectedEmployees
|
||||
.filter((emp) => emp.isSelected)
|
||||
.map((emp) => ({ empID: emp.id, jobRoleId: emp.jobRoleId }));
|
||||
if (selected.length > 0) {
|
||||
onSubmit(selected);
|
||||
setSelectedEmployees([]);
|
||||
} else {
|
||||
showToast("Please select Employee", "error");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="modal-dialog modal-dialog-scrollable mx-sm-auto mx-1 modal-lg modal-simple modal-edit-user">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header text-center">
|
||||
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close">
|
||||
</button>
|
||||
</div>
|
||||
<p className="m-0 fw-semibold fs-5">Assign Employee</p>
|
||||
|
||||
<div className="px-4 mt-4 col-md-4 text-start">
|
||||
{(filteredData.length > 0 ||
|
||||
allocationEmployeesData.length > 0) && (
|
||||
<div className="input-group input-group-sm mb-2">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control"
|
||||
placeholder="Search employees..."
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="mb-0 small text-muted fw-semibold">Select Employee</p>
|
||||
</div>
|
||||
|
||||
<div className="modal-body p-sm-4 p-0">
|
||||
<table
|
||||
className="datatables-users table border-top dataTable no-footer dtr-column "
|
||||
id="DataTables_Table_0"
|
||||
aria-describedby="DataTables_Table_0_info"
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<tbody>
|
||||
{employeeLoading && allocationEmployeesData.length === 0 && (
|
||||
<tr>
|
||||
<td>Loading..</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{!employeeLoading &&
|
||||
allocationEmployeesData.length === 0 &&
|
||||
filteredData.length === 0 && (
|
||||
<tr>
|
||||
<td>All employee assigned to Project.</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{!employeeLoading &&
|
||||
allocationEmployeesData.length > 0 &&
|
||||
filteredData.length === 0 && (
|
||||
<tr>
|
||||
<td>No matching employees found.</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{(filteredData.length > 0 ||
|
||||
allocationEmployeesData.length > 0) &&
|
||||
filteredData.map((emp) => (
|
||||
<AssignEmployeeTable
|
||||
key={emp.id}
|
||||
employee={emp}
|
||||
jobRoles={empJobRoles}
|
||||
isChecked={emp.isSelected}
|
||||
onRoleChange={handleRoleChange}
|
||||
onCheckboxChange={handleCheckboxChange}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="modal-footer mt-5 d-flex justify-content-end gap-0">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary"
|
||||
data-dismiss="modal"
|
||||
aria-label="Close"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
{(filteredData.length > 0 || allocationEmployeesData.length > 0) && (
|
||||
<button className="btn btn-sm btn-primary" onClick={handleSubmit}>
|
||||
{assignedLoading ? "Please Wait..." : "Assign to Project"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MapUsers;
|
||||
@ -14,15 +14,41 @@ import {
|
||||
getProjectStatusName,
|
||||
} from "../../utils/projectStatus";
|
||||
import GlobalModel from "../common/GlobalModel";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
import { useProjectContext } from "../../pages/project/ProjectPage";
|
||||
|
||||
const ProjectCard = ({ project }) => {
|
||||
const dispatch = useDispatch();
|
||||
const ProjectCard = ({ projectData, recall }) => {
|
||||
const [ projectInfo, setProjectInfo ] = useState( projectData );
|
||||
const { projects_Details, loading, error, refetch } = useProjectDetails(
|
||||
projectInfo?.id,false
|
||||
);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const dispatch = useDispatch()
|
||||
const navigate = useNavigate();
|
||||
const ManageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||
const { setMangeProject } = useProjectContext();
|
||||
const {
|
||||
mutate: updateProject,
|
||||
isPending,
|
||||
isSuccess,
|
||||
isError,
|
||||
} = useUpdateProject({
|
||||
onSuccessCallback: () => {
|
||||
setShowModal(false);
|
||||
},
|
||||
})
|
||||
|
||||
useEffect(()=>{
|
||||
setProjectInfo(projectData);
|
||||
}, [ projectData ] )
|
||||
|
||||
const handleShow = async () => {
|
||||
try {
|
||||
const { data } = await refetch();
|
||||
setShowModal(true);
|
||||
} catch (err) {
|
||||
showToast("Failed to load project details", "error");
|
||||
}
|
||||
};
|
||||
|
||||
const getProgress = (planned, completed) => {
|
||||
return (completed * 100) / planned + "%";
|
||||
@ -34,17 +60,35 @@ const ProjectCard = ({ project }) => {
|
||||
const handleClose = () => setShowModal(false);
|
||||
|
||||
const handleViewProject = () => {
|
||||
dispatch(setProjectId(project.id));
|
||||
dispatch(setProjectId(projectInfo.id))
|
||||
navigate(`/projects/details`);
|
||||
};
|
||||
const handleViewActivities = () => {
|
||||
dispatch(setProjectId(project.id));
|
||||
navigate(`/activities/records?project=${project.id}`);
|
||||
};
|
||||
|
||||
const handleFormSubmit = (updatedProject) => {
|
||||
if (projectInfo?.id) {
|
||||
updateProject({
|
||||
projectId: projectInfo.id,
|
||||
updatedData: updatedProject,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
{showModal && projects_Details && (
|
||||
<GlobalModel isOpen={showModal} closeModal={handleClose}>
|
||||
<ManageProjectInfo
|
||||
project={projects_Details}
|
||||
handleSubmitForm={handleFormSubmit}
|
||||
onClose={handleClose}
|
||||
isPending={isPending}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
<div className="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
|
||||
<div className={`card cursor-pointer`}>
|
||||
<div className={`card cursor-pointer ${isPending ? "bg-light opacity-50 pointer-events-none" : ""}`}>
|
||||
<div className="card-header pb-4">
|
||||
<div className="d-flex align-items-start">
|
||||
<div className="d-flex align-items-center">
|
||||
@ -58,11 +102,13 @@ const ProjectCard = ({ project }) => {
|
||||
<h5
|
||||
className="mb-0 stretched-link text-heading text-start"
|
||||
onClick={handleViewProject}
|
||||
>
|
||||
{project?.shortName ? project?.shortName : project?.name}
|
||||
>
|
||||
{projectInfo.shortName
|
||||
? projectInfo.shortName
|
||||
: projectInfo.name}
|
||||
</h5>
|
||||
<div className="client-info text-body">
|
||||
<span>{project?.shortName ? project?.name : ""}</span>
|
||||
<span>{projectInfo.shortName ? projectInfo.name : ""}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -74,14 +120,23 @@ const ProjectCard = ({ project }) => {
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i
|
||||
className="bx bx-dots-vertical-rounded bx-sm text-muted"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
data-bs-placement="top"
|
||||
data-bs-custom-class="tooltip-dark"
|
||||
title="More Action"
|
||||
></i>
|
||||
{loading ? (
|
||||
<div
|
||||
className="spinner-border spinner-border-sm text-secondary"
|
||||
role="status"
|
||||
>
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<i
|
||||
className="bx bx-dots-vertical-rounded bx-sm text-muted"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
data-bs-placement="top"
|
||||
data-bs-custom-class="tooltip-dark"
|
||||
title="More Action"
|
||||
></i>
|
||||
)}
|
||||
</button>
|
||||
<ul className="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
@ -95,18 +150,19 @@ const ProjectCard = ({ project }) => {
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a className="dropdown-item" onClick={() =>
|
||||
setMangeProject({
|
||||
isOpen: true,
|
||||
Project: project.id,
|
||||
})
|
||||
}>
|
||||
<li onClick={handleShow}>
|
||||
<a className="dropdown-item">
|
||||
<i className="bx bx-pencil me-2"></i>
|
||||
<span className="align-left">Modify</span>
|
||||
</a>
|
||||
</li>
|
||||
<li onClick={handleViewActivities}>
|
||||
<li
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/activities/records?project=${projectInfo.id}`
|
||||
)
|
||||
}
|
||||
>
|
||||
<a className="dropdown-item">
|
||||
<i className="bx bx-task me-2"></i>
|
||||
<span className="align-left">Activities</span>
|
||||
@ -124,22 +180,22 @@ const ProjectCard = ({ project }) => {
|
||||
<span className="text-heading fw-medium">
|
||||
Contact Person:{" "}
|
||||
</span>
|
||||
{project?.contactPerson ? project.contactPerson : "NA"}
|
||||
{projectInfo.contactPerson ? projectInfo.contactPerson : "NA"}
|
||||
</p>
|
||||
<p className="mb-1">
|
||||
<span className="text-heading fw-medium">Start Date: </span>
|
||||
{project.startDate
|
||||
? moment(project?.startDate).format("DD-MMM-YYYY")
|
||||
{projectInfo.startDate
|
||||
? moment(projectInfo.startDate).format("DD-MMM-YYYY")
|
||||
: "NA"}
|
||||
</p>
|
||||
<p className="mb-1">
|
||||
<span className="text-heading fw-medium">Deadline: </span>
|
||||
|
||||
{project?.endDate
|
||||
? moment(project?.endDate).format("DD-MMM-YYYY")
|
||||
{projectInfo.endDate
|
||||
? moment(projectInfo.endDate).format("DD-MMM-YYYY")
|
||||
: "NA"}
|
||||
</p>
|
||||
<p className="mb-0">{project?.projectAddress}</p>
|
||||
<p className="mb-0">{projectInfo.projectAddress}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -149,37 +205,36 @@ const ProjectCard = ({ project }) => {
|
||||
<span
|
||||
className={
|
||||
`badge rounded-pill ` +
|
||||
getProjectStatusColor(project?.projectStatusId)
|
||||
getProjectStatusColor(projectInfo.projectStatusId)
|
||||
}
|
||||
>
|
||||
{getProjectStatusName(project?.projectStatusId)}
|
||||
{getProjectStatusName(projectInfo.projectStatusId)}
|
||||
</span>
|
||||
</p>{" "}
|
||||
{getDateDifferenceInDays(project?.endDate,new Date() ) >= 0 && (
|
||||
{getDateDifferenceInDays(projectInfo.endDate, Date()) >= 0 && (
|
||||
<span className="badge bg-label-success ms-auto">
|
||||
{project?.endDate &&
|
||||
getDateDifferenceInDays(project?.endDate, new Date())}{" "}
|
||||
{projectInfo.endDate &&
|
||||
getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
|
||||
Days left
|
||||
</span>
|
||||
)}
|
||||
{getDateDifferenceInDays(project?.endDate, new Date()) < 0 && (
|
||||
{getDateDifferenceInDays(projectInfo.endDate, Date()) < 0 && (
|
||||
<span className="badge bg-label-danger ms-auto">
|
||||
{project?.endDate &&
|
||||
getDateDifferenceInDays(project?.endDate, new Date())}{" "}
|
||||
{projectInfo.endDate &&
|
||||
getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
|
||||
Days overdue
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="d-flex justify-content-between align-items-center mb-2">
|
||||
<small className="text-body">
|
||||
Task: {formatNumber(project?.completedWork)} /{" "}
|
||||
{formatNumber(project?.plannedWork)}
|
||||
Task: {formatNumber(projectInfo.completedWork)} / {formatNumber(projectInfo.plannedWork)}
|
||||
</small>
|
||||
<small className="text-body">
|
||||
{Math.floor(
|
||||
getProgressInNumber(
|
||||
project?.plannedWork,
|
||||
project?.completedWork
|
||||
projectInfo.plannedWork,
|
||||
projectInfo.completedWork
|
||||
)
|
||||
) || 0}{" "}
|
||||
% Completed
|
||||
@ -191,20 +246,22 @@ const ProjectCard = ({ project }) => {
|
||||
role="progressbar"
|
||||
style={{
|
||||
width: getProgress(
|
||||
project?.plannedWork,
|
||||
project?.completedWork
|
||||
projectInfo.plannedWork,
|
||||
projectInfo.completedWork
|
||||
),
|
||||
}}
|
||||
aria-valuenow={project?.completedWork}
|
||||
aria-valuenow={projectInfo.completedWork}
|
||||
aria-valuemin="0"
|
||||
aria-valuemax={project?.plannedWork}
|
||||
aria-valuemax={projectInfo.plannedWork}
|
||||
></div>
|
||||
</div>
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
{/* <div className="d-flex align-items-center ">
|
||||
</div> */}
|
||||
<div>
|
||||
<a className="text-muted d-flex " alt="Active team size">
|
||||
<i className="bx bx-group bx-sm me-1_5"></i>
|
||||
{project?.teamSize} Members
|
||||
{projectInfo?.teamSize} Members
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
@ -221,4 +278,4 @@ const ProjectCard = ({ project }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectCard;
|
||||
export default ProjectCard;
|
||||
@ -1,70 +0,0 @@
|
||||
import React from 'react'
|
||||
import { useProjects } from '../../hooks/useProjects'
|
||||
import Loader from '../common/Loader'
|
||||
import ProjectCard from './ProjectCard'
|
||||
|
||||
const ProjectCardView = ({currentItems,setCurrentPage,totalPages }) => {
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<div className="row page-min-h">
|
||||
|
||||
{ currentItems.length === 0 && (
|
||||
<p className="text-center text-muted">No projects found.</p>
|
||||
)}
|
||||
|
||||
{currentItems.map((project) => (
|
||||
<ProjectCard
|
||||
key={project.id}
|
||||
project={project}
|
||||
/>
|
||||
))}
|
||||
|
||||
|
||||
{ totalPages > 1 && (
|
||||
<nav>
|
||||
<ul className="pagination pagination-sm justify-content-end py-2">
|
||||
<li className={`page-item ${currentPage === 1 && "disabled"}`}>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className={`page-item ${currentPage === i + 1 && "active"}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setCurrentPage(i + 1)}
|
||||
>
|
||||
{i + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${currentPage === totalPages && "disabled"
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() =>
|
||||
setCurrentPage((p) => Math.min(totalPages, p + 1))
|
||||
}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default ProjectCardView
|
||||
@ -17,39 +17,33 @@ import {
|
||||
getCachedData,
|
||||
useSelectedProject,
|
||||
} from "../../slices/apiDataManager";
|
||||
import {
|
||||
useCurrentService,
|
||||
useProjectAssignedServices,
|
||||
useProjectDetails,
|
||||
useProjectInfra,
|
||||
} from "../../hooks/useProjects";
|
||||
import { useProjectAssignedServices, useProjectDetails, useProjectInfra } from "../../hooks/useProjects";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { refreshData } from "../../slices/localVariablesSlice";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import { useParams } from "react-router-dom";
|
||||
import GlobalModel from "../common/GlobalModel";
|
||||
import { setService } from "../../slices/globalVariablesSlice";
|
||||
|
||||
const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
const projectId = useSelectedProject();
|
||||
const selectedService = useCurrentService();
|
||||
const reloadedData = useSelector((store) => store.localVariables.reload);
|
||||
const [expandedBuildings, setExpandedBuildings] = useState([]);
|
||||
const { projectInfra, isLoading, error } = useProjectInfra(
|
||||
projectId,
|
||||
selectedService
|
||||
);
|
||||
const { projectInfra, isLoading, error } = useProjectInfra(projectId)
|
||||
const { projects_Details, refetch, loading } = useProjectDetails(data?.id);
|
||||
const [project, setProject] = useState(projects_Details);
|
||||
const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
|
||||
const ManageTask = useHasUserPermission(MANAGE_TASK);
|
||||
const ManageTask = useHasUserPermission(MANAGE_TASK)
|
||||
const [showModalFloor, setshowModalFloor] = useState(false);
|
||||
const [showModalWorkArea, setshowModalWorkArea] = useState(false);
|
||||
const [showModalTask, setshowModalTask] = useState(false);
|
||||
const [showModalBuilding, setshowModalBuilding] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
const { data: assignedServices, isLoading: servicesLoading } =
|
||||
useProjectAssignedServices(projectId);
|
||||
const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
|
||||
|
||||
const [selectedService, setSelectedService] = useState("");
|
||||
const handleServiceChange = (e) => {
|
||||
setSelectedService(e.target.value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setProject(projectInfra);
|
||||
@ -57,58 +51,34 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
|
||||
const signalRHandler = (response) => {
|
||||
setProject(response);
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{showModalBuilding && (
|
||||
<GlobalModel
|
||||
isOpen={showModalBuilding}
|
||||
size="md"
|
||||
closeModal={() => setshowModalBuilding(false)}
|
||||
>
|
||||
<BuildingModel
|
||||
project={projectInfra}
|
||||
onClose={() => setshowModalBuilding(false)}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
{showModalFloor && (
|
||||
<GlobalModel
|
||||
isOpen={showModalFloor}
|
||||
size="md"
|
||||
closeModal={() => setshowModalFloor(false)}
|
||||
>
|
||||
<FloorModel
|
||||
project={projectInfra}
|
||||
onClose={() => setshowModalFloor(false)}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
{showModalWorkArea && (
|
||||
<GlobalModel
|
||||
isOpen={showModalWorkArea}
|
||||
size="lg"
|
||||
closeModal={() => setshowModalWorkArea(false)}
|
||||
>
|
||||
<WorkAreaModel
|
||||
project={projectInfra}
|
||||
onClose={() => setshowModalWorkArea(false)}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
{showModalTask && (
|
||||
<GlobalModel
|
||||
isOpen={showModalTask}
|
||||
size="lg"
|
||||
closeModal={() => setshowModalTask(false)}
|
||||
>
|
||||
<TaskModel
|
||||
project={projectInfra}
|
||||
onClose={() => setshowModalTask(false)}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
{showModalBuilding && <GlobalModel isOpen={showModalBuilding} size="md" closeModal={() => setshowModalBuilding(false)}>
|
||||
<BuildingModel
|
||||
project={projectInfra}
|
||||
onClose={() => setshowModalBuilding(false)}
|
||||
/>
|
||||
</GlobalModel>}
|
||||
{showModalFloor && <GlobalModel isOpen={showModalFloor} size="md" closeModal={() => setshowModalFloor(false)}>
|
||||
<FloorModel
|
||||
project={projectInfra}
|
||||
onClose={() => setshowModalFloor(false)}
|
||||
/>
|
||||
</GlobalModel>}
|
||||
{showModalWorkArea && <GlobalModel isOpen={showModalWorkArea} size="lg" closeModal={() => setshowModalWorkArea(false)} >
|
||||
<WorkAreaModel
|
||||
project={projectInfra}
|
||||
onClose={() => setshowModalWorkArea(false)}
|
||||
/>
|
||||
</GlobalModel>}
|
||||
{showModalTask && (<GlobalModel isOpen={showModalTask} size="lg" closeModal={() => setshowModalTask(false)}>
|
||||
<TaskModel
|
||||
project={projectInfra}
|
||||
onClose={() => setshowModalTask(false)}
|
||||
/>
|
||||
</GlobalModel>)}
|
||||
<div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
|
||||
<div className="card">
|
||||
<div className="card-body" style={{ padding: "0.5rem" }}>
|
||||
@ -118,9 +88,8 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
className="dataTables_length text-start py-2 px-6 col-md-4 col-12"
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
{!servicesLoading &&
|
||||
assignedServices?.length > 0 &&
|
||||
(assignedServices.length > 1 ? (
|
||||
{!servicesLoading && assignedServices?.length > 0 && (
|
||||
assignedServices.length > 1 ? (
|
||||
<label>
|
||||
<select
|
||||
name="DataTables_Table_0_length"
|
||||
@ -128,7 +97,7 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
className="form-select form-select-sm"
|
||||
aria-label="Select Service"
|
||||
value={selectedService}
|
||||
onChange={(e) => dispatch(setService(e.target.value))}
|
||||
onChange={handleServiceChange}
|
||||
>
|
||||
<option value="">All Services</option>
|
||||
{assignedServices.map((service) => (
|
||||
@ -140,7 +109,8 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
</label>
|
||||
) : (
|
||||
<h5>{assignedServices[0].name}</h5>
|
||||
))}
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Buttons Section (aligned to right) */}
|
||||
@ -170,20 +140,16 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
Manage Work Areas
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</button></>)}
|
||||
|
||||
{(ManageTask || ManageInfra) && (
|
||||
<button
|
||||
type="button"
|
||||
className="link-button btn btn-xs rounded-md m-1 btn-primary"
|
||||
onClick={() => setshowModalTask(true)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
Create Tasks
|
||||
</button>
|
||||
)}
|
||||
{(ManageTask || ManageInfra) && (<button
|
||||
type="button"
|
||||
className="link-button btn btn-xs rounded-md m-1 btn-primary"
|
||||
onClick={() => setshowModalTask(true)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
Create Tasks
|
||||
</button>)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row ">
|
||||
@ -192,14 +158,10 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
<InfraTable
|
||||
buildings={projectInfra}
|
||||
projectId={projectId}
|
||||
serviceId={selectedService}
|
||||
serviceId={selectedService}
|
||||
/>
|
||||
)}
|
||||
{!isLoading && projectInfra?.length == 0 && (
|
||||
<div className="mt-5">
|
||||
<p>No Infra Avaiable</p>
|
||||
</div>
|
||||
)}
|
||||
{!isLoading && projectInfra?.length == 0 && <div className="mt-5"><p>No Infra Avaiable</p></div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,285 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { MANAGE_PROJECT, PROJECT_STATUS } from "../../utils/constants";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import { formatNumber, formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import ProgressBar from "../common/ProgressBar";
|
||||
import {
|
||||
getProjectStatusColor,
|
||||
getProjectStatusName,
|
||||
} from "../../utils/projectStatus";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { useProjectContext } from "../../pages/project/ProjectPage";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
|
||||
const ProjectListView = ({
|
||||
currentItems,
|
||||
selectedStatuses,
|
||||
handleStatusChange,
|
||||
setCurrentPage,
|
||||
totalPages,
|
||||
isLoading,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const { setMangeProject } = useProjectContext();
|
||||
// const { data, isLoading, isError, error } = useProjects();
|
||||
|
||||
// check Permissions
|
||||
const canManageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||
|
||||
const projectColumns = [
|
||||
{
|
||||
key: "projectName",
|
||||
label: "Project Name",
|
||||
className: "text-start py-3",
|
||||
getValue: (p) => (
|
||||
<div
|
||||
className="text-primary cursor-pointer fw-bold py-3"
|
||||
onClick={() => {
|
||||
dispatch(setProjectId(p.id));
|
||||
navigate(`/projects/details`);
|
||||
}}
|
||||
>
|
||||
{p.shortName ? `${p.name} (${p.shortName})` : p.name}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "contactPerson",
|
||||
label: "Contact Person",
|
||||
className: "text-start small",
|
||||
getValue: (p) => `${p?.contactPerson ?? ""}`.trim() || "N/A",
|
||||
},
|
||||
{
|
||||
key: "startDate",
|
||||
label: "Start Date",
|
||||
className: "text-center small",
|
||||
getValue: (p) => formatUTCToLocalTime(p?.startDate) || "N/A",
|
||||
},
|
||||
{
|
||||
key: "deadline",
|
||||
label: "Deadline",
|
||||
className: "text-center small",
|
||||
getValue: (p) => formatUTCToLocalTime(p?.endDate) || "N/A",
|
||||
},
|
||||
{
|
||||
key: "task",
|
||||
label: "Task",
|
||||
colSpan: 2,
|
||||
className: "text-center small",
|
||||
getValue: (p) => formatNumber(p?.plannedWork) || "0",
|
||||
},
|
||||
{
|
||||
key: "progress",
|
||||
label: "Progress",
|
||||
className: "text-start small",
|
||||
|
||||
getValue: (p) => (
|
||||
<ProgressBar
|
||||
plannedWork={p.plannedWork}
|
||||
completedWork={p.completedWork}
|
||||
className="mb-0"
|
||||
height="6px"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: "Status",
|
||||
className: "text-center small",
|
||||
isFilter: true,
|
||||
customRender: (_, selectedStatuses, handleStatusChange) => (
|
||||
<div className="dropdown">
|
||||
<a
|
||||
className="dropdown-toggle hide-arrow cursor-pointer"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Status <i className="bx bx-filter bx-sm"></i>
|
||||
</a>
|
||||
<ul className="dropdown-menu p-2 text-capitalize">
|
||||
{PROJECT_STATUS.map(({ id, label }) => (
|
||||
<li key={id}>
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
checked={selectedStatuses.includes(id)}
|
||||
onChange={() => handleStatusChange(id)}
|
||||
/>
|
||||
<label className="form-check-label">{label}</label>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
),
|
||||
getValue: (p) => (
|
||||
<span className={`badge ${getProjectStatusColor(p.projectStatusId)}`}>
|
||||
{getProjectStatusName(p.projectStatusId)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const handleViewActivities = (project) => {
|
||||
dispatch(setProjectId(project));
|
||||
navigate(`/activities/records?project=${project}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card page-min-h py-4 px-6 shadow-sm">
|
||||
|
||||
<div
|
||||
className="table-responsive text-nowrap page-min-h"
|
||||
>
|
||||
<table className="table table-hover align-middle m-0">
|
||||
<thead className="border-bottom ">
|
||||
<tr>
|
||||
{projectColumns.map((col) => (
|
||||
<th key={col.key} colSpan={col.colSpan} className={`${col.className} table_header_border`}>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
<th className="text-center py-3">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentItems?.map((project) => (
|
||||
<tr key={project.id}>
|
||||
{projectColumns.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
colSpan={col.colSpan}
|
||||
className={`${col.className} py-5`}
|
||||
style={{ paddingTop: "20px", paddingBottom: "20px" }}
|
||||
>
|
||||
{col.getValue
|
||||
? col.getValue(project)
|
||||
: project[col.key] || "N/A"}
|
||||
</td>
|
||||
))}
|
||||
<td
|
||||
className={`mx-2 ${
|
||||
canManageProject ? "d-sm-table-cell" : "d-none"
|
||||
}`}
|
||||
>
|
||||
<div className="dropdown z-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i
|
||||
className="bx bx-dots-vertical-rounded bx-sm text-muted"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
data-bs-placement="top"
|
||||
data-bs-custom-class="tooltip-dark"
|
||||
title="More Action"
|
||||
></i>
|
||||
</button>
|
||||
<ul className="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
<a
|
||||
aria-label="click to View details"
|
||||
className="dropdown-item cursor-pointer"
|
||||
>
|
||||
<i className="bx bx-detail me-2"></i>
|
||||
<span className="align-left">View details</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item cursor-pointer"
|
||||
onClick={() =>
|
||||
setMangeProject({
|
||||
isOpen: true,
|
||||
Project: project.id,
|
||||
})
|
||||
}
|
||||
>
|
||||
<i className="bx bx-pencil me-2"></i>
|
||||
<span className="align-left">Modify</span>
|
||||
</a>
|
||||
</li>
|
||||
<li onClick={() => handleViewActivities(project.id)}>
|
||||
<a className="dropdown-item cursor-pointer">
|
||||
<i className="bx bx-task me-2"></i>
|
||||
<span className="align-left">Activities</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{isLoading && (
|
||||
<div className="py-4">
|
||||
{" "}
|
||||
{isLoading && <p className="text-center">Loading...</p>}
|
||||
{!isLoading && filteredProjects.length === 0 && (
|
||||
<p className="text-center text-muted">No projects found.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{!isLoading && currentItems.length === 0 && (
|
||||
<div className="py-6">
|
||||
<p className="text-center text-muted">No projects found.</p>
|
||||
</div>
|
||||
)}
|
||||
{!isLoading && totalPages > 1 && (
|
||||
<nav>
|
||||
<ul className="pagination pagination-sm justify-content-end py-2">
|
||||
<li className={`page-item ${currentPage === 1 && "disabled"}`}>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className={`page-item ${currentPage === i + 1 && "active"}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setCurrentPage(i + 1)}
|
||||
>
|
||||
{i + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages && "disabled"
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() =>
|
||||
setCurrentPage((p) => Math.min(totalPages, p + 1))
|
||||
}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectListView;
|
||||
@ -1,35 +1,36 @@
|
||||
import React from "react";
|
||||
import AssignRole from "./AssignTask";
|
||||
import React from 'react'
|
||||
import AssignRole from './AssignTask'
|
||||
|
||||
const ProjectModal = ({ modalConfig, closeModal }) => {
|
||||
const ProjectModal = ({modalConfig,closeModal}) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal fade"
|
||||
id="project-modal"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
role="dialog"
|
||||
>
|
||||
<div className="modal-dialog modal-lg modal-simple">
|
||||
<div className="modal-content">
|
||||
<div className="modal-body">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
onClick={closeModal}
|
||||
></button>
|
||||
<div className="text-center mb-2"></div>
|
||||
className="modal fade"
|
||||
id="project-modal"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
role="dialog"
|
||||
>
|
||||
<div className="modal-dialog modal-lg modal-simple">
|
||||
<div className="modal-content">
|
||||
<div className="modal-body">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
onClick={closeModal}
|
||||
></button>
|
||||
<div className="text-center mb-2"></div>
|
||||
|
||||
|
||||
{modalConfig?.type === "assignRole" && <AssignRole assignData={modalConfig?.data} onClose={closeModal} />}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{modalConfig?.type === "assignRole" && (
|
||||
<AssignRole assignData={modalConfig?.data} onClose={closeModal} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectModal;
|
||||
export default ProjectModal
|
||||
@ -41,8 +41,8 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
||||
hidden: !(DirAdmin || DireManager || DirUser),
|
||||
},
|
||||
{ key: "documents", icon: "bx bx-folder-open", label: "Documents",hidden:!(isViewDocuments || isModifyDocument || isUploadDocument) },
|
||||
{ key: "organization", icon: "bx bx-buildings", label: "Organization"},
|
||||
{ key: "setting", icon: "bx bxs-cog", label: "Setting",hidden:!isManageTeam },
|
||||
{ key: "organization", icon: "bx bx-buildings", label: "Organization"},
|
||||
];
|
||||
return (
|
||||
<div className="nav-align-top">
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
import React from "react";
|
||||
import { useProjectAssignedOrganizations } from "../../../hooks/useProjects";
|
||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
||||
import { formatUTCToLocalTime } from "../../../utils/dateUtils";
|
||||
|
||||
const ProjectAssignedOrgs = () => {
|
||||
const selectedProject = useSelectedProject();
|
||||
const { data, isLoading, isError, error } =
|
||||
useProjectAssignedOrganizations(selectedProject);
|
||||
|
||||
const orgList = [
|
||||
const contactList = [
|
||||
{
|
||||
key: "name",
|
||||
label: "Organization Name",
|
||||
@ -24,16 +23,6 @@ const ProjectAssignedOrgs = () => {
|
||||
</div>
|
||||
),
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
key: "service",
|
||||
label: "Service Name",
|
||||
getValue: (org) => (
|
||||
<div className="d-flex gap-2 py-1 ">
|
||||
{org?.service?.name}
|
||||
</div>
|
||||
),
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
key: "sprid",
|
||||
@ -48,33 +37,18 @@ const ProjectAssignedOrgs = () => {
|
||||
),
|
||||
align: "text-center",
|
||||
},
|
||||
|
||||
{
|
||||
key: "organizationType",
|
||||
label: "Organization Type",
|
||||
{
|
||||
key: "isActive",
|
||||
label: "Status",
|
||||
getValue: (org) => (
|
||||
<span
|
||||
className="text-truncate d-inline-block"
|
||||
style={{ maxWidth: "200px" }}
|
||||
className={`text-truncate d-inline-block badge bg-label-${org.isActive ? "primary" :"secondary"}`}
|
||||
style={{ maxWidth: "80px" }}
|
||||
>
|
||||
{org?.organizationType || "N/A"}
|
||||
{org?.isActive ? "Active" : "Inactive"}
|
||||
</span>
|
||||
),
|
||||
align: "text-center",
|
||||
},
|
||||
{
|
||||
key: "assignedDate",
|
||||
label: "Assigned Date",
|
||||
getValue: (org) => (
|
||||
<span
|
||||
className="text-truncate d-inline-block"
|
||||
style={{ maxWidth: "200px" }}
|
||||
>
|
||||
{/* {org?.assignedDate || "N/A"} */}
|
||||
{formatUTCToLocalTime(org?.assignedDate)}
|
||||
</span>
|
||||
),
|
||||
align: "text-center",
|
||||
align: "text-start",
|
||||
},
|
||||
];
|
||||
|
||||
@ -83,11 +57,11 @@ const ProjectAssignedOrgs = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="dataTables_wrapper no-footer mx-5 pb-2 page">
|
||||
<div className="dataTables_wrapper no-footer mx-5 pb-2">
|
||||
<table className="table dataTable text-nowrap">
|
||||
<thead>
|
||||
<tr className="table_header_border">
|
||||
{orgList.map((col) => (
|
||||
{contactList.map((col) => (
|
||||
<th key={col.key} className={col.align}>
|
||||
{col.label}
|
||||
</th>
|
||||
@ -98,7 +72,7 @@ const ProjectAssignedOrgs = () => {
|
||||
{Array.isArray(data) && data.length > 0 ? (
|
||||
data.map((row, i) => (
|
||||
<tr key={i}>
|
||||
{orgList.map((col) => (
|
||||
{contactList.map((col) => (
|
||||
<td key={col.key} className={col.align}>
|
||||
{col.getValue(row)}
|
||||
</td>
|
||||
@ -108,7 +82,7 @@ const ProjectAssignedOrgs = () => {
|
||||
) : (
|
||||
<tr style={{ height: "200px" }}>
|
||||
<td
|
||||
colSpan={orgList.length}
|
||||
colSpan={contactList.length}
|
||||
className="text-center align-middle"
|
||||
>
|
||||
Not Assigned yet
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const ProjectServices = () => {
|
||||
return (
|
||||
<div className='row'>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProjectServices
|
||||
@ -7,12 +7,12 @@ const ProjectOrganizations = () => {
|
||||
const { onOpen, startStep, flowType } = useOrganizationModal();
|
||||
const selectedProject = useSelectedProject();
|
||||
return (
|
||||
<div className="card pb-10" >
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<div className="d-flex justify-content-end px-2">
|
||||
<button
|
||||
type="button"
|
||||
className="link-button btn btn-sm rounded-md link-button-sm m-1 btn-primary"
|
||||
className="link-button btn btn-xs rounded-md link-button-sm m-1 btn-primary"
|
||||
onClick={() => onOpen({ startStep: 1, flowType: "assign" })}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
|
||||
@ -10,9 +10,9 @@ import ReactApexChart from "react-apexcharts";
|
||||
import Chart from "react-apexcharts";
|
||||
|
||||
const ProjectOverview = ({ project }) => {
|
||||
const { data } = useProjects();
|
||||
const { projects } = useProjects();
|
||||
const [current_project, setCurrentProject] = useState(
|
||||
data?.find((pro) => pro.id == project)
|
||||
projects.find((pro) => pro.id == project)
|
||||
);
|
||||
|
||||
const selectedProject = useSelector(
|
||||
@ -154,7 +154,7 @@ const ProjectOverview = ({ project }) => {
|
||||
}, [current_project]);
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentProject(data?.find((pro) => pro.id == selectedProject));
|
||||
setCurrentProject(projects.find((pro) => pro.id == selectedProject));
|
||||
if (current_project) {
|
||||
let val = getProgressInPercentage(
|
||||
current_project.plannedWork,
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
import { z } from "zod";
|
||||
import { DEFAULT_EMPTY_STATUS_ID } from "../../utils/constants";
|
||||
const currentDate = new Date()
|
||||
|
||||
|
||||
export const projectDefault = {
|
||||
name: "",
|
||||
shortName: "",
|
||||
contactPerson: "",
|
||||
projectAddress: "",
|
||||
startDate: currentDate.toISOString().split("T")[0],
|
||||
endDate: currentDate.toISOString().split("T")[0],
|
||||
projectStatusId: DEFAULT_EMPTY_STATUS_ID,
|
||||
promoterId: "",
|
||||
pmcId: "",
|
||||
};
|
||||
|
||||
|
||||
export const projectSchema = z
|
||||
.object({
|
||||
name: z.string().min(1, { message: "Project Name is required" }),
|
||||
shortName: z.string().optional(),
|
||||
contactPerson: z
|
||||
.string()
|
||||
.min(1, { message: "Contact Person Name is required" })
|
||||
.regex(/^[A-Za-z\s]+$/, {
|
||||
message: "Contact Person must contain only letters",
|
||||
}),
|
||||
projectAddress: z
|
||||
.string()
|
||||
.min(1, { message: "Address is required" })
|
||||
.max(500, "Address must not exceed 150 characters"),
|
||||
startDate: z
|
||||
.string()
|
||||
.min(1, { message: "Start Date is required" })
|
||||
.default(projectDefault),
|
||||
endDate: z
|
||||
.string()
|
||||
.min(1, { message: "End Date is required" })
|
||||
.default(projectDefault),
|
||||
projectStatusId: z.string().min(1, { message: "Status is required" }),
|
||||
promoterId: z.string().min(1, { message: "Promoter is required" }),
|
||||
pmcId: z.string().min(1, { message: "PMC is required" }),
|
||||
})
|
||||
.refine(
|
||||
(data) => {
|
||||
const start = new Date(data.startDate);
|
||||
const end = new Date(data.endDate);
|
||||
return end >= start;
|
||||
},
|
||||
{
|
||||
path: ["endDate"],
|
||||
message: "End Date must be greater than Start Date",
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,80 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import TeamEmployeeList from "./TeamEmployeeList";
|
||||
import { useOrganization } from "../../../hooks/useDirectory";
|
||||
import { useOrganizationsList } from "../../../hooks/useOrganization";
|
||||
import { useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
|
||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
||||
|
||||
const TeamAssignToProject = ({ closeModal }) => {
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [selectedOrg, setSelectedOrg] = useState(null);
|
||||
const project = useSelectedProject();
|
||||
const { data, isLoading, isError, error } =
|
||||
useProjectAssignedOrganizationsName(project);
|
||||
return (
|
||||
<div className="container">
|
||||
<p className="fs-5 fs-seminbod ">Assign Employee To Project </p>
|
||||
|
||||
<div className="row align-items-center gx-5">
|
||||
<div className="col">
|
||||
<div className="d-flex flex-grow-1 align-items-center gap-2">
|
||||
{isLoading ? (
|
||||
<select className="form-select form-select-sm w-100" disabled>
|
||||
<option value="">Loading...</option>
|
||||
</select>
|
||||
) : data?.length === 0 ? (
|
||||
<p className="mb-0 badge bg-label-secondary">No organizations found</p>
|
||||
) : (
|
||||
<>
|
||||
<label
|
||||
htmlFor="organization"
|
||||
className="form-label mb-0 text-nowrap"
|
||||
>
|
||||
Select Organization
|
||||
</label>
|
||||
<select
|
||||
id="organization"
|
||||
className="form-select form-select-sm w-100"
|
||||
value={selectedOrg || ""}
|
||||
onChange={(e) => setSelectedOrg(e.target.value)}
|
||||
>
|
||||
<option value="">Select</option>
|
||||
{data.map((org) => (
|
||||
<option key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col">
|
||||
<div className="d-flex flex-grow-1 align-items-center gap-2">
|
||||
<label htmlFor="search" className="form-label mb-0 text-nowrap">
|
||||
Search Employee
|
||||
</label>
|
||||
<input
|
||||
id="search"
|
||||
type="search"
|
||||
className="form-control form-control-sm w-100"
|
||||
placeholder="Search..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div >
|
||||
<TeamEmployeeList
|
||||
organizationId={selectedOrg}
|
||||
searchTerm={searchText}
|
||||
closeModal={closeModal}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeamAssignToProject;
|
||||
@ -1,251 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Avatar from "../../common/Avatar";
|
||||
import { useDebounce } from "../../../utils/appUtils";
|
||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
||||
import {
|
||||
useEmployeesByProjectAllocated,
|
||||
useManageProjectAllocation,
|
||||
useProjectAssignedServices,
|
||||
} from "../../../hooks/useProjects";
|
||||
import useMaster, { useServices } from "../../../hooks/masterHook/useMaster";
|
||||
import showToast from "../../../services/toastService";
|
||||
import { useOrganizationEmployees } from "../../../hooks/useOrganization";
|
||||
|
||||
const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
|
||||
const selectedProject = useSelectedProject();
|
||||
const debounceSearchTerm = useDebounce(searchTerm, 500);
|
||||
|
||||
const {
|
||||
data: employeesData = [],
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
} = useOrganizationEmployees(
|
||||
selectedProject,
|
||||
organizationId,
|
||||
debounceSearchTerm
|
||||
);
|
||||
|
||||
const { projectEmployees, loading: employeeLodaing } =
|
||||
useEmployeesByProjectAllocated(selectedProject, null);
|
||||
|
||||
const { data: jobRoles } = useMaster();
|
||||
const { data: services } = useProjectAssignedServices(selectedProject);
|
||||
|
||||
const [employees, setEmployees] = useState([]);
|
||||
|
||||
const { mutate: handleAssignEmployee, isPending } =
|
||||
useManageProjectAllocation({
|
||||
onSuccessCallback: () => {
|
||||
closeModal();
|
||||
},
|
||||
onErrorCallback: () => {
|
||||
closeModal();
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (employeesData?.data?.length > 0) {
|
||||
const available = employeesData.data.filter((emp) => {
|
||||
const projEmp = projectEmployees.find((pe) => pe.employeeId === emp.id);
|
||||
return !projEmp || projEmp.isActive === false;
|
||||
});
|
||||
|
||||
setEmployees(
|
||||
available.map((emp) => ({
|
||||
...emp,
|
||||
isChecked: false,
|
||||
jobRole: emp?.jobRoleId || null,
|
||||
serviceId: "",
|
||||
errors: {},
|
||||
}))
|
||||
);
|
||||
}
|
||||
}, [employeesData, projectEmployees, organizationId]);
|
||||
|
||||
const handleCheckboxChange = (index) => {
|
||||
setEmployees((prev) => {
|
||||
const newArr = [...prev];
|
||||
newArr[index].isChecked = !newArr[index].isChecked;
|
||||
newArr[index].errors = {};
|
||||
return newArr;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSelectChange = (index, field, value) => {
|
||||
setEmployees((prev) => {
|
||||
const newArr = [...prev];
|
||||
newArr[index][field] = value;
|
||||
newArr[index].errors[field] = "";
|
||||
return newArr;
|
||||
});
|
||||
};
|
||||
|
||||
const onSubmit = () => {
|
||||
const checkedEmployees = employees.filter((emp) => emp.isChecked);
|
||||
|
||||
setEmployees((prev) => prev.map((emp) => ({ ...emp, errors: {} })));
|
||||
|
||||
if (checkedEmployees.length === 0) {
|
||||
showToast("Select at least one employee", "info");
|
||||
return;
|
||||
}
|
||||
|
||||
let hasError = false;
|
||||
const newEmployees = employees.map((emp) => {
|
||||
const empErrors = {};
|
||||
if (emp.isChecked) {
|
||||
if (!emp.jobRole) {
|
||||
empErrors.jobRole = "Job role is required";
|
||||
hasError = true;
|
||||
}
|
||||
if (!emp.serviceId) {
|
||||
empErrors.serviceId = "Service is required";
|
||||
hasError = true;
|
||||
}
|
||||
}
|
||||
return { ...emp, errors: empErrors };
|
||||
});
|
||||
|
||||
setEmployees(newEmployees);
|
||||
|
||||
if (hasError) return; // stop submit if validation fails
|
||||
|
||||
const payload = checkedEmployees.map((emp) => ({
|
||||
employeeId: emp.id,
|
||||
jobRoleId: emp.jobRole,
|
||||
serviceId: emp.serviceId,
|
||||
projectId: selectedProject,
|
||||
status: true,
|
||||
}));
|
||||
|
||||
handleAssignEmployee({ payload,actionType:"assign"} );
|
||||
|
||||
setEmployees((prev) =>
|
||||
prev.map((emp) => ({
|
||||
...emp,
|
||||
isChecked: false,
|
||||
jobRole: "",
|
||||
serviceId: "",
|
||||
errors: {},
|
||||
}))
|
||||
);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return ( <div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">Loading employees...</p></div>) ;
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="page-min-h d-flex justify-content-center align-items-center ">
|
||||
{error?.status === 400 ? (
|
||||
<p className="m-0">Enter employee you want to find.</p>
|
||||
) : (
|
||||
<p className="m-0 dange-text">Something went wrong. Please try again later.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
if (employees.length === 0) {
|
||||
return(<div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">No available employees to assign.</p></div>) ;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className=" position-relative">
|
||||
<table className="table" style={{ maxHeight: "80px", overflowY: "auto" }}>
|
||||
<thead className=" position-sticky top-0">
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th>Service</th>
|
||||
<th>Job Role</th>
|
||||
<th>Select</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{employees.map((emp, index) => (
|
||||
<tr key={emp.id}>
|
||||
<td>
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar firstName={emp.firstName} lastName={emp.lastName} />
|
||||
<span className="ms-2 fw-semibold">
|
||||
{emp.firstName} {emp.lastName}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<select
|
||||
value={emp.serviceId}
|
||||
disabled={!emp.isChecked}
|
||||
onChange={(e) =>
|
||||
handleSelectChange(index, "serviceId", e.target.value)
|
||||
}
|
||||
className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
|
||||
emp.errors.serviceId ? "is-invalid" : ""
|
||||
}`}
|
||||
>
|
||||
<option value="">Select Service</option>
|
||||
{services?.map((s) => (
|
||||
<option key={s.id} value={s.id}>
|
||||
{s.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{emp.errors.serviceId && (
|
||||
<div className="danger-text">{emp.errors.serviceId}</div>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<select
|
||||
value={emp.jobRole}
|
||||
disabled={!emp.isChecked}
|
||||
onChange={(e) =>
|
||||
handleSelectChange(index, "jobRole", e.target.value)
|
||||
}
|
||||
className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
|
||||
emp.errors.jobRole ? "is-invalid" : ""
|
||||
}`}
|
||||
>
|
||||
<option value="">Select Job Role</option>
|
||||
{jobRoles?.map((r) => (
|
||||
<option key={r.id} value={r.id}>
|
||||
{r.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{emp.errors.jobRole && (
|
||||
<div className="danger-text">{emp.errors.jobRole}</div>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
checked={emp.isChecked}
|
||||
onChange={() => handleCheckboxChange(index)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="position-sticky bottom-0 bg-white d-flex justify-content-end gap-3 z-25 ">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary"
|
||||
onClick={() => closeModal()}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button onClick={onSubmit} className="btn btn-primary">
|
||||
{isPending ? "Please Wait..." : "Assign to Project"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeamEmployeeList;
|
||||
@ -1,339 +0,0 @@
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
import showToast from "../../../services/toastService";
|
||||
import Avatar from "../../common/Avatar";
|
||||
import moment from "moment";
|
||||
|
||||
import ProjectRepository from "../../../repositories/ProjectRepository";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { changeMaster } from "../../../slices/localVariablesSlice";
|
||||
import useMaster from "../../../hooks/masterHook/useMaster";
|
||||
import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
|
||||
import { ASSIGN_TO_PROJECT } from "../../../utils/constants";
|
||||
import ConfirmModal from "../../common/ConfirmModal";
|
||||
import eventBus from "../../../services/eventBus";
|
||||
import {
|
||||
useEmployeesByProjectAllocated,
|
||||
useManageProjectAllocation,
|
||||
useProjectAssignedServices,
|
||||
} from "../../../hooks/useProjects";
|
||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
||||
import GlobalModel from "../../common/GlobalModel";
|
||||
import TeamAssignToProject from "./TeamAssignToProject";
|
||||
|
||||
const Teams = () => {
|
||||
const selectedProject = useSelectedProject();
|
||||
const dispatch = useDispatch();
|
||||
const [AssigTeam, setAssignTeam] = useState(false);
|
||||
const [employees, setEmployees] = useState([]);
|
||||
const [selectedEmployee, setSelectedEmployee] = useState(null);
|
||||
const [deleteEmployee, setDeleteEmplyee] = useState(null);
|
||||
const [searchTerm, setSearchTerm] = useState(""); // State for search term
|
||||
const [selectedService, setSelectedService] = useState(null);
|
||||
const [activeEmployee, setActiveEmployee] = useState(false);
|
||||
|
||||
const { data: assignedServices, isLoading: servicesLoading } =
|
||||
useProjectAssignedServices(selectedProject);
|
||||
const { data: empJobRoles, loading } = useMaster();
|
||||
const handleToggleActive = (e) => setActiveEmployee(e.target.checked);
|
||||
|
||||
const handleServiceChange = (e) => {
|
||||
setSelectedService(e.target.value);
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
|
||||
const [IsDeleteModal, setIsDeleteModal] = useState(false);
|
||||
const {
|
||||
projectEmployees,
|
||||
loading: employeeLodaing,
|
||||
refetch,
|
||||
} = useEmployeesByProjectAllocated(
|
||||
selectedProject,
|
||||
selectedService,
|
||||
null,
|
||||
activeEmployee
|
||||
);
|
||||
const {
|
||||
mutate: submitAllocations,
|
||||
isPending,
|
||||
isSuccess,
|
||||
isError,
|
||||
} = useManageProjectAllocation({
|
||||
onSuccessCallback: () => {
|
||||
setSelectedEmployee(null);
|
||||
},
|
||||
onErrorCallback: () => {
|
||||
setSelectedEmployee(null);
|
||||
},
|
||||
});
|
||||
|
||||
const handleDelete = (employee) => {
|
||||
let payload = [
|
||||
{
|
||||
employeeId: employee?.employeeId,
|
||||
jobRoleId: employee?.jobRoleId,
|
||||
projectId: selectedProject,
|
||||
serviceId: employee?.serviceId,
|
||||
status: false,
|
||||
},
|
||||
];
|
||||
|
||||
submitAllocations({ payload: payload, actionType: "remove" });
|
||||
};
|
||||
const getJobRole = (jobRoleId) => {
|
||||
if (loading) return "Loading...";
|
||||
if (!Array.isArray(empJobRoles)) return "Unassigned";
|
||||
if (!jobRoleId) return "Unassigned";
|
||||
|
||||
const role = empJobRoles.find((b) => b.id == jobRoleId);
|
||||
return role ? role.name : "Unassigned";
|
||||
};
|
||||
|
||||
const filteredEmployees = useMemo(() => {
|
||||
if (!projectEmployees) return [];
|
||||
|
||||
let filtered = projectEmployees;
|
||||
|
||||
if (activeEmployee) {
|
||||
filtered = projectEmployees.filter((emp) => !emp.isActive);
|
||||
}
|
||||
|
||||
// Apply search filter if present
|
||||
if (searchTerm?.trim()) {
|
||||
const lower = searchTerm.toLowerCase();
|
||||
filtered = filtered.filter((emp) => {
|
||||
const fullName = `${emp.firstName ?? ""} ${emp.lastName ?? ""}`.toLowerCase();
|
||||
const jobRole = getJobRole(emp?.jobRoleId)?.toLowerCase();
|
||||
return fullName.includes(lower) || jobRole.includes(lower);
|
||||
});
|
||||
}
|
||||
|
||||
return filtered;
|
||||
}, [projectEmployees, searchTerm, activeEmployee]);
|
||||
const handleSearch = (e) => setSearchTerm(e.target.value);
|
||||
const employeeHandler = useCallback(
|
||||
(msg) => {
|
||||
if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) {
|
||||
refetch();
|
||||
}
|
||||
},
|
||||
[filteredEmployees, refetch]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("employee", employeeHandler);
|
||||
return () => eventBus.off("employee", employeeHandler);
|
||||
}, [employeeHandler]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{AssigTeam && (
|
||||
<GlobalModel
|
||||
size="lg"
|
||||
isOpen={AssigTeam}
|
||||
closeModal={() => setAssignTeam(false)}
|
||||
>
|
||||
<TeamAssignToProject closeModal={() => setAssignTeam(false)} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
<ConfirmModal
|
||||
type="delete"
|
||||
header={"Remove Employee"}
|
||||
message={"Are you sure you want to remove?"}
|
||||
isOpen={!!selectedEmployee}
|
||||
loading={isPending}
|
||||
onSubmit={() => handleDelete(selectedEmployee)}
|
||||
onClose={() => setSelectedEmployee(null)}
|
||||
/>
|
||||
|
||||
<div className="card card-action mb-6">
|
||||
<div className="card-body">
|
||||
<div className="row align-items-center justify-content-between mb-4 g-3">
|
||||
<div className="col-md-6 col-12 algin-items-center">
|
||||
<div className="d-flex flex-wrap align-items-center gap-3">
|
||||
<div>
|
||||
{!servicesLoading && (
|
||||
<>
|
||||
{(!assignedServices || assignedServices.length === 0) && (
|
||||
<span className="badge bg-label-secondary">
|
||||
Not Service Assigned
|
||||
</span>
|
||||
)}
|
||||
|
||||
{assignedServices?.length === 1 && (
|
||||
<span className="badge bg-label-secondary">
|
||||
{assignedServices[0].name}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{assignedServices?.length > 1 && (
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
aria-label="Select Service"
|
||||
value={selectedService}
|
||||
onChange={handleServiceChange}
|
||||
>
|
||||
<option value="">All Services</option>
|
||||
{assignedServices.map((service) => (
|
||||
<option key={service.id} value={service.id}>
|
||||
{service.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-check form-switch d-flex align-items-center text-nowrap">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
id="activeEmployeeSwitch"
|
||||
checked={activeEmployee}
|
||||
onChange={handleToggleActive}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label ms-2"
|
||||
htmlFor="activeEmployeeSwitch"
|
||||
>
|
||||
{activeEmployee ? "Active Employees" : "Include Inactive Employees"}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search by Name or Role"
|
||||
aria-controls="DataTables_Table_0"
|
||||
style={{ maxWidth: "200px" }}
|
||||
value={searchTerm}
|
||||
onChange={handleSearch}
|
||||
/>
|
||||
|
||||
{HasAssignUserPermission && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm text-nowrap"
|
||||
onClick={() => setAssignTeam(true)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-1"></i>
|
||||
Assign Employee
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="table-responsive text-nowrap modal-min-h">
|
||||
{employeeLodaing && <p>Loading..</p>}
|
||||
{projectEmployees && projectEmployees.length > 0 && (
|
||||
<table className="table ">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<div className="text-start ms-5">Name</div>
|
||||
</th>
|
||||
<th>Services</th>
|
||||
<th>Organization</th>
|
||||
<th>Assigned Date</th>
|
||||
{activeEmployee && <th>Release Date</th>}
|
||||
<th>Project Role</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0">
|
||||
{filteredEmployees &&
|
||||
filteredEmployees
|
||||
.sort((a, b) =>
|
||||
(a.firstName || "").localeCompare(b.firstName || "")
|
||||
)
|
||||
.map((emp) => (
|
||||
<tr key={emp.id}>
|
||||
<td>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
<Avatar
|
||||
firstName={emp.firstName}
|
||||
lastName={emp.lastName}
|
||||
/>
|
||||
<div className="d-flex flex-column">
|
||||
<a
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/employee/${emp.employeeId}?for=attendance`
|
||||
)
|
||||
}
|
||||
className="text-heading text-truncate cursor-pointer"
|
||||
>
|
||||
<span className="fw-normal">
|
||||
{emp.firstName}{" "}
|
||||
{emp.lastName}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>{emp.serviceName || "N/A"}</td>
|
||||
<td>{emp.organizationName || "N/A"}</td>
|
||||
|
||||
<td>
|
||||
{moment(emp.allocationDate).format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
{activeEmployee && (
|
||||
<td>
|
||||
{emp.reAllocationDate
|
||||
? moment(emp.reAllocationDate).format(
|
||||
"DD-MMM-YYYY"
|
||||
)
|
||||
: "Present"}
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
<span className="badge bg-label-primary me-1">
|
||||
{getJobRole(emp.jobRoleId)}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{emp.isActive ? (
|
||||
<button
|
||||
aria-label="Delete"
|
||||
type="button"
|
||||
title="Remove from project"
|
||||
className="btn p-0 dropdown-toggle hide-arrow"
|
||||
onClick={() => setSelectedEmployee(emp)}
|
||||
>
|
||||
<i className="bx bx-trash me-1 text-danger"></i>
|
||||
</button>
|
||||
) : (
|
||||
<span>Not in project</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
{!employeeLodaing && filteredEmployees.length === 0 && (
|
||||
<div className="text-center text-muted py-3 d-flex justify-content-center align-items-center py-12">
|
||||
<p>
|
||||
{activeEmployee
|
||||
? "No active employees assigned to the project"
|
||||
: "No inactive employees assigned to the project"}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Teams;
|
||||
443
src/components/Project/Teams.jsx
Normal file
443
src/components/Project/Teams.jsx
Normal file
@ -0,0 +1,443 @@
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import MapUsers from "./MapUsers";
|
||||
import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
import showToast from "../../services/toastService";
|
||||
import Avatar from "../common/Avatar";
|
||||
import moment from "moment";
|
||||
|
||||
import ProjectRepository from "../../repositories/ProjectRepository";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||
import useMaster from "../../hooks/masterHook/useMaster";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { ASSIGN_TO_PROJECT } from "../../utils/constants";
|
||||
import ConfirmModal from "../common/ConfirmModal";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import {
|
||||
useEmployeesByProjectAllocated,
|
||||
useManageProjectAllocation,
|
||||
useProjectAssignedServices,
|
||||
} from "../../hooks/useProjects";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
|
||||
const Teams = () => {
|
||||
const projectId = useSelectedProject();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const { data, loading } = useMaster();
|
||||
const [isModalOpen, setIsModelOpen] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [empJobRoles, setEmpJobRoles] = useState(null);
|
||||
const [employees, setEmployees] = useState([]);
|
||||
const [filteredEmployees, setFilteredEmployees] = useState([]);
|
||||
const [removingEmployeeId, setRemovingEmployeeId] = useState(null);
|
||||
const [assignedLoading, setAssignedLoading] = useState(false);
|
||||
const [activeEmployee, setActiveEmployee] = useState(true);
|
||||
const [deleteEmployee, setDeleteEmplyee] = useState(null);
|
||||
const [searchTerm, setSearchTerm] = useState(""); // State for search term
|
||||
const [selectedService, setSelectedService] = useState(null);
|
||||
|
||||
const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
|
||||
const handleToggleActive = e => setActiveEmployee(e.target.checked);
|
||||
|
||||
|
||||
const handleServiceChange = (e) => {
|
||||
setSelectedService(e.target.value);
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
|
||||
const [IsDeleteModal, setIsDeleteModal] = useState(false);
|
||||
const {
|
||||
projectEmployees,
|
||||
loading: employeeLodaing,
|
||||
refetch,
|
||||
} = useEmployeesByProjectAllocated(projectId, selectedService);
|
||||
const {
|
||||
mutate: submitAllocations,
|
||||
isPending,
|
||||
isSuccess,
|
||||
isError,
|
||||
} = useManageProjectAllocation({
|
||||
onSuccessCallback: () => {
|
||||
setRemovingEmployeeId(null);
|
||||
setAssignedLoading(false);
|
||||
setDeleteEmplyee(null);
|
||||
closeDeleteModal();
|
||||
},
|
||||
onErrorCallback: () => {
|
||||
closeDeleteModal();
|
||||
},
|
||||
});
|
||||
|
||||
const removeAllocation = (item) => {
|
||||
setRemovingEmployeeId(item.id);
|
||||
|
||||
submitAllocations({
|
||||
items: [
|
||||
{
|
||||
empID: item.employeeId,
|
||||
jobRoleId: item.jobRoleId,
|
||||
projectId: projectId,
|
||||
status: false,
|
||||
},
|
||||
],
|
||||
added: false,
|
||||
});
|
||||
};
|
||||
|
||||
const handleEmpAlicationFormSubmit = (allocaionObj) => {
|
||||
let items = allocaionObj.map((item) => {
|
||||
return {
|
||||
empID: item.empID,
|
||||
jobRoleId: item.jobRoleId,
|
||||
projectId: projectId,
|
||||
status: true,
|
||||
};
|
||||
});
|
||||
|
||||
submitAllocations({ items, added: true });
|
||||
|
||||
setActiveEmployee(true);
|
||||
setFilteredEmployees(employees.filter((emp) => emp.isActive));
|
||||
|
||||
const dropdown = document.querySelector(
|
||||
'select[name="DataTables_Table_0_length"]'
|
||||
);
|
||||
if (dropdown) dropdown.value = "true";
|
||||
};
|
||||
|
||||
const getRole = (jobRoleId) => {
|
||||
if (loading) return "Loading...";
|
||||
if (!Array.isArray(empJobRoles)) return "Unassigned";
|
||||
if (!jobRoleId) return "Unassigned";
|
||||
|
||||
const role = empJobRoles.find((b) => b.id == jobRoleId);
|
||||
return role ? role.name : "Unassigned";
|
||||
};
|
||||
const openModel = () => {
|
||||
setIsModelOpen(true);
|
||||
};
|
||||
|
||||
const onModelClose = () => {
|
||||
setIsModelOpen(false);
|
||||
const modalElement = document.getElementById("user-model");
|
||||
if (modalElement) {
|
||||
modalElement.classList.remove("show");
|
||||
modalElement.style.display = "none";
|
||||
document.body.classList.remove("modal-open");
|
||||
document.querySelector(".modal-backdrop").remove();
|
||||
}
|
||||
const modalBackdropElement = document.querySelector(".modal-backdrop");
|
||||
if (modalBackdropElement) {
|
||||
modalBackdropElement.remove();
|
||||
}
|
||||
document.body.style.overflow = "auto";
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(changeMaster("Job Role"));
|
||||
}, [dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (projectEmployees) {
|
||||
setEmployees(projectEmployees);
|
||||
const filtered = projectEmployees.filter((emp) => emp.isActive);
|
||||
setFilteredEmployees(filtered);
|
||||
}
|
||||
}, [projectEmployees, employeeLodaing]);
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setEmpJobRoles(data);
|
||||
}
|
||||
}, [data]);
|
||||
const filterAndSearchEmployees = useCallback(() => {
|
||||
const statusFiltered = employees.filter((emp) =>
|
||||
activeEmployee ? emp.isActive : !emp.isActive
|
||||
);
|
||||
|
||||
if (searchTerm === "") {
|
||||
setFilteredEmployees(statusFiltered);
|
||||
return;
|
||||
}
|
||||
|
||||
const lowercasedSearchTerm = searchTerm.toLowerCase();
|
||||
|
||||
const searchedAndFiltered = statusFiltered.filter((item) => {
|
||||
const fullName = `${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase();
|
||||
const roleName = getRole(item.jobRoleId).toLowerCase();
|
||||
const orgName = (item.organizationName || "").toLowerCase();
|
||||
const serviceName = (item.serviceName || "").toLowerCase();
|
||||
|
||||
return (
|
||||
fullName.includes(lowercasedSearchTerm) ||
|
||||
roleName.includes(lowercasedSearchTerm) ||
|
||||
orgName.includes(lowercasedSearchTerm) ||
|
||||
serviceName.includes(lowercasedSearchTerm)
|
||||
);
|
||||
});
|
||||
|
||||
setFilteredEmployees(searchedAndFiltered);
|
||||
}, [employees, activeEmployee, searchTerm, getRole]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
filterAndSearchEmployees();
|
||||
}, [employees, activeEmployee, searchTerm, filterAndSearchEmployees]);
|
||||
|
||||
const handleFilterEmployee = (e) => {
|
||||
const filterValue = e.target.value;
|
||||
setActiveEmployee(filterValue === "true");
|
||||
setSearchTerm("");
|
||||
};
|
||||
|
||||
const handleSearch = (e) => {
|
||||
setSearchTerm(e.target.value);
|
||||
};
|
||||
|
||||
const deleteModalOpen = (item) => {
|
||||
setDeleteEmplyee(item);
|
||||
setIsDeleteModal(true);
|
||||
};
|
||||
const closeDeleteModal = () => setIsDeleteModal(false);
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
if (msg.projectIds.some((item) => item === projectId)) {
|
||||
refetch();
|
||||
}
|
||||
},
|
||||
[projectId, refetch]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("assign_project_all", handler);
|
||||
return () => eventBus.off("assign_project_all", handler);
|
||||
}, [handler]);
|
||||
|
||||
const employeeHandler = useCallback(
|
||||
(msg) => {
|
||||
if (filteredEmployees.some((item) => item.employeeId == msg.employeeId)) {
|
||||
refetch();
|
||||
}
|
||||
},
|
||||
[filteredEmployees, refetch]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("employee", employeeHandler);
|
||||
return () => eventBus.off("employee", employeeHandler);
|
||||
}, [employeeHandler]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="modal fade"
|
||||
id="user-model"
|
||||
tabIndex="-1"
|
||||
aria-labelledby="userModalLabel"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<MapUsers
|
||||
projectId={projectId}
|
||||
onClose={onModelClose}
|
||||
empJobRoles={empJobRoles}
|
||||
onSubmit={handleEmpAlicationFormSubmit}
|
||||
allocation={employees}
|
||||
assignedLoading={assignedLoading}
|
||||
setAssignedLoading={setAssignedLoading}
|
||||
></MapUsers>
|
||||
</div>
|
||||
|
||||
{IsDeleteModal && (
|
||||
<ConfirmModal
|
||||
isOpen={IsDeleteModal}
|
||||
type="delete"
|
||||
header="Removed Employee"
|
||||
message="Are you sure you want delete?"
|
||||
onSubmit={() => removeAllocation(deleteEmployee)}
|
||||
onClose={closeDeleteModal}
|
||||
loading={isPending}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="card card-action mb-6">
|
||||
<div className="card-body">
|
||||
<div className="row d-flex justify-content-between mb-4">
|
||||
<div className="col-md-6 col-12 d-flex align-items-center">
|
||||
<div className="dataTables_length text-start py-1 px-0 col-md-4 col-12">
|
||||
{!servicesLoading && assignedServices?.length > 0 && (
|
||||
assignedServices.length > 1 ? (
|
||||
<label>
|
||||
<select
|
||||
name="DataTables_Table_0_length"
|
||||
aria-controls="DataTables_Table_0"
|
||||
className="form-select form-select-sm"
|
||||
aria-label="Select Service"
|
||||
value={selectedService}
|
||||
onChange={handleServiceChange}
|
||||
style={{ fontSize: "0.875rem", height: "35px", width: "190px" }}
|
||||
>
|
||||
<option value="">All Services</option>
|
||||
{assignedServices.map((service) => (
|
||||
<option key={service.id} value={service.id}>
|
||||
{service.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
) : (
|
||||
<h5>{assignedServices[0].name}</h5>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
|
||||
<div className="form-check form-switch me-2 mt-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
checked={activeEmployee}
|
||||
onChange={handleToggleActive}
|
||||
id="activeEmployeeSwitch"
|
||||
/>
|
||||
<label className="form-check-label ms-0 " htmlFor="activeEmployeeSwitch">
|
||||
{activeEmployee ? "Active Employees" : "Inactive Employees"}
|
||||
</label>
|
||||
</div>
|
||||
<div className="dataTables_filter d-inline-flex align-items-center ms-2">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm me-4"
|
||||
placeholder="Search by Name or Role"
|
||||
aria-controls="DataTables_Table_0"
|
||||
value={searchTerm}
|
||||
onChange={handleSearch}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={`link-button btn-primary btn-sm ${HasAssignUserPermission ? "" : "d-none"
|
||||
}`}
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#user-model"
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
Assign Employee
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive text-nowrap">
|
||||
{employeeLodaing && <p>Loading..</p>}
|
||||
{!employeeLodaing &&
|
||||
filteredEmployees &&
|
||||
filteredEmployees.length > 0 && (
|
||||
<table className="table ">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<div className="text-start ms-5">Name</div>
|
||||
</th>
|
||||
<th>Services</th>
|
||||
<th>Organization</th>
|
||||
<th>Assigned Date</th>
|
||||
{!activeEmployee && <th>Release Date</th>}
|
||||
<th>Project Role</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0">
|
||||
{filteredEmployees &&
|
||||
filteredEmployees.map((item) => (
|
||||
<tr key={item.id}>
|
||||
<td>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
<Avatar
|
||||
firstName={item.firstName}
|
||||
lastName={item.lastName}
|
||||
/>
|
||||
<div className="d-flex flex-column">
|
||||
<a
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/employee/${item.employeeId}?for=attendance`
|
||||
)
|
||||
}
|
||||
className="text-heading text-truncate cursor-pointer"
|
||||
>
|
||||
<span className="fw-normal">
|
||||
{item.firstName} {item.middleName}{" "}
|
||||
{item.lastName}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>{item.serviceName || "N/A"}</td>
|
||||
<td>{item.organizationName || "N/A"}</td>
|
||||
|
||||
<td>
|
||||
{moment(item.allocationDate).format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
{!activeEmployee && (
|
||||
<td>
|
||||
{item.reAllocationDate
|
||||
? moment(item.reAllocationDate).format("DD-MMM-YYYY")
|
||||
: "Present"}
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
<span className="badge bg-label-primary me-1">
|
||||
{getRole(item.jobRoleId)}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{item.isActive ? (
|
||||
<button
|
||||
aria-label="Delete"
|
||||
type="button"
|
||||
title="Remove from project"
|
||||
className="btn p-0 dropdown-toggle hide-arrow"
|
||||
onClick={() => deleteModalOpen(item)}
|
||||
>
|
||||
{removingEmployeeId === item.id ? (
|
||||
<div
|
||||
className="spinner-border spinner-border-sm text-primary"
|
||||
role="status"
|
||||
>
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<i className="bx bx-trash me-1 text-danger"></i>
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<span>Not in project</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
)}
|
||||
{!employeeLodaing && filteredEmployees.length === 0 && (
|
||||
<div className="text-center text-muted py-3">
|
||||
{activeEmployee
|
||||
? "No active employees assigned to the project"
|
||||
: "No inactive employees assigned to the project"}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Teams;
|
||||
@ -72,15 +72,15 @@ const EditProfile = ({ TenantId, onClose }) => {
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form className="row g-6" onSubmit={handleSubmit(onSubmit)}>
|
||||
<h5>Edit Tenant</h5>
|
||||
<h6>Edit Tenant</h6>
|
||||
|
||||
<div className="col-sm-6 mt-1 text-start">
|
||||
<div className="col-sm-6 mt-1">
|
||||
<Label htmlFor="firstName" required>First Name</Label>
|
||||
<input id="firstName" type="text" className="form-control form-control-sm" {...register("firstName")} inputMode='text' />
|
||||
{errors.firstName && <div className="danger-text">{errors.firstName.message}</div>}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 mt-1 text-start">
|
||||
<div className="col-sm-6 mt-1">
|
||||
<Label htmlFor="lastName" required>Last Name</Label>
|
||||
<input id="lastName" type="text" className="form-control form-control-sm" {...register("lastName")} />
|
||||
{errors.lastName && <div className="danger-text">{errors.lastName.message}</div>}
|
||||
@ -88,32 +88,32 @@ const EditProfile = ({ TenantId, onClose }) => {
|
||||
|
||||
|
||||
|
||||
<div className="col-sm-6 mt-1 text-start">
|
||||
<div className="col-sm-6 mt-1">
|
||||
<Label htmlFor="contactNumber" required>Contact Number</Label>
|
||||
<input id="contactNumber" type="text" className="form-control form-control-sm" {...register("contactNumber")} inputMode="tel"
|
||||
placeholder="+91 9876543210" />
|
||||
{errors.contactNumber && <div className="danger-text">{errors.contactNumber.message}</div>}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 mt-1 text-start">
|
||||
<div className="col-sm-6 mt-1">
|
||||
<Label htmlFor="domainName" >Domain Name</Label>
|
||||
<input id="domainName" type="text" className="form-control form-control-sm" {...register("domainName")} />
|
||||
{errors.domainName && <div className="danger-text">{errors.domainName.message}</div>}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 mt-1 text-start">
|
||||
<div className="col-sm-6 mt-1">
|
||||
<Label htmlFor="taxId" >Tax ID</Label>
|
||||
<input id="taxId" type="text" className="form-control form-control-sm" {...register("taxId")} />
|
||||
{errors.taxId && <div className="danger-text">{errors.taxId.message}</div>}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 mt-1 text-start">
|
||||
<div className="col-sm-6 mt-1">
|
||||
<Label htmlFor="officeNumber" >Office Number</Label>
|
||||
<input id="officeNumber" type="text" className="form-control form-control-sm" {...register("officeNumber")} />
|
||||
{errors.officeNumber && <div className="danger-text">{errors.officeNumber.message}</div>}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 mt-1 text-start">
|
||||
<div className="col-sm-6 mt-1">
|
||||
<Label htmlFor="industryId" required>Industry</Label>
|
||||
<select className="form-select form-select-sm" {...register("industryId")}>
|
||||
{industryLoading ? <option value="">Loading...</option> :
|
||||
@ -125,7 +125,7 @@ const EditProfile = ({ TenantId, onClose }) => {
|
||||
{errors.industryId && <div className="danger-text">{errors.industryId.message}</div>}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 mt-1 text-start">
|
||||
<div className="col-sm-6 mt-1">
|
||||
<Label htmlFor="reference">Reference</Label>
|
||||
<select className="form-select form-select-sm" {...register("reference")}>
|
||||
{reference.map((org) => (
|
||||
@ -134,7 +134,7 @@ const EditProfile = ({ TenantId, onClose }) => {
|
||||
</select>
|
||||
{errors.reference && <div className="danger-text">{errors.reference.message}</div>}
|
||||
</div>
|
||||
<div className="col-sm-6 text-start">
|
||||
<div className="col-sm-6">
|
||||
<Label htmlFor="organizationSize" required>
|
||||
Organization Size
|
||||
</Label>
|
||||
@ -154,19 +154,19 @@ const EditProfile = ({ TenantId, onClose }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 mt-1 text-start">
|
||||
<div className="col-12 mt-1">
|
||||
<Label htmlFor="billingAddress" required>Billing Address</Label>
|
||||
<textarea id="billingAddress" className="form-control" {...register("billingAddress")} rows={2} />
|
||||
{errors.billingAddress && <div className="danger-text">{errors.billingAddress.message}</div>}
|
||||
</div>
|
||||
|
||||
<div className="col-12 mt-1 text-start">
|
||||
<div className="col-12 mt-1">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<textarea id="description" className="form-control" {...register("description")} rows={2} />
|
||||
{errors.description && <div className="danger-text">{errors.description.message}</div>}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-12 text-start">
|
||||
<div className="col-sm-12">
|
||||
<Label htmlFor="logImage">Logo Image</Label>
|
||||
<LogoUpload
|
||||
preview={logoPreview}
|
||||
@ -176,9 +176,9 @@ const EditProfile = ({ TenantId, onClose }) => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-end gap-2 mt-3">
|
||||
<button type="button" disabled={isPending} className="btn btn-sm btn-label-secondary" onClick={onClose}>Cancel</button>
|
||||
<div className="d-flex justify-content-center gap-2 mt-3">
|
||||
<button type="submit" disabled={isPending} className="btn btn-sm btn-primary">{isPending ? "Please Wait..." : "Submit"}</button>
|
||||
<button type="button" disabled={isPending} className="btn btn-sm btn-secondary" onClick={onClose}>Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React from "react";
|
||||
import { useFormContext } from "react-hook-form";
|
||||
|
||||
const toBase64 = (file) =>
|
||||
@ -10,15 +10,11 @@ const toBase64 = (file) =>
|
||||
});
|
||||
|
||||
export const LogoUpload = ({ preview, setPreview, fileName, setFileName }) => {
|
||||
const { register, setValue, watch, formState: { errors } } = useFormContext();
|
||||
const logoImage = watch("logoImage");
|
||||
|
||||
// Sync preview when the form value changes
|
||||
useEffect(() => {
|
||||
if (logoImage && !preview) {
|
||||
setPreview(logoImage); // Use base64 as preview
|
||||
}
|
||||
}, [logoImage, preview, setPreview]);
|
||||
const {
|
||||
register,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
} = useFormContext();
|
||||
|
||||
const handleUpload = async (e) => {
|
||||
const file = e.target.files?.[0];
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useState } from "react";
|
||||
import { useFormContext, Controller } from "react-hook-form";
|
||||
import Label from "../common/Label";
|
||||
import DatePicker from "../common/DatePicker";
|
||||
@ -6,14 +6,11 @@ import { useCreateTenant, useIndustries } from "../../hooks/useTenant";
|
||||
import { LogoUpload } from "./LogoUpload";
|
||||
import { orgSize, reference } from "../../utils/constants";
|
||||
import moment from "moment";
|
||||
import { useGlobalServices } from "../../hooks/masterHook/useMaster";
|
||||
import SelectMultiple from "../common/SelectMultiple";
|
||||
|
||||
const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
const { data, isError, isLoading: industryLoading } = useIndustries();
|
||||
const [logoPreview, setLogoPreview] = useState(null);
|
||||
const [logoName, setLogoName] = useState("");
|
||||
const { data: services, isLoading: serviceLoading } = useGlobalServices();
|
||||
const {
|
||||
register,
|
||||
control,
|
||||
@ -45,7 +42,6 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
"industryId",
|
||||
"reference",
|
||||
"logoImage",
|
||||
"serviceIds",
|
||||
]);
|
||||
|
||||
if (valid) {
|
||||
@ -57,13 +53,6 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const logoImage = getValues("logoImage");
|
||||
if (logoImage) {
|
||||
setLogoPreview(logoImage);
|
||||
setLogoName("Uploaded Logo");
|
||||
}
|
||||
}, [getValues]);
|
||||
|
||||
|
||||
return (
|
||||
@ -192,7 +181,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6">
|
||||
<Label htmlFor="reference" required>Reference</Label>
|
||||
<Label htmlFor="reference">Reference</Label>
|
||||
<select
|
||||
id="reference"
|
||||
className="form-select shadow-none border py-1 px-2 small"
|
||||
@ -209,20 +198,6 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6">
|
||||
<SelectMultiple
|
||||
name="serviceIds"
|
||||
label="Services"
|
||||
options={services?.data}
|
||||
isLoading={serviceLoading}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
{errors.serviceIds && (
|
||||
<div className="danger-text">{errors.serviceIds.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-sm-12">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
|
||||
@ -224,7 +224,7 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
|
||||
</div>
|
||||
|
||||
{Object.keys(errors).length > 0 && (
|
||||
<div role="alert">
|
||||
<div class="alert alert-danger" role="alert">
|
||||
{Object.entries(errors).map(([key, error]) => (
|
||||
<div key={key} className="danger-text">
|
||||
{error?.message}
|
||||
|
||||
@ -14,7 +14,7 @@ const SkeletonCell = ({ width = "100%", height = 20, style = {} }) => (
|
||||
|
||||
export const TenantTableSkeleton = ({ columns, rows = 5 }) => {
|
||||
return (
|
||||
<div className="p-2 mt-3">
|
||||
<div className="card p-2 mt-3">
|
||||
<div className="card-datatable text-nowrap table-responsive">
|
||||
<table className="table border-top dataTable text-nowrap">
|
||||
<thead>
|
||||
|
||||
@ -38,7 +38,7 @@ const TenantFilterPanel = ({ onApply }) => {
|
||||
);
|
||||
|
||||
|
||||
// Close popup when navigating to another component
|
||||
// ✅ Close popup when navigating to another component
|
||||
const location = useLocation();
|
||||
useEffect(() => {
|
||||
handleClosePanel();
|
||||
@ -106,13 +106,13 @@ const TenantFilterPanel = ({ onApply }) => {
|
||||
<div className="d-flex justify-content-end py-3 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-label-secondary btn-sm"
|
||||
className="btn btn-label-secondary btn-xs"
|
||||
onClick={onClear}
|
||||
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary btn-sm" >
|
||||
<button type="submit" className="btn btn-primary btn-xs" >
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -33,7 +33,6 @@ export const newTenantSchema = z.object({
|
||||
organizationSize: z.string().nonempty("Organization size is required"),
|
||||
industryId: z.string().uuid("Invalid industry ID"),
|
||||
reference: z.string().nonempty("Reference is required"),
|
||||
serviceIds: z.array(z.string()).optional(),
|
||||
});
|
||||
|
||||
export const tenantDefaultValues = {
|
||||
@ -52,14 +51,13 @@ export const tenantDefaultValues = {
|
||||
organizationSize: "",
|
||||
industryId: "", // should be a valid UUID if pre-filled
|
||||
reference: "",
|
||||
serviceIds:[]
|
||||
};
|
||||
|
||||
|
||||
|
||||
export const getSubscriptionSchema = (minUsers) =>
|
||||
z.object({
|
||||
planId: z.string().min(1, { message: "Please select a plan to continue" }),
|
||||
planId: z.string().min(1, { message: "Please select Plan" }),
|
||||
currencyId: z.string().uuid("Invalid currency"),
|
||||
maxUsers: z
|
||||
.number({ invalid_type_error: "Must be a number" })
|
||||
|
||||
@ -137,7 +137,7 @@ const TenantsList = ({
|
||||
return (
|
||||
<>
|
||||
<div className="p-2 mt-3">
|
||||
<div className=" text-nowrap table-responsive">
|
||||
<div className="card-datatable text-nowrap table-responsive">
|
||||
<table className="table border-top dataTable text-nowrap">
|
||||
<thead>
|
||||
<tr className="shadow-sm">
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useController } from "react-hook-form";
|
||||
|
||||
|
||||
const DatePicker = ({
|
||||
name,
|
||||
control,
|
||||
placeholder = "DD-MM-YYYY",
|
||||
className = "",
|
||||
allowText = false,
|
||||
maxDate,
|
||||
maxDate, // removed default new Date()
|
||||
minDate,
|
||||
...rest
|
||||
}) => {
|
||||
@ -21,43 +22,43 @@ const DatePicker = ({
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!inputRef.current) return;
|
||||
|
||||
const fp = flatpickr(inputRef.current, {
|
||||
dateFormat: "d-m-Y",
|
||||
allowInput: allowText,
|
||||
defaultDate: value ? new Date(value) : null, // safely convert to Date
|
||||
maxDate: maxDate ? new Date(maxDate) : undefined,
|
||||
minDate: minDate ? new Date(minDate) : undefined,
|
||||
onChange: (selectedDates) => {
|
||||
if (selectedDates.length > 0) {
|
||||
onChange(flatpickr.formatDate(selectedDates[0], "Y-m-d"));
|
||||
} else {
|
||||
onChange("");
|
||||
}
|
||||
},
|
||||
...rest
|
||||
});
|
||||
|
||||
return () => {
|
||||
fp.destroy(); // clean up on unmount
|
||||
};
|
||||
if (inputRef.current) {
|
||||
flatpickr(inputRef.current, {
|
||||
dateFormat: "d-m-Y",
|
||||
allowInput: allowText,
|
||||
defaultDate: value
|
||||
? flatpickr.parseDate(value, "Y-m-d")
|
||||
: null,
|
||||
maxDate: maxDate ?? undefined, // only applied if passed
|
||||
minDate: minDate ? new Date(minDate.split("T")[0]) : undefined,
|
||||
onChange: function (selectedDates) {
|
||||
if (selectedDates.length > 0) {
|
||||
// store in YYYY-MM-DD
|
||||
const formatted = flatpickr.formatDate(selectedDates[0], "Y-m-d");
|
||||
onChange(formatted);
|
||||
} else {
|
||||
onChange("");
|
||||
}
|
||||
},
|
||||
...rest
|
||||
});
|
||||
}
|
||||
}, [inputRef, value, allowText, maxDate, minDate, rest, onChange]);
|
||||
|
||||
const displayValue = value ? flatpickr.formatDate(new Date(value), "d-m-Y") : "";
|
||||
|
||||
return (
|
||||
<div className={`position-relative ${className}`}>
|
||||
<div className={` position-relative ${className}`}>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control form-control-sm "
|
||||
placeholder={placeholder}
|
||||
value={displayValue}
|
||||
onChange={(e) => {
|
||||
if (allowText) {
|
||||
onChange(e.target.value); // allow manual typing if enabled
|
||||
}
|
||||
}}
|
||||
defaultValue={
|
||||
value
|
||||
? flatpickr.formatDate(
|
||||
flatpickr.parseDate(value, "Y-m-d"),
|
||||
"d-m-Y"
|
||||
)
|
||||
: ""
|
||||
}
|
||||
ref={(el) => {
|
||||
inputRef.current = el;
|
||||
ref(el);
|
||||
@ -69,7 +70,7 @@ const DatePicker = ({
|
||||
<span
|
||||
className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer"
|
||||
onClick={() => {
|
||||
if (inputRef.current?._flatpickr) {
|
||||
if (inputRef.current && inputRef.current._flatpickr) {
|
||||
inputRef.current._flatpickr.open();
|
||||
}
|
||||
}}
|
||||
|
||||
@ -1,39 +1,27 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { useController, useFormContext, useWatch } from "react-hook-form";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
const DateRangePicker = ({
|
||||
md=12,
|
||||
sm=6,
|
||||
md,
|
||||
sm,
|
||||
onRangeChange,
|
||||
DateDifference = 7,
|
||||
endDateMode = "yesterday",
|
||||
}) => {
|
||||
const inputRef = useRef(null);
|
||||
|
||||
const persistedRange = useSelector(
|
||||
(store) => store.localVariables.attendance.defaultDateRange
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
let startDate, endDate;
|
||||
|
||||
if (persistedRange?.startDate && persistedRange?.endDate) {
|
||||
startDate = new Date(persistedRange.startDate);
|
||||
endDate = new Date(persistedRange.endDate);
|
||||
} else {
|
||||
endDate = new Date();
|
||||
if (endDateMode === "yesterday") {
|
||||
endDate.setDate(endDate.getDate() - 1);
|
||||
}
|
||||
endDate.setHours(0, 0, 0, 0);
|
||||
|
||||
startDate = new Date(endDate);
|
||||
startDate.setDate(endDate.getDate() - (DateDifference - 1));
|
||||
startDate.setHours(0, 0, 0, 0);
|
||||
const endDate = new Date();
|
||||
if (endDateMode === "yesterday") {
|
||||
endDate.setDate(endDate.getDate() - 1);
|
||||
}
|
||||
|
||||
const fp = flatpickr(inputRef.current, {
|
||||
endDate.setHours(0, 0, 0, 0);
|
||||
|
||||
const startDate = new Date(endDate);
|
||||
startDate.setDate(endDate.getDate() - (DateDifference - 1));
|
||||
startDate.setHours(0, 0, 0, 0);
|
||||
|
||||
const fp = flatpickr(inputRef.current, {
|
||||
mode: "range",
|
||||
dateFormat: "Y-m-d",
|
||||
altInput: true,
|
||||
@ -53,32 +41,32 @@ const DateRangePicker = ({
|
||||
endDate: endDate.toLocaleDateString("en-CA"),
|
||||
});
|
||||
|
||||
return () => fp.destroy();
|
||||
}, [onRangeChange, DateDifference, endDateMode, persistedRange]);
|
||||
return () => {
|
||||
fp.destroy();
|
||||
};
|
||||
}, [onRangeChange, DateDifference, endDateMode]);
|
||||
|
||||
const handleIconClick = () => {
|
||||
if (inputRef.current?._flatpickr) {
|
||||
inputRef.current._flatpickr.open();
|
||||
if (inputRef.current) {
|
||||
inputRef.current._flatpickr.open(); // directly opens flatpickr
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`position-relative w-auto justify-content-center`}>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm w-100 pe-8 "
|
||||
placeholder="From to End"
|
||||
id="flatpickr-range"
|
||||
ref={inputRef}
|
||||
/>
|
||||
|
||||
<i
|
||||
className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 end-0 translate-middle-y me-2 "
|
||||
onClick={handleIconClick}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`col-${sm} col-sm-${md} px-1`}>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm ps-2 pe-5 me-4"
|
||||
placeholder="From to End"
|
||||
id="flatpickr-range"
|
||||
ref={inputRef}
|
||||
/>
|
||||
|
||||
<i
|
||||
className="bx bx-calendar calendar-icon cursor-pointer position-relative top-50 translate-middle-y " onClick={handleIconClick}
|
||||
style={{ right: "22px", bottom: "-8px" }}
|
||||
></i>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -88,7 +76,6 @@ export default DateRangePicker;
|
||||
|
||||
|
||||
|
||||
|
||||
export const DateRangePicker1 = ({
|
||||
startField = "startDate",
|
||||
endField = "endDate",
|
||||
@ -161,20 +148,10 @@ export const DateRangePicker1 = ({
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (resetSignal !== undefined) {
|
||||
if (defaultRange) {
|
||||
if (defaultRange && resetSignal !== undefined) {
|
||||
applyDefaultDates();
|
||||
} else {
|
||||
setValue(startField, "", { shouldValidate: true });
|
||||
setValue(endField, "", { shouldValidate: true });
|
||||
|
||||
if (inputRef.current?._flatpickr) {
|
||||
inputRef.current._flatpickr.clear();
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [resetSignal, defaultRange, setValue, startField, endField]);
|
||||
|
||||
}, [resetSignal, defaultRange]);
|
||||
|
||||
const start = getValues(startField);
|
||||
const end = getValues(endField);
|
||||
|
||||
@ -4,13 +4,10 @@ import { useDebounce } from "../../utils/appUtils";
|
||||
import { useController } from "react-hook-form";
|
||||
import Avatar from "./Avatar";
|
||||
|
||||
const EmployeeSearchInput = ({
|
||||
control,
|
||||
name,
|
||||
projectId,
|
||||
placeholder,
|
||||
forAll,
|
||||
}) => {
|
||||
|
||||
|
||||
|
||||
const EmployeeSearchInput = ({ control, name, projectId,placeholder }) => {
|
||||
const {
|
||||
field: { onChange, value, ref },
|
||||
fieldState: { error },
|
||||
@ -20,20 +17,17 @@ const EmployeeSearchInput = ({
|
||||
const [showDropdown, setShowDropdown] = useState(false);
|
||||
const debouncedSearch = useDebounce(search, 500);
|
||||
|
||||
const { data: employees, isLoading } = useEmployeesName(
|
||||
projectId,
|
||||
debouncedSearch,
|
||||
forAll
|
||||
);
|
||||
const {
|
||||
data: employees,
|
||||
isLoading,
|
||||
} = useEmployeesName(projectId, debouncedSearch);
|
||||
|
||||
useEffect(() => {
|
||||
if (value && employees?.data) {
|
||||
const found = employees.data.find((emp) => emp.id === value);
|
||||
if (found && forAll) {
|
||||
setSearch(found.firstName + " " + found.lastName);
|
||||
}
|
||||
if (value && !search) {
|
||||
const found = employees?.data?.find((emp) => emp.id === value);
|
||||
if (found) setSearch(found.firstName + " " + found.lastName);
|
||||
}
|
||||
}, [value, employees?.data]);
|
||||
}, [value, employees]);
|
||||
|
||||
const handleSelect = (employee) => {
|
||||
onChange(employee.id);
|
||||
@ -52,7 +46,7 @@ const EmployeeSearchInput = ({
|
||||
onChange={(e) => {
|
||||
setSearch(e.target.value);
|
||||
setShowDropdown(true);
|
||||
onChange("");
|
||||
onChange("");
|
||||
}}
|
||||
onFocus={() => {
|
||||
if (search) setShowDropdown(true);
|
||||
@ -67,27 +61,28 @@ const EmployeeSearchInput = ({
|
||||
{isLoading ? (
|
||||
<li className="list-group-item">
|
||||
<a>Searching...</a>
|
||||
|
||||
</li>
|
||||
) : (
|
||||
employees?.data?.map((emp) => (
|
||||
<li
|
||||
key={emp.id}
|
||||
className="list-group-item list-group-item-action py-1 px-1"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => handleSelect(emp)}
|
||||
>
|
||||
<div className="d-flex align-items-center px-0">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0 me-2"
|
||||
firstName={emp.firstName}
|
||||
lastName={emp.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${emp?.firstName} ${emp?.lastName}`.trim()}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
key={emp.id}
|
||||
className="list-group-item list-group-item-action py-1 px-1"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => handleSelect(emp)}
|
||||
>
|
||||
<div className="d-flex align-items-center px-0">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0 me-2"
|
||||
firstName={emp.firstName}
|
||||
lastName={emp.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${emp?.firstName} ${emp?.lastName}`.trim()}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
|
||||
@ -1,65 +0,0 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
|
||||
const HoverPopup = ({ title, content, children }) => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const triggerRef = useRef(null);
|
||||
const popupRef = useRef(null);
|
||||
|
||||
// Toggle on hover or click
|
||||
const handleMouseEnter = () => setVisible(true);
|
||||
const handleClick = () => setVisible((prev) => !prev);
|
||||
|
||||
// Hide on outside click
|
||||
useEffect(() => {
|
||||
const handleDocumentClick = (e) => {
|
||||
if (
|
||||
!popupRef.current?.contains(e.target) &&
|
||||
!triggerRef.current?.contains(e.target)
|
||||
) {
|
||||
setVisible(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (visible) {
|
||||
document.addEventListener("click", handleDocumentClick);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("click", handleDocumentClick);
|
||||
};
|
||||
}, [visible]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="d-inline-block position-relative"
|
||||
ref={triggerRef}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onClick={handleClick}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
{children}
|
||||
|
||||
{visible && (
|
||||
<div
|
||||
ref={popupRef}
|
||||
className="bg-white border rounded shadow-sm py-1 px-2 text-start text-lowercase"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "100%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
zIndex: 1050,
|
||||
minWidth: "220px",
|
||||
marginTop: "8px",
|
||||
}}
|
||||
>
|
||||
{title && <h6 className="mb-2 text-capitalize">{title}</h6>}
|
||||
<div className="text-capitalize">{content}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HoverPopup;
|
||||
|
||||
@ -3,65 +3,35 @@ import React from "react";
|
||||
const ProgressBar = ({
|
||||
plannedWork = 100,
|
||||
completedWork = 0,
|
||||
height = "6px",
|
||||
height = "8px",
|
||||
className = "mb-4",
|
||||
rounded = true,
|
||||
showLabel = true,
|
||||
}) => {
|
||||
const getProgress = (planned, completed) => {
|
||||
if (!planned || planned === 0) return 0;
|
||||
return Math.min((completed / planned) * 100, 100);
|
||||
if (!planned || planned === 0) return "0%";
|
||||
return `${Math.min((completed / planned) * 100, 100).toFixed(2)}%`;
|
||||
};
|
||||
|
||||
const percentage = getProgress(plannedWork, completedWork);
|
||||
|
||||
const progressBarStyle = {
|
||||
width: ` ${percentage.toFixed(2)}%`,
|
||||
transition: "width 0.4s ease",
|
||||
};
|
||||
|
||||
const containerStyle = {
|
||||
height,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
const progressStyle = {
|
||||
width: getProgress(plannedWork, completedWork),
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`d-flex align-items-center ${className}`}
|
||||
style={containerStyle}
|
||||
className={`progress ${className} ${rounded ? "rounded" : ""}`}
|
||||
style={{ height }}
|
||||
>
|
||||
<div className="flex-grow-1">
|
||||
<div
|
||||
className={`progress ${rounded ? "rounded" : ""}`}
|
||||
style={{ height, backgroundColor: "#f0f0f0" }}
|
||||
>
|
||||
<div
|
||||
className={`progress-bar ${rounded ? "rounded" : ""}`}
|
||||
role="progressbar"
|
||||
style={progressBarStyle}
|
||||
aria-valuenow={completedWork}
|
||||
aria-valuemin="0"
|
||||
aria-valuemax={plannedWork}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showLabel && (
|
||||
<span
|
||||
className="fw-semibold text-secondary"
|
||||
style={{
|
||||
minWidth: "45px",
|
||||
textAlign: "right",
|
||||
fontSize: "0.8rem",
|
||||
}}
|
||||
>
|
||||
{percentage.toFixed(2)}%
|
||||
</span>
|
||||
)}
|
||||
<div
|
||||
className={`progress-bar ${rounded ? "rounded" : ""}`}
|
||||
role="progressbar"
|
||||
style={progressStyle}
|
||||
aria-valuenow={completedWork}
|
||||
aria-valuemin="0"
|
||||
aria-valuemax={plannedWork}
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProgressBar;
|
||||
|
||||
|
||||
@ -8,24 +8,25 @@ const SelectMultiple = ({
|
||||
name,
|
||||
options = [],
|
||||
label = "Select options",
|
||||
labelKey = "name",
|
||||
labelKey = "name",
|
||||
valueKey = "id",
|
||||
placeholder = "Please select...",
|
||||
IsLoading = false,required = false
|
||||
IsLoading = false,
|
||||
required = false
|
||||
}) => {
|
||||
const { setValue, watch,register } = useFormContext();
|
||||
useEffect(() => {
|
||||
register(name, { value: [] });
|
||||
}, [register, name]);
|
||||
|
||||
const selectedValues = watch(name) || [];
|
||||
const { setValue, watch } = useFormContext();
|
||||
const selectedValues = watch(name) || [];
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const containerRef = useRef(null);
|
||||
const dropdownRef = useRef(null);
|
||||
|
||||
const [dropdownStyles, setDropdownStyles] = useState({ top: 0, left: 0, width: 0 });
|
||||
const [dropdownStyles, setDropdownStyles] = useState({
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 0,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e) => {
|
||||
@ -64,14 +65,10 @@ const selectedValues = watch(name) || [];
|
||||
setValue(name, updated, { shouldValidate: true });
|
||||
};
|
||||
|
||||
const filteredOptions = (options || []).filter((item) => {
|
||||
const label = getLabel(item);
|
||||
return (
|
||||
typeof label === "string" &&
|
||||
label.toLowerCase().includes(searchText.toLowerCase())
|
||||
);
|
||||
});
|
||||
|
||||
const filteredOptions = options.filter((item) => {
|
||||
const label = getLabel(item);
|
||||
return label?.toLowerCase().includes(searchText.toLowerCase());
|
||||
});
|
||||
|
||||
const dropdownElement = (
|
||||
<div
|
||||
@ -109,8 +106,14 @@ const selectedValues = watch(name) || [];
|
||||
return (
|
||||
<div
|
||||
key={valueVal}
|
||||
className={`multi-select-dropdown-option ${isChecked ? "selected" : ""}`}
|
||||
style={{ display: "flex", alignItems: "center", padding: "4px 8px" }}
|
||||
className={`multi-select-dropdown-option ${
|
||||
isChecked ? "selected" : ""
|
||||
}`}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: "4px 8px",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
@ -139,9 +142,13 @@ const selectedValues = watch(name) || [];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div ref={containerRef} className="multi-select-dropdown-container" style={{ position: "relative" }}>
|
||||
<label className="form-label mb-1">{label}</label>
|
||||
<Label className={name} required={required}></Label>
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="multi-select-dropdown-container"
|
||||
style={{ position: "relative" }}
|
||||
>
|
||||
<Label required={required}>{label}</Label>
|
||||
|
||||
|
||||
<div
|
||||
className="multi-select-dropdown-header"
|
||||
@ -150,7 +157,9 @@ const selectedValues = watch(name) || [];
|
||||
>
|
||||
<span
|
||||
className={
|
||||
selectedValues.length > 0 ? "placeholder-style-selected" : "placeholder-style"
|
||||
selectedValues.length > 0
|
||||
? "placeholder-style-selected"
|
||||
: "placeholder-style"
|
||||
}
|
||||
>
|
||||
<div className="selected-badges-container">
|
||||
@ -159,7 +168,10 @@ const selectedValues = watch(name) || [];
|
||||
const found = options.find((opt) => opt[valueKey] === val);
|
||||
const label = found ? getLabel(found) : "";
|
||||
return (
|
||||
<span key={val} className="badge badge-selected-item mx-1 mb-1">
|
||||
<span
|
||||
key={val}
|
||||
className="badge badge-selected-item mx-1 mb-1"
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
|
||||
@ -1,143 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { useImageGalleryFilter } from "../../hooks/useImageGallery";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
import { FormProvider, useForm } from "react-hook-form";
|
||||
import Label from "../common/Label";
|
||||
import { DateRangePicker1 } from "../common/DateRangePicker";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { defaultGalleryFilterValue, gallerySchema } from "./GallerySchema";
|
||||
import SelectMultiple from "../common/SelectMultiple";
|
||||
import { localToUtc } from "../../utils/appUtils";
|
||||
|
||||
const GalleryFilterPanel = ({ onApply }) => {
|
||||
const selectedProject = useSelectedProject();
|
||||
const [resetKey, setResetKey] = useState(0);
|
||||
|
||||
const { data, isLoading, isError, error } =
|
||||
useImageGalleryFilter(selectedProject);
|
||||
|
||||
const closePanel = () => {
|
||||
document.querySelector(".offcanvas.show .btn-close")?.click();
|
||||
};
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(gallerySchema),
|
||||
defaultValues: defaultGalleryFilterValue,
|
||||
});
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
register,
|
||||
setValue,reset,
|
||||
formState: { errors },
|
||||
} = methods;
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
onApply({
|
||||
...formData,
|
||||
startDate: localToUtc(formData.startDate),
|
||||
endDate: localToUtc(formData.endDate),
|
||||
});
|
||||
closePanel()
|
||||
};
|
||||
|
||||
const onClear=()=>{
|
||||
reset(defaultGalleryFilterValue);
|
||||
setResetKey((prev) => prev + 1);
|
||||
closePanel()
|
||||
}
|
||||
|
||||
if (isLoading) return <div>Loading....</div>;
|
||||
if (isError) return <div>{error.message}</div>;
|
||||
return (
|
||||
<div className="d-block text-start">
|
||||
<FormProvider {...methods}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="mb-2">
|
||||
<Label>Select Date:</Label>
|
||||
<DateRangePicker1
|
||||
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
||||
startField="startDate"
|
||||
endField="endDate"
|
||||
resetSignal={resetKey}
|
||||
defaultRange={false}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<SelectMultiple
|
||||
name="buildingIds"
|
||||
label="Select building:"
|
||||
options={data?.buildings}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-2">
|
||||
<SelectMultiple
|
||||
name="floorIds"
|
||||
label="Select Floor:"
|
||||
options={data?.floors}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<SelectMultiple
|
||||
name="workAreaIds"
|
||||
label="Select Work Area:"
|
||||
options={data?.workAreas}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<SelectMultiple
|
||||
name="workCategoryIds"
|
||||
label="Select Work Category:"
|
||||
options={data?.workCategories}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-2">
|
||||
<SelectMultiple
|
||||
name="activityIds"
|
||||
label="Select Activity:"
|
||||
options={data?.activities}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<SelectMultiple
|
||||
name="uploadedByIds"
|
||||
label="Select Uploaded By:"
|
||||
options={data?.UploadedBys}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<SelectMultiple
|
||||
name="serviceIds"
|
||||
label="Select Service:"
|
||||
options={data?.services}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
<div className="d-flex flex-row gap-3 justify-content-end">
|
||||
<button className="btn btn-sm btn-label-secondary" onClick={onClear}>Cancel</button>
|
||||
<button type="submit" className="btn btn-sm btn-primary">
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GalleryFilterPanel;
|
||||
@ -1,25 +0,0 @@
|
||||
import { z } from "zod";
|
||||
|
||||
export const gallerySchema = z.object({
|
||||
buildingIds: z.array(z.string()).optional(),
|
||||
floorIds: z.array(z.string()).optional(),
|
||||
workAreaIds: z.array(z.string()).optional(),
|
||||
activityIds: z.array(z.string()).optional(),
|
||||
workCategoryIds: z.array(z.string()).optional(),
|
||||
startDate: z.string().optional(),
|
||||
endDate: z.string().optional(),
|
||||
uploadedByIds: z.array(z.string()).optional(),
|
||||
serviceIds: z.array(z.string()).optional(),
|
||||
});
|
||||
|
||||
export const defaultGalleryFilterValue = {
|
||||
buildingIds: [],
|
||||
floorIds: [],
|
||||
workAreaIds: [],
|
||||
activityIds: [],
|
||||
workCategoryIds:[],
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
uploadedByIds:[],
|
||||
serviceIds: [],
|
||||
};
|
||||
@ -1,169 +0,0 @@
|
||||
import React, { useRef, useState, useCallback, useEffect } from "react";
|
||||
import moment from "moment";
|
||||
import Avatar from "../../components/common/Avatar";
|
||||
import { useGalleryContext } from "../../pages/Gallary/ImageGallaryPage";
|
||||
import useImageGallery from "../../hooks/useImageGallery";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import Pagination from "../common/Pagination";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import Loader from "../common/Loader";
|
||||
|
||||
const ImageGalleryListView = ({filter}) => {
|
||||
const [hoveredImage, setHoveredImage] = useState(null);
|
||||
const selectedProject = useSelectedProject();
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const { setOpenGallery } = useGalleryContext();
|
||||
|
||||
const { data, isLoading, isError, error } = useImageGallery(
|
||||
selectedProject,
|
||||
currentPage,
|
||||
10,
|
||||
filter
|
||||
);
|
||||
|
||||
const paginate = (page) => {
|
||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
||||
setCurrentPage(page);
|
||||
}
|
||||
};
|
||||
|
||||
if (!data?.data?.length && !isLoading) {
|
||||
return (
|
||||
<p className="text-center text-muted mt-5">
|
||||
{selectedProject ? " No images match the selected filters.":"Please Select Project!"}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="page-min-h d-flex justify-content-center align-items-center">
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
<div className="activity-section">
|
||||
{data?.data?.map((batch) => {
|
||||
if (!batch.documents?.length) return null;
|
||||
|
||||
const doc = batch.documents[0];
|
||||
const userName = `${doc.uploadedBy?.firstName || ""} ${
|
||||
doc.uploadedBy?.lastName || ""
|
||||
}`.trim();
|
||||
const date = formatUTCToLocalTime(doc.uploadedAt);
|
||||
// const hasArrows = batch.documents.length > scrollThreshold;
|
||||
|
||||
return (
|
||||
<div key={batch.batchId} className="grouped-section">
|
||||
<div className="group-heading">
|
||||
<div className="d-flex align-items-center mb-1">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={doc.uploadedBy?.firstName}
|
||||
lastName={doc.uploadedBy?.lastName}
|
||||
className="me-2"
|
||||
/>
|
||||
<div className="d-flex flex-column align-items-start">
|
||||
<strong className="user-name-text">{userName}</strong>
|
||||
<span className="text-muted small">{date}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="location-line text-secondary">
|
||||
<div className="d-flex align-items-center flex-wrap gap-1 text-secondary">
|
||||
<span className="d-flex align-items-center">
|
||||
<span>{batch.buildingName}</span>
|
||||
<i className="bx bx-chevron-right " />
|
||||
</span>
|
||||
<span className="d-flex align-items-center">
|
||||
<span>{batch.floorName}</span>
|
||||
<i className="bx bx-chevron-right m" />
|
||||
</span>
|
||||
<span className="d-flex align-items-center ">
|
||||
<span>{batch.workAreaName || "Unknown"}</span>
|
||||
<i className="bx bx-chevron-right " />
|
||||
<span>{batch.activityName}</span>
|
||||
</span>
|
||||
</div>
|
||||
{batch.workCategoryName && (
|
||||
<span className="badge bg-label-primary ms-2">
|
||||
{batch.workCategoryName}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="image-group-wrapper">
|
||||
{/* {hasArrows && (
|
||||
<button className="scroll-arrow left-arrow" onClick={() => scrollLeft(batch.batchId)}>
|
||||
‹
|
||||
</button>
|
||||
)} */}
|
||||
<div
|
||||
className="image-group-horizontal"
|
||||
// ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
|
||||
>
|
||||
{batch.documents.map((d, i) => {
|
||||
const hoverDate = moment().format("DD MMMM, YYYY");
|
||||
const hoverTime = moment(d.uploadedAt).format("hh:mm A");
|
||||
|
||||
return (
|
||||
<div
|
||||
key={d.id}
|
||||
className="image-card"
|
||||
onMouseEnter={() => setHoveredImage(d)}
|
||||
onMouseLeave={() => setHoveredImage(null)}
|
||||
onClick={() =>
|
||||
setOpenGallery({
|
||||
isOpen: true,
|
||||
data: { data: batch, index: i },
|
||||
})
|
||||
}
|
||||
>
|
||||
<div className="image-wrapper">
|
||||
<img src={d.url} alt={`Image ${i + 1}`} />
|
||||
</div>
|
||||
{hoveredImage === d && (
|
||||
<div className="image-hover-description">
|
||||
<p>
|
||||
<strong>Date:</strong> {hoverDate}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Time:</strong> {hoverTime}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Activity:</strong> {batch.activityName}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{/* {hasArrows && (
|
||||
<button className="scroll-arrow right-arrow" onClick={() => scrollRight(batch.batchId)}>
|
||||
‹
|
||||
</button>
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{data?.data?.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={data?.totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImageGalleryListView;
|
||||
@ -1,111 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
|
||||
const ViewGallery = ({ batch, index }) => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [currentIndex, setCurrentIndex] = useState(index);
|
||||
console.log(batch);
|
||||
useEffect(() => {
|
||||
setCurrentIndex(index);
|
||||
}, [index, batch]);
|
||||
|
||||
if (!batch || !batch.documents || batch.documents.length === 0) return null;
|
||||
|
||||
const image = batch.documents[currentIndex];
|
||||
if (!image) return null;
|
||||
|
||||
const fullName = `${image.uploadedBy?.firstName || ""} ${
|
||||
image.uploadedBy?.lastName || ""
|
||||
}`.trim();
|
||||
const date = formatUTCToLocalTime(image.uploadedAt);
|
||||
|
||||
const buildingName = batch.buildingName;
|
||||
const floorName = batch.floorName;
|
||||
const workAreaName = batch.workAreaName;
|
||||
const activityName = batch.activityName;
|
||||
const batchComment = batch.comment;
|
||||
|
||||
const handlePrev = () => {
|
||||
setCurrentIndex((prevIndex) => Math.max(0, prevIndex - 1));
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
setCurrentIndex((prevIndex) =>
|
||||
Math.min(batch.documents.length - 1, prevIndex + 1)
|
||||
);
|
||||
};
|
||||
|
||||
const hasPrev = currentIndex > 0;
|
||||
const hasNext = currentIndex < batch.documents.length - 1;
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
{loading && <p>Loading...</p>}
|
||||
<div className="position-relative d-flex justify-content-center align-items-center">
|
||||
{hasPrev && (
|
||||
<button
|
||||
className="btn btn-icon btn-outline-primary rounded-circle position-absolute start-0 top-50 translate-middle-y shadow"
|
||||
onClick={handlePrev}
|
||||
>
|
||||
<i className="bx bx-chevron-left fs-4"></i>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<img
|
||||
src={image.url}
|
||||
alt="Preview"
|
||||
className="img-fluid rounded"
|
||||
style={{
|
||||
maxHeight: "500px",
|
||||
width: "100%",
|
||||
objectFit: "contain",
|
||||
}}
|
||||
onLoad={() => setLoading(false)}
|
||||
/>
|
||||
|
||||
{hasNext && (
|
||||
<button
|
||||
className="btn btn-icon btn-outline-primary position-absolute end-0 top-50 translate-middle-y rounded-circle shadow"
|
||||
onClick={handleNext}
|
||||
>
|
||||
<i className="bx bx-chevron-right fs-4"></i>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<div className="mt-3 text-start small">
|
||||
<p className="mb-1">
|
||||
<i className="bx bxs-user me-2"></i>
|
||||
<span className="text-muted">Uploaded By: </span>
|
||||
<span className="fw-semibold">{fullName}</span>
|
||||
</p>
|
||||
|
||||
<p className="mb-1">
|
||||
<i className="bx bxs-calendar me-2"></i>
|
||||
<span className="text-muted">Date: </span>
|
||||
<span className="fw-semibold">{date}</span>
|
||||
</p>
|
||||
|
||||
<p className="mb-1">
|
||||
<i className="bx bx-map me-2"></i>
|
||||
<span className="text-muted">Location: </span>
|
||||
<span className="fw-semibold">
|
||||
{buildingName} <i className="bx bx-chevron-right"></i> {floorName}{" "}
|
||||
<i className="bx bx-chevron-right"></i> {workAreaName || "Unknown"}{" "}
|
||||
<i className="bx bx-chevron-right"></i> {activityName}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<p className="mb-0">
|
||||
<i className="bx bx-comment-dots me-2"></i>
|
||||
<span className="text-muted">Comment: </span>
|
||||
<span className="fw-semibold">{batchComment}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ViewGallery;
|
||||
@ -3,23 +3,20 @@ import { useFieldArray, useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
|
||||
import {
|
||||
useCreateActivity,
|
||||
useUpdateActivity,
|
||||
} from "../../../hooks/masterHook/useMaster";
|
||||
import Label from "../../common/Label";
|
||||
import { MasterRespository } from "../../repositories/MastersRepository";
|
||||
import { clearApiCacheKey } from "../../slices/apiCacheSlice";
|
||||
import { getCachedData, cacheData } from "../../slices/apiDataManager";
|
||||
import showToast from "../../services/toastService";
|
||||
import { useCreateActivity } from "../../hooks/masterHook/useMaster";
|
||||
import Label from "../common/Label";
|
||||
|
||||
const schema = z.object({
|
||||
activityName: z.string().min(1, { message: "Activity Name is required" }),
|
||||
unitOfMeasurement: z
|
||||
.string()
|
||||
.min(1, { message: "Unit of Measurement is required" }),
|
||||
unitOfMeasurement: z.string().min(1, { message: "Unit of Measurement is required" }),
|
||||
checkList: z
|
||||
.array(
|
||||
z.object({
|
||||
description: z
|
||||
.string()
|
||||
.min(1, { message: "descriptionlist item cannot be empty" }),
|
||||
description: z.string().min(1, { message: "descriptionlist item cannot be empty" }),
|
||||
isMandatory: z.boolean().default(false),
|
||||
id: z.any().default(null),
|
||||
})
|
||||
@ -27,14 +24,9 @@ const schema = z.object({
|
||||
.optional(),
|
||||
});
|
||||
|
||||
const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
|
||||
const CreateActivity = ({ onClose }) => {
|
||||
const maxDescriptionLength = 255;
|
||||
const { mutate: createActivity, isPending: isLoading } = useCreateActivity(
|
||||
() => close?.()
|
||||
);
|
||||
const { mutate: UpdateActivity, isPending: isUpdating } = useUpdateActivity(
|
||||
() => close?.()
|
||||
);
|
||||
const { mutate: createActivity, isPending: isLoading } = useCreateActivity(() => onClose?.());
|
||||
|
||||
const {
|
||||
register,
|
||||
@ -83,107 +75,82 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
|
||||
append({ id: null, description: "", isMandatory: false });
|
||||
}, [checkListItems, getValues, append, setError, clearErrors]);
|
||||
|
||||
const removeChecklistItem = useCallback(
|
||||
(index) => {
|
||||
remove(index);
|
||||
},
|
||||
[remove]
|
||||
);
|
||||
const removeChecklistItem = useCallback((index) => {
|
||||
remove(index);
|
||||
}, [remove]);
|
||||
|
||||
const handleChecklistChange = useCallback(
|
||||
(index, value) => {
|
||||
setValue(`checkList.${index}`, value);
|
||||
},
|
||||
[setValue]
|
||||
);
|
||||
const handleChecklistChange = useCallback((index, value) => {
|
||||
setValue(`checkList.${index}`, value);
|
||||
}, [setValue]);
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
let payload = {
|
||||
...formData,
|
||||
activityGroupId: whichGroup,
|
||||
};
|
||||
if (activity) {
|
||||
UpdateActivity({ id: activity.id, payload: payload });
|
||||
} else {
|
||||
createActivity(payload);
|
||||
}
|
||||
createActivity(formData);
|
||||
};
|
||||
// const onSubmit = (data) => {
|
||||
// setIsLoading(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (activity) {
|
||||
reset({
|
||||
activityName: activity.activityName || "",
|
||||
unitOfMeasurement: activity.unitOfMeasurement || "",
|
||||
checkList: activity.checkLists?.map((check) => ({
|
||||
id: check.id || null, // Use the ID provided in the checklist
|
||||
description: check.description || "",
|
||||
isMandatory: check.isMandatory || false,
|
||||
})) || [{ description: "", isMandatory: false }], // Default to an empty checklist item
|
||||
});
|
||||
}
|
||||
}, [activity, reset]);
|
||||
// MasterRespository.createActivity(data)
|
||||
// .then( ( resp ) =>
|
||||
// {
|
||||
|
||||
// const cachedData = getCachedData("Activity");
|
||||
// const updatedData = [ ...cachedData, resp?.data ];
|
||||
// cacheData("Activity", updatedData);
|
||||
// showToast("Activity Successfully Added.", "success");
|
||||
// setIsLoading(false);
|
||||
// handleClose()
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// showToast(error.message, "error");
|
||||
// setIsLoading(false);
|
||||
// });
|
||||
// };
|
||||
const handleClose = useCallback(() => {
|
||||
reset();
|
||||
close();
|
||||
}, [reset, close]);
|
||||
onClose();
|
||||
}, [reset, onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
const tooltipTriggerList = Array.from(
|
||||
document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
||||
);
|
||||
const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
|
||||
}, []);
|
||||
let isPending = isLoading || isUpdating;
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="px-7">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
{/* <h6>Create Activity</h6> */}
|
||||
<div className="row border border-1 border-secondary rounded-3 mt-2">
|
||||
<div className="col-6 text-start mt-3">
|
||||
<Label className="form-label" required>
|
||||
Activity
|
||||
</Label>
|
||||
<div className="row">
|
||||
<div className="col-6 text-start">
|
||||
<Label className="form-label" required>Activity</Label>
|
||||
<input
|
||||
type="text"
|
||||
{...register("activityName")}
|
||||
className={`form-control form-control-sm ${
|
||||
errors.activityName ? "is-invalid" : ""
|
||||
}`}
|
||||
className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""
|
||||
}`}
|
||||
/>
|
||||
{errors.activityName && (
|
||||
<p className="danger-text">{errors.activityName.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-6 text-start mt-3">
|
||||
<Label className="form-label" required>
|
||||
Measurement
|
||||
</Label>
|
||||
<div className="col-6 text-start">
|
||||
<Label className="form-label" required>Measurement</Label>
|
||||
<input
|
||||
type="text"
|
||||
{...register("unitOfMeasurement")}
|
||||
className={`form-control form-control-sm ${
|
||||
errors.unitOfMeasurement ? "is-invalid" : ""
|
||||
}`}
|
||||
className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""
|
||||
}`}
|
||||
/>
|
||||
{errors.unitOfMeasurement && (
|
||||
<p className="danger-text">{errors.unitOfMeasurement.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-md-12 text-start mt-3">
|
||||
<label className="py-1 form-label my-0">
|
||||
Add Check List <i
|
||||
className="bx bx-plus-circle text-primary cursor-pointer"
|
||||
data-bs-toggle="tooltip"
|
||||
title="Add Check"
|
||||
data-bs-original-title="Add check"
|
||||
onClick={addChecklistItem}
|
||||
></i>
|
||||
</label>
|
||||
{checkListItems.length > 0 ? (
|
||||
<table className="table mt-1 border-none">
|
||||
<thead className="py-0 my-0 border-none ">
|
||||
<tr className="py-1 border-secondary ">
|
||||
<div className="col-md-12 text-start mt-1">
|
||||
<p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List"}</p>
|
||||
{checkListItems.length > 0 && (
|
||||
<table className="table mt-1 border-0">
|
||||
<thead className="py-0 my-0 table-border-top-0">
|
||||
<tr className="py-1">
|
||||
<th colSpan={2} className="py-1">
|
||||
<small>Name</small>
|
||||
</th>
|
||||
@ -193,10 +160,10 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
|
||||
<th className="text-center py-1">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0 border-secondary ">
|
||||
<tbody className="table-border-bottom-0 ">
|
||||
{checkListItems.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td colSpan={2} className="border-none" >
|
||||
<tr key={index} className="border-top-0">
|
||||
<td colSpan={2} className="border-top-0 border-0">
|
||||
<input
|
||||
className="d-none"
|
||||
{...register(`checkList.${index}.id`)}
|
||||
@ -218,7 +185,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
|
||||
</small>
|
||||
)}
|
||||
</td>
|
||||
<td colSpan={2} className="text-center border-none">
|
||||
<td colSpan={2} className="text-center border-0">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
@ -226,44 +193,49 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
|
||||
defaultChecked={item.isMandatory}
|
||||
/>
|
||||
</td>
|
||||
<td className="text-center border-none">
|
||||
<td className="text-center border-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeChecklistItem(index)}
|
||||
className="btn btn-xs btn-icon btn-text-secondary"
|
||||
>
|
||||
<i
|
||||
className="bx bxs-minus-circle text-danger"
|
||||
data-bs-toggle="tooltip"
|
||||
<i className="bx bxs-minus-circle text-danger" data-bs-toggle="tooltip"
|
||||
title="Remove Check"
|
||||
data-bs-original-title="Remove check"
|
||||
></i>
|
||||
data-bs-original-title="Remove check"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
):(<div className="d-flex justify-content-center my-0"><p className="text-secondary m-0">Not Yet Added</p> </div>)}
|
||||
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-primary mt-2"
|
||||
onClick={addChecklistItem}
|
||||
>
|
||||
<i className="bx bx-plus-circle" data-bs-toggle="tooltip"
|
||||
title="Add Check"
|
||||
data-bs-original-title="Add check" ></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-end mt-3 mb-4">
|
||||
<div className="col-12 text-end mt-3">
|
||||
<button
|
||||
type="reset"
|
||||
className="btn btn-sm btn-label-secondary me-3"
|
||||
onClick={handleClose}
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-sm btn-primary">
|
||||
{isPending ? "Please Wait" : activity ? "Update" : "Submit"}
|
||||
{isLoading ? "Please Wait" : "Submit"}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManageActivity;
|
||||
export default CreateActivity;
|
||||
258
src/components/master/EditActivity.jsx
Normal file
258
src/components/master/EditActivity.jsx
Normal file
@ -0,0 +1,258 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useForm, useFieldArray } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { MasterRespository } from "../../repositories/MastersRepository";
|
||||
import showToast from "../../services/toastService";
|
||||
import { getCachedData, cacheData } from "../../slices/apiDataManager";
|
||||
import { useUpdateActivity } from "../../hooks/masterHook/useMaster";
|
||||
import Label from "../common/Label";
|
||||
|
||||
|
||||
const schema = z.object({
|
||||
activityName: z.string().min(1, { message: "Activity name is required" }),
|
||||
unitOfMeasurement: z.string().min(1, { message: "Measurement is required" }),
|
||||
checkList: z
|
||||
.array(
|
||||
z.object({
|
||||
id: z.any().default(null),
|
||||
description: z.string().min(1, { message: "Checklist item cannot be empty" }),
|
||||
isMandatory: z.boolean().default(false),
|
||||
})
|
||||
)
|
||||
.optional(),
|
||||
});
|
||||
|
||||
|
||||
const UpdateActivity = ({ activityData, onClose }) => {
|
||||
const { mutate: updateActivity, isPending: isLoading } = useUpdateActivity(() => onClose?.());
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
setValue,
|
||||
reset,
|
||||
setError,
|
||||
clearErrors,
|
||||
getValues,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
id: activityData?.id,
|
||||
activityName: activityData?.activityName,
|
||||
unitOfMeasurement: activityData?.unitOfMeasurement,
|
||||
checkList: activityData?.checkLists || [],
|
||||
},
|
||||
});
|
||||
|
||||
const { fields: checkListItems, append, remove } = useFieldArray({
|
||||
control,
|
||||
name: "checkList",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (activityData) {
|
||||
reset({
|
||||
id: activityData.id,
|
||||
activityName: activityData.activityName,
|
||||
unitOfMeasurement: activityData.unitOfMeasurement,
|
||||
checkList: activityData.checkLists || [],
|
||||
});
|
||||
}
|
||||
}, [activityData, reset]);
|
||||
|
||||
const addChecklistItem = () => {
|
||||
const values = getValues("checkList");
|
||||
const lastIndex = checkListItems.length - 1;
|
||||
|
||||
if (
|
||||
checkListItems.length > 0 &&
|
||||
(!values?.[lastIndex] || values[lastIndex].description.trim() === "")
|
||||
) {
|
||||
setError(`checkList.${lastIndex}.description`, {
|
||||
type: "manual",
|
||||
message: "Please fill this checklist item before adding another.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
clearErrors(`checkList.${lastIndex}.description`);
|
||||
append({ id: null, description: "", isMandatory: false });
|
||||
};
|
||||
|
||||
const removeChecklistItem = (index) => {
|
||||
remove(index);
|
||||
};
|
||||
|
||||
const handleChecklistChange = (index, value) => {
|
||||
setValue(`checkList.${index}`, value);
|
||||
};
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
const payload = { ...formData, id: activityData.id };
|
||||
updateActivity({ id: activityData.id, payload });
|
||||
};
|
||||
// const onSubmit = async(data) => {
|
||||
// setIsLoading(true);
|
||||
|
||||
// const Activity = {...data, id:activityData.id}
|
||||
// try
|
||||
// {
|
||||
// const response = await MasterRespository.updateActivity( activityData?.id, Activity );
|
||||
// const updatedActivity = response.data;
|
||||
// const cachedData = getCachedData("Activity")
|
||||
|
||||
// if (cachedData) {
|
||||
// const updatedActivities = cachedData.map((activity) =>
|
||||
// activity.id === updatedActivity.id ? { ...activity, ...updatedActivity } : activity
|
||||
// );
|
||||
|
||||
// cacheData( "Activity", updatedActivities );
|
||||
// onClose()
|
||||
// }
|
||||
// setIsLoading( false )
|
||||
// showToast("Activity Successfully Updated", "success");
|
||||
// } catch ( err )
|
||||
// {
|
||||
// setIsLoading( false )
|
||||
|
||||
// showToast("error.message", "error");
|
||||
// }
|
||||
// };
|
||||
|
||||
useEffect(() => {
|
||||
const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
{/* <h6>Update Activity</h6> */}
|
||||
<div className="row">
|
||||
{/* Activity Name */}
|
||||
<div className="col-md-6 text-start">
|
||||
<Label className="form-label" required>Activity Name</Label>
|
||||
<input
|
||||
type="text"
|
||||
{...register("activityName")}
|
||||
className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""}`}
|
||||
/>
|
||||
{errors.activityName && (
|
||||
<div className="text-danger">{errors.activityName.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Unit of Measurement */}
|
||||
<div className="col-md-6 text-start">
|
||||
<Label className="form-label" required>Measurement</Label>
|
||||
<input
|
||||
type="text"
|
||||
{...register("unitOfMeasurement")}
|
||||
className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""}`}
|
||||
/>
|
||||
{errors.unitOfMeasurement && (
|
||||
<div className="text-danger">{errors.unitOfMeasurement.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Checklist */}
|
||||
<div className="col-md-12 text-start mt-1">
|
||||
<p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List"}</p>
|
||||
{checkListItems.length > 0 && (
|
||||
<table className="table mt-1 border-0">
|
||||
<thead className="py-0 my-0 table-border-top-0">
|
||||
<tr className="py-1">
|
||||
<th colSpan={2} className="py-1">
|
||||
<small>Name</small>
|
||||
</th>
|
||||
<th colSpan={2} className="py-1 text-center">
|
||||
<small>Is Mandatory</small>
|
||||
</th>
|
||||
<th className="text-center py-1">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{checkListItems.map((item, index) => (
|
||||
<tr key={item.id} className="border-top-0">
|
||||
<td colSpan={2} className=" border-0">
|
||||
<input
|
||||
className="d-none"
|
||||
{...register(`checkList.${index}.id`)}
|
||||
></input>
|
||||
<input
|
||||
{...register(`checkList.${index}.description`)}
|
||||
className="form-control form-control-sm"
|
||||
placeholder={`Checklist item ${index + 1}`}
|
||||
onChange={(e) =>
|
||||
handleChecklistChange(index, e.target.value)
|
||||
}
|
||||
/>
|
||||
{errors.checkList?.[index]?.description && (
|
||||
<small
|
||||
style={{ fontSize: "10px" }}
|
||||
className="danger-text"
|
||||
>
|
||||
{errors.checkList[index]?.description?.message}
|
||||
</small>
|
||||
)}
|
||||
</td>
|
||||
<td colSpan={2} className="text-center border-0">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
{...register(`checkList.${index}.isMandatory`)}
|
||||
defaultChecked={item.isMandatory}
|
||||
/>
|
||||
</td>
|
||||
<td className="text-center border-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeChecklistItem(index)}
|
||||
className="btn btn-xs btn-icon btn-text-secondary"
|
||||
|
||||
>
|
||||
<i className="bx bxs-minus-circle text-danger" data-bs-toggle="tooltip"
|
||||
title="Add Check"
|
||||
data-bs-original-title="Add check" ></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-primary mt-2"
|
||||
onClick={addChecklistItem}
|
||||
>
|
||||
<i className="bx bx-plus-circle" data-bs-toggle="tooltip"
|
||||
title="Add Check"
|
||||
data-bs-original-title="Add check" ></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Submit / Cancel */}
|
||||
<div className="col-12 text-end mt-3">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary me-3"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-sm btn-primary">
|
||||
{isLoading ? "Please Wait" : "Submit"}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateActivity;
|
||||
@ -41,6 +41,7 @@ const EditContactTag = ({ data, onClose }) => {
|
||||
name: formData.name,
|
||||
description: formData.description,
|
||||
};
|
||||
debugger
|
||||
updateContactTag({ id: data?.id, payload });
|
||||
}
|
||||
// const onSubmit = (formdata) => {
|
||||
|
||||
@ -8,7 +8,6 @@ import {
|
||||
useCreateDocumentCatgory,
|
||||
useUpdateDocumentCategory,
|
||||
} from "../../hooks/masterHook/useMaster";
|
||||
import Label from "../common/Label";
|
||||
|
||||
export const Document_Entity = Object.entries(DOCUMENTS_ENTITIES).map(
|
||||
([key, value]) => ({ key, value })
|
||||
@ -75,9 +74,9 @@ const ManageDocumentCategory = ({ data, onClose }) => {
|
||||
) : (
|
||||
<div>
|
||||
<div>
|
||||
{/* <p className="fw-semibold">
|
||||
<p className="fw-semibold">
|
||||
{data ? "Update Document Category" : "Add Document Category"}
|
||||
</p> */}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form
|
||||
@ -85,7 +84,7 @@ const ManageDocumentCategory = ({ data, onClose }) => {
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<div className="col-12">
|
||||
<Label required >Category Name</Label>
|
||||
<label className="form-label">Category Name</label>
|
||||
<input
|
||||
type="text"
|
||||
{...register("name")}
|
||||
@ -97,7 +96,7 @@ const ManageDocumentCategory = ({ data, onClose }) => {
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<Label required >Select Entity</Label>
|
||||
<label className="form-label">Select Entity</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("entityTypeId")}
|
||||
@ -115,7 +114,7 @@ const ManageDocumentCategory = ({ data, onClose }) => {
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<Label required >Description</Label>
|
||||
<label className="form-label">Description</label>
|
||||
<textarea
|
||||
rows="3"
|
||||
{...register("description")}
|
||||
@ -126,15 +125,7 @@ const ManageDocumentCategory = ({ data, onClose }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="d-flex flex-row justify-content-end gap-3 ">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary"
|
||||
onClick={onClose}
|
||||
disabled={isPending || Updating}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<div className="col-12 text-center">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary me-3"
|
||||
@ -146,7 +137,14 @@ const ManageDocumentCategory = ({ data, onClose }) => {
|
||||
? "Update"
|
||||
: "Submit"}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-secondary"
|
||||
onClick={onClose}
|
||||
disabled={isPending || Updating}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,6 @@ import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useCreateDocumentType, useDocumentCategories, useUpdateDocumentType } from "../../hooks/masterHook/useMaster";
|
||||
import { DOCUMENTS_ENTITIES } from "../../utils/constants";
|
||||
import Label from "../common/Label";
|
||||
|
||||
|
||||
export const Document_Entity = Object.entries(DOCUMENTS_ENTITIES).map(
|
||||
@ -85,14 +84,14 @@ const onSubmit = (payload) => {
|
||||
<FormProvider {...methods}>
|
||||
<form className="row g-2 text-start" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="text-center">
|
||||
{/* <p className="fw-semibold">
|
||||
<p className="fw-semibold">
|
||||
{data ? "Edit Document Type" : "Add Document Type"}
|
||||
</p> */}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div className="col-12">
|
||||
<Label required>Name</Label>
|
||||
<label className="form-label">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
{...register("name")}
|
||||
@ -113,7 +112,7 @@ const onSubmit = (payload) => {
|
||||
|
||||
{/* Allowed Content Type */}
|
||||
<div className="col-12">
|
||||
<Label required>Allowed Content Type</Label>
|
||||
<label className="form-label">Allowed Content Type</label>
|
||||
<input
|
||||
type="text"
|
||||
{...register("allowedContentType")}
|
||||
@ -175,7 +174,7 @@ const onSubmit = (payload) => {
|
||||
</div>
|
||||
{/* Category */}
|
||||
<div className="col-12">
|
||||
<Label required> Document Category</Label>
|
||||
<label className="form-label">Document Category</label>
|
||||
<select
|
||||
{...register("documentCategoryId")}
|
||||
className={`form-select form-select-sm`}
|
||||
@ -195,15 +194,7 @@ const onSubmit = (payload) => {
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="d-flex flex-row justify-content-end gap-3 ">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary"
|
||||
onClick={onClose}
|
||||
disabled={creating || updating}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<div className="col-12 text-center">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary me-3"
|
||||
@ -215,7 +206,14 @@ const onSubmit = (payload) => {
|
||||
? "Update"
|
||||
: "Submit"}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-secondary"
|
||||
onClick={onClose}
|
||||
disabled={creating || updating}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
|
||||
@ -3,6 +3,8 @@ import CreateRole from "./CreateRole";
|
||||
import EditRole from "./EditRole";
|
||||
import CreateJobRole from "./CreateJobRole";
|
||||
import EditJobRole from "./EditJobRole";
|
||||
import CreateActivity from "./CreateActivity";
|
||||
import EditActivity from "./EditActivity";
|
||||
import CreateWorkCategory from "./CreateWorkCategory";
|
||||
import EditWorkCategory from "./EditWorkCategory";
|
||||
import CreateCategory from "./CreateContactCategory";
|
||||
@ -33,7 +35,9 @@ const MasterModal = ({ modaldata, closeModal }) => {
|
||||
<EditRole master={modaldata} onClose={closeModal} />
|
||||
),
|
||||
"Job Role": <CreateJobRole onClose={closeModal} />,
|
||||
"Edit-Job Role": <EditJobRole data={item} onClose={closeModal} />,
|
||||
"Edit-Job Role": <EditJobRole data={item} onClose={closeModal} />,
|
||||
"Activity": <CreateActivity onClose={closeModal} />,
|
||||
"Edit-Activity": <EditActivity activityData={item} onClose={closeModal} />,
|
||||
"Work Category": <CreateWorkCategory onClose={closeModal} />,
|
||||
"Edit-Work Category": <EditWorkCategory data={item} onClose={closeModal} />,
|
||||
"Contact Category": <CreateCategory data={item} onClose={closeModal} />,
|
||||
@ -69,14 +73,7 @@ const MasterModal = ({ modaldata, closeModal }) => {
|
||||
),
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-2 p-md-1">
|
||||
<div className="text-center">
|
||||
<p className="fs-5 fw-semibold" >{`${masterType, " ", modalType}`}</p>
|
||||
</div>
|
||||
{ modalComponents[modalType] || null}
|
||||
</div>
|
||||
);
|
||||
return modalComponents[modalType] || null;
|
||||
};
|
||||
|
||||
export default MasterModal;
|
||||
|
||||
@ -1,110 +1,71 @@
|
||||
import { useForm } from "react-hook-form";
|
||||
import {
|
||||
useCreateActivityGroup,
|
||||
useUpdateActivityGroup,
|
||||
} from "../../../hooks/masterHook/useMaster";
|
||||
import { useCreateActivityGroup } from "../../../hooks/masterHook/useMaster";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { ActivityGroupSchema } from "./ServicesSchema";
|
||||
import Label from "../../common/Label";
|
||||
import { useEffect } from "react";
|
||||
|
||||
const ManageGroup = ({ group = null, whichService = null, close }) => {
|
||||
const ManageGroup = ({ group = null, close }) => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(ActivityGroupSchema),
|
||||
defaultValues: { name: "", description: "" },
|
||||
});
|
||||
const { mutate: createGroup, isPending: isCreating } = useCreateActivityGroup(
|
||||
() => close()
|
||||
);
|
||||
const { mutate: UpdateGroup, isPending: isUpdating } = useUpdateActivityGroup(
|
||||
() => close()
|
||||
);
|
||||
const { mutate: createGroup, isPending } = useCreateActivityGroup();
|
||||
|
||||
useEffect(() => {
|
||||
if (group) {
|
||||
reset({
|
||||
name: group.name || " ",
|
||||
description: group.description || "",
|
||||
});
|
||||
}
|
||||
}, [group, reset]);
|
||||
const onSubmit = (formdata) => {
|
||||
if (group) {
|
||||
let payload = {
|
||||
...formdata,
|
||||
serviceId: whichService,
|
||||
id: group.id,
|
||||
};
|
||||
UpdateGroup({ id: group.id, payload: payload });
|
||||
} else {
|
||||
let payload = {
|
||||
...formdata,
|
||||
serviceId: whichService,
|
||||
};
|
||||
|
||||
createGroup(payload);
|
||||
}
|
||||
const onSubmit = (payload) => {
|
||||
console.log(payload);
|
||||
// createGroup
|
||||
};
|
||||
|
||||
let isPending = isCreating || isUpdating;
|
||||
return (
|
||||
<form className="row px-12" onSubmit={handleSubmit(onSubmit)} >
|
||||
<div className="border border-1 border-secondary rounded-3 p-2 mt-2">
|
||||
<div className="col-12 col-md-12 text-start">
|
||||
<Label className="form-label" required>
|
||||
Group Name
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
{...register("name")}
|
||||
className={`form-control form-control-sm ${errors.name ? "is-invalids" : ""
|
||||
}`}
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="danger-text m-0">{errors.name.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-12 text-start mb-2">
|
||||
<Label className="form-label" htmlFor="description" required>
|
||||
Description
|
||||
</Label>
|
||||
<textarea
|
||||
rows="3"
|
||||
{...register("description")}
|
||||
className={`form-control form-control-sm ${errors.description ? "is-invalids" : ""
|
||||
}`}
|
||||
></textarea>
|
||||
<form className="row px-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12 col-md-12 text-start">
|
||||
<Label className="form-label" required>
|
||||
Group Name
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
{...register("name")}
|
||||
className={`form-control form-control-sm ${errors.name ? "is-invalids" : ""}`}
|
||||
/>
|
||||
{errors.name && <p className="danger-text m-0">{errors.name.message}</p>}
|
||||
</div>
|
||||
<div className="col-12 col-md-12 text-start mb-2">
|
||||
<Label className="form-label" htmlFor="description" required>
|
||||
Description
|
||||
</Label>
|
||||
<textarea
|
||||
rows="3"
|
||||
{...register("description")}
|
||||
className={`form-control form-control-sm ${errors.description ? "is-invalids" : ""}`}
|
||||
></textarea>
|
||||
|
||||
{errors.description && (
|
||||
<p className="danger-text m-0">{errors.description.message}</p>
|
||||
)}
|
||||
</div>
|
||||
{errors.description && (
|
||||
<p className="danger-text m-0">{errors.description.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-end mt-5">
|
||||
<button
|
||||
className="btn btn-sm btn-label-secondary me-3"
|
||||
aria-label="Close"
|
||||
disabled={isPending}
|
||||
onClick={close}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? "Please Wait..." : group ? "Update" : "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-12 text-end">
|
||||
<button
|
||||
className="btn btn-sm btn-label-secondary me-3"
|
||||
aria-label="Close"
|
||||
disabled={isPending}
|
||||
onClick={close}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? "Please Wait..." : group ? "Update" : "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManageGroup;
|
||||
export default ManageGroup;
|
||||
@ -4,56 +4,40 @@ import {
|
||||
useGroups,
|
||||
} from "../../../hooks/masterHook/useMaster";
|
||||
import ManageGroup from "./ManageGroup";
|
||||
import ManageActivity from "./ManageActivity";
|
||||
import { useMasterContext } from "../../../pages/master/MasterPage";
|
||||
|
||||
const ServiceGroups = ({ service }) => {
|
||||
const [openService, setOpenService] = useState(true);
|
||||
const [activeGroupId, setActiveGroupId] = useState(null); // track selected group
|
||||
const {setDeleletingServiceItem} =useMasterContext()
|
||||
const [isManageGroup, setManageGroup] = useState({
|
||||
isOpen: false,
|
||||
group: null,
|
||||
serviceId: null,
|
||||
});
|
||||
const [isManageActivity, setManageActivity] = useState({
|
||||
isOpen: false,
|
||||
activity: null, // activity is either a single activity for editing or null for creating new activity
|
||||
groupId: null, // groupId for managing activities in specific groups
|
||||
});
|
||||
const [isManageGroup,setManageGroup] = useState({isOpen:false,group:true})
|
||||
|
||||
// Fetch groups and activities data
|
||||
const { data: groups, isLoading } = useGroups(service?.id); // Fetch groups for the service
|
||||
const { data: groups, isLoading } = useGroups(service?.id);
|
||||
const { data: activities, isLoading: actLoading } =
|
||||
useActivitiesByGroups(activeGroupId); // Fetch activities based on activeGroupId
|
||||
useActivitiesByGroups(activeGroupId);
|
||||
|
||||
if (isLoading) return <div>Loading groups...</div>; // Show loading state while groups are being fetched
|
||||
|
||||
// Handle toggling of group to view activities
|
||||
const toggleGroup = (groupId) => {
|
||||
setActiveGroupId((prev) => (prev === groupId ? null : groupId)); // If the same group is clicked again, close it
|
||||
};
|
||||
if (isLoading) return <div>Loading groups...</div>;
|
||||
|
||||
return (
|
||||
|
||||
<div className="w-100 my-2">
|
||||
|
||||
<p className="fs-5 fw-semibold">Manage Service</p>
|
||||
<div className="accordion" id="accordionExample">
|
||||
<div className="accordion-item active shadow-none">
|
||||
{/* Service Header */}
|
||||
<div className="d-flex justify-content-between text-start align-items-center accordion-header py-1">
|
||||
<p className="m-0 fw-bold fs-6">{service.name}</p>
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() =>
|
||||
setManageGroup({
|
||||
isOpen: true,
|
||||
group: null, // No group selected, for creating a new group
|
||||
serviceId: service.id,
|
||||
})
|
||||
}
|
||||
<div className="d-flex justify-content-between text-start accordion-header ga">
|
||||
<p className="m-0 fw-bold fs-6 ">{service.name}</p>
|
||||
<span
|
||||
onClick={() => setOpenService(!openService)}
|
||||
className="text-end cursor-pointer"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#accordionOne"
|
||||
aria-expanded={openService}
|
||||
aria-controls="accordionOne"
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>Add Group
|
||||
</button>
|
||||
<i
|
||||
className={`bx ${
|
||||
openService ? "bx-chevron-up" : "bx-chevron-down"
|
||||
}`}
|
||||
></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Groups Section */}
|
||||
@ -65,193 +49,80 @@ const ServiceGroups = ({ service }) => {
|
||||
aria-labelledby="headingOne"
|
||||
data-bs-parent="#accordionExample"
|
||||
>
|
||||
{/* Show ManageGroup for creating a new group */}
|
||||
{isManageGroup.isOpen && isManageGroup.group === null ? (
|
||||
<ManageGroup
|
||||
group={null} // Indicating new group creation
|
||||
whichService={isManageGroup.serviceId}
|
||||
close={() =>
|
||||
setManageGroup({
|
||||
isOpen: false,
|
||||
group: null,
|
||||
serviceId: service.id,
|
||||
})
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="accordion-body text-start m-0 p-0">
|
||||
<div className="dropdown-divider border"></div>
|
||||
{!isLoading && groups?.data?.length === 0 && (<div className="text-center py-2"><p>No Group available.</p></div>)}
|
||||
{groups && groups?.data?.map((group) => {
|
||||
const isOpen = activeGroupId === group.id;
|
||||
<div className="accordion-body text-start m-0 p-0">
|
||||
<div className="dropdown-divider border"></div>
|
||||
{groups?.data?.map((group) => {
|
||||
const isOpen = activeGroupId === group.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="accordion-item shadow-none m-0 py-2 px-2"
|
||||
key={group.id}
|
||||
>
|
||||
<div className="d-flex justify-content-between text-start accordion-header">
|
||||
{/* Show group toggle button only if ManageGroup is not open */}
|
||||
<div className="d-flex gap-1 align-items-center">
|
||||
{!isManageGroup.isOpen && (
|
||||
<span
|
||||
onClick={() => toggleGroup(group.id)}
|
||||
className="text-end cursor-pointer"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target={`#accordionGroup${group.id}`}
|
||||
aria-expanded={isOpen}
|
||||
aria-controls={`accordionGroup${group.id}`}
|
||||
>
|
||||
<i
|
||||
className={`bx bx-lg ${
|
||||
isOpen ? "bx-chevron-up" : "bx-chevron-down"
|
||||
}`}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
<p className="m-0 fw-bold ">{group.name}</p>
|
||||
</div>
|
||||
return (
|
||||
<div
|
||||
className="accordion-item shadow-none m-0 py-2 px-2"
|
||||
key={group.id}
|
||||
>
|
||||
<div className="d-flex justify-content-between text-start accordion-header">
|
||||
<p className="m-0 fw-bold ">{group.name}</p>
|
||||
<div className="d-flex flex-row gap-3">
|
||||
<div className="d-flex flex-row gap-2">
|
||||
{/* Create New Activity */}
|
||||
<i
|
||||
className="bx bx-plus-circle text-primary cursor-pointer"
|
||||
onClick={() => {
|
||||
setManageActivity({
|
||||
isOpen: true,
|
||||
activity: null, // Indicating new activity creation
|
||||
groupId: group.id, // Set the groupId for the new activity
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Edit Group */}
|
||||
<i
|
||||
className="bx bx-edit text-secondary cursor-pointer"
|
||||
onClick={() =>
|
||||
setManageGroup({
|
||||
isOpen: true,
|
||||
group: group, // Group selected for Editing
|
||||
serviceId: service.id,
|
||||
})
|
||||
}
|
||||
/>
|
||||
{/* Delete Group */}
|
||||
<i className="bx bx-trash text-danger cursor-pointer" onClick={()=>setDeleletingServiceItem({isOpen:true,ItemId:group.id,whichItem:"group"})} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Only show ManageGroup for the specific group if it's open */}
|
||||
{isManageGroup.isOpen &&
|
||||
isManageGroup.group?.id === group.id ? (
|
||||
<ManageGroup
|
||||
group={group} // For editing
|
||||
whichService={isManageGroup.serviceId}
|
||||
close={() =>
|
||||
setManageGroup({
|
||||
isOpen: false,
|
||||
group: null,
|
||||
serviceId: null,
|
||||
})
|
||||
}
|
||||
/>
|
||||
) : isManageActivity.isOpen &&
|
||||
isManageActivity.groupId === group.id ? (
|
||||
<ManageActivity
|
||||
activity={isManageActivity.activity} // Pass the activity object for editing
|
||||
whichGroup={group.id} // Set groupId for creating/editing activity
|
||||
close={() => {
|
||||
setManageActivity({
|
||||
isOpen: false,
|
||||
activity: null,
|
||||
groupId: null,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
id={`accordionGroup${group.id}`}
|
||||
className={`accordion-collapse collapse ${
|
||||
isOpen ? "show" : ""
|
||||
}`}
|
||||
aria-labelledby={group.id}
|
||||
data-bs-parent="#accordionOne"
|
||||
>
|
||||
<div className="accordion-body ">
|
||||
{isOpen && actLoading && (
|
||||
<p className="text-center m-0">
|
||||
Loading activities...
|
||||
</p>
|
||||
)}
|
||||
|
||||
{isOpen && activities?.data?.length > 0 ? (
|
||||
<div className="row border-top-2">
|
||||
{/* Header Row */}
|
||||
<div className="col-12 d-flex justify-content-between py-2 border-bottom px-4">
|
||||
<span className="fw-semibold text-uppercase">
|
||||
Activity Name
|
||||
</span>
|
||||
<span className="fw-semibold text-uppercase">
|
||||
Unit of Measurement
|
||||
</span>
|
||||
<span className="fw-semibold text-uppercase">
|
||||
Action
|
||||
</span>
|
||||
|
||||
<div className="d-flex flex-row gap-2">
|
||||
<i className="bx bx-plus-circle text-primary cursor-pointer" onClick={()=>setManageGroup({isOpen:true,group:null})}></i>
|
||||
<i className="bx bx-edit text-secondary cursor-pointer"></i>
|
||||
<i className="bx bx-trash text-danger cursor-pointer"></i>
|
||||
</div>
|
||||
|
||||
{/* Map through activities */}
|
||||
{activities.data.map((activity) => (
|
||||
<div
|
||||
className="col-12 d-flex justify-content-between py-2 "
|
||||
key={activity.id}
|
||||
>
|
||||
{/* Activity Name Column */}
|
||||
<div className="col d-flex justify-content-start">
|
||||
<span>{activity.activityName}</span>
|
||||
</div>
|
||||
|
||||
{/* Unit of Measurement Column */}
|
||||
<div className="col d-flex justify-content-start">
|
||||
<span>{activity.unitOfMeasurement}</span>
|
||||
</div>
|
||||
|
||||
{/* Action Column */}
|
||||
<div className="col-auto d-flex gap-3 justify-content-end">
|
||||
{/* Edit Activity */}
|
||||
<i
|
||||
className="bx bx-sm bx-edit text-secondary cursor-pointer"
|
||||
onClick={() => {
|
||||
setManageActivity({
|
||||
isOpen: true,
|
||||
activity: activity, // Pass the specific activity for editing
|
||||
groupId: group.id, // Set groupId for the specific activity
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Delete Activity */}
|
||||
<i
|
||||
className="bx bx-sm bx-trash text-danger cursor-pointer"
|
||||
onClick={() => setDeleletingServiceItem({isOpen:true,ItemId:activity.id,whichItem:"activity"})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
isOpen && (
|
||||
<p className="text-center m-0">
|
||||
No activities found
|
||||
</p>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<span
|
||||
onClick={
|
||||
() => setActiveGroupId(isOpen ? null : group.id)
|
||||
}
|
||||
className="text-end cursor-pointer"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target={`#accordionGroup${group.id}`}
|
||||
aria-expanded={isOpen}
|
||||
aria-controls={`accordionGroup${group.id}`}
|
||||
>
|
||||
<i
|
||||
className={`bx bx-lg ${
|
||||
isOpen ? "bx-chevron-up" : "bx-chevron-down"
|
||||
}`}
|
||||
></i>
|
||||
</span></div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{isManageGroup.isOpen ? <ManageGroup group={ManageGroup.group} close={()=>setManageGroup({isOpen:false,group:null})}/> : (
|
||||
<div
|
||||
id={`accordionGroup${group.id}`}
|
||||
className={`accordion-collapse collapse ${
|
||||
isOpen ? "show" : ""
|
||||
}`}
|
||||
aria-labelledby={group.id}
|
||||
data-bs-parent="#accordionOne"
|
||||
>
|
||||
<div className="accordion-body">
|
||||
{isOpen && actLoading && <p>Loading activities...</p>}
|
||||
{isOpen && activities?.data?.length > 0 ? (
|
||||
<ul class="list-group list-group-flush">
|
||||
{activities.data.map((activity) => (
|
||||
<div className="d-flex justify-content-between py-2">
|
||||
<li className="list-group-item border-0">
|
||||
{activity.name}
|
||||
</li>{" "}
|
||||
<div className="d-flex flex-row gap-2">
|
||||
<i class="bx bx-sm bx-plus-circle text-primary cursor-pointer"></i>
|
||||
<i class="bx bx-sm bx-edit text-secondary cursor-pointer"></i>
|
||||
<i class="bx bx-sm bx-trash text-danger cursor-pointer"></i>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
isOpen && <p>No activities found</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) }
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -18,20 +18,16 @@ export const useServices = () => {
|
||||
};
|
||||
|
||||
export const useGroups = (serviceId) => {
|
||||
return useQuery({
|
||||
queryKey: ["groups", serviceId],
|
||||
return useQuery({
|
||||
queryFn: ["groups", serviceId],
|
||||
queryFn: async () => await MasterRespository.getActivityGrops(serviceId),
|
||||
enabled: !!serviceId,
|
||||
});
|
||||
})
|
||||
};
|
||||
export const useActivitiesByGroups = (groupId) => {
|
||||
return useQuery({
|
||||
queryKey: ["activties", groupId],
|
||||
queryFn: async () => await MasterRespository.getActivitesByGroup(groupId),
|
||||
|
||||
enabled: !!groupId,
|
||||
|
||||
});
|
||||
return useQuery({
|
||||
queryFn: ["activties", groupId],
|
||||
queryFn: async () => await MasterRespository.getActivityGrops(groupId),
|
||||
})
|
||||
};
|
||||
export const useGlobalServices = () => {
|
||||
return useQuery({
|
||||
@ -50,6 +46,8 @@ export const useMasterMenu = () => {
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
export const useActivitiesMaster = () => {
|
||||
const {
|
||||
data: activities = [],
|
||||
@ -448,7 +446,47 @@ export const useUpdateApplicationRole = (onSuccessCallback) => {
|
||||
});
|
||||
};
|
||||
|
||||
// Activity------------------------------
|
||||
export const useCreateActivity = (onSuccessCallback) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (payload) => {
|
||||
const resp = await MasterRespository.createActivity(payload);
|
||||
return resp.data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["masterData", "Activity"] });
|
||||
showToast("Activity added successfully", "success");
|
||||
if (onSuccessCallback) onSuccessCallback(data);
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(error.message || "Something went wrong", "error");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateActivity = (onSuccessCallback) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ id, payload }) => {
|
||||
const response = await MasterRespository.updateActivity(id, payload);
|
||||
return response.data;
|
||||
},
|
||||
onSuccess: (data, variables) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["masterData", "Activity"],
|
||||
});
|
||||
showToast("Activity updated successfully.", "success");
|
||||
|
||||
if (onSuccessCallback) onSuccessCallback(data);
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(error.message || "Something went wrong", "error");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
//-----Create work Category-------------------------------
|
||||
export const useCreateWorkCategory = (onSuccessCallback) => {
|
||||
@ -570,6 +608,7 @@ export const useUpdateContactTag = (onSuccessCallback) => {
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ id, payload }) => {
|
||||
debugger;
|
||||
const response = await MasterRespository.updateContactTag(id, payload);
|
||||
return response.data;
|
||||
},
|
||||
@ -703,13 +742,13 @@ export const useCreateService = (onSuccessCallback) => {
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (payload) => {
|
||||
|
||||
debugger;
|
||||
const resp = await MasterRespository.createService(payload);
|
||||
|
||||
debugger;
|
||||
return resp.data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
|
||||
debugger;
|
||||
queryClient.invalidateQueries({ queryKey: ["masterData", "Services"] });
|
||||
|
||||
showToast(data?.message || "Service added successfully", "success");
|
||||
@ -717,8 +756,8 @@ export const useCreateService = (onSuccessCallback) => {
|
||||
if (onSuccessCallback) onSuccessCallback(data?.data);
|
||||
},
|
||||
onError: (error) => {
|
||||
|
||||
showToast( error?.response?.data?.message || error?.message || "Something went wrong", "error");
|
||||
debugger;
|
||||
showToast(error.message || "Something went wrong", "error");
|
||||
},
|
||||
});
|
||||
};
|
||||
@ -741,54 +780,25 @@ export const useUpdateService = (onSuccessCallback) => {
|
||||
if (onSuccessCallback) onSuccessCallback(data);
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(error?.response?.data?.message || error?.message || "Something went wrong", "error");
|
||||
showToast(error?.message || "Something went wrong", "error");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useCreateActivityGroup = (onSuccessCallback) => {
|
||||
const queryClient = useQueryClient();
|
||||
export const useCreateActivityGroup =()=>{
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (payload) => {
|
||||
const response = await MasterRespository.createActivityGroup(payload);
|
||||
const response = await MasterRespository.createActivityGroup(payload)
|
||||
return response;
|
||||
},
|
||||
onSuccess: (data, variables) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["groups"],
|
||||
queryKey: ["masterData", "Services"],
|
||||
});
|
||||
|
||||
showToast( data?.message ||
|
||||
data?.response?.data?.message || "Activity Group created successfully.",
|
||||
"success"
|
||||
);
|
||||
|
||||
if (onSuccessCallback) onSuccessCallback(data);
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(error?.response?.data?.message || error?.message || "Something went wrong", "error");
|
||||
},
|
||||
});
|
||||
};
|
||||
export const useUpdateActivityGroup = (onSuccessCallback) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({id,payload}) => {
|
||||
const response = await MasterRespository.updateActivityGrop(id,payload);
|
||||
return response;
|
||||
},
|
||||
onSuccess: (data, variables) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["groups"],
|
||||
});
|
||||
|
||||
showToast(
|
||||
data?.message ||
|
||||
data?.response?.data?.message|| "Activity Group Updated successfully.",
|
||||
"success"
|
||||
);
|
||||
showToast(data.message || "Activity Group created successfully.", "success");
|
||||
|
||||
if (onSuccessCallback) onSuccessCallback(data);
|
||||
},
|
||||
@ -796,48 +806,7 @@ export const useUpdateActivityGroup = (onSuccessCallback) => {
|
||||
showToast(error?.message || "Something went wrong", "error");
|
||||
},
|
||||
});
|
||||
};
|
||||
// Activity------------------------------
|
||||
export const useCreateActivity = (onSuccessCallback) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (payload) => {
|
||||
const resp = await MasterRespository.createActivity(payload);
|
||||
return resp.data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["activties"] });
|
||||
showToast("Activity added successfully", "success");
|
||||
if (onSuccessCallback) onSuccessCallback(data);
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(error?.response?.data?.message || error?.message || "Something went wrong", "error");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateActivity = (onSuccessCallback) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ id, payload }) => {
|
||||
const response = await MasterRespository.updateActivity(id, payload);
|
||||
return response.data;
|
||||
},
|
||||
onSuccess: (data, variables) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["activties"],
|
||||
});
|
||||
showToast("Activity updated successfully.", "success");
|
||||
|
||||
if (onSuccessCallback) onSuccessCallback(data);
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(error?.response?.data?.message || error?.message || "Something went wrong", "error");
|
||||
},
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// -------------------Expense Status----------------------------------
|
||||
export const useCreateExpenseStatus = (onSuccessCallback) => {
|
||||
@ -1000,48 +969,3 @@ export const useDeleteMasterItem = () => {
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
export const useDeleteServiceGroup =()=>{
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (id)=>await MasterRespository.deleteActivityGroup(id),
|
||||
onSuccess: ({_,variable}) => {
|
||||
|
||||
queryClient.invalidateQueries({ queryKey: ["groups"] });
|
||||
|
||||
showToast(`Group deleted successfully.`, "success");
|
||||
},
|
||||
|
||||
onError: (error) => {
|
||||
const message =
|
||||
error?.response?.data?.message ||
|
||||
error?.message ||
|
||||
"Error occurred during deletion";
|
||||
showToast(message, "error");
|
||||
},
|
||||
});
|
||||
}
|
||||
export const useDeleteActivity =()=>{
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (id)=>await MasterRespository.deleteActivity(id),
|
||||
onSuccess: ({_,variable}) => {
|
||||
|
||||
|
||||
queryClient.invalidateQueries({ queryKey: ["activties"] });
|
||||
|
||||
showToast(`Acivity deleted successfully.`, "success");
|
||||
},
|
||||
|
||||
onError: (error) => {
|
||||
const message =
|
||||
error?.response?.data?.message ||
|
||||
error?.message ||
|
||||
"Error occurred during deletion";
|
||||
showToast(message, "error");
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
cacheData,
|
||||
getCachedData,
|
||||
useSelectedProject,
|
||||
} from "../slices/apiDataManager";
|
||||
import { cacheData, getCachedData, useSelectedProject } from "../slices/apiDataManager";
|
||||
import AttendanceRepository from "../repositories/AttendanceRepository";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import showToast from "../services/toastService";
|
||||
@ -11,8 +7,11 @@ import { useDispatch, useSelector } from "react-redux";
|
||||
import { store } from "../store/store";
|
||||
import { setDefaultDateRange } from "../slices/localVariablesSlice";
|
||||
|
||||
|
||||
|
||||
// ----------------------------Query-----------------------------
|
||||
|
||||
|
||||
// export const useAttendance = (projectId) => {
|
||||
// const dispatch = useDispatch()
|
||||
// const {
|
||||
@ -42,10 +41,7 @@ import { setDefaultDateRange } from "../slices/localVariablesSlice";
|
||||
// };
|
||||
// };
|
||||
|
||||
export const useAttendance = (
|
||||
projectId,
|
||||
organizationId,
|
||||
) => {
|
||||
export const useAttendance = (projectId, organizationId, includeInactive = false, date = null) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const {
|
||||
@ -55,11 +51,13 @@ export const useAttendance = (
|
||||
refetch: recall,
|
||||
isFetching,
|
||||
} = useQuery({
|
||||
queryKey: ["attendance", projectId, organizationId], // include filters in cache key
|
||||
queryKey: ["attendance", projectId, organizationId, includeInactive, date], // include filters in cache key
|
||||
queryFn: async () => {
|
||||
const response = await AttendanceRepository.getAttendance(
|
||||
projectId,
|
||||
organizationId,
|
||||
includeInactive,
|
||||
date
|
||||
);
|
||||
return response.data;
|
||||
},
|
||||
@ -72,17 +70,12 @@ export const useAttendance = (
|
||||
return { attendance, loading, error, recall, isFetching };
|
||||
};
|
||||
|
||||
export const useAttendancesLogs = (
|
||||
projectId,
|
||||
fromDate,
|
||||
toDate,
|
||||
organizationId
|
||||
) => {
|
||||
export const useAttendancesLogs = (projectId, fromDate, toDate,organizationId) => {
|
||||
const dispatch = useDispatch();
|
||||
const enabled = !!projectId && !!fromDate && !!toDate;
|
||||
|
||||
const query = useQuery({
|
||||
queryKey: ["attendanceLogs", projectId, fromDate, toDate, organizationId],
|
||||
queryKey: ['attendanceLogs', projectId, fromDate, toDate,organizationId],
|
||||
queryFn: async () => {
|
||||
const res = await AttendanceRepository.getAttendanceFilteredByDate(
|
||||
projectId,
|
||||
@ -94,7 +87,7 @@ export const useAttendancesLogs = (
|
||||
},
|
||||
enabled,
|
||||
});
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (query.data && fromDate && toDate) {
|
||||
dispatch(
|
||||
@ -108,6 +101,8 @@ export const useAttendancesLogs = (
|
||||
return query;
|
||||
};
|
||||
|
||||
|
||||
|
||||
export const useEmployeeAttendacesLog = (id) => {
|
||||
const {
|
||||
data: logs = [],
|
||||
@ -122,10 +117,7 @@ export const useEmployeeAttendacesLog = (id) => {
|
||||
},
|
||||
enabled: !!id,
|
||||
onError: (error) => {
|
||||
showToast(
|
||||
error.message || "Error while fetching Attendance Logs",
|
||||
"error"
|
||||
);
|
||||
showToast(error.message || "Error while fetching Attendance Logs", "error");
|
||||
},
|
||||
});
|
||||
|
||||
@ -143,22 +135,40 @@ export const useAttendanceByEmployee = (employeeId, fromDate, toDate) => {
|
||||
return useQuery({
|
||||
queryKey: ["employeeAttendance", employeeId, fromDate, toDate],
|
||||
queryFn: async () => {
|
||||
const res = await AttendanceRepository.getAttendanceByEmployee(
|
||||
employeeId,
|
||||
fromDate,
|
||||
toDate
|
||||
);
|
||||
const res = await AttendanceRepository.getAttendanceByEmployee(employeeId, fromDate, toDate);
|
||||
return res.data;
|
||||
},
|
||||
enabled,
|
||||
enabled: !!fromDate && !! toDate,
|
||||
});
|
||||
};
|
||||
|
||||
export const useRegularizationRequests = (
|
||||
projectId,
|
||||
organizationId,
|
||||
IncludeInActive = false
|
||||
) => {
|
||||
// export const useRegularizationRequests = (projectId) => {
|
||||
// const {
|
||||
// data: regularizes = [],
|
||||
// isLoading: loading,
|
||||
// error,
|
||||
// refetch,
|
||||
// } = useQuery({
|
||||
// queryKey: ["regularizedList", projectId],
|
||||
// queryFn: async () => {
|
||||
// const response = await AttendanceRepository.getRegularizeList(projectId);
|
||||
// return response.data;
|
||||
// },
|
||||
// enabled: !!projectId,
|
||||
// onError: (error) => {
|
||||
// showToast(error.message || "Error while fetching Regularization Requests", "error");
|
||||
// },
|
||||
// });
|
||||
|
||||
// return {
|
||||
// regularizes,
|
||||
// loading,
|
||||
// error,
|
||||
// refetch,
|
||||
// };
|
||||
// };
|
||||
|
||||
export const useRegularizationRequests = (projectId, organizationId, IncludeInActive = false) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const {
|
||||
@ -173,7 +183,7 @@ export const useRegularizationRequests = (
|
||||
const response = await AttendanceRepository.getRegularizeList(
|
||||
projectId,
|
||||
organizationId,
|
||||
IncludeInActive
|
||||
IncludeInActive,
|
||||
);
|
||||
return response.data;
|
||||
},
|
||||
@ -186,60 +196,48 @@ export const useRegularizationRequests = (
|
||||
return { regularizes, loading, error, recall, isFetching };
|
||||
};
|
||||
|
||||
|
||||
// -------------------Mutation--------------------------------------
|
||||
|
||||
export const useMarkAttendance = () => {
|
||||
const queryClient = useQueryClient();
|
||||
const selectedProject = useSelectedProject();
|
||||
const selectedDateRange = useSelector(
|
||||
(store) => store.localVariables.attendance.defaultDateRange
|
||||
);
|
||||
const selectedOrganization = useSelector(
|
||||
(store) => store.localVariables.attendance.SelectedOrg
|
||||
);
|
||||
const selectedDateRange = useSelector((store)=>store.localVariables.defaultDateRange)
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ payload, forWhichTab }) => {
|
||||
mutationFn: async ({payload,forWhichTab}) => {
|
||||
const res = await AttendanceRepository.markAttendance(payload);
|
||||
return res.data;
|
||||
},
|
||||
|
||||
onSuccess: (data, variables) => {
|
||||
if (variables.forWhichTab == 1) {
|
||||
queryClient.setQueryData(["attendance", selectedProject,selectedOrganization], (oldData) => {
|
||||
if (!oldData) return oldData;
|
||||
return oldData.map((emp) =>
|
||||
emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
|
||||
);
|
||||
});
|
||||
} else if (variables.forWhichTab == 2) {
|
||||
queryClient.setQueryData(
|
||||
[
|
||||
"attendanceLogs",
|
||||
selectedProject,
|
||||
selectedDateRange.startDate,
|
||||
selectedDateRange.endDate,selectedOrganization
|
||||
],
|
||||
(oldData) => {
|
||||
if (!oldData) return oldData;
|
||||
return oldData.map((record) =>
|
||||
record.id === data.id ? { ...record, ...data } : record
|
||||
);
|
||||
}
|
||||
onSuccess: (data,variables) => {
|
||||
if(variables.forWhichTab == 1){
|
||||
queryClient.setQueryData(["attendance",selectedProject], (oldData) => {
|
||||
if (!oldData) return oldData;
|
||||
return oldData.map((emp) =>
|
||||
emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
|
||||
);
|
||||
queryClient.invalidateQueries({ queryKey: ["regularizedList"] });
|
||||
} else
|
||||
queryClient.setQueryData(
|
||||
["regularizedList", selectedProject],
|
||||
(oldData) => {
|
||||
if (!oldData) return oldData;
|
||||
return oldData.filter((record) => record.id !== data.id);
|
||||
}
|
||||
),
|
||||
queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
|
||||
});
|
||||
}else if(variables.forWhichTab == 2){
|
||||
// queryClient.invalidateQueries({
|
||||
// queryKey: ["attendanceLogs"],
|
||||
// });
|
||||
queryClient.setQueryData(["attendanceLogs",selectedProject,selectedDateRange.startDate,selectedDateRange.endDate], (oldData) => {
|
||||
if (!oldData) return oldData;
|
||||
return oldData.map((record) =>
|
||||
record.id === data.id ? { ...record, ...data } : record
|
||||
);
|
||||
});
|
||||
queryClient.invalidateQueries({queryKey:["regularizedList"]})
|
||||
}else(
|
||||
queryClient.setQueryData(["regularizedList",selectedProject], (oldData) => {
|
||||
if (!oldData) return oldData;
|
||||
return oldData.filter((record) => record.id !== data.id)
|
||||
}),
|
||||
queryClient.invalidateQueries({queryKey:["attendanceLogs"]})
|
||||
)
|
||||
|
||||
if (variables.forWhichTab !== 3)
|
||||
showToast("Attendance marked successfully", "success");
|
||||
if(variables.forWhichTab !== 3) showToast("Attendance marked successfully", "success");
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(error.message || "Failed to mark attendance", "error");
|
||||
|
||||
@ -10,30 +10,8 @@ import AuthRepository from "../repositories/AuthRepository.jsx";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import {
|
||||
closeAuthModal,
|
||||
closeModal,
|
||||
openAuthModal,
|
||||
openModal,
|
||||
toggleModal,
|
||||
} from "../slices/localVariablesSlice.jsx";
|
||||
import { removeSession } from "../utils/authUtils.js";
|
||||
import { cacheProfileData } from "../slices/apiDataManager.jsx";
|
||||
|
||||
// ----------------------------Modal--------------------------
|
||||
|
||||
export const useModal = (modalType) => {
|
||||
const dispatch = useDispatch();
|
||||
const isOpen = useSelector(
|
||||
(state) => state.localVariables.modals[modalType]?.isOpen
|
||||
);
|
||||
|
||||
const onOpen = (data = {}) => dispatch(openModal({ modalType, data }));
|
||||
const onClose = () => dispatch(closeModal({ modalType }));
|
||||
const onToggle = () => dispatch(toggleModal({ modalType }));
|
||||
|
||||
return { isOpen, onOpen, onClose, onToggle };
|
||||
};
|
||||
|
||||
// -------------------APIHook-------------------------------------
|
||||
|
||||
export const useTenants = () => {
|
||||
return useQuery({
|
||||
@ -50,24 +28,18 @@ export const useSelectTenant = (onSuccessCallBack) => {
|
||||
const res = await AuthRepository.selectTenant(tenantId);
|
||||
return res.data;
|
||||
},
|
||||
|
||||
|
||||
onSuccess: (data) => {
|
||||
if (localStorage.getItem("jwtToken")) {
|
||||
localStorage.setItem("jwtToken", data.token);
|
||||
localStorage.setItem("refreshToken", data.refreshToken);
|
||||
} else {
|
||||
sessionStorage.setItem("jwtToken", data.token);
|
||||
sessionStorage.setItem("refreshToken", data.refreshToken);
|
||||
}
|
||||
|
||||
localStorage.setItem("jwtToken", data.token);
|
||||
localStorage.setItem("refreshToken", data.refreshToken);
|
||||
if (onSuccessCallBack) onSuccessCallBack();
|
||||
},
|
||||
|
||||
onError: (error) => {
|
||||
showToast(error.message || "Error while creating project", "error");
|
||||
localStorage.removeItem("jwtToken");
|
||||
localStorage.removeItem("refreshToken");
|
||||
localStorage.removeItem("ctnt");
|
||||
localStorage.removeItem("refreshToken")
|
||||
localStorage.removeItem("ctnt")
|
||||
},
|
||||
});
|
||||
};
|
||||
@ -83,34 +55,29 @@ export const useAuthModal = () => {
|
||||
};
|
||||
};
|
||||
|
||||
export const useLogout = () => {
|
||||
export const useLogout = ()=>{
|
||||
const queryClient = useQueryClient();
|
||||
const naviget = useNavigate()
|
||||
const dispatch = useDispatch()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async () => {
|
||||
let payload = {
|
||||
refreshToken:
|
||||
localStorage.getItem("refreshToken") ||
|
||||
sessionStorage.getItem("refreshToken"),
|
||||
};
|
||||
return await AuthRepository.logout(payload);
|
||||
let payload = {refreshToken: localStorage.getItem("refreshToken")}
|
||||
return await AuthRepository.logout(payload);
|
||||
},
|
||||
|
||||
|
||||
onSuccess: (data) => {
|
||||
queryClient.clear()
|
||||
removeSession();
|
||||
dispatch(cacheProfileData(null))
|
||||
|
||||
// window.location.href = "/auth/login";
|
||||
naviget("/auth/login",{replace:true})
|
||||
localStorage.removeItem("jwtToken");
|
||||
localStorage.removeItem("refreshToken");
|
||||
localStorage.removeItem("ctnt");
|
||||
localStorage.clear();
|
||||
window.location.href = "/auth/login";
|
||||
if (onSuccessCallBack) onSuccessCallBack();
|
||||
},
|
||||
|
||||
onError: (error) => {
|
||||
showToast(error.message || "Error while creating project", "error");
|
||||
removeSession();
|
||||
localStorage.removeItem("jwtToken");
|
||||
localStorage.removeItem("refreshToken")
|
||||
localStorage.removeItem("ctnt")
|
||||
},
|
||||
});
|
||||
};
|
||||
}
|
||||
@ -399,13 +399,11 @@ export const useUpdateBucket = (onSuccessCallBack) => {
|
||||
mutationFn: async ({ bucketId, BucketPayload }) =>
|
||||
await DirectoryRepository.UpdateBuckets(bucketId, BucketPayload),
|
||||
onSuccess: (_, variables) => {
|
||||
debugger;
|
||||
queryClient.invalidateQueries({ queryKey: ["bucketList"] });
|
||||
showToast("Bucket updated successfully", "success");
|
||||
if (onSuccessCallBack) onSuccessCallBack();
|
||||
},
|
||||
onError: (error) => {
|
||||
debugger;
|
||||
showToast(
|
||||
error?.response?.data?.message ||
|
||||
"Something went wrong. Please try again later.",
|
||||
@ -548,7 +546,6 @@ export const useUpdateNote = (onSuccessCallBack) => {
|
||||
mutationFn: async ({ noteId, notePayload }) =>
|
||||
await DirectoryRepository.UpdateNote(noteId, notePayload),
|
||||
onSuccess: (_, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["Contact"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["Notes"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["ContactNotes"] });
|
||||
showToast("Note updated Successfully", "success");
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user