Skip to content

Commit 7075bfa

Browse files
agmmtooagmmtoo
committed
feat: tailwind v4 & previous borrow list in borrow detail
1 parent 32030a7 commit 7075bfa

38 files changed

+580
-842
lines changed

‎app/(protected)/books/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export default async function Books({
6565

6666
return (
6767
<div>
68-
<nav className="backdrop-blur sticky top-0 z-10">
68+
<nav className="backdrop-blur-sm sticky top-0 z-10">
6969
<h1 className="text-2xl font-semibold">Books</h1>
7070
<div className="flex justify-between items-center">
7171
<Breadcrumb>

‎app/(protected)/borrows/[id]/page.tsx‎

Lines changed: 81 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from '@/components/ui/breadcrumb'
99
import Link from 'next/link'
1010
import { Verify } from '@/lib/firebase/firebase'
11-
import { getBorrow } from '@/lib/api/borrow'
11+
import { getBorrow, getListBorrows } from '@/lib/api/borrow'
1212
import { Badge } from '@/components/ui/badge'
1313
import {
1414
formatDate,
@@ -36,6 +36,7 @@ import {
3636
} from 'lucide-react'
3737
import clsx from 'clsx'
3838
import { differenceInDays } from 'date-fns'
39+
import { Borrow } from '@/lib/types/borrow'
3940

4041
export default async function BorrowDetailsPage({
4142
params,
@@ -57,9 +58,29 @@ export default async function BorrowDetailsPage({
5758

5859
// const progressPercent = getBorrowProgressPercent(borrowRes.data)
5960

60-
// const cookieStore = await cookies()
61-
// const sessionName = process.env.SESSION_COOKIE_NAME as string
62-
// const session = cookieStore.get(sessionName)
61+
const headers = await Verify({
62+
from: '/borrows',
63+
})
64+
65+
let prevBorrows: Borrow[] = []
66+
const [prevBorrowsRes] = await Promise.all([
67+
getListBorrows(
68+
{
69+
subscription_id: borrowRes.data.subscription.id,
70+
sort_in: 'asc',
71+
limit: 20,
72+
},
73+
{
74+
headers,
75+
}
76+
),
77+
])
78+
79+
if ('error' in prevBorrowsRes) {
80+
prevBorrows = []
81+
} else {
82+
prevBorrows = prevBorrowsRes.data
83+
}
6384

6485
return (
6586
<div className="space-y-4">
@@ -128,15 +149,15 @@ export default async function BorrowDetailsPage({
128149
<CardHeader>
129150
<CardTitle>User Information</CardTitle>
130151
</CardHeader>
131-
<CardContent className="grid gap-2 grid-cols-[max-content,1fr] items-center">
132-
<User className="h-4 w-4" />
152+
<CardContent className="grid gap-2 grid-cols-[max-content_1fr] items-center">
153+
<User className="size-4" />
133154
<p>
134155
<span className="font-medium">Name:&nbsp;</span>
135156
{/* <Link href={`/users/${borrowRes.data.subscription.user.id}`}> */}
136157
{borrowRes.data.subscription.user.name}
137158
{/* </Link> */}
138159
</p>
139-
<Library className="h-4 w-4" />
160+
<Library className="size-4" />
140161
<p>
141162
<span className="font-medium">Library:&nbsp;</span>
142163
<Link
@@ -146,12 +167,12 @@ export default async function BorrowDetailsPage({
146167
{borrowRes.data.subscription.membership.library.name}
147168
</Link>
148169
</p>
149-
{/* <CreditCard className="h-4 w-4" />
170+
{/* <CreditCard className="size-4" />
150171
<p>
151172
<span className="font-medium">Membership:&nbsp;</span>
152173
{borrowRes.data.subscription.membership.name}
153174
</p>
154-
<Clock className="h-4 w-4" />
175+
<Clock className="size-4" />
155176
<p>
156177
<span className="font-medium">Expires:&nbsp;</span>
157178
{formatDate(borrowRes.data.subscription.expires_at)}
@@ -163,8 +184,8 @@ export default async function BorrowDetailsPage({
163184
<CardHeader>
164185
<CardTitle>Borrow Details</CardTitle>
165186
</CardHeader>
166-
<CardContent className="grid gap-2 grid-cols-[max-content,1fr] items-center">
167-
<UserCog className="h-4 w-4 text-muted-foreground" />
187+
<CardContent className="grid gap-2 grid-cols-[max-content_1fr] items-center">
188+
<UserCog className="size-4 text-muted-foreground" />
168189
<p>
169190
<span className="font-medium">Staff:&nbsp;</span>
170191
{borrowRes.data.staff.name}
@@ -174,14 +195,14 @@ export default async function BorrowDetailsPage({
174195
: null}
175196
</p>
176197

177-
<Calendar className="h-4 w-4 text-muted-foreground" />
198+
<Calendar className="size-4 text-muted-foreground" />
178199
<p>
179200
<span className="font-medium">Borrowed:&nbsp;</span>
180201
{formatDate(borrowRes.data.borrowed_at)}
181202
</p>
182203
{isDue ? (
183204
<>
184-
<Gavel className="h-4 w-4 text-muted-foreground" />
205+
<Gavel className="size-4 text-muted-foreground" />
185206
<p>
186207
<span className="font-medium">Fine Expected:&nbsp;</span>
187208
{differenceInDays(
@@ -202,23 +223,23 @@ export default async function BorrowDetailsPage({
202223
(borrowRes.data.subscription.fine_per_day ?? 0) +
203224
' Pts'}
204225
</p>
205-
<CalendarX className="h-4 w-4 text-destructive" />
226+
<CalendarX className="size-4 text-destructive" />
206227
</>
207228
) : (
208-
<CalendarClock className="h-4 w-4 text-muted-foreground" />
229+
<CalendarClock className="size-4 text-muted-foreground" />
209230
)}
210231
<p className={clsx({ 'text-destructive': isDue })}>
211232
<span className="font-medium">Due:&nbsp;</span>
212233
{formatDate(borrowRes.data.due_at)}
213234
</p>
214235
{borrowRes.data.returning ? (
215236
<>
216-
<CalendarCheck className="h-4 w-4 text-muted-foreground" />
237+
<CalendarCheck className="size-4 text-muted-foreground" />
217238
<p>
218239
<span className="font-medium">Returned:&nbsp;</span>
219240
{formatDate(borrowRes.data.returning.returned_at)}
220241
</p>
221-
<Gavel className="h-4 w-4 text-muted-foreground" />
242+
<Gavel className="size-4 text-muted-foreground" />
222243
<p>
223244
<span className="font-medium">Fine Received:&nbsp;</span>
224245
{borrowRes.data.returning.fine ?? '-'} Pts
@@ -241,10 +262,7 @@ export default async function BorrowDetailsPage({
241262
<Card>
242263
<CardHeader>
243264
<div className="flex justify-between items-center">
244-
<CardTitle className="text-lg line-clamp-2">
245-
Membership Information
246-
</CardTitle>
247-
265+
<CardTitle>Membership</CardTitle>
248266
<Badge
249267
variant={
250268
isSubscriptionActive(borrowRes.data.subscription)
@@ -257,8 +275,8 @@ export default async function BorrowDetailsPage({
257275
</Badge>
258276
</div>
259277
</CardHeader>
260-
<CardContent className="grid gap-2 grid-cols-[max-content,1fr] md:grid-cols-[max-content,1fr,max-content,1fr] items-center">
261-
<CreditCard className="h-4 w-4" />
278+
<CardContent className="grid gap-2 grid-cols-[max-content_1fr] md:grid-cols-[max-content_1fr_max-content_1fr] items-center">
279+
<CreditCard className="size-4" />
262280
<p>
263281
<span className="font-medium">Membership:&nbsp;</span>
264282
<Link
@@ -268,39 +286,73 @@ export default async function BorrowDetailsPage({
268286
{borrowRes.data.subscription.membership.name}
269287
</Link>
270288
</p>
271-
<Clock className="h-4 w-4" />
289+
<Clock className="size-4" />
272290
<p>
273291
<span className="font-medium">Expires:&nbsp;</span>
274292
{formatDate(borrowRes.data.subscription.expires_at)}
275293
</p>
276-
<CalendarClock className="h-4 w-4" />
294+
<CalendarClock className="size-4" />
277295
<p>
278296
<span className="font-medium">Borrow Period:&nbsp;</span>
279297
{borrowRes.data.subscription.loan_period} D
280298
</p>
281-
<Tally5 className="h-4 w-4" />
299+
<Tally5 className="size-4" />
282300
<p>
283301
<span className="font-medium">Usage Limit:&nbsp;</span>
284302
{borrowRes.data.subscription.usage_limit ?? '-'}
285303
</p>
286-
<Book className="h-4 w-4" />
304+
<Book className="size-4" />
287305
<p>
288306
<span className="font-medium">Active Borrow Limit:&nbsp;</span>
289307
{borrowRes.data.subscription.active_loan_limit ?? '-'}
290308
</p>
291-
<Gavel className="h-4 w-4" />
309+
<Gavel className="size-4" />
292310
<p>
293311
<span className="font-medium">Fine per Day:&nbsp;</span>
294312
{borrowRes.data.subscription.fine_per_day ?? '-'} Pts
295313
</p>
296-
<Calendar className="h-4 w-4" />
314+
<Calendar className="size-4" />
297315
<p>
298316
<span className="font-medium">Purchased At:&nbsp;</span>
299317
{formatDate(borrowRes.data.subscription.created_at)}
300318
</p>
301319
</CardContent>
302320
</Card>
303321

322+
{prevBorrows.length > 0 && (
323+
<Card>
324+
<CardHeader>
325+
<CardTitle>Previous Borrows</CardTitle>
326+
</CardHeader>
327+
<CardContent className="flex items-end">
328+
{prevBorrows.map((b) => (
329+
<Link
330+
href={`/borrows/${b.id}`}
331+
key={b.id}
332+
className={clsx(
333+
'relative left-0 transition-all not-first-of-type:-ml-12 brightness-75',
334+
'hover:transition-all hover:-translate-y-4 hover:transform-none hover:brightness-100',
335+
'peer peer-hover:left-12 peer-hover:transition-all',
336+
'[transform:perspective(800px)_rotateY(20deg)]',
337+
{
338+
'z-10 -translate-y-4 brightness-100 transform-none':
339+
b.id === id,
340+
}
341+
)}
342+
>
343+
<Image
344+
src={b.book?.cover ?? '/book-placeholder.svg'}
345+
alt={b.book.title + "'s cover"}
346+
width={160}
347+
height={160}
348+
className="shadow-md rounded-lg w-40 h-auto place-self-center row-span-2"
349+
/>
350+
</Link>
351+
))}
352+
</CardContent>
353+
</Card>
354+
)}
355+
304356
{!borrowRes.data.returning && (
305357
<div className="bottom-0 sticky py-2">
306358
<BtnReturnBook

‎app/(protected)/borrows/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export default async function Borrows({
6969

7070
return (
7171
<div className="space-y-4">
72-
<nav className="backdrop-blur sticky top-0 z-10">
72+
<nav className="backdrop-blur-sm sticky top-0 z-10">
7373
<h1 className="text-2xl font-semibold">Borrows</h1>
7474
<div className="flex justify-between items-center">
7575
<Breadcrumb>
@@ -88,7 +88,7 @@ export default async function Borrows({
8888
</Breadcrumb>
8989
<Button asChild>
9090
<Link href="/borrows/new">
91-
<Book className="mr-2 h-4 w-4" />
91+
<Book className="mr-2 size-4" />
9292
New Borrow
9393
</Link>
9494
</Button>

‎app/(protected)/memberships/new/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ export default function ComboboxForm() {
185185
{field.value
186186
? libs.find((lib) => lib.id === field.value)?.name
187187
: 'Select Library'}
188-
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
188+
<ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
189189
</Button>
190190
</FormControl>
191191
</PopoverTrigger>

‎app/(protected)/subscriptions/new/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ export default function ComboboxForm() {
208208
? users.find((user) => user.id === field.value)
209209
?.name
210210
: 'Select user'}
211-
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
211+
<ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
212212
</Button>
213213
</FormControl>
214214
</PopoverTrigger>
@@ -274,7 +274,7 @@ export default function ComboboxForm() {
274274
{field.value
275275
? libs.find((lib) => lib.id === field.value)?.name
276276
: 'Select Library'}
277-
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
277+
<ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
278278
</Button>
279279
</FormControl>
280280
</PopoverTrigger>
@@ -340,7 +340,7 @@ export default function ComboboxForm() {
340340
{field.value
341341
? mems.find((mem) => mem.id === field.value)?.name
342342
: 'Select membership'}
343-
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
343+
<ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
344344
</Button>
345345
</FormControl>
346346
</PopoverTrigger>

‎app/(protected)/subscriptions/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export default async function Subscriptions({
7676

7777
return (
7878
<div className="space-y-4">
79-
<nav className="backdrop-blur sticky top-0 z-10">
79+
<nav className="backdrop-blur-sm sticky top-0 z-10">
8080
<h1 className="text-2xl font-semibold">Subscriptions</h1>
8181
<div className="flex justify-between items-center">
8282
<Breadcrumb>

0 commit comments

Comments
 (0)