+ {/* Sidebar desktop */}
+
+
+
+ {/* Bottom nav mobile */}
+
+ )
+}
diff --git a/frontend/src/components/layout/MobileNav.tsx b/frontend/src/components/layout/MobileNav.tsx
new file mode 100644
index 0000000..d11450d
--- /dev/null
+++ b/frontend/src/components/layout/MobileNav.tsx
@@ -0,0 +1,33 @@
+import { NavLink } from 'react-router-dom'
+import { LayoutDashboard, Newspaper, Star, Settings } from 'lucide-react'
+import { cn } from '@/lib/cn'
+
+const items = [
+ { to: '/', icon: LayoutDashboard, label: 'Dashboard' },
+ { to: '/feed', icon: Newspaper, label: 'Actus' },
+ { to: '/watchlist', icon: Star, label: 'Watchlist' },
+ { to: '/admin', icon: Settings, label: 'Admin' },
+]
+
+export function MobileNav() {
+ return (
+
+ )
+}
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..894dbf6
--- /dev/null
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,85 @@
+import { NavLink } from 'react-router-dom'
+import { LayoutDashboard, Newspaper, Star, Settings, Key, Cpu, Database, ClipboardList, Users, LogOut, TrendingUp } from 'lucide-react'
+import { useAuth } from '@/lib/auth'
+import { cn } from '@/lib/cn'
+
+const navItems = [
+ { to: '/', icon: LayoutDashboard, label: 'Dashboard' },
+ { to: '/feed', icon: Newspaper, label: 'Actualités' },
+ { to: '/watchlist', icon: Star, label: 'Watchlist' },
+]
+
+const adminItems = [
+ { to: '/admin/ai', icon: Cpu, label: 'Fournisseurs IA' },
+ { to: '/admin/credentials', icon: Key, label: 'Identifiants' },
+ { to: '/admin/sources', icon: Database, label: 'Sources' },
+ { to: '/admin/jobs', icon: ClipboardList, label: 'Jobs' },
+ { to: '/admin/users', icon: Users, label: 'Utilisateurs' },
+ { to: '/admin/settings', icon: Settings, label: 'Paramètres' },
+]
+
+function NavItem({ to, icon: Icon, label }: { to: string; icon: React.ElementType; label: string }) {
+ return (
+
+
+
+ {/* Main content */}
+
+
+
+))
+Select.displayName = 'Select'
diff --git a/frontend/src/components/ui/spinner.tsx b/frontend/src/components/ui/spinner.tsx
new file mode 100644
index 0000000..3929575
--- /dev/null
+++ b/frontend/src/components/ui/spinner.tsx
@@ -0,0 +1,7 @@
+import { cn } from '@/lib/cn'
+
+export function Spinner({ className }: { className?: string }) {
+ return (
+
+ )
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..55912cb
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,39 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --background: 222 47% 6%;
+ --foreground: 210 40% 95%;
+ --card: 222 47% 9%;
+ --card-foreground: 210 40% 95%;
+ --border: 217 33% 18%;
+ --input: 217 33% 18%;
+ --ring: 221 83% 53%;
+ --primary: 221 83% 53%;
+ --primary-foreground: 210 40% 98%;
+ --secondary: 217 33% 18%;
+ --secondary-foreground: 210 40% 95%;
+ --muted: 217 33% 14%;
+ --muted-foreground: 215 20% 55%;
+ --accent: 217 33% 18%;
+ --accent-foreground: 210 40% 95%;
+ --destructive: 0 84% 60%;
+ --destructive-foreground: 210 40% 98%;
+ --radius: 0.5rem;
+ }
+}
+
+@layer base {
+ * { @apply border-border; }
+ body {
+ @apply bg-background text-foreground;
+ font-feature-settings: "rlig" 1, "calt" 1;
+ }
+}
+
+/* Scrollbar style */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { @apply bg-muted; }
+::-webkit-scrollbar-thumb { @apply bg-border rounded-full; }
diff --git a/frontend/src/lib/auth.tsx b/frontend/src/lib/auth.tsx
new file mode 100644
index 0000000..6ffef2e
--- /dev/null
+++ b/frontend/src/lib/auth.tsx
@@ -0,0 +1,51 @@
+import { createContext, useContext, useState, type ReactNode } from 'react'
+
+interface User {
+ id: string
+ email: string
+ role: 'admin' | 'user'
+}
+
+interface AuthCtx {
+ user: User | null
+ token: string | null
+ login: (token: string, user: User) => void
+ logout: () => void
+ isAdmin: boolean
+}
+
+const AuthContext = createContext
+ {lines.map((line, i) => {
+ if (line.startsWith('## ')) return {line.slice(2)}
+ if (line.startsWith('**') && line.endsWith('**')) return
+ )
+}
+
+export function Dashboard() {
+ const { user } = useAuth()
+ const [summaries, setSummaries] = useState{line.slice(3)}
+ if (line.startsWith('### ')) return{line.slice(4)}
+ if (line.startsWith('- ')) return{line.slice(2, -2)}
+ if (line.trim() === '') return + return{line}
+ })} +
+ {/* Header */}
+
+
+
+
+ )}
+
+ {assets.length > 0 && (
+
+ )
+}
diff --git a/frontend/src/pages/Feed.tsx b/frontend/src/pages/Feed.tsx
new file mode 100644
index 0000000..95d9811
--- /dev/null
+++ b/frontend/src/pages/Feed.tsx
@@ -0,0 +1,116 @@
+import { useState, useEffect } from 'react'
+import { ExternalLink, RefreshCw, Search } from 'lucide-react'
+import { articlesApi, type Article } from '@/api/articles'
+import { assetsApi, type Asset } from '@/api/assets'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Select } from '@/components/ui/select'
+import { Badge } from '@/components/ui/badge'
+import { Spinner } from '@/components/ui/spinner'
+
+function fmtDate(a: Article) {
+ const d = a.published_at?.Valid ? new Date(a.published_at.Time) : new Date(a.created_at)
+ const now = Date.now()
+ const diff = now - d.getTime()
+ if (diff < 3600000) return `Il y a ${Math.floor(diff / 60000)} min`
+ if (diff < 86400000) return `Il y a ${Math.floor(diff / 3600000)} h`
+ return d.toLocaleDateString('fr-FR')
+}
+
+export function Feed() {
+ const [articles, setArticles] = useState
+
+
+ {assets.length === 0 && !loading && (
+
+
+
+ Bonjour 👋
+{user?.email}
+Votre watchlist est vide
+Ajoutez des symboles dans la section Watchlist pour obtenir des résumés personnalisés
+
+ {assets.map(a => (
+ {a.symbol}
+ ))}
+
+ )}
+
+ {/* Résumé actuel */}
+
+
+
+ {loading ? (
+
+
+
+
+
+
+ ) : (
+
+
+
+
+ )}
+
+
+ {/* Historique résumés */}
+ {summaries.length > 1 && (
+
+
+
+
+
+
+ Aucun résumé disponible
+Cliquez sur "Générer un résumé" pour commencer
+
+ setCurrent(s)}
+ >
+
+
+
+ ))}
+
+ )}
+ Historique
+ {summaries.slice(1).map(s => ( +
+
+ {s.content.slice(0, 120)}…
+
+
+ )
+}
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
new file mode 100644
index 0000000..969dee4
--- /dev/null
+++ b/frontend/src/pages/Login.tsx
@@ -0,0 +1,63 @@
+import { useState, type FormEvent } from 'react'
+import { Navigate } from 'react-router-dom'
+import { TrendingUp } from 'lucide-react'
+import { useAuth } from '@/lib/auth'
+import { authApi } from '@/api/auth'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+export function Login() {
+ const { token, login } = useAuth()
+ const [email, setEmail] = useState('')
+ const [password, setPassword] = useState('')
+ const [error, setError] = useState('')
+ const [loading, setLoading] = useState(false)
+
+ if (token) return
+
+
+ {/* Filtres */}
+ Actualités
+ +
+
+
+ {loading && articles.length === 0 ? (
+
+
+
+
+ {filtered.map(a => (
+
+
+
+
+ ))}
+ {filtered.length === 0 && (
+ Aucun article
+
+ {filtered.length >= limit && (
+
+
+
+
+
+
+ {a.source_name}
+ {fmtDate(a)}
+
+ {a.title}
+ {a.content && ( +{a.content}
+ )} +
+
+
+ )}
+
+ )}
+
+
+
+ Tradarr
+
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/pages/Watchlist.tsx b/frontend/src/pages/Watchlist.tsx
new file mode 100644
index 0000000..614a2a7
--- /dev/null
+++ b/frontend/src/pages/Watchlist.tsx
@@ -0,0 +1,117 @@
+import { useState, useEffect, type FormEvent } from 'react'
+import { Plus, Trash2, TrendingUp } from 'lucide-react'
+import { assetsApi, type Asset } from '@/api/assets'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Badge } from '@/components/ui/badge'
+import { Spinner } from '@/components/ui/spinner'
+
+export function Watchlist() {
+ const [assets, setAssets] = useState
+
+ Votre assistant trading IA
+
+
+ Ajouter un actif
+
+ {error &&
+
+
+ {/* Liste */}
+ {loading ? (
+
+
+
+
+ ) : (
+
+ )
+}
diff --git a/frontend/src/pages/admin/AIProviders.tsx b/frontend/src/pages/admin/AIProviders.tsx
new file mode 100644
index 0000000..8d3dc69
--- /dev/null
+++ b/frontend/src/pages/admin/AIProviders.tsx
@@ -0,0 +1,192 @@
+import { useState, useEffect } from 'react'
+import { Plus, Trash2, CheckCircle, RefreshCw } from 'lucide-react'
+import { adminApi, type AIProvider } from '@/api/admin'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select } from '@/components/ui/select'
+import { Badge } from '@/components/ui/badge'
+import { Spinner } from '@/components/ui/spinner'
+
+const PROVIDER_NAMES = ['openai', 'anthropic', 'gemini', 'ollama'] as const
+
+export function AIProviders() {
+ const [providers, setProviders] = useState
+
+
+ {/* Formulaire d'ajout */}
+ Watchlist
+Les symboles suivis seront utilisés pour personnaliser vos résumés IA
+{error}
} +Aucun actif dans votre watchlist
+
+ {assets.map(a => (
+
+
+ ))}
+
+ )}
+
+ {a.symbol}
+ {a.name && {a.name}}
+
+
+
+
+ {editId ? 'Modifier' : 'Nouveau fournisseur'}
+
+
+ )}
+
+ {loading ? (
+
+ )
+}
diff --git a/frontend/src/pages/admin/AdminLayout.tsx b/frontend/src/pages/admin/AdminLayout.tsx
new file mode 100644
index 0000000..6bf87b2
--- /dev/null
+++ b/frontend/src/pages/admin/AdminLayout.tsx
@@ -0,0 +1,12 @@
+import { Outlet, Navigate } from 'react-router-dom'
+import { useAuth } from '@/lib/auth'
+
+export function AdminLayout() {
+ const { isAdmin } = useAuth()
+ if (!isAdmin) return
+
+
+ {showForm && (
+
+
+
+ Fournisseurs IA
+Configurez les fournisseurs IA et sélectionnez le modèle actif
+
+
+ {error &&
+
+
+
+ {!isOllama && (
+
+
+ setForm(f => ({ ...f, api_key: e.target.value }))} />
+
+ )}
+
+
+ setForm(f => ({ ...f, model: e.target.value }))} />
+
+ {isOllama && (
+
+
+
+
+ )}
+ {error}
} +
+
+
+
+
+ {providers.map(p => (
+
+
+
+
+ ))}
+ {providers.length === 0 && (
+ Aucun fournisseur configuré
+ )}
+
+
+
+ {p.name}
+ {p.is_active && Actif }
+ {!p.has_key && p.name !== 'ollama' && Sans clé }
+
+
+ {p.model && Modèle : {p.model}}
+ {p.endpoint && Endpoint : {p.endpoint}}
+
+ {/* Dropdown modèles disponibles */}
+ {models[p.id] && models[p.id].length > 0 && (
+
+
+
+
+ )}
+
+
+
+ {!p.is_active && (
+
+ )}
+
+
+
+
+ )
+}
diff --git a/frontend/src/pages/admin/AdminSettings.tsx b/frontend/src/pages/admin/AdminSettings.tsx
new file mode 100644
index 0000000..e6c8977
--- /dev/null
+++ b/frontend/src/pages/admin/AdminSettings.tsx
@@ -0,0 +1,131 @@
+import { useState, useEffect } from 'react'
+import { Save, RotateCcw } from 'lucide-react'
+import { adminApi, type Setting } from '@/api/admin'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Spinner } from '@/components/ui/spinner'
+
+const NUMERIC_SETTINGS: Record
+
+ Paramètres généraux
+ {settings.filter(s => NUMERIC_SETTINGS[s.key]).map(s => {
+ const meta = NUMERIC_SETTINGS[s.key]
+ return (
+
+
+
+
+
+ Contexte IA
+
+
+
+
+
+ Paramètres
+Configuration globale du service
+
+
+
+ )
+ })}
+
+ {meta.description}
+ setValues(v => ({ ...v, [s.key]: e.target.value }))} + className="max-w-xs" + type="number" + min="1" + /> ++ Instructions envoyées à l'IA avant les articles. Les actifs de ta watchlist et les articles sont ajoutés automatiquement après ce texte. +
+