fixed date formating inside attenace logs and expense list
This commit is contained in:
parent
d3acf13c0a
commit
dc75121d31
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user