@@ -21,6 +21,8 @@ import type { Metadata } from 'next'
2121import { SITE_NAME } from '@/lib/consts'
2222import { TabLink } from '@/components/borrows/TabLink'
2323import { Badge } from '@/components/ui/badge'
24+ import { ModelFilter } from '@/components/common/ModelFilter'
25+ import { BookFilter , DateFilter } from '@/components/common/filters'
2426
2527export const metadata : Metadata = {
2628 title : `Borrows · ${ SITE_NAME } ` ,
@@ -34,13 +36,23 @@ export default async function Borrows({
3436 limit ?: string
3537 library_id ?: string
3638 status ?: string
39+ book_id ?: string
40+ borrowed_at ?: string
41+ due_at ?: string
42+ returned_at ?: string
43+ lost_at ?: string
3744 } >
3845} ) {
3946 const sp = await searchParams
4047 const skip = Number ( sp ?. skip ?? 0 )
4148 const limit = Number ( sp ?. limit ?? 20 )
4249 const library_id = sp ?. library_id
4350 const status = sp ?. status as 'active' | 'overdue' | 'returned' | 'lost'
51+ const book_id = sp ?. book_id
52+ const borrowed_at = sp ?. borrowed_at
53+ const due_at = sp ?. due_at
54+ const returned_at = sp ?. returned_at
55+ const lost_at = sp ?. lost_at
4456
4557 const headers = await Verify ( {
4658 from : '/borrows' ,
@@ -57,6 +69,11 @@ export default async function Borrows({
5769 status,
5870 ...( library_id ? { library_id } : { } ) ,
5971 user_id : claims ?. librarease ?. id ,
72+ book_id,
73+ borrowed_at,
74+ due_at,
75+ returned_at,
76+ lost_at,
6077 } ,
6178 {
6279 headers,
@@ -105,16 +122,34 @@ export default async function Borrows({
105122 </ div >
106123 </ nav >
107124
108- < TabLink
109- tabs = { [
110- { name : 'All' , href : '/borrows' } ,
111- { name : 'Active' , href : '/borrows?status=active' } ,
112- { name : 'Overdue' , href : '/borrows?status=overdue' } ,
113- { name : 'Returned' , href : '/borrows?status=returned' } ,
114- { name : 'Lost' , href : '/borrows?status=lost' } ,
115- ] }
116- activeHref = { `/borrows${ status ? `?status=${ status } ` : '' } ` }
117- />
125+ < div className = "flex flex-col gap-2 md:flex-row justify-between" >
126+ < TabLink
127+ tabs = { [
128+ { name : 'All' , href : '/borrows' } ,
129+ { name : 'Active' , href : '/borrows?status=active' } ,
130+ { name : 'Overdue' , href : '/borrows?status=overdue' } ,
131+ { name : 'Returned' , href : '/borrows?status=returned' } ,
132+ { name : 'Lost' , href : '/borrows?status=lost' } ,
133+ ] }
134+ activeHref = { `/borrows${ status ? `?status=${ status } ` : '' } ` }
135+ />
136+
137+ < ModelFilter
138+ filterKeys = { [
139+ 'book_id' ,
140+ 'borrowed_at' ,
141+ 'due_at' ,
142+ 'returned_at' ,
143+ 'lost_at' ,
144+ ] }
145+ >
146+ < BookFilter />
147+ < DateFilter filterKey = "borrowed_at" placeholder = "Borrow Date" />
148+ < DateFilter filterKey = "due_at" placeholder = "Due Date" />
149+ < DateFilter filterKey = "returned_at" placeholder = "Returned Date" />
150+ < DateFilter filterKey = "lost_at" placeholder = "Lost Date" />
151+ </ ModelFilter >
152+ </ div >
118153
119154 < div className = "grid gap-4 md:grid-cols-2 lg:grid-cols-3" >
120155 { res . data . map ( ( borrow , idx ) => (
0 commit comments