Refactor_Expenses #321

Merged
pramod.mahajan merged 249 commits from Refactor_Expenses into hotfix/MasterActivity 2025-08-01 13:14:59 +00:00
Showing only changes of commit d6ead0fd4c - Show all commits

View File

@ -2,10 +2,7 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { FormProvider, useForm, Controller } from "react-hook-form"; import { FormProvider, useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { import { defaultFilter, SearchSchema } from "./ExpenseSchema";
defaultFilter,
SearchSchema,
} from "./ExpenseSchema";
import DateRangePicker from "../common/DateRangePicker"; import DateRangePicker from "../common/DateRangePicker";
import SelectMultiple from "../common/SelectMultiple"; import SelectMultiple from "../common/SelectMultiple";
@ -16,7 +13,9 @@ import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
const ExpenseFilterPanel = ({ onApply }) => { const ExpenseFilterPanel = ({ onApply }) => {
const selectedProjectId = useSelector((store) => store.localVariables.projectId); const selectedProjectId = useSelector(
(store) => store.localVariables.projectId
);
const { projectNames, loading: projectLoading } = useProjectName(); const { projectNames, loading: projectLoading } = useProjectName();
const { ExpenseStatus = [] } = useExpenseStatus(); const { ExpenseStatus = [] } = useExpenseStatus();
@ -65,8 +64,8 @@ const ExpenseFilterPanel = ({ onApply }) => {
return ( return (
<FormProvider {...methods}> <FormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start"> <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
<div className="mb-3 w-100"> <div className="mb-3 w-100">
<label className="form-label">Created Date</label>
<DateRangePicker <DateRangePicker
onRangeChange={setDateRange} onRangeChange={setDateRange}
endDateMode="today" endDateMode="today"
@ -75,12 +74,10 @@ const ExpenseFilterPanel = ({ onApply }) => {
/> />
</div> </div>
<div className="row g-2"> <div className="row g-2">
<SelectMultiple <SelectMultiple
name="projectIds" name="projectIds"
label="Select Projects" label="Projects : "
options={projectNames} options={projectNames}
labelKey="name" labelKey="name"
valueKey="id" valueKey="id"
@ -88,7 +85,7 @@ const ExpenseFilterPanel = ({ onApply }) => {
/> />
<SelectMultiple <SelectMultiple
name="createdByIds" name="createdByIds"
label="Select Creator" label="Submitted By : "
options={employees} options={employees}
labelKey={(item) => `${item.firstName} ${item.lastName}`} labelKey={(item) => `${item.firstName} ${item.lastName}`}
valueKey="id" valueKey="id"
@ -96,48 +93,52 @@ const ExpenseFilterPanel = ({ onApply }) => {
/> />
<SelectMultiple <SelectMultiple
name="paidById" name="paidById"
label="Select Paid By" label="Paid By : "
options={employees} options={employees}
labelKey={(item) => `${item.firstName} ${item.lastName}`} labelKey={(item) => `${item.firstName} ${item.lastName}`}
valueKey="id" valueKey="id"
IsLoading={empLoading} IsLoading={empLoading}
/> />
<div className="mb-3"> <div className="mb-3">
<label className="form-label ">Select Status</label> <label className="form-label ">Status : </label>
<div className="d-flex flex-wrap"> <div className="d-flex flex-wrap">
{ExpenseStatus.map((status) => ( {ExpenseStatus.map((status) => (
<Controller <Controller
key={status.id} key={status.id}
control={control} control={control}
name="statusIds" name="statusIds"
render={({ field: { value = [], onChange } }) => ( render={({ field: { value = [], onChange } }) => (
<div className="d-flex align-items-center me-3 mb-2"> <div className="d-flex align-items-center me-3 mb-2">
<input <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"
value={status.id} value={status.id}
checked={value.includes(status.id)} checked={value.includes(status.id)}
onChange={(e) => { onChange={(e) => {
const checked = e.target.checked; const checked = e.target.checked;
onChange( onChange(
checked checked
? [...value, status.id] ? [...value, status.id]
: value.filter((v) => v !== status.id) : value.filter((v) => v !== status.id)
); );
}} }}
/> />
<label className="ms-2 mb-0">{status.displayName}</label> <label className="ms-2 mb-0">{status.displayName}</label>
</div> </div>
)} )}
/> />
))} ))}
</div>
</div> </div>
</div> </div>
</div>
<div className="d-flex justify-content-end py-3 gap-2"> <div className="d-flex justify-content-end py-3 gap-2">
<button type="button" className="btn btn-secondary btn-xs" onClick={onClear}> <button
type="button"
className="btn btn-secondary btn-xs"
onClick={onClear}
>
Clear Clear
</button> </button>
<button type="submit" className="btn btn-primary btn-xs"> <button type="submit" className="btn btn-primary btn-xs">