notification implemented

apps/admin/next.config.js

@@ -1,15 +1,32 @@
 /** @type {import('next').NextConfig} */
 const apiOrigin = (process.env.API_INTERNAL_URL ?? process.env.API_URL ?? 'http://localhost:4000').replace(/\/api\/v1\/?$/, '')
 const apiUrl = new URL(apiOrigin)
+const ADMIN_BASE_PATH = '/admin'
+
+function ensureAdminAssetPrefix(rawValue) {
+  if (!rawValue) return undefined
+
+  try {
+    const url = new URL(rawValue)
+    const pathname = url.pathname.replace(/\/$/, '')
+    if (!pathname.endsWith(ADMIN_BASE_PATH)) {
+      url.pathname = `${pathname}${ADMIN_BASE_PATH}`
+    }
+    return url.toString().replace(/\/$/, '')
+  } catch {
+    const trimmed = rawValue.replace(/\/$/, '')
+    return trimmed.endsWith(ADMIN_BASE_PATH) ? trimmed : `${trimmed}${ADMIN_BASE_PATH}`
+  }
+}
 
 // In Docker dev the admin app runs on port 3002 while the marketplace proxy
 // serves it from port 3000. When ADMIN_ASSET_PREFIX is set, Next emits
 // absolute chunk URLs so /admin pages load their JS/CSS and HMR directly from
 // port 3002, bypassing the proxy (which can't upgrade WebSocket connections).
