Add admin login activity logging

- Add AdminLoginLog model to track all login attempts
- Record successful and failed login attempts
- Capture IP address and user agent for each login
- Create /admin/login-logs page to view activity history
- Show login stats (successes, failures, last 30 days)
- Display browser/device and IP for each login
- Add "Login activity" link to admin menu
- Useful for security auditing and monitoring access

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

src/app/admin/login-logs/page.tsx

@@ -0,0 +1,126 @@
+import { prisma } from '@/lib/prisma';
+import { isAdminAuthenticated } from '@/lib/adminAuth';
+import AdminNav from '@/components/AdminNav';
+import Link from 'next/link';
+
+export default async function LoginLogsPage() {
+  const isAdmin = await isAdminAuthenticated();
+  if (!isAdmin) {
+    return <div className="px-6 py-12 text-center">Unauthorized</div>;
+  }
+
+  const logs = await prisma.adminLoginLog.findMany({
+    orderBy: { loginAt: 'desc' },
+    take: 100,
+  });
+
+  const successCount = logs.filter((l) => l.success).length;
+  const failureCount = logs.filter((l) => !l.success).length;
+  const last30Days = logs.filter(
+    (l) => l.loginAt > new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
+  ).length;
+
+  return (
+    <div className="mx-auto max-w-4xl px-6 py-12">
+      <AdminNav />
+      <div className="flex flex-wrap items-baseline justify-between gap-3">
+        <h1 className="font-display text-3xl">Login Activity</h1>
+        <Link href="/admin" className="text-sm text-clay hover:text-clay-dark">
+          Back to admin
+        </Link>
+      </div>
+
+      <p className="mt-4 text-sm text-muted">
+        Record of admin panel access attempts. IP addresses and user agents are logged for security.
+      </p>
+
+      {/* Stats */}
+      <div className="mt-6 grid gap-3 sm:grid-cols-3">
+        <div className="border border-line bg-surface p-4">
+          <p className="tag-label">Successful Logins</p>
+          <p className="mt-1 font-mono text-xl">{successCount}</p>
+        </div>
+        <div className="border border-line bg-surface p-4">
+          <p className="tag-label">Failed Attempts</p>
+          <p className="mt-1 font-mono text-xl">{failureCount}</p>
+        </div>
+        <div className="border border-line bg-surface p-4">
+          <p className="tag-label">Last 30 Days</p>
+          <p className="mt-1 font-mono text-xl">{last30Days}</p>
+        </div>
+      </div>
+
+      {/* Logs */}
+      {logs.length === 0 ? (
+        <p className="mt-8 text-sm text-muted">No login attempts recorded.</p>
+      ) : (
+        <div className="mt-8 overflow-x-auto">
+          <table className="w-full border-collapse text-sm">
+            <thead>
+              <tr className="border-b border-line">
+                <th className="text-left py-2 px-3 font-medium">Date & Time</th>
+                <th className="text-left py-2 px-3 font-medium">Status</th>
+                <th className="text-left py-2 px-3 font-medium">IP Address</th>
+                <th className="text-left py-2 px-3 font-medium">Browser / Device</th>
+              </tr>
+            </thead>
+            <tbody>
+              {logs.map((log) => {
+                // Parse user agent to show simplified browser/device info
+                const ua = log.userAgent || 'Unknown';
+                let device = 'Unknown';
+                if (ua.includes('Windows')) device = 'Windows';
+                else if (ua.includes('Mac')) device = 'Mac';
+                else if (ua.includes('Linux')) device = 'Linux';
+                else if (ua.includes('iPhone')) device = 'iPhone';
+                else if (ua.includes('Android')) device = 'Android';
+
+                let browser = 'Unknown';
+                if (ua.includes('Chrome')) browser = 'Chrome';
+                else if (ua.includes('Safari')) browser = 'Safari';
+                else if (ua.includes('Firefox')) browser = 'Firefox';
+                else if (ua.includes('Edge')) browser = 'Edge';
+
+                return (
+                  <tr key={log.id} className="border-b border-line hover:bg-surface">
+                    <td className="py-2 px-3 font-mono text-xs">
+                      {log.loginAt.toLocaleDateString('en-GB', {
+                        day: '2-digit',
+                        month: 'short',
+                        year: 'numeric',
+                      })}{' '}
+                      {log.loginAt.toLocaleTimeString('en-GB', {
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit',
+                      })}
+                    </td>
+                    <td className="py-2 px-3">
+                      <span
+                        className={`tag-label rounded-full px-3 py-1 ${
+                          log.success
+                            ? 'bg-green-100 text-green-700'
+                            : 'bg-splash-pink/10 text-splash-pink'
+                        }`}
+                      >
+                        {log.success ? 'Success' : 'Failed'}
+                      </span>
+                    </td>
+                    <td className="py-2 px-3 font-mono text-xs">{log.ipAddress || '—'}</td>
+                    <td className="py-2 px-3 text-xs text-muted">
+                      {browser} / {device}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <p className="mt-8 text-xs text-muted">
+        Showing last 100 login attempts. Data is kept for security auditing purposes.
+      </p>
+    </div>
+  );
+}

src/app/admin/login/actions.ts

@@ -2,6 +2,7 @@
 
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
+import { prisma } from '@/lib/prisma';
 import { createAdminSession, clearAdminSession } from '@/lib/adminAuth';
 import { checkRateLimit, getClientIp } from '@/lib/rateLimit';
 
@@ -16,15 +17,30 @@ export async function loginAdmin(formData: FormData) {
   const next = safeNext(formData.get('next'));
 
   const ip = getClientIp(headers());
+  const userAgent = headers().get('user-agent') ?? undefined;
+
   const { allowed } = await checkRateLimit(`login:admin:${ip}`, 5, 15 * 60 * 1000);
   if (!allowed) {
+    // Log failed attempt (rate limited)
+    await prisma.adminLoginLog.create({
+      data: { success: false, ipAddress: ip, userAgent },
+    });
     redirect(`/admin/login?error=rate_limited&next=${encodeURIComponent(next)}`);
   }
 
   if (username !== process.env.ADMIN_USER || password !== process.env.ADMIN_PASSWORD) {
+    // Log failed attempt (wrong credentials)
+    await prisma.adminLoginLog.create({
+      data: { success: false, ipAddress: ip, userAgent },
+    });
     redirect(`/admin/login?error=invalid&next=${encodeURIComponent(next)}`);
   }
 
+  // Log successful login
+  await prisma.adminLoginLog.create({
+    data: { success: true, ipAddress: ip, userAgent },
+  });
+
   await createAdminSession();
   redirect(next);
 }

src/components/AdminMenu.tsx

@@ -22,6 +22,7 @@ const ADMIN_LINKS = [
   { href: '/admin/collections', label: 'All collections' },
   { href: '/admin/customers', label: 'Email customers' },
   { href: '/admin/maintenance', label: 'Maintenance' },
+  { href: '/admin/login-logs', label: 'Login activity' },
 ];
 
 export default function AdminMenu() {