-
+ {filteredOptions.map((item) => {
+ const labelVal = getLabel(item);
+ const valueVal = item[valueKey];
+ const isChecked = selectedValues.includes(valueVal);
+
+ return (
+
setSearchText(e.target.value)}
- className="multi-select-dropdown-search-input"
+ type="checkbox"
+ className="custom-checkbox form-check-input"
+ checked={isChecked}
+ onChange={() => handleCheckboxChange(valueVal)}
+ style={{ marginRight: 8 }}
/>
+
+ );
+ })}
- {filteredOptions.map((item) => {
- const labelVal = item[labelKey];
- const valueVal = item[valueKey];
- const isChecked = selectedValues.includes(valueVal);
-
- return (
-
- handleCheckboxChange(valueVal)}
- />
-
-
- );
- })}
- {!IsLoading && filteredOptions.length === 0 && (
-
-
-
- )}
- {IsLoading && filteredOptions.length === 0 && (
-
-
-
- )}
+ {!IsLoading && filteredOptions.length === 0 && (
+
+
+
+ )}
+ {IsLoading && filteredOptions.length === 0 && (
+
+
)}
);
+
+ return (
+ <>
+
+
+
+
setIsOpen((prev) => !prev)}
+ style={{ cursor: "pointer" }}
+ >
+
0 ? "placeholder-style-selected" : "placeholder-style"
+ }
+ >
+
+ {selectedValues.length > 0 ? (
+ selectedValues.map((val) => {
+ const found = options.find((opt) => opt[valueKey] === val);
+ const label = found ? getLabel(found) : "";
+ return (
+
+ {label}
+
+ );
+ })
+ ) : (
+ {placeholder}
+ )}
+
+
+
+
+
+
+ {isOpen && createPortal(dropdownElement, document.body)}
+
+ );
};
export default SelectMultiple;
diff --git a/src/pages/Expense/ExpensePage.jsx b/src/pages/Expense/ExpensePage.jsx
index c4bd8526..90624d61 100644
--- a/src/pages/Expense/ExpensePage.jsx
+++ b/src/pages/Expense/ExpensePage.jsx
@@ -1,16 +1,107 @@
-import React, { createContext, useContext, useState } from "react";
-
+import React, {
+ createContext,
+ useContext,
+ useState,
+ useRef,
+ useEffect,
+} from "react";
+import {
+ useForm,
+ useFieldArray,
+ FormProvider,
+ useFormContext,
+ Controller,
+} from "react-hook-form";
import ExpenseList from "../../components/Expenses/ExpenseList";
import ViewExpense from "../../components/Expenses/ViewExpense";
import Breadcrumb from "../../components/common/Breadcrumb";
import GlobalModel from "../../components/common/GlobalModel";
import PreviewDocument from "../../components/Expenses/PreviewDocument";
import ManageExpense from "../../components/Expenses/ManageExpense";
+import { useProjectName } from "../../hooks/useProjects";
+import { useExpenseStatus } from "../../hooks/masterHook/useMaster";
+import {
+ useEmployees,
+ useEmployeesAllOrByProjectId,
+} from "../../hooks/useEmployees";
+import { useSelector } from "react-redux";
+import DateRangePicker from "../../components/common/DateRangePicker";
+import SelectMultiple from "../../components/common/SelectMultiple";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+ defaultFilter,
+ SearchSchema,
+} from "../../components/Expenses/ExpenseSchema";
+
+const SelectDropdown = ({
+ label,
+ options = [],
+ loading = false,
+ placeholder = "Select...",
+ valueKey = "id",
+ labelKey = "name",
+ selectedValues = [],
+ onChange,
+ isMulti = false,
+}) => {
+ const handleChange = (e) => {
+ const selected = Array.from(
+ e.target.selectedOptions,
+ (option) => option.value
+ );
+ onChange && onChange(selected);
+ };
+
+ return (
+
+
+
+ {options.map((option) => {
+ const checked = selectedValues.includes(option[valueKey]);
+ return (
+
+ {
+ let newSelected;
+ if (checked) {
+ newSelected = selectedValues.filter(
+ (val) => val !== option[valueKey]
+ );
+ } else {
+ newSelected = [...selectedValues, option[valueKey]];
+ }
+ onChange(newSelected);
+ }}
+ />
+
+
+ );
+ })}
+
+
+ );
+};
export const ExpenseContext = createContext();
export const useExpenseContext = () => useContext(ExpenseContext);
const ExpensePage = () => {
+ const [isOpen, setIsOpen] = useState(false);
+ const [filters,setFilter] = useState()
+ const dropdownRef = useRef(null);
+ const shouldCloseOnOutsideClick = useRef(false);
+ const selectedProjectId = useSelector(
+ (store) => store.localVariables.projectId
+ );
const [ManageExpenseModal, setManageExpenseModal] = useState({
IsOpen: null,
expenseId: null,
@@ -30,6 +121,81 @@ const ExpensePage = () => {
setDocumentView,
};
+ const methods = useForm({
+ resolver: zodResolver(SearchSchema),
+ defaultValues: defaultFilter,
+ });
+ const {
+ register,
+ handleSubmit,
+ control,
+ getValues,
+ trigger,
+ setValue,
+ watch,
+ reset,
+ formState: { errors },
+ } = methods;
+
+ const { projectNames, loading: projectLoading } = useProjectName();
+ const { ExpenseStatus, loading: statusLoading, error } = useExpenseStatus();
+ const { employees, loading: empLoading } = useEmployeesAllOrByProjectId(
+ true,
+ selectedProjectId,
+ true
+ );
+
+ const onSubmit = (data) => {
+ setFilter(data)
+ };
+ const setDateRange = ({ startDate, endDate }) => {
+ setValue(
+ "startDate",
+ startDate ? new Date(startDate).toISOString().split("T")[0] : null
+ );
+ setValue(
+ "endDate",
+ endDate ? new Date(endDate).toISOString().split("T")[0] : null
+ );
+ };
+
+ const toggleDropdown = () => {
+ setIsOpen((prev) => {
+ shouldCloseOnOutsideClick.current = !prev;
+ return !prev;
+ });
+ };
+
+ useEffect(() => {
+ function handleClickOutside(event) {
+ if (
+ shouldCloseOnOutsideClick.current &&
+ dropdownRef.current &&
+ dropdownRef.current.contains(event.target)
+ ) {
+ setIsOpen(false);
+ }
+ }
+
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, []);
+ const clearFilter =()=>{
+ setFilter(
+ {
+ projectIds: [],
+ statusIds: [],
+ createdByIds: [],
+ paidById: [],
+ startDate: null,
+ endDate: null,
+ })
+ reset()
+
+ }
+
return (
@@ -42,16 +208,136 @@ const ExpensePage = () => {
-
-
-
+
+
+
setIsOpen((v) => !v)}
+ >
+ {isOpen && (
+
+ )}
+
-
+
{ManageExpenseModal.IsOpen && (
handleImageLoad(doc.id)}
- onClick={() =>
- setDocumentView({ IsOpen: true, Image: doc.preSignedUrl })
- }
- />
-
- )}
-