feat: implement FraudShield MVP — backend API + frontend alerts

Backend (Python 3.12/FastAPI):
- 5 models: Transaction, DetectionRule, FraudAlert, AuditLog, RuleSnapshot
- Rule engine: 4 rule types (amount, location, time, pattern)
- 11 API routes: health, auth, transactions, alerts
- Sync ingestion pipeline with explanation generation
- JWT auth with 3 roles (analyst, admin, senior)
- Seed script with 5 default rules + 50 synthetic transactions

Frontend (React 19/TypeScript/Tailwind):
- Auth: login page, JWT token management, role-based routing
- Alerts: queue with filters, detail panel, decision workflow
- Layout: responsive sidebar, top bar, protected routes
- Full TypeScript, zero ts-ignore, Tailwind CSS

Build: Backend imports clean, Frontend tsc --noEmit passes,
vite build produces 296KB production bundle.

frontend/src/pages/LoginPage.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../hooks/useAuth';
+import { Shield, Loader2 } from 'lucide-react';
+
+export default function LoginPage() {
+  const { login } = useAuth();
+  const navigate = useNavigate();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      await login(email, password);
+      navigate('/alerts');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Falha no login');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-900 via-blue-900 to-gray-800 p-4">
+      <div className="w-full max-w-sm">
+        <div className="bg-white rounded-2xl shadow-xl p-8">
+          <div className="text-center mb-8">
+            <div className="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-blue-600 mb-4">
+              <Shield className="w-7 h-7 text-white" />
+            </div>
+            <h1 className="text-2xl font-bold text-gray-900">FraudShield</h1>
+            <p className="text-sm text-gray-500 mt-1">Motor de Detecção de Fraudes</p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none text-sm"
+                placeholder="analista@fraudshield.local"
+                required
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Senha</label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none text-sm"
+                placeholder="••••••••"
+                required
+              />
+            </div>
+
+            {error && (
+              <div className="bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded-lg text-sm">
+                {error}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full py-2.5 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
+            >
+              {loading && <Loader2 className="w-4 h-4 animate-spin" />}
+              Entrar
+            </button>
+          </form>
+
+          <div className="mt-6 p-3 bg-gray-50 rounded-lg text-xs text-gray-500">
+            <p className="font-medium mb-1">Credenciais de teste:</p>
+            <p>analista@fraudshield.local / qualquer senha</p>
+            <p>admin@fraudshield.local / qualquer senha</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}