feat: redesign borrow detail page

Author: agmmtoo

app/(protected)/admin/memberships/[id]/@edit/(.)edit/page.tsx

@@ -0,0 +1,20 @@
+import { ModalEditMembership } from '@/components/memberships/ModalEditMembership'
+import { getMembership } from '@/lib/api/membership'
+import { Verify } from '@/lib/firebase/firebase'
+
+// This is a server component use to pass data to the modal
+export default async function MembershipEditPage({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = await params
+
+  await Verify({ from: `/admin/memberships/${id}` })
+
+  const [membershipRes] = await Promise.all([getMembership({ id })])
+  if ('error' in membershipRes) {
+    return <div>{JSON.stringify(membershipRes.message)}</div>
+  }
+  return <ModalEditMembership membership={membershipRes.data} />
+}

app/(protected)/admin/memberships/[id]/@edit/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

app/(protected)/admin/memberships/[id]/edit/page.tsx

@@ -0,0 +1,42 @@
+import { Verify } from '@/lib/firebase/firebase'
+import { getMembership } from '@/lib/api/membership'
+import { FormMembership } from '@/components/memberships/FormMembership'
+import { updateMembershipAction } from '@/lib/actions/update-membership'
+import { redirect } from 'next/navigation'
+
+export default async function MembershipEditPage({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = await params
+
+  await Verify({ from: `/admin/memberships/${id}` })
+
+  const [membershipRes] = await Promise.all([getMembership({ id })])
+
+  if ('error' in membershipRes) {
+    console.log({ libRes: membershipRes })
+    return <div>{JSON.stringify(membershipRes.message)}</div>
+  }
+
+  const handleSubmit = async (data: any) => {
+    'use server'
+    const res = await updateMembershipAction({ id, ...data })
+    if (!('error' in res)) {
+      redirect(`/admin/memberships/${id}`)
+    }
+    return res
+  }
+
+  return (
+    <div className="pt-4 max-w-2xl mx-auto">
+      <h2 className="text-xl font-semibold mb-6">Edit Membership</h2>
+      <FormMembership
+        libraryID={membershipRes.data.library_id}
+        membership={membershipRes.data}
+        onSubmitAction={handleSubmit}
+      />
+    </div>
+  )
+}

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

@@ -15,9 +15,11 @@ export const metadata: Metadata = {
 
 export default async function MembershipDetailsLayout({
   children,
+  edit,
   params,
 }: Readonly<{
   children: React.ReactNode
+  edit: React.ReactNode
   params: Promise<{ id: string }>
 }>) {
   const { id } = await params
@@ -30,7 +32,7 @@ export default async function MembershipDetailsLayout({
   }
   return (
     <>
-      <nav className="backdrop-blur-sm sticky top-0 z-10">
+      <nav className="backdrop-blur-sm sticky top-0 z-10 mb-4">
         <h1 className="text-2xl font-semibold">{membershipRes.data.name}</h1>
         <div className="flex justify-between items-center">
           <Breadcrumb>
@@ -51,6 +53,7 @@ export default async function MembershipDetailsLayout({
         </div>
       </nav>
       {children}
+      {edit}
     </>
   )
 }

app/(protected)/admin/memberships/[id]/page.tsx

@@ -1,5 +1,8 @@
 import { ListCardMembership } from '@/components/memberships/ListCardMembership'
 import { getMembership } from '@/lib/api/membership'
+import { Button } from '@/components/ui/button'
+import Link from 'next/link'
+import { Pen } from 'lucide-react'
 
 export default async function Memberships({
   params,
@@ -18,8 +21,18 @@ export default async function Memberships({
   }
 
   return (
-    <div className="space-y-4">
-      <ListCardMembership membership={membershipRes.data} />
+    <div className="space-y-4 max-w-2xl mx-auto">
+      <ListCardMembership membership={membershipRes.data}>
+        <Button asChild>
+          <Link
+            href={`/admin/memberships/${membershipRes.data.id}/edit`}
+            className="w-full"
+          >
+            <Pen />
+            Edit
+          </Link>
+        </Button>
+      </ListCardMembership>
     </div>
   )
 }

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

@@ -43,7 +43,7 @@ export default async function BorrowDetailsPage({
 
   return (
     <DetailBorrow borrow={borrowRes.data}>
-      <Button variant="secondary" asChild>
+      <Button variant="secondary" className='bottom-2 sticky'  asChild>
         <Link href={`/borrows/${borrowRes.data.id}/review`} className="w-full">
           <Star
             className={clsx(