feat: borrow list by v0

Author: agmmtoo

app/(protected)/borrows/page.tsx

@@ -8,25 +8,44 @@ import {
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb'
 import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
 import {
   Pagination,
   PaginationContent,
   PaginationItem,
   PaginationNext,
   PaginationPrevious,
 } from '@/components/ui/pagination'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
+
 import { getListBorrows } from '@/lib/api/borrow'
+import { Borrow } from '@/lib/types/borrow'
+import { Book, Calendar, LibraryIcon, User } from 'lucide-react'
 import { cookies } from 'next/headers'
 import Link from 'next/link'
 
+const formatDate = (date: string): string => {
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+  return formatter.format(new Date(date))
+}
+
+const getBorrowStatus = (borrow: Borrow) => {
+  const now = new Date()
+  const due = new Date(borrow.due_at)
+  if (borrow.returned_at) return 'returned'
+  return now > due ? 'overdue' : 'active'
+}
+
 export default async function Borrows({
   searchParams,
 }: {
@@ -87,39 +106,72 @@ export default async function Borrows({
           </BreadcrumbList>
         </Breadcrumb>
         <Button asChild>
-          <Link href="/borrows/new">New Borrow</Link>
+          <Link href="/borrows/new">
+            <Book className="mr-2 h-4 w-4" />
+            New Borrow
+          </Link>
         </Button>
       </div>
-
-      <Table>
-        {/* <TableCaption>List of books available in the library.</TableCaption> */}
-        <TableHeader>
-          <TableRow>
-            <TableHead>Book</TableHead>
-            <TableHead>Date</TableHead>
-            <TableHead>User</TableHead>
-            <TableHead>Due</TableHead>
-            <TableHead>Title</TableHead>
-            <TableHead>Library</TableHead>
-            <TableHead>Returned Date</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {res.data.map((b) => (
-            <TableRow key={b.id}>
-              <TableCell>{b.book.code}</TableCell>
-              <TableCell>{b.borrowed_at}</TableCell>
-              <TableCell>{b.subscription.user.name}</TableCell>
-              <TableCell>{b.due_at}</TableCell>
-              <TableCell>{b.book.title}</TableCell>
-              <TableCell>{b.subscription.membership.library.name}</TableCell>
-              <TableCell>
-                {b.returned_at ?? <Badge variant="outline">Active</Badge>}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {res.data.map((borrow) => (
+          <Card key={borrow.id} className="relative">
+            <CardHeader>
+              <div className="flex justify-between items-start">
+                <div>
+                  <CardTitle className="text-lg">{borrow.book.title}</CardTitle>
+                  <CardDescription>{borrow.book.code}</CardDescription>
+                </div>
+                <Badge
+                  variant={
+                    getBorrowStatus(borrow) === 'overdue'
+                      ? 'destructive'
+                      : getBorrowStatus(borrow) === 'returned'
+                        ? 'secondary'
+                        : 'default'
+                  }
+                  className="capitalize"
+                >
+                  {getBorrowStatus(borrow)}
+                </Badge>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div className="flex items-center gap-2 text-sm">
+                <User className="h-4 w-4 text-muted-foreground" />
+                <span>{borrow.subscription.user.name}</span>
+              </div>
+              <div className="flex items-center gap-2 text-sm">
+                <LibraryIcon className="h-4 w-4 text-muted-foreground" />
+                <span>{borrow.subscription.membership.library.name}</span>
+              </div>
+              <div className="flex items-center gap-2 text-sm">
+                <Calendar className="h-4 w-4 text-muted-foreground" />
+                <div className="flex flex-col">
+                  <span>Borrowed: {formatDate(borrow.borrowed_at)}</span>
+                  <span
+                    className={`${
+                      getBorrowStatus(borrow) === 'overdue'
+                        ? 'text-destructive'
+                        : ''
+                    }`}
+                  >
+                    Due: {formatDate(borrow.due_at)}
+                  </span>
+                </div>
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button
+                variant="outline"
+                className="w-full"
+                // onClick={() => alert(`Return book: ${borrow.book_id}`)}
+              >
+                Return Book
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
 
       <Pagination>
         <PaginationContent>