fixed collection header ui

This commit is contained in:
pramod.mahajan 2025-11-21 14:51:31 +05:30
parent a5329f1a2a
commit 18e739f3ab

View File

@ -116,13 +116,13 @@ const CollectionPage = () => {
/> />
<div className="card my-3 py-2 px-sm-4 px-2"> <div className="card my-3 py-2 px-sm-4 px-2">
<div className="row align-items-center mx-0"> <div className="row align-items-center gap-sm-2 gap-md-0 mx-0">
{/* Left side: Date Picker + Show Pending (stacked on mobile) */} <div className="col-12 col-md-4 d-flex flex-column flex-md-row flex-wrap align-items-start">
<div className="col-12 col-md-6 d-flex flex-column flex-md-row flex-wrap align-items-start">
<div className="d-inline-flex border rounded-pill overflow-hidden shadow-none"> <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
<button <button
type="button" type="button"
className={`btn px-2 py-1 rounded-0 text-tiny ${!showPending ? "btn-primary text-white" : "" className={`btn px-2 py-1 rounded-0 text-tiny ${
!showPending ? "btn-primary text-white" : ""
}`} }`}
onClick={() => setShowPending(false)} onClick={() => setShowPending(false)}
> >
@ -130,7 +130,8 @@ const CollectionPage = () => {
</button> </button>
<button <button
type="button" type="button"
className={`btn px-2 py-1 rounded-0 text-tiny ${showPending ? "btn-primary text-white" : "" className={`btn px-2 py-1 rounded-0 text-tiny ${
showPending ? "btn-primary text-white" : ""
}`} }`}
onClick={() => setShowPending(true)} onClick={() => setShowPending(true)}
> >
@ -139,37 +140,39 @@ const CollectionPage = () => {
</div> </div>
</div> </div>
{/* Right side: Search + Add Button */} <div className="col-12 col-sm-8 d-block d-sm-flex justify-content-end ga-2 align-items-center gap-2">
<div className="col-12 col-sm-6 d-flex justify-content-end align-items-center gap-2">
<FormProvider {...methods}>
<DateRangePicker1 howManyDay={180} startField="fromDate"
endField="toDate" />
</FormProvider>
<input <input
type="search" type="search"
value={searchText} value={searchText}
onChange={(e) => setSearchText(e.target.value)} onChange={(e) => setSearchText(e.target.value)}
placeholder="Search Collection" placeholder="Search Collection"
className="form-control form-control-sm w-auto" className="form-control form-control-sm mt-2 mt-sm-0"
/> />
<div className="d-flex justify-content-between justify-content-sm-between mt-2 mt-sm-0">
<FormProvider {...methods} className="me-3">
<DateRangePicker1
howManyDay={180}
startField="fromDate"
endField="toDate"
/>
</FormProvider>
{(canCreate || isAdmin) && ( {(canCreate || isAdmin) && (
<button <button
className="btn btn-sm btn-primary" className="btn btn-sm btn-primary ms-sm-2"
type="button" type="button"
onClick={() => onClick={() =>
setCollection({ isOpen: true, invoiceId: null }) setCollection({ isOpen: true, invoiceId: null })
} }
> >
<i className="bx bx-plus-circle me-2"></i> <i className="bx bx-plus-circle me-2"></i>
<span className="d-none d-md-inline-block"> <span className="d-none d-md-inline-block">Collection</span>
Add New Collection
</span>
</button> </button>
)} )}
</div> </div>
</div> </div>
</div> </div>
</div>
<CollectionList <CollectionList
fromDate={fromDate} fromDate={fromDate}