diff --git a/public/assets/css/core-extend.css b/public/assets/css/core-extend.css index 5b328e9b..2f9fc387 100644 --- a/public/assets/css/core-extend.css +++ b/public/assets/css/core-extend.css @@ -94,3 +94,44 @@ .h-screen{ height: 100vh; } .h-min { height: min-content; } .h-max { height: max-content; } + + +/* ------------------------Text------------------------- */ +@media (min-width: 576px) { + .fs-sm-1 { font-size: calc(1.3rem + 1.6vw) !important; } + .fs-sm-2 { font-size: calc(1.2rem + 1.2vw) !important; } + .fs-sm-3 { font-size: calc(1.1rem + 0.8vw) !important; } + .fs-sm-4 { font-size: calc(1rem + 0.5vw) !important; } + .fs-sm-5 { font-size: 1.05rem !important; } + .fs-sm-6 { font-size: 0.9rem !important; } + + .fs-sm-tiny { font-size: 72% !important; } + .fs-sm-big { font-size: 115% !important; } + .fs-sm-large { font-size: 155% !important; } + .fs-sm-xlarge { font-size: 175% !important; } + .fs-sm-xxlarge { font-size: calc(1.6rem + 3.5vw) !important; } +} + +/* 💻 Medium devices (≥768px) */ +@media (min-width: 768px) { + .fs-md-1 { font-size: calc(1.4125rem + 1.95vw) !important; } + .fs-md-2 { font-size: calc(1.3625rem + 1.35vw) !important; } + .fs-md-3 { font-size: calc(1.3rem + 0.6vw) !important; } + .fs-md-4 { font-size: calc(1.275rem + 0.3vw) !important; } + .fs-md-5 { font-size: 1.125rem !important; } + .fs-md-6 { font-size: 0.9375rem !important; } + + .fs-md-tiny { font-size: 70% !important; } + .fs-md-big { font-size: 112% !important; } + .fs-md-large { font-size: 150% !important; } + .fs-md-xlarge { font-size: 170% !important; } + .fs-md-xxlarge { font-size: calc(1.725rem + 5.7vw) !important; } +} + +/* Tables */ +.table th.actions-col, +.table td.actions-col { + width: 1%; + white-space: nowrap; + text-align: center; +} diff --git a/src/components/Activities/AttendLogs.jsx b/src/components/Activities/AttendLogs.jsx index a1fb9a28..3cbab263 100644 --- a/src/components/Activities/AttendLogs.jsx +++ b/src/components/Activities/AttendLogs.jsx @@ -124,7 +124,7 @@ const AttendLogs = ({ Id }) => { return (
-
Attendance Logs
+
Attendance Logs
{logs && !loading && (

Showing logs for{" "} @@ -160,7 +160,7 @@ const AttendLogs = ({ Id }) => { .sort((a, b) => b.id - a.id) .map((log, index) => ( - + {whichActivityPerform(log.activity, log.activityTime)} @@ -169,7 +169,7 @@ const AttendLogs = ({ Id }) => {

{convertShortTime(log.activityTime)} - + {log?.latitude != 0 ? ( { +const Attendance = ({ + getRole, + handleModalData, + searchTerm, + projectId, + organizationId, + includeInactive, + date, +}) => { const queryClient = useQueryClient(); const [loading, setLoading] = useState(false); const navigate = useNavigate(); @@ -24,12 +33,12 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat attendance, loading: attLoading, recall: attrecall, - isFetching + isFetching, } = useAttendance(selectedProject, organizationId, includeInactive, date); const filteredAttendance = ShowPending ? attendance?.filter( - (att) => att?.checkInTime !== null && att?.checkOutTime === null - ) + (att) => att?.checkInTime !== null && att?.checkOutTime === null + ) : attendance; const attendanceList = Array.isArray(filteredAttendance) @@ -71,19 +80,19 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat ); // Reset pagination when the filter or search term changes - useEffect(() => { - }, [finalFilteredData]); - + useEffect(() => {}, [finalFilteredData]); const handler = useCallback( (msg) => { if (selectedProject == msg.projectId) { queryClient.setQueryData(["attendance", selectedProject], (oldData) => { if (!oldData) { - queryClient.invalidateQueries({ queryKey: ["attendance"] }) - }; + queryClient.invalidateQueries({ queryKey: ["attendance"] }); + } return oldData.map((record) => - record.employeeId === msg.response.employeeId ? { ...record, ...msg.response } : record + record.employeeId === msg.response.employeeId + ? { ...record, ...msg.response } + : record ); }); } @@ -109,16 +118,11 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat return () => eventBus.off("employee", employeeHandler); }, [employeeHandler]); - - return ( <>
-
-
+
+
Date : {formatUTCToLocalTime(todayDate)}
{attLoading ? ( -
Loading...
+
+ +
) : currentItems?.length > 0 ? ( <> - +
- + {/* */} - + @@ -190,7 +200,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat - + {/* */} -
NameRoleRoleOrganization Check-In - Check-Out + + Check-Out ActionsActions
{item.jobRoleName}{item.jobRoleName}{item.organizationName || "--"} @@ -204,7 +214,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat : "--"} + )} @@ -253,4 +263,4 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat ); }; -export default Attendance; \ No newline at end of file +export default Attendance; diff --git a/src/components/Activities/AttendcesLogs.jsx b/src/components/Activities/AttendcesLogs.jsx index 31c1522f..5f785eaf 100644 --- a/src/components/Activities/AttendcesLogs.jsx +++ b/src/components/Activities/AttendcesLogs.jsx @@ -1,11 +1,15 @@ import React, { useEffect, useState, useMemo, useCallback } from "react"; import moment from "moment"; import Avatar from "../common/Avatar"; -import { convertShortTime } from "../../utils/dateUtils"; +import { convertShortTime, formatUTCToLocalTime } 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"; @@ -13,6 +17,7 @@ import { queryClient } from "../../layouts/AuthLayout"; import { ITEMS_PER_PAGE } from "../../utils/constants"; import Pagination from "../common/Pagination"; import { useNavigate } from "react-router-dom"; +import { SpinnerLoader } from "../common/Loader"; const usePagination = (data, itemsPerPage) => { const [currentPage, setCurrentPage] = useState(1); @@ -36,14 +41,11 @@ const usePagination = (data, itemsPerPage) => { }; 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 [showPending, setShowPending] = useState(false); const [isRefreshing, setIsRefreshing] = useState(false); const [processedData, setProcessedData] = useState([]); @@ -87,57 +89,65 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => { dateRange.endDate, organizationId ); - const filtering = useCallback((dataToFilter) => { - const filteredData = showPending - ? dataToFilter.filter((item) => item.checkOutTime === null) - : dataToFilter; + const filtering = useCallback( + (dataToFilter) => { + const filteredData = showPending + ? dataToFilter.filter((item) => item.checkOutTime === null) + : dataToFilter; - 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 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 sortedList = [ + ...group1, + ...group2, + ...group3, + ...group4, + ...group5, + ...group6, + ]; - // 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; - }, {}); + // 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; + }, {}); - const sortedDates = Object.keys(groupedByDate).sort( - (a, b) => new Date(b) - new Date(a) - ); + const sortedDates = Object.keys(groupedByDate).sort( + (a, b) => new Date(b) - new Date(a) + ); - const finalData = sortedDates.flatMap((date) => groupedByDate[date]); - setProcessedData(finalData); - }, [showPending]); - - - useEffect(() => { - if (data?.length) { - filtering(data); - } -}, [data, showPending]); + const finalData = sortedDates.flatMap((date) => groupedByDate[date]); + setProcessedData(finalData); + }, + [showPending] + ); + useEffect(() => { + if (data?.length) { + filtering(data); + } + }, [data, showPending]); // New useEffect to handle search filtering const filteredSearchData = useMemo(() => { @@ -151,8 +161,6 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => { }); }, [processedData, searchTerm]); - - const { currentPage, totalPages, @@ -210,7 +218,7 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => { // }) // ); - refetch() + refetch(); } }, [selectedProject, dateRange, data, refetch] @@ -221,40 +229,29 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => { return () => eventBus.off("employee", employeeHandler); }, [employeeHandler]); - return ( <>
-
+
-
- setShowPending(e.target.checked)} - /> - -
-
-
+
{isLoading ? ( -
-

Loading...

+
+
) : filteredSearchData?.length > 0 ? ( - +
*/} - + @@ -280,9 +278,9 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => { 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) { @@ -292,8 +290,8 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => { className="table-row-header" > @@ -310,7 +308,9 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
@@ -264,12 +261,13 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => { {/* Organization - Check-In + {" "} + Check-In Check-Out ActionAction
- - {moment(currentDate).format("DD-MM-YYYY")} + + {formatUTCToLocalTime(currentDate)}
+ {
) : ( -
No data for this date range. Please choose another.
+
+

+ No data for this date range. Please choose another. +

+
)}
{paginatedAttendances?.length == 0 && filteredSearchData?.length > 0 && ( diff --git a/src/components/Activities/Regularization.jsx b/src/components/Activities/Regularization.jsx index fbf1cddd..169c4a45 100644 --- a/src/components/Activities/Regularization.jsx +++ b/src/components/Activities/Regularization.jsx @@ -12,6 +12,7 @@ import { useQueryClient } from "@tanstack/react-query"; import Pagination from "../common/Pagination"; import { useNavigate } from "react-router-dom"; import { employee } from "../../data/masters"; +import { SpinnerLoader } from "../common/Loader"; const Regularization = ({ handleRequest, searchTerm, projectId, organizationId, IncludeInActive }) => { const queryClient = useQueryClient(); @@ -135,11 +136,14 @@ const Regularization = ({ handleRequest, searchTerm, projectId, organizationId,
{loading ? ( -
-

Loading...

+
+
) : currentItems?.length > 0 ? ( - +
@@ -154,7 +158,7 @@ const Regularization = ({ handleRequest, searchTerm, projectId, organizationId, - + diff --git a/src/components/Dashboard/Attendance.jsx b/src/components/Dashboard/Attendance.jsx index 57c34a3a..db1dcee0 100644 --- a/src/components/Dashboard/Attendance.jsx +++ b/src/components/Dashboard/Attendance.jsx @@ -6,10 +6,9 @@ import { useSelectedProject } from "../../hooks/useSelectedProject"; const Attendance = () => { const { projects } = useProjects(); - const today = new Date().toISOString().split("T")[0]; // YYYY-MM-DD + const today = new Date().toISOString().split("T")[0]; const [selectedDate, setSelectedDate] = useState(today); - // central project selection hook const selectedProjectId = useSelectedProject() const { @@ -136,7 +135,6 @@ const selectedProjectId = useSelectedProject() )} - {/* Details */} {AttendanceData?.activeTab === "Details" && (
NameRequest By Requested AtActionAction
diff --git a/src/components/Dashboard/AttendanceOverview.jsx b/src/components/Dashboard/AttendanceOverview.jsx index 06b5220b..522aa193 100644 --- a/src/components/Dashboard/AttendanceOverview.jsx +++ b/src/components/Dashboard/AttendanceOverview.jsx @@ -7,17 +7,17 @@ import ChartSkeleton from "../Charts/Skelton"; import { useSelectedProject } from "../../slices/apiDataManager"; import { formatDate_DayMonth } from "../../utils/dateUtils"; - - const AttendanceOverview = () => { const [dayRange, setDayRange] = useState(7); const [view, setView] = useState("chart"); const selectedProject = useSelectedProject(); - const { data: attendanceOverviewData, isLoading, isError, error } = useAttendanceOverviewData( - selectedProject, - dayRange - ); + const { + data: attendanceOverviewData, + isLoading, + isError, + error, + } = useAttendanceOverviewData(selectedProject, dayRange); // Use empty array while loading const attendanceData = attendanceOverviewData || []; @@ -55,73 +55,129 @@ const AttendanceOverview = () => { })); const chartOptions = { - chart: { type: "bar", stacked: true, height: 400, toolbar: { show: false } }, + chart: { + type: "bar", + stacked: true, + height: 400, + toolbar: { show: false }, + }, plotOptions: { bar: { borderRadius: 2, columnWidth: "60%" } }, xaxis: { categories: tableData.map((row) => row.date) }, - yaxis: { show: true, axisBorder: { show: true, color: "#78909C" }, axisTicks: { show: true, color: "#78909C", width: 6 } }, + yaxis: { + show: true, + axisBorder: { show: true, color: "#78909C" }, + axisTicks: { show: true, color: "#78909C", width: 6 }, + }, legend: { position: "bottom" }, fill: { opacity: 1 }, colors: roles.map((_, i) => flatColors[i % flatColors.length]), }; return ( -
- {/* Optional subtle loading overlay */} - {isLoading && ( -
- Loading... +
+
+
+

Attendance Overview

+

+ Role-wise present count +

- )} - {/* Header */} -
-
-
Attendance Overview
-

Role-wise present count

-
-
- setDayRange(Number(e.target.value))} + > - - + +
+ + + +
- {/* Content */} -
+ {/* Content Section */} +
+ {isLoading && ( +
+ Loading... +
+ )} + {!isLoading && (!attendanceData || attendanceData.length === 0) ? (
No data found
+ style={{ minHeight: "250px" }} + > + No data found +
) : view === "chart" ? (
- +
) : ( -
-
- +
+
+ - + {dates.map((date, idx) => ( - + ))} + {roles.map((role) => ( - + {tableData.map((row, idx) => { const value = row[role]; - return ; + return ( + + ); })} ))} @@ -134,4 +190,4 @@ const AttendanceOverview = () => { ); }; -export default AttendanceOverview; \ No newline at end of file +export default AttendanceOverview; diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index 8f2e7a37..c720c960 100644 --- a/src/components/Dashboard/Dashboard.jsx +++ b/src/components/Dashboard/Dashboard.jsx @@ -19,6 +19,13 @@ import { useProjectName } from "../../hooks/useProjects"; import ExpenseAnalysis from "./ExpenseAnalysis"; import ExpenseStatus from "./ExpenseStatus"; import ExpenseByProject from "./ExpenseByProject"; +import { useHasUserPermission } from "../../hooks/useHasUserPermission"; +import { + APPROVE_EXPENSE, + EXPENSE_MANAGE, + VIEW_ALL_EXPNESE, +} from "../../utils/constants"; +import { useHasAnyPermission } from "../../hooks/useExpense"; const Dashboard = () => { // const { projectsCardData } = useDashboardProjectsCardData(); @@ -29,34 +36,40 @@ const Dashboard = () => { const projectId = useSelector((store) => store.localVariables.projectId); const isAllProjectsSelected = projectId === null; + const isViewExpense = useHasAnyPermission( + VIEW_ALL_EXPNESE, + APPROVE_EXPENSE, + EXPENSE_MANAGE + ); return ( -
-
-
-
- +
+ {isViewExpense && ( +
+
+
+ +
+
+ +
+
+ +
+
+
+ )} + +
+ {!isAllProjectsSelected && ( +
+ +
+ )} +
+ +
- -
-
- -
-
-
- -
- {!isAllProjectsSelected && ( -
- -
- )} -
- -
-
-
- ); }; diff --git a/src/components/Dashboard/ExpenseAnalysis.jsx b/src/components/Dashboard/ExpenseAnalysis.jsx index 50528055..6bea4db3 100644 --- a/src/components/Dashboard/ExpenseAnalysis.jsx +++ b/src/components/Dashboard/ExpenseAnalysis.jsx @@ -54,14 +54,32 @@ const ExpenseAnalysis = () => { }, }, }, - responsive: [ - { - breakpoint: 576, // mobile breakpoint - options: { - chart: { width: "100%" }, + responsive: [ + { + breakpoint: 1200, + options: { + chart: { width: "100%", height: 350 }, + legend: { position: "bottom" }, + }, + }, + { + breakpoint: 992, + options: { + chart: { width: "100%", height: 300 }, + dataLabels: { style: { fontSize: "11px" } }, + }, + }, + { + breakpoint: 576, + options: { + chart: { width: "100%", height: 250 }, + legend: { fontSize: "10px" }, + plotOptions: { + pie: { donut: { size: "65%" } }, }, }, - ], + }, + ], }; return ( @@ -69,18 +87,18 @@ const ExpenseAnalysis = () => { {/* Header */}
-
Expense Breakdown
+

Expense Breakdown

Category Wise Expense Breakdown

-
+
- {/* Card body */} +
{isLoading && (
{ )} {!isLoading && report.length === 0 && ( -
No data found
+
No data found
)} {!isLoading && report.length > 0 && ( diff --git a/src/components/Dashboard/ExpenseByProject.jsx b/src/components/Dashboard/ExpenseByProject.jsx index 819824ca..e97d51d3 100644 --- a/src/components/Dashboard/ExpenseByProject.jsx +++ b/src/components/Dashboard/ExpenseByProject.jsx @@ -67,13 +67,19 @@ const ExpenseByProject = () => { }, ]; + + const ExpenseCategoryType = [ + {id:1,category:"Category",label:"Category"}, + {id:2,category:"Project",label:"Project"} + ] + return (
{/* Header */}
-
-
-
Monthly Expense -
+
+
+

Monthly Expense -

Detailed project expenses

@@ -85,29 +91,20 @@ const ExpenseByProject = () => { > {viewMode} -
    -
  • +
      + {ExpenseCategoryType.map((cat)=>( +
    • -
      • -
    • -
      • + ))}
diff --git a/src/components/Dashboard/ExpenseStatus.jsx b/src/components/Dashboard/ExpenseStatus.jsx index 3076c0c4..7e0442fe 100644 --- a/src/components/Dashboard/ExpenseStatus.jsx +++ b/src/components/Dashboard/ExpenseStatus.jsx @@ -36,14 +36,14 @@ const ExpenseStatus = () => { <>
-
Expense - By Status
+

Expense - By Status

{projectName}

-
+
{[ { title: "Pending Payment", diff --git a/src/components/Directory/EmployeeList.jsx b/src/components/Directory/EmployeeList.jsx index 9323f313..b70b8840 100644 --- a/src/components/Directory/EmployeeList.jsx +++ b/src/components/Directory/EmployeeList.jsx @@ -74,7 +74,7 @@ const EmployeeList = ({ employees, onChange, bucket }) => { return ( <> -
+

Add Employee

{
-
+
RoleRole{date} + {date} +
{role}{role} 0 ? { backgroundColor: "#d5d5d5" } : {}}>{value} 0 ? { backgroundColor: "#e9ecef" } : {} + } + > + {value} +
diff --git a/src/components/Expenses/ExpenseList.jsx b/src/components/Expenses/ExpenseList.jsx index 16159a1c..640f0b77 100644 --- a/src/components/Expenses/ExpenseList.jsx +++ b/src/components/Expenses/ExpenseList.jsx @@ -124,7 +124,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => { }, { key: "expensesType", - label: "Expense Type", + label: "Expense Category", getValue: (e) => e.expensesType?.name || "N/A", align: "text-start", }, @@ -250,10 +250,10 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => { (col.isAlwaysVisible || groupBy !== col.key) && ( ) )} @@ -267,8 +267,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => { Object.values(grouped).map(({ key, displayField, items }) => ( -
-
{col.label}
+
{col.label}
-
+
+
{" "} {displayField} :{" "} @@ -288,7 +288,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => { (col.isAlwaysVisible || groupBy !== col.key) && (
{col.customRender ? col.customRender(expense) diff --git a/src/components/Expenses/Filelist.jsx b/src/components/Expenses/Filelist.jsx new file mode 100644 index 00000000..2b1ce74e --- /dev/null +++ b/src/components/Expenses/Filelist.jsx @@ -0,0 +1,53 @@ +import React from "react"; +import { formatFileSize, getIconByFileType } from "../../utils/appUtils"; + +const Filelist = ({ files, removeFile, expenseToEdit }) => { + return ( +
+ {files + .filter((file) => { + if (expenseToEdit) { + return file.isActive; + } + return true; + }) + .map((file, idx) => ( +
+
+ {/* File icon and info */} +
+ + +
+ + {file.fileName} + + + {file.fileSize ? formatFileSize(file.fileSize) : ""} + +
+
+ +
+ { + e.preventDefault(); + removeFile(expenseToEdit ? file.documentId : idx); + }} + > +
+
+
+ ))} +
+ ); +}; + +export default Filelist; diff --git a/src/components/Expenses/ManageExpense.jsx b/src/components/Expenses/ManageExpense.jsx index 9644bb3a..cc8f889a 100644 --- a/src/components/Expenses/ManageExpense.jsx +++ b/src/components/Expenses/ManageExpense.jsx @@ -29,6 +29,7 @@ import DatePicker from "../common/DatePicker"; import ErrorPage from "../../pages/ErrorPage"; import Label from "../common/Label"; import EmployeeSearchInput from "../common/EmployeeSearchInput"; +import Filelist from "./Filelist"; const ManageExpense = ({ closeModal, expenseToEdit = null }) => { const { @@ -330,7 +331,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => { control={control} name="paidById" projectId={null} - forAll={expenseToEdit ? true :false} + forAll={expenseToEdit ? true : false} /> @@ -342,6 +343,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => { @@ -512,42 +514,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => { {errors.billAttachments.message} )} - {files.length > 0 && ( -
- {files - .filter((file) => { - if (expenseToEdit) { - return file.isActive; - } - return true; - }) - .map((file, idx) => ( - -
- - {file.fileName} - - - {file.fileSize ? formatFileSize(file.fileSize) : ""} - -
- { - e.preventDefault(); - removeFile(expenseToEdit ? file.documentId : idx); - }} - > - - ))} -
- )} + {files.length > 0 && } {Array.isArray(errors.billAttachments) && errors.billAttachments.map((fileError, index) => ( diff --git a/src/components/common/DatePicker.jsx b/src/components/common/DatePicker.jsx index 6b73dc36..d00b6329 100644 --- a/src/components/common/DatePicker.jsx +++ b/src/components/common/DatePicker.jsx @@ -47,7 +47,7 @@ const DatePicker = ({ const displayValue = value ? flatpickr.formatDate(new Date(value), "d-m-Y") : ""; return ( -
+
+
- + > + +
); }; export default DateRangePicker; - - - - - export const DateRangePicker1 = ({ startField = "startDate", endField = "endDate", @@ -173,16 +170,15 @@ export const DateRangePicker1 = ({ } }, [resetSignal, defaultRange, setValue, startField, endField]); - const start = getValues(startField); const end = getValues(endField); const formattedValue = start && end ? `${start} To ${end}` : ""; return ( -
+
{ @@ -201,4 +197,3 @@ export const DateRangePicker1 = ({
); }; - diff --git a/src/components/common/Loader.jsx b/src/components/common/Loader.jsx index 07078edb..53c90486 100644 --- a/src/components/common/Loader.jsx +++ b/src/components/common/Loader.jsx @@ -19,3 +19,14 @@ const Loader = () => { export default Loader; + +export const SpinnerLoader = ()=>{ + return ( +
+
+ Loading... +
+

Loading attendance data...

+
+ ) +} \ No newline at end of file diff --git a/src/pages/Activities/AttendancePage.jsx b/src/pages/Activities/AttendancePage.jsx index 63721bbc..d4f5de2b 100644 --- a/src/pages/Activities/AttendancePage.jsx +++ b/src/pages/Activities/AttendancePage.jsx @@ -169,7 +169,7 @@ const AttendancePage = () => {
{/* Search + Organization filter */} -
+
{/* Organization Dropdown */} {/*