feat: edit lost data

Author: agmmtoo

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

@@ -21,7 +21,7 @@ export default async function BorrowDetailsLayout({
 }>) {
   const { id } = await params
 
-  await Verify({ from: `/borrows/${id}` })
+  await Verify({ from: `/admin/borrows/${id}` })
 
   const [borrowRes] = await Promise.all([getBorrow({ id })])
 

components/borrows/DetailBorrow.tsx

@@ -2,6 +2,7 @@ import { BorrowDetail } from '@/lib/types/borrow'
 import Link from 'next/link'
 import { Badge } from '@/components/ui/badge'
 import {
+  getBorrowStatus,
   getSubscriptionStatus,
   isBorrowDue,
   isSubscriptionActive,
@@ -38,7 +39,8 @@ export const DetailBorrow: React.FC<
     prevBorrows: Borrow[]
   }>
 > = ({ borrow, prevBorrows, children }) => {
-  const isDue = isBorrowDue(borrow)
+  const status = getBorrowStatus(borrow)
+  const isDue = status === 'overdue'
   return (
     <>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -121,10 +123,7 @@ export const DetailBorrow: React.FC<
             <Calendar className="size-4 text-muted-foreground" />
             <p>
               <span className="font-medium">Borrowed:&nbsp;</span>
-              <DateTime
-                dateTime={borrow.borrowed_at}
-                relative={!borrow.returning}
-              />
+              <DateTime dateTime={borrow.borrowed_at} relative={isDue} />
             </p>
             {isDue ? (
               <>
@@ -156,7 +155,7 @@ export const DetailBorrow: React.FC<
             )}
             <p className={clsx({ 'text-destructive': isDue })}>
               <span className="font-medium">Due:&nbsp;</span>
-              <DateTime dateTime={borrow.due_at} relative={!borrow.returning} />
+              <DateTime dateTime={borrow.due_at} relative={isDue} />
             </p>
             {borrow.returning ? (
               <>
@@ -183,19 +182,25 @@ export const DetailBorrow: React.FC<
           </AlertTitle>
           <AlertDescription>
             <div className="grid gap-2 grid-cols-[max-content_1fr] items-center">
-              <Pen className="size-4 text-muted-foreground" />
-              <p>
-                <span className="font-medium">Note:&nbsp;</span>
-                {borrow.lost.note}
-              </p>
               <Calendar className="size-4 text-muted-foreground" />
               <p>
                 <span className="font-medium">Reported:&nbsp;</span>
                 <DateTime dateTime={borrow.lost.reported_at} />
               </p>
               <Gavel className="size-4 text-muted-foreground" />
               <p>
-                <span className="font-medium">Fine:&nbsp;</span>3 pts
+                <span className="font-medium">Fine:&nbsp;</span>
+                {borrow.lost.fine ?? '-'} Pts
+              </p>
+              <UserCog className="size-4 text-muted-foreground" />
+              <p>
+                <span className="font-medium">Staff:&nbsp;</span>
+                {borrow.lost.staff.name}
+              </p>
+              <Pen className="size-4 text-muted-foreground" />
+              <p>
+                <span className="font-medium">Note:&nbsp;</span>
+                {borrow.lost.note}
               </p>
             </div>
           </AlertDescription>
@@ -264,12 +269,11 @@ export const DetailBorrow: React.FC<
       {prevBorrows.length > 0 && (
         <Card>
           <CardHeader>
-            <CardTitle>Previous Borrows</CardTitle>
+            <CardTitle>Recent Borrows</CardTitle>
           </CardHeader>
           <CardContent className="flex items-end overflow-x-scroll p-6 isolate">
             {prevBorrows.map((b) => (
               <Link
-                // FIXME
                 href={`./${b.id}` as Route}
                 key={b.id}
                 className={clsx(

components/borrows/FormEditBorrow.tsx

@@ -22,6 +22,8 @@ import { Input } from '../ui/input'
 import { useCallback, useTransition } from 'react'
 import { updateBorrowAction } from '@/lib/actions/update-borrow'
 import { TimeInput } from '../ui/time-input'
+import { Textarea } from '../ui/textarea'
+import { Separator } from '../ui/separator'
 
 const FormSchema = z.object({
   id: z.string({
@@ -36,6 +38,13 @@ const FormSchema = z.object({
       fine: z.coerce.number<number>().nonnegative(),
     })
     .optional(),
+  lost: z
+    .object({
+      reported_at: z.string(),
+      fine: z.coerce.number<number>().nonnegative(),
+      note: z.string(),
+    })
+    .optional(),
 })
 
 export const FormEditBorrow: React.FC<{
@@ -177,6 +186,7 @@ export const FormEditBorrow: React.FC<{
         />
         {borrow.returning ? (
           <>
+            <Separator className="my-2 col-span-2" />
             <FormField
               control={form.control}
               name="returning.returned_at"
@@ -246,6 +256,95 @@ export const FormEditBorrow: React.FC<{
             />
           </>
         ) : null}
+        {borrow.lost ? (
+          <>
+            <Separator className="my-2 col-span-2" />
+            <FormField
+              control={form.control}
+              name="lost.reported_at"
+              render={({ field }) => (
+                <FormItem className="flex flex-col">
+                  <FormLabel>Lost Reported Date</FormLabel>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <FormControl>
+                        <Button
+                          variant={'outline'}
+                          className={cn(
+                            !field.value && 'text-muted-foreground'
+                          )}
+                        >
+                          {field.value ? (
+                            formatDate(field.value, {
+                              hour: '2-digit',
+                              minute: '2-digit',
+                            })
+                          ) : (
+                            <span>Pick a date</span>
+                          )}
+                          <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                        </Button>
+                      </FormControl>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0" align="start">
+                      <Calendar
+                        mode="single"
+                        selected={new Date(field.value)}
+                        onSelect={(v) => field.onChange(v?.toISOString())}
+                        disabled={(date) =>
+                          date < new Date(form.getValues('borrowed_at'))
+                        }
+                        captionLayout="dropdown"
+                        autoFocus
+                      />
+                      <TimeInput
+                        value={field.value}
+                        onChange={field.onChange}
+                      />
+                    </PopoverContent>
+                  </Popover>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="lost.fine"
+              render={({ field }) => (
+                <FormItem className="flex flex-col">
+                  <FormLabel>Fine</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Pts"
+                      type="number"
+                      {...field}
+                      onChange={field.onChange}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="lost.note"
+              render={({ field }) => (
+                <FormItem className="flex flex-col col-span-2">
+                  <FormLabel>Note</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Note"
+                      {...field}
+                      onChange={field.onChange}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </>
+        ) : null}
         <Button type="reset" variant="ghost" onClick={onReset}>
           Reset
         </Button>

lib/actions/update-borrow.ts

@@ -8,7 +8,7 @@ export async function updateBorrowAction(
   data: Parameters<typeof updateBorrow>[0]
 ) {
   const headers = await Verify({
-    from: '/borrows',
+    from: `/admin/borrows/${data.id}/edit`,
   })
 
   try {
@@ -22,6 +22,6 @@ export async function updateBorrowAction(
     }
     return { error: 'failed to update borrow' }
   } finally {
-    revalidatePath(`/borrows/${data.id}`)
+    revalidatePath(`/admin/borrows/${data.id}`)
   }
 }