feat(web): add demo accounts panel to login page for MVP

Click-to-fill panel above the login form showing 4 seeded accounts
(ADMIN/AGENT/SELLER/BUYER) with role badges. Clicking an account
populates phone + shared demo password into the form, letting
stakeholders try each role without memorizing credentials. Panel is
collapsible and labeled "(MVP)" so it's obvious this is demo-only
scaffolding to remove before production.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/app/[locale]/(auth)/login/page.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader2 } from 'lucide-react';
+import { ChevronDown, Loader2, Sparkles } from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { OAuthButtons } from '@/components/auth/oauth-buttons';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -15,11 +16,21 @@ import { Link } from '@/i18n/navigation';
 import { useAuthStore } from '@/lib/auth-store';
 import { loginSchema, type LoginFormData } from '@/lib/validations/auth';
 
+const DEMO_PASSWORD = 'Velik@2026';
+
+const DEMO_ACCOUNTS: { phone: string; name: string; role: 'ADMIN' | 'AGENT' | 'SELLER' | 'BUYER'; badgeClass: string }[] = [
+  { phone: '+84876677771', name: 'Hồ Ngọc Hải', role: 'ADMIN', badgeClass: 'bg-red-500/10 text-red-600 border-red-500/20' },
+  { phone: '+84900000002', name: 'Nguyễn Văn An', role: 'AGENT', badgeClass: 'bg-blue-500/10 text-blue-600 border-blue-500/20' },
+  { phone: '+84900000005', name: 'Phạm Đức Dũng', role: 'SELLER', badgeClass: 'bg-amber-500/10 text-amber-600 border-amber-500/20' },
+  { phone: '+84900000004', name: 'Lê Minh Cường', role: 'BUYER', badgeClass: 'bg-emerald-500/10 text-emerald-600 border-emerald-500/20' },
+];
+
 export default function LoginPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { login, isLoading, error, clearError } = useAuthStore();
   const [showPassword, setShowPassword] = useState(false);
+  const [demoOpen, setDemoOpen] = useState(true);
   const t = useTranslations('auth');
 
   const oauthError = searchParams.get('error');
@@ -30,11 +41,18 @@ export default function LoginPage() {
   const {
     register,
     handleSubmit,
+    setValue,
     formState: { errors },
   } = useForm<LoginFormData>({
     resolver: zodResolver(loginSchema),
   });
 
+  const fillDemoAccount = (phone: string) => {
+    setValue('phone', phone, { shouldValidate: true });
+    setValue('password', DEMO_PASSWORD, { shouldValidate: true });
+    clearError();
+  };
+
   const onSubmit = async (data: LoginFormData) => {
     try {
       await login(data);
@@ -51,6 +69,49 @@ export default function LoginPage() {
         <CardDescription>{t('loginDescription')}</CardDescription>
       </CardHeader>
       <CardContent>
+        {/* Demo accounts panel — MVP only */}
+        <div className="mb-4 rounded-lg border border-primary/20 bg-primary/5">
+          <button
+            type="button"
+            onClick={() => setDemoOpen(!demoOpen)}
+            className="flex w-full items-center justify-between px-3 py-2 text-sm font-medium"
+            aria-expanded={demoOpen}
+          >
+            <span className="inline-flex items-center gap-2">
+              <Sparkles className="h-4 w-4 text-primary" aria-hidden="true" />
+              {t('demoAccountsTitle')}
+            </span>
+            <ChevronDown
+              className={`h-4 w-4 text-muted-foreground transition-transform ${demoOpen ? 'rotate-180' : ''}`}
+              aria-hidden="true"
+            />
+          </button>
+          {demoOpen && (
+            <div className="space-y-2 border-t border-primary/20 p-3">
+              <p className="text-xs text-muted-foreground">
+                {t('demoAccountsHint')} <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">{DEMO_PASSWORD}</code>
+              </p>
+              <ul className="flex flex-col gap-1.5">
+                {DEMO_ACCOUNTS.map((acc) => (
+                  <li key={acc.phone}>
+                    <button
+                      type="button"
+                      onClick={() => fillDemoAccount(acc.phone)}
+                      className="flex w-full items-center gap-2 rounded-md border bg-card px-2.5 py-1.5 text-left text-xs transition-colors hover:border-primary/40 hover:bg-primary/5"
+                    >
+                      <Badge variant="outline" className={`shrink-0 ${acc.badgeClass}`}>
+                        {acc.role}
+                      </Badge>
+                      <span className="flex-1 truncate font-medium">{acc.name}</span>
+                      <span className="font-mono text-muted-foreground">{acc.phone}</span>
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
           {oauthErrorMessage && (
             <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive" role="alert">