feat: delete borrow button

agmmtoo · agmmtoo · commit 878df391133a · 2025-10-12T11:24:51.000+06:30
diff --git a/app/(protected)/admin/borrows/[id]/@edit/(.)edit/page.tsx b/app/(protected)/admin/borrows/[id]/@edit/(.)edit/page.tsx
@@ -10,9 +10,9 @@ export default async function BorrowDetailsPage({
 }) {
   const { id } = await params
 
-  await Verify({ from: `/admin/borrows/${id}` })
+  const headers = await Verify({ from: `/admin/borrows/${id}` })
 
-  const [borrowRes] = await Promise.all([getBorrow({ id })])
+  const [borrowRes] = await Promise.all([getBorrow({ id }, { headers })])
   if ('error' in borrowRes) {
     return <div>{JSON.stringify(borrowRes.message)}</div>
   }
diff --git a/app/(protected)/admin/borrows/[id]/@lost/(.)lost/page.tsx b/app/(protected)/admin/borrows/[id]/@lost/(.)lost/page.tsx
@@ -10,9 +10,9 @@ export default async function BorrowDetailsPage({
 }) {
   const { id } = await params
 
-  await Verify({ from: `/admin/borrows/${id}` })
+  const headers = await Verify({ from: `/admin/borrows/${id}` })
 
-  const [borrowRes] = await Promise.all([getBorrow({ id })])
+  const [borrowRes] = await Promise.all([getBorrow({ id }, { headers })])
   if ('error' in borrowRes) {
     return <div>{JSON.stringify(borrowRes.message)}</div>
   }
diff --git a/app/(protected)/admin/borrows/[id]/@return/(.)return/page.tsx b/app/(protected)/admin/borrows/[id]/@return/(.)return/page.tsx
@@ -10,9 +10,9 @@ export default async function BorrowDetailsPage({
 }) {
   const { id } = await params
 
-  await Verify({ from: `/admin/borrows/${id}` })
+  const headers = await Verify({ from: `/admin/borrows/${id}` })
 
-  const [borrowRes] = await Promise.all([getBorrow({ id })])
+  const [borrowRes] = await Promise.all([getBorrow({ id }, { headers })])
   if ('error' in borrowRes) {
     return <div>{JSON.stringify(borrowRes.message)}</div>
   }
diff --git a/app/(protected)/admin/borrows/[id]/edit/page.tsx b/app/(protected)/admin/borrows/[id]/edit/page.tsx
@@ -9,9 +9,9 @@ export default async function BorrowDetailsPage({
 }) {
   const { id } = await params
 
-  await Verify({ from: `/admin/borrows/${id}` })
+  const headers = await Verify({ from: `/admin/borrows/${id}` })
 
-  const [borrowRes] = await Promise.all([getBorrow({ id })])
+  const [borrowRes] = await Promise.all([getBorrow({ id }, { headers })])
 
   if ('error' in borrowRes) {
     console.log({ libRes: borrowRes })
diff --git a/app/(protected)/admin/borrows/[id]/layout.tsx b/app/(protected)/admin/borrows/[id]/layout.tsx
@@ -25,9 +25,9 @@ export default async function BorrowDetailsLayout({
 }>) {
   const { id } = await params
 
-  await Verify({ from: `/admin/borrows/${id}` })
+  const headers = await Verify({ from: `/admin/borrows/${id}` })
 
-  const [borrowRes] = await Promise.all([getBorrow({ id })])
+  const [borrowRes] = await Promise.all([getBorrow({ id }, { headers })])
 
   if ('error' in borrowRes) {
     console.log({ libRes: borrowRes })
diff --git a/app/(protected)/admin/borrows/[id]/lost/page.tsx b/app/(protected)/admin/borrows/[id]/lost/page.tsx
@@ -9,9 +9,9 @@ export default async function BorrowLostPage({
 }) {
   const { id } = await params
 
-  await Verify({ from: `/admin/borrows/${id}/lost` })
+  const headers = await Verify({ from: `/admin/borrows/${id}/lost` })
 
-  const [borrowRes] = await Promise.all([getBorrow({ id })])
+  const [borrowRes] = await Promise.all([getBorrow({ id }, { headers })])
 
   if ('error' in borrowRes) {
     console.log({ libRes: borrowRes })
diff --git a/app/(protected)/admin/borrows/[id]/page.tsx b/app/(protected)/admin/borrows/[id]/page.tsx
@@ -21,7 +21,7 @@ export default async function BorrowDetailsPage({
 
   const headers = await Verify({ from })
 
-  const [borrowRes] = await Promise.all([getBorrow({ id })])
+  const [borrowRes] = await Promise.all([getBorrow({ id }, { headers })])
 
   if ('error' in borrowRes) {
     return <div>{JSON.stringify(borrowRes.message)}</div>
diff --git a/app/(protected)/admin/borrows/[id]/return/page.tsx b/app/(protected)/admin/borrows/[id]/return/page.tsx
@@ -9,9 +9,9 @@ export default async function BorrowReturnPage({
 }) {
   const { id } = await params
 
-  await Verify({ from: `/admin/borrows/${id}/return` })
+  const headers = await Verify({ from: `/admin/borrows/${id}/return` })
 
-  const [borrowRes] = await Promise.all([getBorrow({ id })])
+  const [borrowRes] = await Promise.all([getBorrow({ id }, { headers })])
 
   if ('error' in borrowRes) {
     console.log({ libRes: borrowRes })
diff --git a/app/(protected)/admin/borrows/page.tsx b/app/(protected)/admin/borrows/page.tsx
@@ -133,10 +133,8 @@ export default async function Borrows({
           </div>
           <div className="hidden md:flex gap-2">
             <BtnScanReturnBorrow>
-              <>
-                <Scan className="mr-2 size-4" />
-                Scan to Return
-              </>
+              <Scan className="mr-2 size-4" />
+              Scan to Return
             </BtnScanReturnBorrow>
             <Button asChild>
               <Link href="/admin/borrows/new">
diff --git a/app/(protected)/borrows/[id]/layout.tsx b/app/(protected)/borrows/[id]/layout.tsx
@@ -19,9 +19,9 @@ export default async function BorrowDetailsLayout({
 }>) {
   const { id } = await params
 
-  await Verify({ from: `/borrows/${id}` })
+  const headers = await Verify({ from: `/borrows/${id}` })
 
-  const [borrowRes] = await Promise.all([getBorrow({ id })])
+  const [borrowRes] = await Promise.all([getBorrow({ id }, { headers })])
 
   if ('error' in borrowRes) {
     console.log({ libRes: borrowRes })
diff --git a/app/(protected)/borrows/[id]/page.tsx b/app/(protected)/borrows/[id]/page.tsx
@@ -15,7 +15,7 @@ export default async function BorrowDetailsPage({
 
   const headers = await Verify({ from })
 
-  const [borrowRes] = await Promise.all([getBorrow({ id })])
+  const [borrowRes] = await Promise.all([getBorrow({ id }, { headers })])
 
   if ('error' in borrowRes) {
     return <div>{JSON.stringify(borrowRes.message)}</div>
diff --git a/components/borrows/BtnDeleteBorrow.tsx b/components/borrows/BtnDeleteBorrow.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import { Borrow } from '@/lib/types/borrow'
+import { useTransition, useState } from 'react'
+import { Button } from '../ui/button'
+import { Lock, Unlock, Loader, Trash } from 'lucide-react'
+import { deleteBorrowAction } from '@/lib/actions/delete-borrow'
+import { toast } from 'sonner'
+import { redirect } from 'next/navigation'
+
+export const BtnDeleteBook: React.FC<
+  React.ComponentProps<typeof Button> & {
+    borrow: Borrow
+  }
+> = ({ borrow, ...props }) => {
+  const [confirmTimeout, setConfirmTimeout] = useState<NodeJS.Timeout>()
+  const [isPending, startTransition] = useTransition()
+
+  const onUnlock = () => {
+    const timerId = setTimeout(() => {
+      setConfirmTimeout(undefined)
+    }, 3_000)
+    setConfirmTimeout(timerId)
+  }
+
+  const onClick = () => {
+    startTransition(async () => {
+      clearTimeout(confirmTimeout)
+      setConfirmTimeout(undefined)
+      const res = await deleteBorrowAction(borrow.id)
+      if ('error' in res) {
+        toast.error(res.error)
+        return
+      }
+      toast.success(res.message)
+    })
+    redirect('/admin/borrows')
+  }
+
+  if (!confirmTimeout) {
+    return (
+      <Button onClick={onUnlock} {...props}>
+        <Trash />
+        Delete
+      </Button>
+    )
+  }
+
+  return (
+    <Button
+      onClick={onClick}
+      {...props}
+      variant="destructive"
+      disabled={isPending}
+    >
+      {isPending ? <Loader className="animate-spin" /> : <Unlock />}
+      Click again to confirm
+    </Button>
+  )
+}
diff --git a/components/borrows/FormEditBorrow.tsx b/components/borrows/FormEditBorrow.tsx
@@ -24,6 +24,7 @@ import { updateBorrowAction } from '@/lib/actions/update-borrow'
 import { TimeInput } from '../ui/time-input'
 import { Textarea } from '../ui/textarea'
 import { Separator } from '../ui/separator'
+import { BtnDeleteBook } from './BtnDeleteBorrow'
 
 const FormSchema = z.object({
   id: z.string({
@@ -345,6 +346,13 @@ export const FormEditBorrow: React.FC<{
             />
           </>
         ) : null}
+        <Separator className="my-2 col-span-2" />
+        <BtnDeleteBook
+          type="button"
+          className="col-span-2"
+          borrow={borrow}
+          variant="secondary"
+        />
         <Button type="reset" variant="ghost" onClick={onReset}>
           Reset
         </Button>
diff --git a/components/borrows/ModalEditBorrow.tsx b/components/borrows/ModalEditBorrow.tsx
@@ -28,7 +28,7 @@ export const ModalEditBorrow: React.FC<{ borrow: BorrowDetail }> = ({
   }, [pathname])
 
   return (
-    <Dialog open={open} onOpenChange={router.back} modal={false}>
+    <Dialog open={open} onOpenChange={router.back} defaultOpen>
       <DialogContent className="bg-background/5 backdrop-blur-md">
         <DialogHeader>
           <DialogTitle>{borrow.book.title}</DialogTitle>
diff --git a/components/borrows/ModalLostBorrow.tsx b/components/borrows/ModalLostBorrow.tsx
@@ -28,7 +28,7 @@ export const ModalLostBorrow: React.FC<{ borrow: BorrowDetail }> = ({
   }, [pathname])
 
   return (
-    <Dialog open={open} onOpenChange={router.back} modal={false}>
+    <Dialog open={open} onOpenChange={router.back}>
       <DialogContent className="bg-background/5 backdrop-blur-md">
         <DialogHeader>
           <DialogTitle>{borrow.book.title}</DialogTitle>
diff --git a/components/borrows/ModalReturnBorrow.tsx b/components/borrows/ModalReturnBorrow.tsx
@@ -7,6 +7,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from '@/components/ui/dialog'
 import { useEffect, useRef, useState } from 'react'
 import { Scanner } from '@/components/common/Scanner'
@@ -18,38 +19,52 @@ import { ArrowRight } from 'lucide-react'
 import { FormReturnBorrow } from './FormReturnBorrow'
 import { usePathname, useRouter } from 'next/navigation'
 import { BorrowDetail } from '@/lib/types/borrow'
+import { Checkbox } from '../ui/checkbox'
+import { Label } from '../ui/label'
 
-export const ModalScanReturnBorrow: React.FC<{
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}> = ({ open, onOpenChange }) => {
+export const BtnScanReturnBorrow: React.FC<
+  React.PropsWithChildren<Parameters<typeof Button>[0]>
+> = ({ children, ...props }) => {
+  const [open, setOpen] = useState(false)
   const [id, setId] = useState<string>()
+  const [quickScan, setQuickScan] = useState(false)
 
   const onChange = async (id: string) => {
     const res = await returnBorrowAction({ id })
     if ('error' in res) {
       toast.error(res.error)
     } else {
       toast('Book returned successfully')
-      setId(id)
     }
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button onClick={() => setOpen(true)} variant="outline" {...props}>
+          {children}
+        </Button>
+      </DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Scan to Return</DialogTitle>
         </DialogHeader>
-
         <Scanner
           title="Return a Book"
-          onChange={onChange}
-          value={''}
+          onChange={quickScan ? onChange : setId}
+          value=""
           initialFocus
         />
 
-        <DialogFooter>
+        <DialogFooter className="sm:justify-between">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="quick-scan"
+              checked={quickScan}
+              onCheckedChange={(v) => setQuickScan(!!v)}
+            />
+            <Label htmlFor="quick-scan">Quick Scan</Label>
+          </div>
           {id && (
             <Button variant="ghost" asChild>
               <Link href={`/borrows/${id}`}>
@@ -64,20 +79,6 @@ export const ModalScanReturnBorrow: React.FC<{
   )
 }
 
-export const BtnScanReturnBorrow: React.FC<
-  React.PropsWithChildren<Parameters<typeof Button>[0]>
-> = ({ children, ...props }) => {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)} variant="outline" {...props}>
-        {children}
-      </Button>
-      <ModalScanReturnBorrow open={open} onOpenChange={setOpen} />
-    </>
-  )
-}
 export const ModalReturnBorrow: React.FC<{ borrow: BorrowDetail }> = ({
   borrow,
 }) => {
@@ -94,7 +95,7 @@ export const ModalReturnBorrow: React.FC<{ borrow: BorrowDetail }> = ({
   }, [pathname])
 
   return (
-    <Dialog open={open} onOpenChange={router.back} modal={false}>
+    <Dialog open={open} onOpenChange={router.back}>
       <DialogContent className="bg-background/5 backdrop-blur-md">
         <DialogHeader>
           <DialogTitle>{borrow.book.title}</DialogTitle>
diff --git a/components/common/ModelFilter.tsx b/components/common/ModelFilter.tsx
@@ -7,6 +7,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from '@/components/ui/dialog'
 import {
   ComponentProps,
@@ -99,22 +100,24 @@ export const ModelFilter: React.FC<ModelFilterProps> = ({
 
   return (
     <FilterContext.Provider value={{ filters, setFilter, resetFilters }}>
-      <ButtonGroup>
-        <Button
-          {...props}
-          variant={isFilterActive ? 'default' : 'outline'}
-          onClick={() => setOpen(true)}
-          className={cn(props.className)}
-        >
-          Filter
-        </Button>
-        {isFilterActive && (
-          <Button size="icon" variant="outline" onClick={handleClear}>
-            <X className="size-4" />
-          </Button>
-        )}
-      </ButtonGroup>
-      <Dialog open={open} onOpenChange={setOpen} modal={false}>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <ButtonGroup>
+            <Button
+              {...props}
+              variant={isFilterActive ? 'default' : 'outline'}
+              onClick={() => setOpen(true)}
+              className={cn(props.className)}
+            >
+              Filter
+            </Button>
+            {isFilterActive && (
+              <Button size="icon" variant="outline" onClick={handleClear}>
+                <X className="size-4" />
+              </Button>
+            )}
+          </ButtonGroup>
+        </DialogTrigger>
         <DialogContent className="bg-background/5 backdrop-blur-md">
           <DialogHeader>
             <DialogTitle>Filter</DialogTitle>
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
@@ -7,13 +7,13 @@ import { Check } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
 const Checkbox = React.forwardRef<
-  React.ComponentRef<typeof CheckboxPrimitive.Root>,
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className
     )}
     {...props}
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
diff --git a/lib/actions/delete-borrow.ts b/lib/actions/delete-borrow.ts
diff --git a/lib/api/borrow.ts b/lib/api/borrow.ts
