439 lines
14 KiB
JavaScript
439 lines
14 KiB
JavaScript
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";
|
|
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
import { CREATE_EXEPENSE } from "../../utils/constants";
|
|
|
|
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 (
|
|
<div className="select-dropdown">
|
|
<label>{label}</label>
|
|
<div className="dropdown-menu show">
|
|
{options.map((option) => {
|
|
const checked = selectedValues.includes(option[valueKey]);
|
|
return (
|
|
<div key={option[valueKey]} className="form-check">
|
|
<input
|
|
type="checkbox"
|
|
className="form-check-input"
|
|
id={`checkbox-${option[valueKey]}`}
|
|
checked={checked}
|
|
onChange={() => {
|
|
let newSelected;
|
|
if (checked) {
|
|
newSelected = selectedValues.filter(
|
|
(val) => val !== option[valueKey]
|
|
);
|
|
} else {
|
|
newSelected = [...selectedValues, option[valueKey]];
|
|
}
|
|
onChange(newSelected);
|
|
}}
|
|
/>
|
|
<label
|
|
className="form-check-label"
|
|
htmlFor={`checkbox-${option[valueKey]}`}
|
|
>
|
|
{option[labelKey] || option[valueKey]}
|
|
</label>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const ExpenseContext = createContext();
|
|
export const useExpenseContext = () => {
|
|
const context = useContext(ExpenseContext);
|
|
if (!context) {
|
|
throw new Error("useExpenseContext must be used within an ExpenseProvider");
|
|
}
|
|
return context;
|
|
}
|
|
|
|
const ExpensePage = () => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [filters,setFilter] = useState()
|
|
const IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE)
|
|
const dropdownRef = useRef(null);
|
|
const shouldCloseOnOutsideClick = useRef(false);
|
|
const selectedProjectId = useSelector(
|
|
(store) => store.localVariables.projectId
|
|
);
|
|
const [ManageExpenseModal, setManageExpenseModal] = useState({
|
|
IsOpen: null,
|
|
expenseId: null,
|
|
});
|
|
const [viewExpense, setViewExpense] = useState({
|
|
expenseId: null,
|
|
view: false,
|
|
});
|
|
const [ViewDocument, setDocumentView] = useState({
|
|
IsOpen: false,
|
|
Image: null,
|
|
});
|
|
|
|
const contextValue = {
|
|
setViewExpense,
|
|
setManageExpenseModal,
|
|
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 isValidDate = (date) => {
|
|
return date instanceof Date && !isNaN(date);
|
|
};
|
|
|
|
const setDateRange = ({ startDate, endDate }) => {
|
|
const parsedStart = new Date(startDate);
|
|
const parsedEnd = new Date(endDate);
|
|
|
|
setValue(
|
|
"startDate",
|
|
isValidDate(parsedStart) ? parsedStart.toISOString().split("T")[0] : null
|
|
);
|
|
setValue(
|
|
"endDate",
|
|
isValidDate(parsedEnd) ? parsedEnd.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 (
|
|
<ExpenseContext.Provider value={contextValue}>
|
|
<div className="container-fluid">
|
|
<Breadcrumb
|
|
data={[
|
|
{ label: "Home", link: "/" },
|
|
{ label: "Expense", link: null },
|
|
]}
|
|
/>
|
|
<div className="card my-1 text-start px-0">
|
|
<div className="card-body py-1 px-1">
|
|
<div className="row">
|
|
<div className="col-5 col-sm-4 d-flex aligin-items-center">
|
|
<div
|
|
className="dropdown d-inline-block mt-2 align-items-center"
|
|
ref={dropdownRef}
|
|
>
|
|
<i
|
|
className="bx bx-slider-alt ms-2"
|
|
role="button"
|
|
aria-expanded={isOpen}
|
|
style={{ cursor: "pointer" }}
|
|
onClick={() => setIsOpen((v) => !v)}
|
|
></i>
|
|
{isOpen && (
|
|
<div
|
|
className="dropdown-menu p-3 overflow-hidden show d-flex align-items-center"
|
|
style={{ minWidth: "500px" }}
|
|
>
|
|
<FormProvider {...methods}>
|
|
<form
|
|
className="p-2 p-sm-0"
|
|
onSubmit={handleSubmit((data) => {
|
|
onSubmit(data);
|
|
setIsOpen(false);
|
|
})}
|
|
>
|
|
<div className="w-100">
|
|
<DateRangePicker
|
|
onRangeChange={setDateRange}
|
|
endDateMode="today"
|
|
DateDifference="6"
|
|
dateFormat="DD-MM-YYYY"
|
|
/>
|
|
</div>
|
|
|
|
<div className="row g-2">
|
|
<div className="col-12 ">
|
|
<label className="form-label d-block text-secondary">
|
|
Select Status
|
|
</label>
|
|
<div className="d-flex flex-wrap">
|
|
{ExpenseStatus.map((status) => (
|
|
<Controller
|
|
key={status.id}
|
|
control={control}
|
|
name="statusIds"
|
|
render={({
|
|
field: { value = [], onChange },
|
|
}) => (
|
|
<div className="d-flex align-items-center me-4 mb-2">
|
|
<input
|
|
type="checkbox"
|
|
className="form-check-input form-check-input-sm"
|
|
value={status.id}
|
|
checked={value.includes(status.id)}
|
|
onChange={(e) => {
|
|
if (e.target.checked) {
|
|
onChange([...value, status.id]);
|
|
} else {
|
|
onChange(
|
|
value.filter(
|
|
(v) => v !== status.id
|
|
)
|
|
);
|
|
}
|
|
}}
|
|
/>
|
|
<label className="ms-2 mb-0">
|
|
{status.displayName}
|
|
</label>
|
|
</div>
|
|
)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row g-2">
|
|
<SelectMultiple
|
|
name="projectIds"
|
|
label="Select Projects"
|
|
options={projectNames}
|
|
labelKey="name"
|
|
valueKey="id"
|
|
IsLoading={projectLoading}
|
|
/>
|
|
<SelectMultiple
|
|
name="createdByIds"
|
|
label="Select creator"
|
|
options={employees}
|
|
labelKey={(item) =>
|
|
`${item.firstName} ${item.lastName}`
|
|
}
|
|
valueKey="id"
|
|
IsLoading={empLoading}
|
|
/>
|
|
<SelectMultiple
|
|
name="paidById"
|
|
label="Select Paid by"
|
|
options={employees}
|
|
labelKey={(item) =>
|
|
`${item.firstName} ${item.lastName}`
|
|
}
|
|
valueKey="id"
|
|
IsLoading={empLoading}
|
|
/>
|
|
</div>
|
|
<div className="d-flex justify-content-end py-1 gap-2">
|
|
<button
|
|
type="button"
|
|
className="btn btn-secondary btn-xs"
|
|
onClick={() => {
|
|
clearFilter()
|
|
setIsOpen(false);
|
|
}}
|
|
>
|
|
Clear
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="btn btn-primary btn-xs"
|
|
>
|
|
Apply
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</FormProvider>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="col-7 col-sm-8 text-end gap-2">
|
|
{IsCreatedAble && (
|
|
<button
|
|
type="button"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-offset="0,8"
|
|
data-bs-placement="top"
|
|
data-bs-custom-class="tooltip"
|
|
title="Add New Expense"
|
|
className={`p-1 me-2 bg-primary rounded-circle `}
|
|
onClick={() =>
|
|
setManageExpenseModal({
|
|
IsOpen: true,
|
|
expenseId: null,
|
|
})
|
|
}
|
|
>
|
|
<i className="bx bx-plus fs-4 text-white"></i>
|
|
</button>
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ExpenseList filters={filters} />
|
|
{ManageExpenseModal.IsOpen && (
|
|
<GlobalModel
|
|
isOpen={ManageExpenseModal.IsOpen}
|
|
size="lg"
|
|
closeModal={() =>
|
|
setManageExpenseModal({
|
|
IsOpen: null,
|
|
expenseId: null,
|
|
})
|
|
}
|
|
>
|
|
<ManageExpense
|
|
key={ManageExpenseModal.expenseId ?? "new"}
|
|
expenseToEdit={ManageExpenseModal.expenseId}
|
|
closeModal={() =>
|
|
setManageExpenseModal({ IsOpen: null, expenseId: null })
|
|
}
|
|
/>
|
|
</GlobalModel>
|
|
)}
|
|
|
|
{viewExpense.view && (
|
|
<GlobalModel
|
|
isOpen={viewExpense.view}
|
|
size="lg"
|
|
modalType="top"
|
|
closeModal={() =>
|
|
setViewExpense({
|
|
expenseId: null,
|
|
view: false,
|
|
})
|
|
}
|
|
>
|
|
<ViewExpense ExpenseId={viewExpense.expenseId} />
|
|
</GlobalModel>
|
|
)}
|
|
|
|
{ViewDocument.IsOpen && (
|
|
<GlobalModel
|
|
size="lg"
|
|
key={ViewDocument.IsOpen ?? "new"}
|
|
isOpen={ViewDocument.IsOpen}
|
|
closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
|
|
>
|
|
<PreviewDocument imageUrl={ViewDocument.Image} />
|
|
</GlobalModel>
|
|
)}
|
|
</div>
|
|
</ExpenseContext.Provider>
|
|
);
|
|
};
|
|
|
|
export default ExpensePage;
|