Skip to content

Commit 9126e57

Browse files
agmmtooagmmtoo
committed
feat: edit lost data
1 parent c70dd93 commit 9126e57

File tree

4 files changed

+120
-17
lines changed

4 files changed

+120
-17
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default async function BorrowDetailsLayout({
2121
}>) {
2222
const { id } = await params
2323

24-
await Verify({ from: `/borrows/${id}` })
24+
await Verify({ from: `/admin/borrows/${id}` })
2525

2626
const [borrowRes] = await Promise.all([getBorrow({ id })])
2727

‎components/borrows/DetailBorrow.tsx‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { BorrowDetail } from '@/lib/types/borrow'
22
import Link from 'next/link'
33
import { Badge } from '@/components/ui/badge'
44
import {
5+
getBorrowStatus,
56
getSubscriptionStatus,
67
isBorrowDue,
78
isSubscriptionActive,
@@ -38,7 +39,8 @@ export const DetailBorrow: React.FC<
3839
prevBorrows: Borrow[]
3940
}>
4041
> = ({ borrow, prevBorrows, children }) => {
41-
const isDue = isBorrowDue(borrow)
42+
const status = getBorrowStatus(borrow)
43+
const isDue = status === 'overdue'
4244
return (
4345
<>
4446
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -121,10 +123,7 @@ export const DetailBorrow: React.FC<
121123
<Calendar className="size-4 text-muted-foreground" />
122124
<p>
123125
<span className="font-medium">Borrowed:&nbsp;</span>
124-
<DateTime
125-
dateTime={borrow.borrowed_at}
126-
relative={!borrow.returning}
127-
/>
126+
<DateTime dateTime={borrow.borrowed_at} relative={isDue} />
128127
</p>
129128
{isDue ? (
130129
<>
@@ -156,7 +155,7 @@ export const DetailBorrow: React.FC<
156155
)}
157156
<p className={clsx({ 'text-destructive': isDue })}>
158157
<span className="font-medium">Due:&nbsp;</span>
159-
<DateTime dateTime={borrow.due_at} relative={!borrow.returning} />
158+
<DateTime dateTime={borrow.due_at} relative={isDue} />
160159
</p>
161160
{borrow.returning ? (
162161
<>
@@ -183,19 +182,25 @@ export const DetailBorrow: React.FC<
183182
</AlertTitle>
184183
<AlertDescription>
185184
<div className="grid gap-2 grid-cols-[max-content_1fr] items-center">
186-
<Pen className="size-4 text-muted-foreground" />
187-
<p>
188-
<span className="font-medium">Note:&nbsp;</span>
189-
{borrow.lost.note}
190-
</p>
191185
<Calendar className="size-4 text-muted-foreground" />
192186
<p>
193187
<span className="font-medium">Reported:&nbsp;</span>
194188
<DateTime dateTime={borrow.lost.reported_at} />
195189
</p>
196190
<Gavel className="size-4 text-muted-foreground" />
197191
<p>
198-
<span className="font-medium">Fine:&nbsp;</span>3 pts
192+
<span className="font-medium">Fine:&nbsp;</span>
193+
{borrow.lost.fine ?? '-'} Pts
194+
</p>
195+
<UserCog className="size-4 text-muted-foreground" />
196+
<p>
197+
<span className="font-medium">Staff:&nbsp;</span>
198+
{borrow.lost.staff.name}
199+
</p>
200+
<Pen className="size-4 text-muted-foreground" />
201+
<p>
202+
<span className="font-medium">Note:&nbsp;</span>
203+
{borrow.lost.note}
199204
</p>
200205
</div>
201206
</AlertDescription>
@@ -264,12 +269,11 @@ export const DetailBorrow: React.FC<
264269
{prevBorrows.length > 0 && (
265270
<Card>
266271
<CardHeader>
267-
<CardTitle>Previous Borrows</CardTitle>
272+
<CardTitle>Recent Borrows</CardTitle>
268273
</CardHeader>
269274
<CardContent className="flex items-end overflow-x-scroll p-6 isolate">
270275
{prevBorrows.map((b) => (
271276
<Link
272-
// FIXME
273277
href={`./${b.id}` as Route}
274278
key={b.id}
275279
className={clsx(

‎components/borrows/FormEditBorrow.tsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ import { Input } from '../ui/input'
2222
import { useCallback, useTransition } from 'react'
2323
import { updateBorrowAction } from '@/lib/actions/update-borrow'
2424
import { TimeInput } from '../ui/time-input'
25+
import { Textarea } from '../ui/textarea'
26+
import { Separator } from '../ui/separator'
2527

2628
const FormSchema = z.object({
2729
id: z.string({
@@ -36,6 +38,13 @@ const FormSchema = z.object({
3638
fine: z.coerce.number<number>().nonnegative(),
3739
})
3840
.optional(),
41+
lost: z
42+
.object({
43+
reported_at: z.string(),
44+
fine: z.coerce.number<number>().nonnegative(),
45+
note: z.string(),
46+
})
47+
.optional(),
3948
})
4049

4150
export const FormEditBorrow: React.FC<{
@@ -177,6 +186,7 @@ export const FormEditBorrow: React.FC<{
177186
/>
178187
{borrow.returning ? (
179188
<>
189+
<Separator className="my-2 col-span-2" />
180190
<FormField
181191
control={form.control}
182192
name="returning.returned_at"
@@ -246,6 +256,95 @@ export const FormEditBorrow: React.FC<{
246256
/>
247257
</>
248258
) : null}
259+
{borrow.lost ? (
260+
<>
261+
<Separator className="my-2 col-span-2" />
262+
<FormField
263+
control={form.control}
264+
name="lost.reported_at"
265+
render={({ field }) => (
266+
<FormItem className="flex flex-col">
267+
<FormLabel>Lost Reported Date</FormLabel>
268+
<Popover>
269+
<PopoverTrigger asChild>
270+
<FormControl>
271+
<Button
272+
variant={'outline'}
273+
className={cn(
274+
!field.value && 'text-muted-foreground'
275+
)}
276+
>
277+
{field.value ? (
278+
formatDate(field.value, {
279+
hour: '2-digit',
280+
minute: '2-digit',
281+
})
282+
) : (
283+
<span>Pick a date</span>
284+
)}
285+
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
286+
</Button>
287+
</FormControl>
288+
</PopoverTrigger>
289+
<PopoverContent className="w-auto p-0" align="start">
290+
<Calendar
291+
mode="single"
292+
selected={new Date(field.value)}
293+
onSelect={(v) => field.onChange(v?.toISOString())}
294+
disabled={(date) =>
295+
date < new Date(form.getValues('borrowed_at'))
296+
}
297+
captionLayout="dropdown"
298+
autoFocus
299+
/>
300+
<TimeInput
301+
value={field.value}
302+
onChange={field.onChange}
303+
/>
304+
</PopoverContent>
305+
</Popover>
306+
307+
<FormMessage />
308+
</FormItem>
309+
)}
310+
/>
311+
<FormField
312+
control={form.control}
313+
name="lost.fine"
314+
render={({ field }) => (
315+
<FormItem className="flex flex-col">
316+
<FormLabel>Fine</FormLabel>
317+
<FormControl>
318+
<Input
319+
placeholder="Pts"
320+
type="number"
321+
{...field}
322+
onChange={field.onChange}
323+
/>
324+
</FormControl>
325+
<FormMessage />
326+
</FormItem>
327+
)}
328+
/>
329+
<FormField
330+
control={form.control}
331+
name="lost.note"
332+
render={({ field }) => (
333+
<FormItem className="flex flex-col col-span-2">
334+
<FormLabel>Note</FormLabel>
335+
<FormControl>
336+
<Textarea
337+
placeholder="Note"
338+
{...field}
339+
onChange={field.onChange}
340+
/>
341+
</FormControl>
342+
<FormMessage />
343+
</FormItem>
344+
)}
345+
/>
346+
</>
347+
) : null}
249348
<Button type="reset" variant="ghost" onClick={onReset}>
250349
Reset
251350
</Button>

‎lib/actions/update-borrow.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export async function updateBorrowAction(
88
data: Parameters<typeof updateBorrow>[0]
99
) {
1010
const headers = await Verify({
11-
from: '/borrows',
11+
from: `/admin/borrows/${data.id}/edit`,
1212
})
1313

1414
try {
@@ -22,6 +22,6 @@ export async function updateBorrowAction(
2222
}
2323
return { error: 'failed to update borrow' }
2424
} finally {
25-
revalidatePath(`/borrows/${data.id}`)
25+
revalidatePath(`/admin/borrows/${data.id}`)
2626
}
2727
}

0 commit comments

Comments
 (0)