feat: borrows status filter

Author: agmmtoo

app/(protected)/borrows/page.tsx

@@ -24,6 +24,7 @@ import type { Metadata } from 'next'
 import { SITE_NAME } from '@/lib/consts'
 import { DropdownMenuBorrow } from '@/components/borrows/DropdownMenuBorrow'
 import { BtnScanReturnBorrow } from '@/components/borrows/ModalReturnBorrow'
+import { TabLink } from '@/components/borrows/TabLink'
 
 export const metadata: Metadata = {
   title: `Borrows · ${SITE_NAME}`,
@@ -33,15 +34,17 @@ export default async function Borrows({
   searchParams,
 }: {
   searchParams: Promise<{
-    skip?: number
-    limit?: number
+    skip?: string
+    limit?: string
     library_id?: string
+    status?: string
   }>
 }) {
   const sp = await searchParams
   const skip = Number(sp?.skip ?? 0)
   const limit = Number(sp?.limit ?? 20)
   const library_id = sp?.library_id
+  const status = sp?.status as 'active' | 'overdue' | 'returned'
 
   const headers = await Verify({
     from: '/borrows',
@@ -53,6 +56,7 @@ export default async function Borrows({
       sort_in: 'desc',
       limit: limit,
       skip: skip,
+      status,
       ...(library_id ? { library_id } : {}),
     },
     {
@@ -66,8 +70,16 @@ export default async function Borrows({
 
   const prevSkip = skip - limit > 0 ? skip - limit : 0
 
-  const nextURL = `/borrows?skip=${skip + limit}&limit=${limit}`
-  const prevURL = `/borrows?skip=${prevSkip}&limit=${limit}`
+  // Build next and previous URLs, preserving existing search params except skip/limit
+  const nextParams = new URLSearchParams(sp)
+  nextParams.set('skip', String(skip + limit))
+  nextParams.set('limit', String(limit))
+  const nextURL = `/borrows?${nextParams.toString()}`
+
+  const prevParams = new URLSearchParams(sp)
+  prevParams.set('skip', String(prevSkip))
+  prevParams.set('limit', String(limit))
+  const prevURL = `/borrows?${prevParams.toString()}`
 
   return (
     <div className="space-y-4">
@@ -107,6 +119,17 @@ export default async function Borrows({
           </div>
         </div>
       </nav>
+      <div className="">
+        <TabLink
+          tabs={[
+            { name: 'All', href: '/borrows' },
+            { name: 'Active', href: '/borrows?status=active' },
+            { name: 'Overdue', href: '/borrows?status=overdue' },
+            { name: 'Returned', href: '/borrows?status=returned' },
+          ]}
+          activeHref={`/borrows${status ? `?status=${status}` : ''}`}
+        />
+      </div>
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
         {res.data.map((borrow) => (
           <ListCardBorrow key={borrow.id} borrow={borrow} />

components/borrows/TabLink.tsx

@@ -0,0 +1,32 @@
+import { cn } from '@/lib/utils'
+import { ClassValue } from 'clsx'
+import Link from 'next/link'
+
+export const TabLink: React.FC<{
+  className?: ClassValue
+  tabs: { name: string; href: string }[]
+  activeHref: string
+}> = ({ tabs, className, activeHref }) => {
+  return (
+    <div
+      className={cn(
+        'inline-flex gap-2 w-fit items-center justify-center rounded-lg bg-muted text-muted-foreground p-[3px]',
+        className
+      )}
+    >
+      {tabs.map(({ name, href }) => (
+        <Link
+          replace
+          key={href}
+          href={href}
+          className={cn(
+            'px-2 py-1 text-center text-sm font-medium text-foreground flex items-center justify-center min-w-[80px]', // min-w ensures same width
+            activeHref === href && 'bg-background rounded-md shadow-sm'
+          )}
+        >
+          {name}
+        </Link>
+      ))}
+    </div>
+  )
+}

components/ui/pagination.tsx

@@ -7,6 +7,7 @@ import {
 
 import { cn } from '@/lib/utils'
 import { Button, buttonVariants } from '@/components/ui/button'
+import Link from 'next/link'
 
 function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
   return (
@@ -40,7 +41,7 @@ function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
 type PaginationLinkProps = {
   isActive?: boolean
 } & Pick<React.ComponentProps<typeof Button>, 'size'> &
-  React.ComponentProps<'a'>
+  React.ComponentProps<typeof Link>
 
 function PaginationLink({
   className,
@@ -49,7 +50,7 @@ function PaginationLink({
   ...props
 }: PaginationLinkProps) {
   return (
-    <a
+    <Link
       aria-current={isActive ? 'page' : undefined}
       data-slot="pagination-link"
       data-active={isActive}

lib/api/borrow.ts

@@ -9,6 +9,7 @@ type GetListBorrowsQuery = QueryParams<
     is_active?: boolean
     is_expired?: boolean
     library_id?: string
+    status?: 'active' | 'overdue' | 'returned'
   }
 >
 type GetListBorrowsResponse = Promise<ResList<Borrow>>