Skip to content

Commit f72f283

Browse files
agmmtooagmmtoo
committed
feat: subscription detail
1 parent 05aeea6 commit f72f283

File tree

6 files changed

+220
-197
lines changed

6 files changed

+220
-197
lines changed

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

Lines changed: 122 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,27 @@ import {
99
import Link from 'next/link'
1010
import { Verify } from '@/lib/firebase/firebase'
1111
import { Badge } from '@/components/ui/badge'
12-
import { getSubscriptionStatus } from '@/lib/utils'
13-
import { Carduser } from '@/components/users/CardUser'
14-
import { Cardsubscription } from '@/components/subscriptions/CardSubscription'
15-
import { CardMembership } from '@/components/memberships/CardMembership'
12+
import {
13+
formatDate,
14+
getSubscriptionStatus,
15+
isSubscriptionActive,
16+
} from '@/lib/utils'
1617
import { getSubscription } from '@/lib/api/subscription'
18+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
19+
import {
20+
Book,
21+
Calendar,
22+
CalendarClock,
23+
CircleDollarSign,
24+
Clock,
25+
CreditCard,
26+
Gavel,
27+
Library,
28+
Mail,
29+
Tally5,
30+
User,
31+
} from 'lucide-react'
32+
import { formatDistanceToNowStrict } from 'date-fns'
1733

1834
export default async function SubscriptionDetailsPage({
1935
params,
@@ -73,10 +89,108 @@ export default async function SubscriptionDetailsPage({
7389
</div>
7490
</nav>
7591

76-
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
77-
<Carduser user={subsRes.data.user} />
78-
<Cardsubscription subscription={subsRes.data} />
79-
<CardMembership membership={subsRes.data.membership} />
92+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
93+
<Card className="row-span-2">
94+
<CardHeader>
95+
<div className="flex justify-between items-center">
96+
<CardTitle>Subscription Details</CardTitle>
97+
<Badge
98+
variant={
99+
isSubscriptionActive(subsRes.data) ? 'default' : 'secondary'
100+
}
101+
className="capitalize"
102+
>
103+
{getSubscriptionStatus(subsRes.data)}
104+
</Badge>
105+
</div>
106+
</CardHeader>
107+
<CardContent className="grid gap-2 grid-cols-[max-content_1fr] items-center">
108+
<CalendarClock className="size-4" />
109+
<p>
110+
<span className="font-medium">Borrow Period:&nbsp;</span>
111+
{subsRes.data.loan_period} D
112+
</p>
113+
<Tally5 className="size-4" />
114+
<p>
115+
<span className="font-medium">Usage Limit:&nbsp;</span>
116+
{subsRes.data.usage_limit ?? '-'}
117+
</p>
118+
<Book className="size-4" />
119+
<p>
120+
<span className="font-medium">Active Borrow Limit:&nbsp;</span>
121+
{subsRes.data.active_loan_limit ?? '-'}
122+
</p>
123+
<Gavel className="size-4" />
124+
<p>
125+
<span className="font-medium">Fine per Day:&nbsp;</span>
126+
{subsRes.data.fine_per_day ?? '-'} Pts
127+
</p>
128+
<Clock className="size-4" />
129+
<p>
130+
<span className="font-medium">Expires:&nbsp;</span>
131+
{formatDate(subsRes.data.expires_at)} (
132+
{formatDistanceToNowStrict(new Date(subsRes.data.expires_at), {
133+
addSuffix: true,
134+
})}
135+
)
136+
</p>
137+
<Calendar className="size-4" />
138+
<p>
139+
<span className="font-medium">Purchased At:&nbsp;</span>
140+
{formatDate(subsRes.data.created_at)}
141+
</p>
142+
<CircleDollarSign className="size-4 text-muted-foreground" />
143+
<p>
144+
<span>Amount:&nbsp;</span>
145+
{subsRes.data.amount ?? '-'} Pts
146+
</p>
147+
</CardContent>
148+
</Card>
149+
150+
<Card>
151+
<CardHeader>
152+
<CardTitle>User Information</CardTitle>
153+
</CardHeader>
154+
<CardContent className="grid gap-2 grid-cols-[max-content_1fr] items-center">
155+
<User className="size-4" />
156+
<p>
157+
<span className="font-medium">Name:&nbsp;</span>
158+
{/* <Link href={`/users/${subsRes.data.user.id}`}> */}
159+
{subsRes.data.user.name}
160+
{/* </Link> */}
161+
</p>
162+
<Mail className="size-4" />
163+
<p>
164+
<span className="font-medium">Email:&nbsp;</span>
165+
{subsRes.data.user.email ?? '-'}
166+
</p>
167+
</CardContent>
168+
</Card>
169+
170+
<Card>
171+
<CardHeader>
172+
<CardTitle>Membership</CardTitle>
173+
</CardHeader>
174+
<CardContent className="grid gap-2 grid-cols-[max-content_1fr] items-center">
175+
<CreditCard className="size-4" />
176+
<p>
177+
<span className="font-medium">Name:&nbsp;</span>
178+
{/* <Link href={`/users/${subsRes.data.user.id}`}> */}
179+
{subsRes.data.membership.name}
180+
{/* </Link> */}
181+
</p>
182+
<Library className="size-4" />
183+
<p>
184+
<span className="font-medium">Library:&nbsp;</span>
185+
<Link
186+
className="link"
187+
href={`/libraries/${subsRes.data.membership.library.id}`}
188+
>
189+
{subsRes.data.membership.library.name}
190+
</Link>
191+
</p>
192+
</CardContent>
193+
</Card>
80194
</div>
81195
</div>
82196
)

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

Lines changed: 6 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,12 @@ import {
1414
PaginationNext,
1515
PaginationPrevious,
1616
} from '@/components/ui/pagination'
17-
import {
18-
Table,
19-
TableBody,
20-
TableCell,
21-
TableHead,
22-
TableHeader,
23-
TableRow,
24-
} from '@/components/ui/table'
2517
import { getListSubs } from '@/lib/api/subscription'
2618
import { Verify } from '@/lib/firebase/firebase'
27-
import { formatDate } from '@/lib/utils'
2819
import Link from 'next/link'
2920
import type { Metadata } from 'next'
3021
import { SITE_NAME } from '@/lib/consts'
22+
import { ListCardSubscription } from '@/components/subscriptions/ListCardSubscription'
3123

3224
export const metadata: Metadata = {
3325
title: `Subscriptions · ${SITE_NAME}`,
@@ -99,47 +91,11 @@ export default async function Subscriptions({
9991
</div>
10092
</nav>
10193

102-
<Table>
103-
{/* <TableCaption>List of books available in the library.</TableCaption> */}
104-
<TableHeader>
105-
<TableRow>
106-
<TableHead>User</TableHead>
107-
<TableHead>Membership</TableHead>
108-
<TableHead>Library</TableHead>
109-
<TableHead>Expires At</TableHead>
110-
<TableHead>Active Since</TableHead>
111-
<TableHead>Borrow Limit</TableHead>
112-
<TableHead>Usage Limit</TableHead>
113-
<TableHead>Borrow Period</TableHead>
114-
<TableHead>Fine per Day</TableHead>
115-
<TableHead>Amount</TableHead>
116-
</TableRow>
117-
</TableHeader>
118-
<TableBody>
119-
{res.data.map((s) => (
120-
<TableRow key={s.id}>
121-
<TableCell>
122-
<Link href={`subscriptions/${s.id}`} className="link">
123-
{s.user?.name}
124-
</Link>
125-
</TableCell>
126-
<TableCell>{s.membership?.name}</TableCell>
127-
<TableCell>{s.membership?.library?.name}</TableCell>
128-
<TableCell>
129-
<time dateTime={s.expires_at}>{formatDate(s.expires_at)}</time>
130-
</TableCell>
131-
<TableCell>
132-
<time dateTime={s.created_at}>{formatDate(s.created_at)}</time>
133-
</TableCell>
134-
<TableCell>{s.active_loan_limit}</TableCell>
135-
<TableCell>{s.usage_limit ?? '-'}</TableCell>
136-
<TableCell>{s.loan_period} D</TableCell>
137-
<TableCell>{s.fine_per_day ?? '-'} Pts</TableCell>
138-
<TableCell>{s.amount ?? '-'} Pts</TableCell>
139-
</TableRow>
140-
))}
141-
</TableBody>
142-
</Table>
94+
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
95+
{res.data.map((sub) => (
96+
<ListCardSubscription key={sub.id} subscription={sub} />
97+
))}
98+
</div>
14399

144100
<Pagination>
145101
<PaginationContent>

‎components/memberships/CardMembership.tsx‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎components/subscriptions/CardSubscription.tsx‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

0 commit comments

Comments
 (0)