fixed date formating inside attenace logs and expense list

This commit is contained in:
pramod.mahajan 2025-10-30 11:29:02 +05:30
parent d3acf13c0a
commit dc75121d31
4 changed files with 20 additions and 38 deletions

View File

@ -1,7 +1,7 @@
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";
@ -228,23 +228,12 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
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 ms-sm-8 ">
<div className=" col-12">
<DateRangePicker
onRangeChange={setDateRange}
defaultStartDate={yesterday}
/>
<div className="form-check form-switch text-start ms-1 ms-md-5 align-items-center mb-0">
<input
type="checkbox"
className="form-check-input"
role="switch"
disabled={isFetching}
id="inactiveEmployeesCheckbox"
checked={showPending}
onChange={(e) => setShowPending(e.target.checked)}
/>
<label className="form-check-label ms-0">Show Pending</label>
</div>
</div>
</div>
@ -292,8 +281,8 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
className="table-row-header"
>
<td colSpan={8} className="text-start">
<strong>
{moment(currentDate).format("DD-MM-YYYY")}
<strong className="mx-2">
{formatUTCToLocalTime(currentDate)}
</strong>
</td>
</tr>

View File

@ -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()
</div>
)}
{/* Details */}
{AttendanceData?.activeTab === "Details" && (
<div className="table-responsive" style={{ maxHeight: "300px" }}>
<table className="table table-hover mb-0 text-start">

View File

@ -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) && (
<th
key={col.key}
className={`sorting d-table-cell`}
className={`sorting d-table-cell `}
aria-sort="descending"
>
<div className={`${col.align}`}>{col.label}</div>
<div className={`${col.align} p`}>{col.label}</div>
</th>
)
)}
@ -267,8 +267,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
Object.values(grouped).map(({ key, displayField, items }) => (
<React.Fragment key={key}>
<tr className="tr-group text-dark">
<td colSpan={8} className="text-start">
<div className="d-flex align-items-center">
<td colSpan={8} className="text-start ">
<div className="d-flex align-items-center px-2">
{" "}
<small className="fs-6 py-1">
{displayField} :{" "}
@ -288,7 +288,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
(col.isAlwaysVisible || groupBy !== col.key) && (
<td
key={col.key}
className={`d-table-cell ${col.align ?? ""}`}
className={`d-table-cell ${col.align ?? ""}`}
>
{col.customRender
? col.customRender(expense)

View File

@ -63,30 +63,27 @@ const DateRangePicker = ({
};
return (
<div className={`position-relative justify-content-center w-max `}>
<div className={`position-relative w-max `}>
<input
type="text"
className="form-control form-control-sm w-100 pe-2 fw-medium"
className="form-control form-control-sm ps-2 pe-3 me-2 cursor-pointer fw-medium"
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 "
<span
className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer"
onClick={handleIconClick}
/>
>
<i className="bx bx-calendar bx-sm fs-5 text-muted"></i>
</span>
</div>
);
};
export default DateRangePicker;
export const DateRangePicker1 = ({
startField = "startDate",
endField = "endDate",
@ -173,13 +170,12 @@ export const DateRangePicker1 = ({
}
}, [resetSignal, defaultRange, setValue, startField, endField]);
const start = getValues(startField);
const end = getValues(endField);
const formattedValue = start && end ? `${start} To ${end}` : "";
return (
<div className={`position-relative ${className} w-max `} >
<div className={`position-relative ${className} w-max `}>
<input
type="text"
className="form-control form-control-sm ps-2 pe-3 me-2 cursor-pointer fw-medium"
@ -201,4 +197,3 @@ export const DateRangePicker1 = ({
</div>
);
};