Merge branch 'OnFieldWork_V1' of https://git.marcoaiot.com/admin/marco.pms.web into Adding_Chips_Expense
This commit is contained in:
commit
6ba018399c
@ -40,43 +40,45 @@ const ExpenseFilterChips = ({ filters, filterData, removeFilterChip }) => {
|
||||
if (!filterChips.length) return null;
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="d-flex flex-wrap align-items-start gap-1 text-start">
|
||||
{filterChips.map((chip) => (
|
||||
<div
|
||||
key={chip.key}
|
||||
className="d-flex align-items-center flex-wrap px-2 py-1 "
|
||||
style={{ fontSize: "0.9rem", maxWidth: "100%" }}
|
||||
>
|
||||
{/* Chip Label */}
|
||||
<span className="fw-semibold me-2">{chip.label}:</span>
|
||||
|
||||
<div className="row">
|
||||
<div className="text-start mt-2">
|
||||
<strong className="fs-6 ms-2">Filter:</strong>
|
||||
</div>
|
||||
<div className="col-12 d-flex flex-column text-start text-wrap">
|
||||
{filterChips.map((chip) => (
|
||||
<span
|
||||
key={chip.key}
|
||||
className="d-flex align-items-center px-2 py-1 rounded flex-wrap"
|
||||
>
|
||||
<strong className="me-1">{chip.label}:</strong>
|
||||
<div className="d-flex flex-wrap align-items-center">
|
||||
{chip.items.map((item) => (
|
||||
<span
|
||||
key={item.id}
|
||||
className="d-flex align-items-center bg-light rounded px-2 py-1 me-2 mb-1"
|
||||
style={{ fontSize: "0.8rem" }}
|
||||
>
|
||||
<span>{item.name}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close btn-close-white btn-sm ms-2"
|
||||
style={{
|
||||
filter: "invert(1) grayscale(1)",
|
||||
opacity: 0.7,
|
||||
fontSize: "0.6rem",
|
||||
}}
|
||||
onClick={() => removeFilterChip(chip.key, item.id)}
|
||||
/>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{/* Chip Items */}
|
||||
<div className="d-flex flex-wrap align-items-center gap-1">
|
||||
{chip.items.map((item) => (
|
||||
<span
|
||||
key={item.id}
|
||||
className="d-flex align-items-center bg-light rounded px-2 py-1 text-xs"
|
||||
>
|
||||
<span>{item.name}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close btn-close-white btn-sm ms-2"
|
||||
style={{
|
||||
filter: "invert(1) grayscale(1)",
|
||||
opacity: 0.7,
|
||||
fontSize: "0.6rem",
|
||||
}}
|
||||
onClick={() => removeFilterChip(chip.key, item.id)}
|
||||
/>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
);
|
||||
@ -85,138 +87,3 @@ const ExpenseFilterChips = ({ filters, filterData, removeFilterChip }) => {
|
||||
export default ExpenseFilterChips;
|
||||
|
||||
|
||||
// import React, { useMemo } from "react";
|
||||
|
||||
// const ExpenseFilterChips = ({ filters, filterData, removeFilterChip, groupBy }) => {
|
||||
// // Build filter chips
|
||||
// const filterChips = useMemo(() => {
|
||||
// const chips = [];
|
||||
|
||||
// const buildGroup = (ids, list, label, key) => {
|
||||
// if (!ids?.length) return;
|
||||
// const items = ids.map((id) => ({
|
||||
// id,
|
||||
// name: list.find((item) => item.id === id)?.name || id,
|
||||
// }));
|
||||
// chips.push({ key, label, items });
|
||||
// };
|
||||
|
||||
// buildGroup(filters.projectIds, filterData.projects, "Project", "projectIds");
|
||||
// buildGroup(filters.createdByIds, filterData.createdBy, "Submitted By", "createdByIds");
|
||||
// buildGroup(filters.paidById, filterData.paidBy, "Paid By", "paidById");
|
||||
// buildGroup(filters.statusIds, filterData.status, "Status", "statusIds");
|
||||
// buildGroup(filters.ExpenseTypeIds, filterData.expensesType, "Category", "ExpenseTypeIds");
|
||||
|
||||
// if (filters.startDate || filters.endDate) {
|
||||
// const start = filters.startDate
|
||||
// ? new Date(filters.startDate).toLocaleDateString("en-GB", {
|
||||
// day: "2-digit",
|
||||
// month: "short",
|
||||
// year: "numeric",
|
||||
// })
|
||||
// : "";
|
||||
// const end = filters.endDate
|
||||
// ? new Date(filters.endDate).toLocaleDateString("en-GB", {
|
||||
// day: "2-digit",
|
||||
// month: "short",
|
||||
// year: "numeric",
|
||||
// })
|
||||
// : "";
|
||||
// chips.push({
|
||||
// key: "dateRange",
|
||||
// label: "Date Range",
|
||||
// items: [{ id: "dateRange", name: `${start} - ${end}` }],
|
||||
// });
|
||||
// }
|
||||
|
||||
// return chips;
|
||||
// }, [filters, filterData]);
|
||||
|
||||
// // Prepare groupBy chip
|
||||
// const groupByChip = useMemo(() => {
|
||||
// if (!groupBy) return null;
|
||||
|
||||
// const formattedGroup =
|
||||
// groupBy === "transactionDate"
|
||||
// ? "Transaction Date"
|
||||
// : groupBy === "status"
|
||||
// ? "Status"
|
||||
// : groupBy === "submittedBy"
|
||||
// ? "Submitted By"
|
||||
// : groupBy === "project"
|
||||
// ? "Project"
|
||||
// : groupBy === "paymentMode"
|
||||
// ? "Payment Mode"
|
||||
// : groupBy === "expensesType"
|
||||
// ? "Expense Type"
|
||||
// : groupBy === "createdAt"
|
||||
// ? "Submitted Date"
|
||||
// : "Others";
|
||||
|
||||
// return {
|
||||
// key: "groupBy",
|
||||
// label: "Group By",
|
||||
// items: [{ id: groupBy, name: formattedGroup }],
|
||||
// };
|
||||
// }, [groupBy]);
|
||||
|
||||
// if (!filterChips.length && !groupByChip) return null;
|
||||
|
||||
// return (
|
||||
// <div className="mb-3 d-flex flex-wrap gap-2 align-items-center">
|
||||
// {/* Filters */}
|
||||
// {filterChips.length > 0 && (
|
||||
// <>
|
||||
// <strong>Filters:</strong>
|
||||
// {filterChips.map((chip) => (
|
||||
// <span
|
||||
// key={chip.key}
|
||||
// className="d-flex align-items-center px-2 py-1 rounded flex-wrap"
|
||||
// >
|
||||
// <strong className="me-1">{chip.label}:</strong>
|
||||
// <div className="d-flex flex-wrap align-items-center">
|
||||
// {chip.items.map((item) => (
|
||||
// <span
|
||||
// key={item.id}
|
||||
// className="d-flex align-items-center bg-light rounded px-2 py-1 me-2 mb-1"
|
||||
// style={{ fontSize: "0.8rem" }}
|
||||
// >
|
||||
// <span>{item.name}</span>
|
||||
// <button
|
||||
// type="button"
|
||||
// className="btn-close btn-close-white btn-sm ms-2"
|
||||
// style={{
|
||||
// filter: "invert(1) grayscale(1)",
|
||||
// opacity: 0.7,
|
||||
// fontSize: "0.6rem",
|
||||
// }}
|
||||
// onClick={() => removeFilterChip(chip.key, item.id)}
|
||||
// />
|
||||
// </span>
|
||||
// ))}
|
||||
// </div>
|
||||
// </span>
|
||||
// ))}
|
||||
// </>
|
||||
// )}
|
||||
|
||||
// {/* Group By */}
|
||||
// {groupByChip && (
|
||||
// <>
|
||||
// <strong className="ms-2">Group By:</strong>
|
||||
// {groupByChip.items.map((item) => (
|
||||
// <span
|
||||
// key={item.id}
|
||||
// className="d-flex align-items-center bg-light rounded px-2 py-1 me-2 mb-1"
|
||||
// style={{ fontSize: "0.8rem" }}
|
||||
// >
|
||||
// <span>{item.name}</span>
|
||||
// </span>
|
||||
// ))}
|
||||
// </>
|
||||
// )}
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default ExpenseFilterChips;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState, useMemo } from "react";
|
||||
import React, {forwardRef, useEffect,useImperativeHandle, useState, useMemo } from "react";
|
||||
import { FormProvider, useForm, Controller } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { defaultFilter, SearchSchema } from "./ExpenseSchema";
|
||||
@ -15,7 +15,7 @@ import { useExpenseFilter } from "../../hooks/useExpense";
|
||||
import { ExpenseFilterSkeleton } from "./ExpenseSkeleton";
|
||||
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
const ExpenseFilterPanel = ({ onApply, handleGroupBy, setFilterdata }) => {
|
||||
const ExpenseFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilterdata }, ref) => {
|
||||
const { status } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const selectedProjectId = useSelector(
|
||||
@ -77,6 +77,18 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy, setFilterdata }) => {
|
||||
if (group) setSelectedGroup(group);
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
resetFieldValue: (name, value) => {
|
||||
// Reset specific field
|
||||
if (value !== undefined) {
|
||||
setValue(name, value);
|
||||
} else {
|
||||
reset({ ...methods.getValues(), [name]: defaultFilter[name] });
|
||||
}
|
||||
},
|
||||
getValues: methods.getValues, // optional, to read current filter state
|
||||
}));
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
onApply({
|
||||
...formData,
|
||||
@ -280,6 +292,6 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy, setFilterdata }) => {
|
||||
</FormProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default ExpenseFilterPanel;
|
||||
@ -115,10 +115,10 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
};
|
||||
|
||||
const expenseColumns = [
|
||||
{
|
||||
{
|
||||
key: "expenseUId",
|
||||
label: "Expense Id",
|
||||
getValue: (e) => e.expenseUId|| "N/A",
|
||||
getValue: (e) => e.expenseUId || "N/A",
|
||||
align: "text-start mx-2",
|
||||
},
|
||||
{
|
||||
@ -183,7 +183,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
},
|
||||
];
|
||||
|
||||
if (isInitialLoading) return <ExpenseTableSkeleton />;
|
||||
if (isInitialLoading && !data) return <ExpenseTableSkeleton />;
|
||||
if (isError) return <div>{error?.message}</div>;
|
||||
|
||||
const grouped = groupBy
|
||||
@ -305,26 +305,61 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
})
|
||||
}
|
||||
></i>
|
||||
{canEditExpense(expense) && (
|
||||
<i
|
||||
className="bx bx-edit text-secondary cursor-pointer"
|
||||
onClick={() =>
|
||||
setManageExpenseModal({
|
||||
IsOpen: true,
|
||||
expenseId: expense.id,
|
||||
})
|
||||
}
|
||||
></i>
|
||||
)}
|
||||
{canDetetExpense(expense) && (
|
||||
<i
|
||||
className="bx bx-trash text-danger cursor-pointer"
|
||||
onClick={() => {
|
||||
setIsDeleteModalOpen(true);
|
||||
setDeletingId(expense.id);
|
||||
}}
|
||||
></i>
|
||||
)}
|
||||
{canDetetExpense(expense) &&
|
||||
canEditExpense(expense) && (
|
||||
<div className="dropdown z-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i
|
||||
className="bx bx-dots-vertical-rounded text-muted p-0"
|
||||
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 w-auto">
|
||||
{canDetetExpense(expense) && (
|
||||
<li
|
||||
onClick={() =>
|
||||
setManageExpenseModal({
|
||||
IsOpen: true,
|
||||
expenseId: expense.id,
|
||||
})
|
||||
}
|
||||
>
|
||||
<a className="dropdown-item px-2 cursor-pointer py-1">
|
||||
<i className="bx bx-edit text-primary bx-xs me-2"></i>
|
||||
<span className="align-left ">
|
||||
Modify
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
|
||||
{canDetetExpense(expense) && (
|
||||
<li
|
||||
onClick={() => {
|
||||
setIsDeleteModalOpen(true);
|
||||
setDeletingId(expense.id);
|
||||
}}
|
||||
>
|
||||
<a className="dropdown-item px-2 cursor-pointer py-1">
|
||||
<i className="bx bx-trash text-danger bx-xs me-2"></i>
|
||||
<span className="align-left">
|
||||
Delete
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -40,11 +40,11 @@ const Header = () => {
|
||||
const isProjectPath = pathname === "/projects";
|
||||
const isDirectory = pathname === "/directory";
|
||||
const isEmployeeList = pathname === "/employees";
|
||||
const isExpense = pathname === "/expenses";
|
||||
// const isExpense = pathname === "/expenses";
|
||||
const isEmployeeProfile = UUID_REGEX.test(pathname);
|
||||
|
||||
const hideDropPaths =
|
||||
isDirectory || isEmployeeList || isExpense || isEmployeeProfile;
|
||||
isDirectory || isEmployeeList || isEmployeeProfile;
|
||||
|
||||
const showProjectDropdown = !hideDropPaths;
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { createContext, useContext, useState, useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import React, { createContext, useContext, useState, useEffect, useRef } from "react";
|
||||
import { useForm, useFormContext } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
@ -39,7 +39,7 @@ const ExpensePage = () => {
|
||||
const [filters, setFilters] = useState(defaultFilter);
|
||||
const [groupBy, setGroupBy] = useState("transactionDate");
|
||||
const [searchText, setSearchText] = useState("");
|
||||
|
||||
const filterPanelRef = useRef();
|
||||
const [ManageExpenseModal, setManageExpenseModal] = useState({
|
||||
IsOpen: null,
|
||||
expenseId: null,
|
||||
@ -59,30 +59,28 @@ const ExpensePage = () => {
|
||||
const IsViewAll = useHasUserPermission(VIEW_ALL_EXPNESE);
|
||||
const IsViewSelf = useHasUserPermission(VIEW_SELF_EXPENSE);
|
||||
|
||||
|
||||
const { setOffcanvasContent, setShowTrigger } = useFab();
|
||||
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(SearchSchema),
|
||||
defaultValues: defaultFilter,
|
||||
});
|
||||
const { reset } = methods;
|
||||
|
||||
|
||||
const [filterData, setFilterdata] = useState(defaultFilter);
|
||||
|
||||
const clearFilter = () => {
|
||||
setFilters(defaultFilter);
|
||||
reset();
|
||||
};
|
||||
|
||||
|
||||
const removeFilterChip = (key, id) => {
|
||||
|
||||
|
||||
|
||||
const removeFilterChip = (key, id) => {
|
||||
setFilters((prev) => {
|
||||
const updated = { ...prev };
|
||||
if (Array.isArray(updated[key])) {
|
||||
updated[key] = updated[key].filter((v) => v !== id);
|
||||
filterPanelRef.current?.resetFieldValue(key, updated[key]);
|
||||
} else if (key === "dateRange") {
|
||||
updated.startDate = null;
|
||||
updated.endDate = null;
|
||||
filterPanelRef.current?.resetFieldValue("startDate", null);
|
||||
filterPanelRef.current?.resetFieldValue("endDate", null);
|
||||
}
|
||||
return updated;
|
||||
});
|
||||
@ -94,9 +92,10 @@ const ExpensePage = () => {
|
||||
setOffcanvasContent(
|
||||
"Expense Filters",
|
||||
<ExpenseFilterPanel
|
||||
ref={filterPanelRef}
|
||||
onApply={setFilters}
|
||||
handleGroupBy={setGroupBy}
|
||||
setFilterdata={setFilterdata}
|
||||
setFilterdata={setFilterdata}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -138,9 +137,7 @@ const ExpensePage = () => {
|
||||
</div>
|
||||
|
||||
<div className="col-6 text-end mt-2 mt-sm-0">
|
||||
<button className="btn btn-sm" onClick={clearFilter}>
|
||||
Clear
|
||||
</button>
|
||||
|
||||
{IsCreatedAble && (
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
@ -163,7 +160,7 @@ const ExpensePage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<ExpenseList
|
||||
filters={filters}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user