admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

added label for filter fields

Browse Source
This commit is contained in:
pramod mahajan 2025-07-30 14:21:32 +05:30
parent 8fa27b8d06
commit d6ead0fd4c
1 changed files with 43 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/Expenses/ExpenseFilterPanel.jsx
View File

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