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

In ExpensePanel add new Toggle button.

Browse Source
This commit is contained in:
Kartik Sharma 2025-09-23 16:35:48 +05:30
parent 4683eff749
commit d87dae4799
1 changed files with 29 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,7 +31,6 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
].sort((a, b) => a.name.localeCompare(b.name)); ].sort((a, b) => a.name.localeCompare(b.name));
}, []); }, []);
const [selectedGroup, setSelectedGroup] = useState(groupByList[0]); const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
const [resetKey, setResetKey] = useState(0); const [resetKey, setResetKey] = useState(0);
@ -40,7 +39,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
defaultValues: defaultFilter, defaultValues: defaultFilter,
}); });
const { control, register, handleSubmit, reset, watch } = methods; const { control, handleSubmit, reset, setValue, watch } = methods;
const isTransactionDate = watch("isTransactionDate"); const isTransactionDate = watch("isTransactionDate");
const closePanel = () => { const closePanel = () => {
@ -86,18 +85,29 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
<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">
<div className="d-flex align-items-center mb-2"> <div className="d-flex align-items-center mb-2">
<label className="form-label me-2">Choose Date:</label> <label className="form-label me-2">Sort By:</label>
<div className="form-check form-switch m-0"> <div className="d-inline-flex border rounded-pill mb-1 overflow-hidden shadow-none">
<input <button
className="form-check-input" type="button"
type="checkbox" className={`btn px-2 py-1 rounded-0 text-tiny ${isTransactionDate
id="switchOption1" ? "active btn-secondary text-white"
{...register("isTransactionDate")} : ""
/> }`}
onClick={() => setValue("isTransactionDate", true)}
>
Transaction
</button>
<button
type="button"
className={`btn px-2 py-1 rounded-0 text-tiny ${!isTransactionDate
? "active btn-secondary text-white"
: ""
}`}
onClick={() => setValue("isTransactionDate", false)}
>
Submitted
</button>
</div> </div>
<label className="form-label mb-0 ms-2">
{isTransactionDate ? "Submitted": "Transaction" }
</label>
</div> </div>
<DateRangePicker1 <DateRangePicker1