fixed collection header ui
This commit is contained in:
parent
a5329f1a2a
commit
18e739f3ab
@ -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}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user