-const assetPrefix = process.env.ADMIN_ASSET_PREFIX || undefined
+const assetPrefix = ensureAdminAssetPrefix(process.env.ADMIN_ASSET_PREFIX)
 
 const nextConfig = {
-  basePath: '/admin',
+  basePath: ADMIN_BASE_PATH,
   ...(assetPrefix ? { assetPrefix } : {}),
   images: {
     remotePatterns: [

apps/admin/src/app/auth-redirect/page.tsx

@@ -1,16 +1,25 @@
 'use client'
 
 import { useEffect } from 'react'
-import { useRouter } from 'next/navigation'
+
+function resolveAdminNextPath(next: string | null) {
+  const fallback = '/admin/dashboard'
+  if (!next) return fallback
+
+  if (/^https?:\/\//i.test(next)) return next
+  if (next.startsWith('/admin/')) return next
+  if (next === '/admin') return '/admin/dashboard'
+  if (next.startsWith('/')) return `/admin${next}`
+
+  return `/admin/${next.replace(/^\/+/, '')}`
+}
 
 export default function AuthRedirectPage() {
-  const router = useRouter()
-
   useEffect(() => {
     const hash = window.location.hash
     const params = new URLSearchParams(hash.replace(/^#/, ''))
     const token = params.get('token')
-    const next = params.get('next') || '/dashboard'
+    const next = resolveAdminNextPath(params.get('next'))
 
     if (token) {
       localStorage.setItem('admin_token', token)
@@ -18,8 +27,8 @@ export default function AuthRedirectPage() {
       window.history.replaceState(null, '', window.location.pathname)
     }
 
-    router.replace(next)
-  }, [router])
+    window.location.replace(next)
+  }, [])
 
   return (
     <div className="flex min-h-screen items-center justify-center bg-zinc-950">

apps/admin/src/app/dashboard/layout.tsx

@@ -25,6 +25,7 @@ const navLinks = [
   { href: '/dashboard/site-config', key: 'siteConfig', icon: 'M4.5 12a7.5 7.5 0 1015 0 7.5 7.5 0 00-15 0zm7.5-4.5v4.5l3 3' },
   { href: '/dashboard/renters', key: 'renters', icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z' },
   { href: '/dashboard/audit-logs', key: 'auditLogs', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' },
+  { href: '/dashboard/notifications', key: 'notifications', icon: 'M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9' },
   { href: '/dashboard/admin-users', key: 'adminUsers', icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z' },
   { href: '/dashboard/billing', key: 'billing', icon: 'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z' },
   { href: '/dashboard/pricing', key: 'pricing', icon: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z' },

apps/admin/src/app/dashboard/notifications/page.tsx

@@ -0,0 +1,206 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { ADMIN_API_BASE } from '@/lib/api'
+
+interface NotificationItem {
+  id: string
+  type: string
+  title: string
+  body: string
+  channel: string
+  status: string
+  locale: string
+  sentAt: string | null
+  createdAt: string
+  company: { name: string } | null
+  companyId: string | null
+  renterId: string | null
+}
+
+interface Paginated {
+  data: NotificationItem[]
+  total: number
+  page: number
+  pageSize: number
+}
+
+const CHANNELS = ['EMAIL', 'SMS', 'WHATSAPP', 'IN_APP', 'PUSH']
+const STATUSES = ['PENDING', 'SENT', 'DELIVERED', 'FAILED', 'READ']
+
+const CHANNEL_BADGE: Record<string, string> = {
+  EMAIL:    'text-sky-400 bg-sky-950/40',
+  SMS:      'text-emerald-400 bg-emerald-950/40',
+  WHATSAPP: 'text-teal-400 bg-teal-950/40',
+  IN_APP:   'text-violet-400 bg-violet-950/40',
+  PUSH:     'text-orange-400 bg-orange-950/40',
+}
+
+const STATUS_BADGE: Record<string, string> = {
+  PENDING:   'text-yellow-400 bg-yellow-950/40',
+  SENT:      'text-emerald-400 bg-emerald-950/40',
+  DELIVERED: 'text-emerald-400 bg-emerald-950/40',
+  FAILED:    'text-red-400 bg-red-950/40',
+  READ:      'text-zinc-400 bg-zinc-800',
+}
+
+export default function AdminNotificationsPage() {
+  const [result, setResult] = useState<Paginated | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [filterChannel, setFilterChannel] = useState('')
+  const [filterStatus, setFilterStatus] = useState('')
+  const [filterCompany, setFilterCompany] = useState('')
+  const [page, setPage] = useState(1)
+
+  function load(p: number) {
+    setLoading(true)
+    setError(null)
+    const token = localStorage.getItem('admin_token') ?? ''
+    const params = new URLSearchParams({ page: String(p), pageSize: '50' })
+    if (filterChannel) params.set('channel', filterChannel)
+    if (filterStatus)  params.set('status',  filterStatus)
+    if (filterCompany) params.set('companyId', filterCompany)
+
+    fetch(`${ADMIN_API_BASE}/admin/notifications?${params.toString()}`, {
+      headers: { Authorization: `Bearer ${token}` },
+      cache: 'no-store',
+    })
+      .then((r) => r.json())
+      .then((json) => setResult(json.data ?? null))
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false))
+  }
+
+  useEffect(() => {
+    setPage(1)
+    load(1)
+  }, [filterChannel, filterStatus, filterCompany])
+
+  function goToPage(p: number) {
+    setPage(p)
+    load(p)
+  }
+
+  const totalPages = result ? Math.ceil(result.total / result.pageSize) : 0
+
+  return (
+    <div className="shell py-8 space-y-6">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <p className="text-xs uppercase tracking-[0.2em] text-orange-400">Platform</p>
+          <h1 className="mt-1 text-3xl font-black">Notifications</h1>
+          <p className="mt-1 text-sm text-zinc-400">
+            Full audit log of every notification sent across all companies.
+          </p>
+        </div>
+        {result && (
+          <span className="rounded-full bg-zinc-800 px-3 py-1 text-sm text-zinc-300">
+            {result.total.toLocaleString()} total
+          </span>
+        )}
+      </div>
+
+      {/* Filters */}
+      <div className="flex flex-wrap items-center gap-3">
+        <select
+          value={filterChannel}
+          onChange={(e) => setFilterChannel(e.target.value)}
+          className="rounded-xl border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
+        >
+          <option value="">All channels</option>
+          {CHANNELS.map((ch) => <option key={ch} value={ch}>{ch}</option>)}
+        </select>
+        <select
+          value={filterStatus}
+          onChange={(e) => setFilterStatus(e.target.value)}
+          className="rounded-xl border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
+        >
+          <option value="">All statuses</option>
+          {STATUSES.map((s) => <option key={s} value={s}>{s}</option>)}
+        </select>
+      </div>
+
+      {error && <div className="panel p-4 text-sm text-red-400">{error}</div>}
+
+      <div className="panel overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-zinc-800">
+                <th className="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">Date</th>
+                <th className="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">Company</th>
+                <th className="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">Event</th>
+                <th className="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">Channel</th>
+                <th className="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">Title</th>
+                <th className="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">Status</th>
+                <th className="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">Sent at</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-800/60">
+              {loading ? (
+                <tr><td colSpan={7} className="px-5 py-12 text-center text-zinc-500">Loading…</td></tr>
+              ) : !result || result.data.length === 0 ? (
+                <tr><td colSpan={7} className="px-5 py-12 text-center text-zinc-500">No notifications found.</td></tr>
+              ) : result.data.map((item) => (
+                <tr key={item.id} className="hover:bg-zinc-800/30 transition-colors">
+                  <td className="whitespace-nowrap px-5 py-3 text-xs text-zinc-500">
+                    {new Date(item.createdAt).toLocaleString()}
+                  </td>
+                  <td className="whitespace-nowrap px-5 py-3 text-xs text-zinc-300">
+                    {item.company?.name ?? (item.companyId ? item.companyId.slice(0, 10) + '…' : '—')}
+                  </td>
+                  <td className="whitespace-nowrap px-5 py-3 text-xs font-medium text-zinc-300">
+                    {item.type.replaceAll('_', ' ')}
+                  </td>
+                  <td className="px-5 py-3">
+                    <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${CHANNEL_BADGE[item.channel] ?? 'text-zinc-400 bg-zinc-800'}`}>
+                      {item.channel}
+                    </span>
+                  </td>
+                  <td className="px-5 py-3 max-w-[220px]">
+                    <p className="truncate text-sm text-zinc-200">{item.title}</p>
+                    <p className="truncate text-xs text-zinc-500">{item.body}</p>
+                  </td>
+                  <td className="px-5 py-3">
+                    <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_BADGE[item.status] ?? 'text-zinc-400 bg-zinc-800'}`}>
+                      {item.status}
+                    </span>
+                  </td>
+                  <td className="whitespace-nowrap px-5 py-3 text-xs text-zinc-500">
+                    {item.sentAt ? new Date(item.sentAt).toLocaleString() : '—'}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between border-t border-zinc-800 px-5 py-3">
+            <span className="text-xs text-zinc-500">
+              Page {page} of {totalPages} — {result?.total.toLocaleString()} records
+            </span>
+            <div className="flex items-center gap-2">
+              <button
+                disabled={page <= 1}
+                onClick={() => goToPage(page - 1)}
+                className="rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:bg-zinc-700 disabled:cursor-not-allowed disabled:opacity-40"
+              >
+                Previous
+              </button>
+              <button
+                disabled={page >= totalPages}
+                onClick={() => goToPage(page + 1)}
+                className="rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:bg-zinc-700 disabled:cursor-not-allowed disabled:opacity-40"
+              >
+                Next
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

apps/admin/src/components/I18nProvider.tsx

@@ -29,6 +29,7 @@ const dictionaries: Record<AdminLanguage, AdminDictionary> = {
       adminUsers: 'Admin Users',
       billing: 'Billing',
       pricing: 'Pricing',
+      notifications: 'Notifications',
     },
     logout: 'Logout',
     language: 'Language',
@@ -50,6 +51,7 @@ const dictionaries: Record<AdminLanguage, AdminDictionary> = {
       adminUsers: 'Utilisateurs admin',
       billing: 'Facturation',
       pricing: 'Tarification',
+      notifications: 'Notifications',
     },
     logout: 'Déconnexion',
     language: 'Langue',
@@ -71,6 +73,7 @@ const dictionaries: Record<AdminLanguage, AdminDictionary> = {
       adminUsers: 'مستخدمو الإدارة',
       billing: 'الفوترة',
       pricing: 'الأسعار',
+      notifications: 'الإشعارات',
     },
     logout: 'تسجيل الخروج',
     language: 'اللغة',