fix notification and add billing page and contract

apps/marketplace/src/app/renter/notifications/page.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import {
   RenterAuthError,
@@ -101,64 +100,54 @@ export default function RenterNotificationsPage() {
   }
 
   return (
-    <main className="min-h-screen bg-stone-50 py-10">
-      <div className="shell space-y-6">
-        <div className="flex flex-wrap items-center justify-between gap-4">
-          <div>
-            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-amber-700">{dict.renter}</p>
-            <h1 className="mt-1 text-3xl font-black tracking-tight text-stone-900">{dict.title}</h1>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <button
-              type="button"
-              onClick={markAllRead}
-              disabled={loading || updating}
-              className="rounded-full border border-stone-200 bg-white px-5 py-2.5 text-sm font-semibold text-stone-700"
-            >
-              {dict.markAll}
-            </button>
-            <Link href="/renter/dashboard" className="rounded-full border border-stone-200 bg-white px-5 py-2.5 text-sm font-semibold text-stone-700">
-              {dict.back}
-            </Link>
-          </div>
-        </div>
-
-        {loading ? <div className="card p-8 text-sm text-stone-500">{dict.loading}</div> : null}
-        {!loading && errorMsg ? <div className="card p-8 text-sm text-rose-600">{errorMsg}</div> : null}
-
-        {!loading && !errorMsg && notifications.length === 0 ? (
-          <div className="card p-10 text-center text-sm text-stone-500">{dict.empty}</div>
-        ) : null}
-
-        {!loading && !errorMsg && notifications.length > 0 ? (
-          <div className="space-y-4">
-            {notifications.map((notification) => (
-              <article key={notification.id} className="card p-6">
-                <div className="flex flex-wrap items-center justify-between gap-3">
-                  <div>
-                    <p className="text-xs font-semibold uppercase tracking-[0.16em] text-amber-700">{notification.type.replaceAll('_', ' ')}</p>
-                    <h2 className="mt-2 text-lg font-bold text-stone-900">{notification.title}</h2>
-                  </div>
-                  {notification.readAt ? (
-                    <span className="rounded-full bg-stone-100 px-3 py-1 text-xs font-semibold text-stone-600">{dict.read}</span>
-                  ) : (
-                    <button
-                      type="button"
-                      onClick={() => markRead(notification.id)}
-                      disabled={updating}
-                      className="rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-800"
-                    >
-                      {dict.markRead}
-                    </button>
-                  )}
-                </div>
-                <p className="mt-3 text-sm leading-7 text-stone-600">{notification.body}</p>
-                <p className="mt-4 text-xs text-stone-400">{new Date(notification.createdAt).toLocaleString()}</p>
-              </article>
-            ))}
-          </div>
-        ) : null}
+    <div className="shell space-y-6">
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <h1 className="text-3xl font-black tracking-tight text-stone-900">{dict.title}</h1>
+        <button
+          type="button"
+          onClick={markAllRead}
+          disabled={loading || updating}
+          className="rounded-full border border-stone-200 bg-white px-5 py-2.5 text-sm font-semibold text-stone-700"
+        >
+          {dict.markAll}
+        </button>
       </div>
-    </main>
+
+      {loading ? <div className="card p-8 text-sm text-stone-500">{dict.loading}</div> : null}
+      {!loading && errorMsg ? <div className="card p-8 text-sm text-rose-600">{errorMsg}</div> : null}
+
+      {!loading && !errorMsg && notifications.length === 0 ? (
+        <div className="card p-10 text-center text-sm text-stone-500">{dict.empty}</div>
+      ) : null}
+
+      {!loading && !errorMsg && notifications.length > 0 ? (
+        <div className="space-y-4">
+          {notifications.map((notification) => (
+            <article key={notification.id} className="card p-6">
+              <div className="flex flex-wrap items-center justify-between gap-3">
+                <div>
+                  <p className="text-xs font-semibold uppercase tracking-[0.16em] text-amber-700">{notification.type.replaceAll('_', ' ')}</p>
+                  <h2 className="mt-2 text-lg font-bold text-stone-900">{notification.title}</h2>
+                </div>
+                {notification.readAt ? (
+                  <span className="rounded-full bg-stone-100 px-3 py-1 text-xs font-semibold text-stone-600">{dict.read}</span>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => markRead(notification.id)}
+                    disabled={updating}
+                    className="rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-800"
+                  >
+                    {dict.markRead}
+                  </button>
+                )}
+              </div>
+              <p className="mt-3 text-sm leading-7 text-stone-600">{notification.body}</p>
+              <p className="mt-4 text-xs text-stone-400">{new Date(notification.createdAt).toLocaleString()}</p>
+            </article>
+          ))}
+        </div>
+      ) : null}
+    </div>
   )
 }