fixing platform admin

2026-05-06 22:58:23 -04:00
parent 695a7f7cc7
commit 750ae56a29
175 changed files with 31249 additions and 328 deletions
@@ -0,0 +1,164 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import {
+  RenterAuthError,
+  loadRenterNotifications,
+  markAllRenterNotificationsRead,
+  markRenterNotificationRead,
+  type RenterNotification,
+} from '@/lib/renter'
+import { useMarketplacePreferences } from '@/components/MarketplaceShell'
+
+export default function RenterNotificationsPage() {
+  const router = useRouter()
+  const { language } = useMarketplacePreferences()
+  const dict = {
+    en: {
+      load: 'Could not load notifications.',
+      updateOne: 'Could not update the notification.',
+      updateAll: 'Could not update notifications.',
+      renter: 'Renter',
+      title: 'Notifications',
+      markAll: 'Mark all read',
+      back: 'Back to dashboard',
+      loading: 'Loading notifications…',
+      empty: 'No renter notifications yet.',
+      read: 'Read',
+      markRead: 'Mark read',
+    },
+    fr: {
+      load: 'Impossible de charger les notifications.',
+      updateOne: 'Impossible de mettre à jour la notification.',
+      updateAll: 'Impossible de mettre à jour les notifications.',
+      renter: 'Client',
+      title: 'Notifications',
+      markAll: 'Tout marquer comme lu',
+      back: 'Retour au dashboard',
+      loading: 'Chargement des notifications…',
+      empty: 'Aucune notification client pour le moment.',
+      read: 'Lu',
+      markRead: 'Marquer comme lu',
+    },
+    ar: {
+      load: 'تعذر تحميل الإشعارات.',
+      updateOne: 'تعذر تحديث الإشعار.',
+      updateAll: 'تعذر تحديث الإشعارات.',
+      renter: 'المستأجر',
+      title: 'الإشعارات',
+      markAll: 'تحديد الكل كمقروء',
+      back: 'العودة إلى اللوحة',
+      loading: 'جارٍ تحميل الإشعارات…',
+      empty: 'لا توجد إشعارات للمستأجر حالياً.',
+      read: 'مقروء',
+      markRead: 'تحديد كمقروء',
+    },
+  }[language]
+  const [notifications, setNotifications] = useState<RenterNotification[]>([])
+  const [errorMsg, setErrorMsg] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [updating, setUpdating] = useState(false)
+
+  useEffect(() => {
+    loadRenterNotifications()
+      .then((items) => setNotifications(items))
+      .catch((err) => {
+        if (err instanceof RenterAuthError) {
+          router.replace('/renter/sign-in')
+          return
+        }
+        setErrorMsg(err instanceof Error ? err.message : dict.load)
+      })
+      .finally(() => setLoading(false))
+  }, [router])
+
+  async function markRead(id: string) {
+    setUpdating(true)
+    try {
+      await markRenterNotificationRead(id)
+      setNotifications((current) =>
+        current.map((item) => (item.id === id ? { ...item, readAt: item.readAt ?? new Date().toISOString() } : item)),
+      )
+    } catch (err) {
+      setErrorMsg(err instanceof Error ? err.message : dict.updateOne)
+    } finally {
+      setUpdating(false)
+    }
+  }
+
+  async function markAllRead() {
+    setUpdating(true)
+    try {
+      await markAllRenterNotificationsRead()
+      setNotifications((current) => current.map((item) => ({ ...item, readAt: item.readAt ?? new Date().toISOString() })))
+    } catch (err) {
+      setErrorMsg(err instanceof Error ? err.message : dict.updateAll)
+    } finally {
+      setUpdating(false)
+    }
+  }
+
+  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>
+    </main>
+  )
+}