Crowmate/Wyview
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: change the DA to something more readable

Browse Source
This commit is contained in:
Pierre Ryssen
2026-03-11 12:26:45 +01:00
parent cd15c81b53
commit 9642f2511a
22 changed files with 136 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/api/tiktok/stats/route.ts
View File

@@ -15,6 +15,16 @@ export async function GET() {
return NextResponse.json({ error: "Session error" }, { status: 401 }); return NextResponse.json({ error: "Session error" }, { status: 401 });
} }
if (process.env.NODE_ENV === "development") {
return NextResponse.json({
followers: 124,
likes: 856,
videoCount: 1,
displayName: "CrowMate studio",
avatarUrl: "",
});
}
const tokenRecord = await prisma.tikTokToken.findUnique({ where: { userId } }); const tokenRecord = await prisma.tikTokToken.findUnique({ where: { userId } });
if (!tokenRecord) { if (!tokenRecord) {
@@ -23,7 +33,6 @@ export async function GET() {
let { accessToken, refreshToken, openId, expiresAt } = tokenRecord; let { accessToken, refreshToken, openId, expiresAt } = tokenRecord;
// Refresh si expiré (avec 60s de marge)
if (expiresAt.getTime() - Date.now() < 60_000) { if (expiresAt.getTime() - Date.now() < 60_000) {
try { try {
const refreshed = await refreshAccessToken(refreshToken); const refreshed = await refreshAccessToken(refreshToken);

8
app/dashboard/layout.tsx
View File

@@ -17,8 +17,8 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
if (status === "loading") { if (status === "loading") {
return ( return (
<div className="min-h-screen bg-[#0a0d0f] flex items-center justify-center"> <div className="min-h-screen bg-[#0d1117] flex items-center justify-center">
<span className="text-[#4aff8c]/40 font-mono text-xs tracking-widest animate-pulse"> <span className="text-[#4aff8c]/60 font-mono text-xs tracking-widest animate-pulse">
CHARGEMENT... CHARGEMENT...
</span> </span>
</div> </div>
@@ -28,9 +28,9 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
if (status !== "authenticated") return null; if (status !== "authenticated") return null;
return ( return (
<div className="flex min-h-screen"> <div className="flex min-h-screen bg-[#0d1117]">
<Sidebar /> <Sidebar />
<main className="ml-56 flex-1 p-8"> <main className="ml-56 flex-1 p-8 bg-[#0d1117]">
{children} {children}
</main> </main>
</div> </div>

6
app/dashboard/page.tsx
View File

@@ -1,9 +1,9 @@
export default function DashboardPage() { export default function DashboardPage() {
return ( return (
<div> <div>
<div className="text-[9px] font-mono tracking-[0.3em] text-[#4aff8c]/50 uppercase mb-1">Vue générale</div> <div className="text-sm font-mono tracking-widest text-acid-green/70 uppercase mb-1">Vue générale</div>
<h1 className="text-2xl font-black tracking-widest text-white uppercase mb-8">Tableau de bord</h1> <h1 className="text-3xl font-black tracking-widest text-white uppercase mb-8">Tableau de bord</h1>
<p className="text-[#3a5a3a] font-mono text-sm">Données à venir...</p> <p className="text-wy-text-secondary font-mono text-sm">Données à venir...</p>
</div> </div>
); );
} }

4
app/finances/layout.tsx
View File

@@ -19,9 +19,9 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
if (status !== "authenticated") return null; if (status !== "authenticated") return null;
return ( return (
<div className="flex min-h-screen"> <div className="flex min-h-screen bg-[#0d1117]">
<Sidebar /> <Sidebar />
<main className="ml-56 flex-1 p-8"> <main className="ml-56 flex-1 p-8 bg-[#0d1117]">
{children} {children}
</main> </main>
</div> </div>

10
app/finances/page.tsx
View File

@@ -5,11 +5,11 @@ export default function FinancesPage() {
return ( return (
<div> <div>
<div className="flex items-center gap-3 mb-8"> <div className="flex items-center gap-3 mb-8">
<div className="p-2 rounded-sm bg-yellow-500/10 border border-yellow-500/20"> <div className="p-2 rounded-sm bg-yellow-500/10 border border-yellow-500/25">
<DollarSign size={18} className="text-yellow-400" /> <DollarSign size={18} className="text-yellow-400" />
</div> </div>
<div> <div>
<div className="text-[9px] font-mono tracking-[0.3em] text-yellow-400/50 uppercase mb-0.5">Revenus</div> <div className="text-[9px] font-mono tracking-[0.3em] text-yellow-400/70 uppercase mb-0.5">Revenus</div>
<h1 className="text-2xl font-black tracking-widest text-white uppercase">Finances</h1> <h1 className="text-2xl font-black tracking-widest text-white uppercase">Finances</h1>
</div> </div>
</div> </div>
@@ -21,9 +21,9 @@ export default function FinancesPage() {
<StatCard label="Abonnements" value="—" sub="Aucune donnée" accent="gold" /> <StatCard label="Abonnements" value="—" sub="Aucune donnée" accent="gold" />
</div> </div>
<div className="bg-[#0d1210] border border-[#1a2a1a] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]"> <div className="bg-[#111a14] border border-[#1e2d1e] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]">
<DollarSign size={32} className="text-yellow-400/20" /> <DollarSign size={32} className="text-yellow-400/30" />
<p className="text-[#3a5a3a] font-mono text-xs tracking-widest text-center"> <p className="text-[#7a9a7a] font-mono text-xs tracking-widest text-center">
AUCUNE DONNÉE FINANCIÈRE DISPONIBLE<br />POUR LE MOMENT AUCUNE DONNÉE FINANCIÈRE DISPONIBLE<br />POUR LE MOMENT
</p> </p>
</div> </div>

2
app/globals.css
View File

@@ -4,4 +4,4 @@
::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1a2a1a; border-radius: 2px; } ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 2px; }

4
app/instagram/layout.tsx
View File

@@ -19,9 +19,9 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
if (status !== "authenticated") return null; if (status !== "authenticated") return null;
return ( return (
<div className="flex min-h-screen"> <div className="flex min-h-screen bg-[#0d1117]">
<Sidebar /> <Sidebar />
<main className="ml-56 flex-1 p-8"> <main className="ml-56 flex-1 p-8 bg-[#0d1117]">
{children} {children}
</main> </main>
</div> </div>

11
app/instagram/page.tsx
View File

@@ -1,4 +1,3 @@
import StatCard from "@/components/StatCard"; import StatCard from "@/components/StatCard";
import { Camera } from "lucide-react"; import { Camera } from "lucide-react";
@@ -6,11 +5,11 @@ export default function InstagramPage() {
return ( return (
<div> <div>
<div className="flex items-center gap-3 mb-8"> <div className="flex items-center gap-3 mb-8">
<div className="p-2 rounded-sm bg-orange-500/10 border border-orange-500/20"> <div className="p-2 rounded-sm bg-orange-500/10 border border-orange-500/25">
<Camera size={18} className="text-orange-400" /> <Camera size={18} className="text-orange-400" />
</div> </div>
<div> <div>
<div className="text-[9px] font-mono tracking-[0.3em] text-orange-400/50 uppercase mb-0.5">Plateforme</div> <div className="text-[9px] font-mono tracking-[0.3em] text-orange-400/70 uppercase mb-0.5">Plateforme</div>
<h1 className="text-2xl font-black tracking-widest text-white uppercase">Instagram</h1> <h1 className="text-2xl font-black tracking-widest text-white uppercase">Instagram</h1>
</div> </div>
</div> </div>
@@ -22,9 +21,9 @@ export default function InstagramPage() {
<StatCard label="Portée moy." value="—" sub="Aucune donnée" accent="gold" /> <StatCard label="Portée moy." value="—" sub="Aucune donnée" accent="gold" />
</div> </div>
<div className="bg-[#0d1210] border border-[#1a2a1a] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]"> <div className="bg-[#111a14] border border-[#1e2d1e] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]">
<Camera size={32} className="text-orange-400/20" /> <Camera size={32} className="text-orange-400/30" />
<p className="text-[#3a5a3a] font-mono text-xs tracking-widest text-center"> <p className="text-[#7a9a7a] font-mono text-xs tracking-widest text-center">
CONNECTEZ VOTRE COMPTE INSTAGRAM<br />POUR AFFICHER VOS STATISTIQUES CONNECTEZ VOTRE COMPTE INSTAGRAM<br />POUR AFFICHER VOS STATISTIQUES
</p> </p>
</div> </div>

2
app/layout.tsx
View File

@@ -10,7 +10,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
return ( return (
<html lang="fr"> <html lang="fr">
<body className="bg-[#0a0d0f] text-white antialiased"> <body className="bg-wy-dark text-wy-text-primary antialiased">
<SessionProvider> <SessionProvider>
{children} {children}
</SessionProvider> </SessionProvider>

30
app/page.tsx
View File

@@ -86,12 +86,12 @@ export default function AuthPage() {
}; };
const inputClass = (hasError: boolean) => const inputClass = (hasError: boolean) =>
`w-full bg-[#0d1210] border px-4 py-3 text-sm font-mono text-white placeholder-[#2a3a2a] outline-none rounded-sm transition-all duration-200 ${ `w-full bg-wy-surface border px-4 py-3 text-sm font-mono text-wy-text-primary placeholder-wy-text-secondary outline-none rounded-md transition-all duration-200 ${
hasError ? "border-red-500/50" : "border-[#1a2a1a] focus:border-[#4aff8c]/40" hasError ? "border-red-500/60" : "border-wy-border focus:border-acid-green/60"
}`; }`;
return ( return (
<main className="min-h-screen bg-[#0a0d0f] flex flex-col items-center justify-center relative overflow-hidden"> <main className="min-h-screen bg-wy-dark flex flex-col items-center justify-center relative overflow-hidden">
<div <div
className="absolute inset-0 opacity-20 pointer-events-none" className="absolute inset-0 opacity-20 pointer-events-none"
style={{ style={{
@@ -99,30 +99,30 @@ export default function AuthPage() {
backgroundSize: "40px 40px", backgroundSize: "40px 40px",
}} }}
/> />
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] rounded-full bg-[#4aff8c]/[0.02] blur-3xl pointer-events-none" /> <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] rounded-full bg-acid-green/[0.02] blur-3xl pointer-events-none" />
<div className="relative z-10 flex flex-col items-center gap-8 w-full max-w-sm px-6"> <div className="relative z-10 flex flex-col items-center gap-8 w-full max-w-sm px-6">
{/* Header */} {/* Header */}
<div className="flex flex-col items-center gap-5"> <div className="flex flex-col items-center gap-5">
<DragonEye size={80} /> <DragonEye size={80} />
<div className="text-center"> <div className="text-center">
<div className="text-[9px] tracking-[0.45em] text-[#4aff8c]/50 uppercase mb-2 font-mono"> <div className="text-[9px] tracking-[0.45em] text-acid-green/70 uppercase mb-2 font-mono">
Analytics Dashboard Analytics Dashboard
</div> </div>
<h1 className="text-4xl font-black tracking-[0.15em] uppercase text-white"> <h1 className="text-4xl font-black tracking-[0.15em] uppercase text-wy-text-primary">
WYVIEW WYVIEW
</h1> </h1>
</div> </div>
</div> </div>
{/* Tabs */} {/* Tabs */}
<div className="w-full flex border border-[#1a2a1a] rounded-sm overflow-hidden"> <div className="w-full flex border border-wy-border rounded-md overflow-hidden">
<button <button
onClick={() => { setTab("login"); setLoginError(""); }} onClick={() => { setTab("login"); setLoginError(""); }}
className={`flex-1 py-2 text-[10px] font-mono tracking-[0.3em] uppercase transition-all duration-200 ${ className={`flex-1 py-2 text-[10px] font-mono tracking-[0.3em] uppercase transition-all duration-200 ${
tab === "login" tab === "login"
? "bg-[#4aff8c]/10 text-[#4aff8c] border-r border-[#1a2a1a]" ? "bg-acid-green/10 text-acid-green border-r border-wy-border"
: "text-[#2a4a2a] hover:text-[#4aff8c]/60 border-r border-[#1a2a1a]" : "text-wy-text-secondary hover:text-acid-green/80 border-r border-wy-border"
}`} }`}
> >
CONNEXION CONNEXION
@@ -131,8 +131,8 @@ export default function AuthPage() {
onClick={() => { setTab("register"); setRegError(""); setRegSuccess(""); }} onClick={() => { setTab("register"); setRegError(""); setRegSuccess(""); }}
className={`flex-1 py-2 text-[10px] font-mono tracking-[0.3em] uppercase transition-all duration-200 ${ className={`flex-1 py-2 text-[10px] font-mono tracking-[0.3em] uppercase transition-all duration-200 ${
tab === "register" tab === "register"
? "bg-[#4aff8c]/10 text-[#4aff8c]" ? "bg-acid-green/10 text-acid-green"
: "text-[#2a4a2a] hover:text-[#4aff8c]/60" : "text-wy-text-secondary hover:text-acid-green/80"
}`} }`}
> >
INSCRIPTION INSCRIPTION
@@ -164,7 +164,7 @@ export default function AuthPage() {
<button <button
type="submit" type="submit"
disabled={loginLoading || !loginEmail || !loginPassword} disabled={loginLoading || !loginEmail || !loginPassword}
className="w-full py-3 text-[11px] font-mono tracking-[0.3em] uppercase font-bold border border-[#4aff8c]/30 text-[#4aff8c] hover:bg-[#4aff8c]/8 hover:border-[#4aff8c]/60 transition-all duration-200 rounded-sm disabled:opacity-30 disabled:cursor-not-allowed" className="w-full py-3 text-[11px] font-mono tracking-[0.3em] uppercase font-bold border border-acid-green text-acid-green hover:bg-acid-green/10 transition-all duration-200 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
> >
{loginLoading ? "CONNEXION..." : "ACCÉDER"} {loginLoading ? "CONNEXION..." : "ACCÉDER"}
</button> </button>
@@ -210,19 +210,19 @@ export default function AuthPage() {
<p className="text-red-400/80 text-[11px] font-mono tracking-widest">— {regError}</p> <p className="text-red-400/80 text-[11px] font-mono tracking-widest">— {regError}</p>
)} )}
{regSuccess && ( {regSuccess && (
<p className="text-[#4aff8c]/80 text-[11px] font-mono tracking-widest">✓ {regSuccess}</p> <p className="text-acid-green/80 text-[11px] font-mono tracking-widest">✓ {regSuccess}</p>
)} )}
<button <button
type="submit" type="submit"
disabled={regLoading || !regEmail || !regPassword || !regConfirm} disabled={regLoading || !regEmail || !regPassword || !regConfirm}
className="w-full py-3 text-[11px] font-mono tracking-[0.3em] uppercase font-bold border border-[#4aff8c]/30 text-[#4aff8c] hover:bg-[#4aff8c]/8 hover:border-[#4aff8c]/60 transition-all duration-200 rounded-sm disabled:opacity-30 disabled:cursor-not-allowed" className="w-full py-3 text-[11px] font-mono tracking-[0.3em] uppercase font-bold border border-acid-green text-acid-green hover:bg-acid-green/10 transition-all duration-200 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
> >
{regLoading ? "CRÉATION..." : "CRÉER UN COMPTE"} {regLoading ? "CRÉATION..." : "CRÉER UN COMPTE"}
</button> </button>
</form> </form>
)} )}
<div className="text-[9px] font-mono text-[#1a3a1a] tracking-[0.3em]"> <div className="text-[9px] font-mono text-wy-text-secondary/50 tracking-[0.3em]">
WYVIEW v1.0 /// CROWMATE WYVIEW v1.0 /// CROWMATE
</div> </div>
</div> </div>

4
app/tiktok/layout.tsx
View File

@@ -19,9 +19,9 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
if (status !== "authenticated") return null; if (status !== "authenticated") return null;
return ( return (
<div className="flex min-h-screen"> <div className="flex min-h-screen bg-[#0d1117]">
<Sidebar /> <Sidebar />
<main className="ml-56 flex-1 p-8"> <main className="ml-56 flex-1 p-8 bg-[#0d1117]">
{children} {children}
</main> </main>
</div> </div>

30
app/tiktok/page.tsx
View File

@@ -69,7 +69,7 @@ export default function TikTokPage() {
<Music2 size={18} className="text-pink-400" /> <Music2 size={18} className="text-pink-400" />
</div> </div>
<div> <div>
<div className="text-[9px] font-mono tracking-[0.3em] text-pink-400/50 uppercase mb-0.5">Plateforme</div> <div className="text-[9px] font-mono tracking-[0.3em] text-pink-400/70 uppercase mb-0.5">Plateforme</div>
<h1 className="text-2xl font-black tracking-widest text-white uppercase">TikTok</h1> <h1 className="text-2xl font-black tracking-widest text-white uppercase">TikTok</h1>
</div> </div>
</div> </div>
@@ -99,8 +99,8 @@ export default function TikTokPage() {
{/* Chargement */} {/* Chargement */}
{loading && ( {loading && (
<div className="flex items-center justify-center min-h-[200px] gap-3 text-[#3a5a3a] font-mono text-xs"> <div className="flex items-center justify-center min-h-[200px] gap-3 text-[#6a8a6a] font-mono text-xs">
<Loader2 size={16} className="animate-spin text-pink-400/40" /> <Loader2 size={16} className="animate-spin text-pink-400/60" />
Chargement... Chargement...
</div> </div>
)} )}
@@ -109,12 +109,12 @@ export default function TikTokPage() {
{!loading && stats && ( {!loading && stats && (
<> <>
{stats.displayName && ( {stats.displayName && (
<div className="flex items-center gap-3 mb-6 px-4 py-3 bg-pink-500/5 border border-pink-500/20 rounded-sm"> <div className="flex items-center gap-3 mb-6 px-4 py-3 bg-pink-500/8 border border-pink-500/25 rounded-sm">
{stats.avatarUrl && ( {stats.avatarUrl && (
<img src={stats.avatarUrl} alt="avatar" className="w-8 h-8 rounded-full object-cover border border-pink-500/20" /> <img src={stats.avatarUrl} alt="avatar" className="w-8 h-8 rounded-full object-cover border border-pink-500/30" />
)} )}
<span className="text-pink-400 font-mono text-sm font-bold">{stats.displayName}</span> <span className="text-pink-300 font-mono text-sm font-bold">{stats.displayName}</span>
<span className="text-[9px] font-mono tracking-widest text-pink-400/30 uppercase ml-auto">Connecté</span> <span className="text-[9px] font-mono tracking-widest text-pink-400/50 uppercase ml-auto">Connecté</span>
</div> </div>
)} )}
@@ -149,14 +149,14 @@ export default function TikTokPage() {
{/* Non connecté */} {/* Non connecté */}
{!loading && !stats && !error && ( {!loading && !stats && !error && (
<div className="bg-[#0d1210] border border-[#1a2a1a] rounded-sm p-12 flex flex-col items-center justify-center gap-5 min-h-[240px]"> <div className="bg-[#111a14] border border-[#1e2d1e] rounded-sm p-12 flex flex-col items-center justify-center gap-5 min-h-[240px]">
<Music2 size={36} className="text-pink-400/15" /> <Music2 size={36} className="text-pink-400/30" />
<p className="text-[#3a5a3a] font-mono text-xs tracking-widest text-center uppercase"> <p className="text-[#7a9a7a] font-mono text-xs tracking-widest text-center uppercase">
Connectez votre compte TikTok<br />pour afficher vos statistiques Connectez votre compte TikTok<br />pour afficher vos statistiques
</p> </p>
<a <a
href="/api/tiktok/connect" href="/api/tiktok/connect"
className="flex items-center gap-2 px-5 py-2.5 text-[10px] font-mono tracking-widest uppercase bg-pink-500/10 border border-pink-500/30 text-pink-400 hover:bg-pink-500/20 hover:border-pink-500/50 rounded-sm transition-colors" className="flex items-center gap-2 px-5 py-2.5 text-[10px] font-mono tracking-widest uppercase bg-pink-500/10 border border-pink-500/40 text-pink-300 hover:bg-pink-500/20 hover:border-pink-500/60 rounded-sm transition-colors"
> >
<Link2 size={13} /> <Link2 size={13} />
Connecter TikTok Connecter TikTok
@@ -166,10 +166,10 @@ export default function TikTokPage() {
{/* Erreur API */} {/* Erreur API */}
{!loading && error && ( {!loading && error && (
<div className="bg-[#0d1210] border border-red-500/20 rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]"> <div className="bg-[#111a14] border border-red-500/25 rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]">
<AlertTriangle size={28} className="text-red-400/40" /> <AlertTriangle size={28} className="text-red-400/60" />
<p className="text-red-400/60 font-mono text-xs tracking-widest text-center uppercase">{error}</p> <p className="text-red-400/80 font-mono text-xs tracking-widest text-center uppercase">{error}</p>
<button onClick={loadStats} className="text-[10px] font-mono tracking-widest text-[#3a5a3a] hover:text-pink-400 uppercase transition-colors"> <button onClick={loadStats} className="text-[10px] font-mono tracking-widest text-[#6a8a6a] hover:text-pink-400 uppercase transition-colors">
Réessayer Réessayer
</button> </button>
</div> </div>

4
app/twitch/layout.tsx
View File

@@ -19,9 +19,9 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
if (status !== "authenticated") return null; if (status !== "authenticated") return null;
return ( return (
<div className="flex min-h-screen"> <div className="flex min-h-screen bg-[#0d1117]">
<Sidebar /> <Sidebar />
<main className="ml-56 flex-1 p-8"> <main className="ml-56 flex-1 p-8 bg-[#0d1117]">
{children} {children}
</main> </main>
</div> </div>

10
app/twitch/page.tsx
View File

@@ -5,11 +5,11 @@ export default function TwitchPage() {
return ( return (
<div> <div>
<div className="flex items-center gap-3 mb-8"> <div className="flex items-center gap-3 mb-8">
<div className="p-2 rounded-sm bg-purple-500/10 border border-purple-500/20"> <div className="p-2 rounded-sm bg-purple-500/10 border border-purple-500/25">
<TwitchIcon size={18} className="text-purple-400" /> <TwitchIcon size={18} className="text-purple-400" />
</div> </div>
<div> <div>
<div className="text-[9px] font-mono tracking-[0.3em] text-purple-400/50 uppercase mb-0.5">Plateforme</div> <div className="text-[9px] font-mono tracking-[0.3em] text-purple-400/70 uppercase mb-0.5">Plateforme</div>
<h1 className="text-2xl font-black tracking-widest text-white uppercase">Twitch</h1> <h1 className="text-2xl font-black tracking-widest text-white uppercase">Twitch</h1>
</div> </div>
</div> </div>
@@ -21,9 +21,9 @@ export default function TwitchPage() {
<StatCard label="Abonnés actifs" value="—" sub="Aucune donnée" accent="purple" /> <StatCard label="Abonnés actifs" value="—" sub="Aucune donnée" accent="purple" />
</div> </div>
<div className="bg-[#0d1210] border border-[#1a2a1a] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]"> <div className="bg-[#111a14] border border-[#1e2d1e] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]">
<TwitchIcon size={32} className="text-purple-400/20" /> <TwitchIcon size={32} className="text-purple-400/30" />
<p className="text-[#3a5a3a] font-mono text-xs tracking-widest text-center"> <p className="text-[#7a9a7a] font-mono text-xs tracking-widest text-center">
CONNECTEZ VOTRE COMPTE TWITCH<br />POUR AFFICHER VOS STATISTIQUES CONNECTEZ VOTRE COMPTE TWITCH<br />POUR AFFICHER VOS STATISTIQUES
</p> </p>
</div> </div>

4
app/youtube/layout.tsx
View File

@@ -19,9 +19,9 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
if (status !== "authenticated") return null; if (status !== "authenticated") return null;
return ( return (
<div className="flex min-h-screen"> <div className="flex min-h-screen bg-[#0d1117]">
<Sidebar /> <Sidebar />
<main className="ml-56 flex-1 p-8"> <main className="ml-56 flex-1 p-8 bg-[#0d1117]">
{children} {children}
</main> </main>
</div> </div>

10
app/youtube/page.tsx
View File

@@ -5,11 +5,11 @@ export default function YoutubePage() {
return ( return (
<div> <div>
<div className="flex items-center gap-3 mb-8"> <div className="flex items-center gap-3 mb-8">
<div className="p-2 rounded-sm bg-red-500/10 border border-red-500/20"> <div className="p-2 rounded-sm bg-red-500/10 border border-red-500/25">
<YoutubeIcon size={18} className="text-red-400" /> <YoutubeIcon size={18} className="text-red-400" />
</div> </div>
<div> <div>
<div className="text-[9px] font-mono tracking-[0.3em] text-red-400/50 uppercase mb-0.5">Plateforme</div> <div className="text-[9px] font-mono tracking-[0.3em] text-red-400/70 uppercase mb-0.5">Plateforme</div>
<h1 className="text-2xl font-black tracking-widest text-white uppercase">YouTube</h1> <h1 className="text-2xl font-black tracking-widest text-white uppercase">YouTube</h1>
</div> </div>
</div> </div>
@@ -21,9 +21,9 @@ export default function YoutubePage() {
<StatCard label="Watch time (h)" value="—" sub="Aucune donnée" accent="red" /> <StatCard label="Watch time (h)" value="—" sub="Aucune donnée" accent="red" />
</div> </div>
<div className="bg-[#0d1210] border border-[#1a2a1a] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]"> <div className="bg-[#111a14] border border-[#1e2d1e] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]">
<YoutubeIcon size={32} className="text-red-400/20" /> <YoutubeIcon size={32} className="text-red-400/30" />
<p className="text-[#3a5a3a] font-mono text-xs tracking-widest text-center"> <p className="text-[#7a9a7a] font-mono text-xs tracking-widest text-center">
CONNECTEZ VOTRE COMPTE YOUTUBE<br />POUR AFFICHER VOS STATISTIQUES CONNECTEZ VOTRE COMPTE YOUTUBE<br />POUR AFFICHER VOS STATISTIQUES
</p> </p>
</div> </div>

18
components/LiveBanner.tsx
View File

@@ -8,40 +8,40 @@ export type StreamInfo = {
export default function LiveBanner({ stream }: { stream: StreamInfo }) { export default function LiveBanner({ stream }: { stream: StreamInfo }) {
return ( return (
<div className={`border rounded-sm p-5 flex items-center gap-5 transition-colors duration-300 ${ <div className={`border rounded-lg p-5 flex items-center gap-5 transition-colors duration-300 ${
stream.live stream.live
? "bg-[#4aff8c]/3 border-[#4aff8c]/20" ? "bg-acid-green/10 border-acid-green/30"
: "bg-white/[0.02] border-[#1a2a1a]" : "bg-wy-surface border-wy-border"
}`}> }`}>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
{stream.live ? ( {stream.live ? (
<span className="flex items-center gap-1.5 text-[9px] font-mono tracking-[0.2em] text-red-400 bg-red-500/10 border border-red-500/20 px-2 py-1 rounded-sm"> <span className="flex items-center gap-1.5 text-xs font-mono tracking-widest text-red-400 bg-red-500/10 border border-red-500/30 px-2 py-1 rounded-md">
<span className="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse" /> <span className="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse" />
EN DIRECT EN DIRECT
</span> </span>
) : ( ) : (
<span className="text-[9px] font-mono tracking-[0.2em] text-[#3a5a3a] bg-white/[0.02] border border-[#1a2a1a] px-2 py-1 rounded-sm"> <span className="text-xs font-mono tracking-widest text-wy-text-secondary bg-wy-surface border border-wy-border px-2 py-1 rounded-md">
HORS LIGNE HORS LIGNE
</span> </span>
)} )}
{stream.duration && ( {stream.duration && (
<span className="text-[10px] font-mono text-[#3a5a3a]">{stream.duration}</span> <span className="text-xs font-mono text-wy-text-secondary">{stream.duration}</span>
)} )}
</div> </div>
<div className="text-white font-bold truncate"> <div className="text-white font-bold truncate">
{stream.title || "En attente du prochain stream..."} {stream.title || "En attente du prochain stream..."}
</div> </div>
{stream.game && ( {stream.game && (
<div className="text-[12px] text-[#3a5a3a] font-mono mt-1">🎮 {stream.game}</div> <div className="text-sm text-wy-text-secondary font-mono mt-1">🎮 {stream.game}</div>
)} )}
</div> </div>
<div className="text-right flex-shrink-0"> <div className="text-right flex-shrink-0">
<div className={`text-3xl font-black leading-none ${stream.live ? "text-[#4aff8c]" : "text-[#2a3a2a]"}`}> <div className={`text-4xl font-black leading-none ${stream.live ? "text-acid-green" : "text-wy-text-secondary"}`}>
{stream.viewers ?? 0} {stream.viewers ?? 0}
</div> </div>
<div className="text-[9px] font-mono tracking-widest text-[#3a5a3a] mt-0.5">VIEWERS</div> <div className="text-xs font-mono tracking-widest text-wy-text-secondary mt-0.5">VIEWERS</div>
</div> </div>
</div> </div>
); );

12
components/LogFeed.tsx
View File

@@ -7,12 +7,12 @@ export type LogEntry = {
}; };
const typeStyles = { const typeStyles = {
info: { border: "border-l-[#4aff8c]/60", icon: "✅" }, info: { border: "border-l-acid-green/60", icon: "✅" },
warn: { border: "border-l-yellow-400/60", icon: "⚠️" }, warn: { border: "border-l-yellow-400/60", icon: "⚠️" },
ban: { border: "border-l-red-500/60", icon: "🔨" }, ban: { border: "border-l-red-500/60", icon: "🔨" },
unban: { border: "border-l-blue-400/60", icon: "🔓" }, unban: { border: "border-l-blue-400/60", icon: "🔓" },
twitch: { border: "border-l-purple-400/60", icon: "📡" }, twitch: { border: "border-l-purple-400/60", icon: "📡" },
sub: { border: "border-l-[#4aff8c]/60", icon: "🎖️" }, sub: { border: "border-l-acid-green/60", icon: "🎖️" },
}; };
const MOCK_LOGS: LogEntry[] = [ const MOCK_LOGS: LogEntry[] = [
@@ -32,17 +32,17 @@ export default function LogFeed({ logs = MOCK_LOGS }: { logs?: LogEntry[] }) {
return ( return (
<div <div
key={log.id} key={log.id}
className={`flex items-start gap-3 px-3 py-2.5 bg-white/[0.02] border border-[#1a2a1a] border-l-2 ${style.border} rounded-sm text-sm`} className={`flex items-start gap-3 px-3 py-2.5 bg-wy-surface border border-wy-border border-l-2 ${style.border} rounded-md text-sm`}
style={{ animation: `fadeIn 0.3s ${i * 0.05}s both` }} style={{ animation: `fadeIn 0.3s ${i * 0.05}s both` }}
> >
<span className="text-base flex-shrink-0 mt-0.5">{style.icon}</span> <span className="text-base flex-shrink-0 mt-0.5">{style.icon}</span>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="text-[#b0c4b0] leading-snug">{log.text}</div> <div className="text-wy-text-primary leading-snug">{log.text}</div>
{log.reason && ( {log.reason && (
<div className="text-[11px] text-[#3a5a3a] font-mono mt-0.5 italic">{log.reason}</div> <div className="text-xs text-wy-text-secondary font-mono mt-0.5 italic">{log.reason}</div>
)} )}
</div> </div>
<div className="text-[10px] font-mono text-[#2a4a2a] whitespace-nowrap mt-0.5">{log.time}</div> <div className="text-xs font-mono text-wy-text-secondary whitespace-nowrap mt-0.5">{log.time}</div>
</div> </div>
); );
})} })}

16
components/MemberList.tsx
View File

@@ -6,10 +6,10 @@ export type Member = {
}; };
const roleStyles = { const roleStyles = {
admin: { label: "ADMIN", cls: "text-red-400 bg-red-500/8 border-red-500/20" }, admin: { label: "ADMIN", cls: "text-red-400 bg-red-500/10 border-red-500/30" },
mod: { label: "MOD", cls: "text-yellow-400 bg-yellow-400/8 border-yellow-400/20" }, mod: { label: "MOD", cls: "text-yellow-400 bg-yellow-400/10 border-yellow-400/30" },
sub: { label: "SUB", cls: "text-[#4aff8c] bg-[#4aff8c]/8 border-[#4aff8c]/20" }, sub: { label: "SUB", cls: "text-acid-green bg-acid-green/10 border-acid-green/30" },
viewer: { label: "VIEWER", cls: "text-blue-400 bg-blue-400/8 border-blue-400/20" }, viewer: { label: "VIEWER", cls: "text-blue-400 bg-blue-400/10 border-blue-400/30" },
}; };
const AVATARS = ["🗡️", "🛡️", "🏹", "⚔️", "🔥", "💀", "🐉", "⚡"]; const AVATARS = ["🗡️", "🛡️", "🏹", "⚔️", "🔥", "💀", "🐉", "⚡"];
@@ -32,13 +32,13 @@ export default function MemberList({ members = MOCK_MEMBERS }: { members?: Membe
return ( return (
<div <div
key={m.id} key={m.id}
className="flex items-center gap-3 px-3 py-2 bg-white/[0.02] border border-[#1a2a1a] rounded-sm hover:bg-[#4aff8c]/3 transition-colors duration-150" className="flex items-center gap-3 px-3 py-2 bg-wy-surface border border-wy-border rounded-md hover:bg-wy-surface/50 transition-colors duration-150"
> >
<div className="w-7 h-7 rounded-full bg-[#0a1a0a] border border-[#1a2a1a] flex items-center justify-center text-xs flex-shrink-0"> <div className="w-8 h-8 rounded-full bg-wy-dark border border-wy-border flex items-center justify-center text-sm flex-shrink-0">
{avatar} {avatar}
</div> </div>
<div className="flex-1 text-sm text-[#b0c4b0] font-mono">{m.name}</div> <div className="flex-1 text-sm text-wy-text-primary font-mono">{m.name}</div>
<span className={`text-[9px] font-mono tracking-wider px-2 py-0.5 border rounded-sm ${role.cls}`}> <span className={`text-xs font-mono tracking-wider px-2 py-0.5 border rounded-md ${role.cls}`}>
{role.label} {role.label}
</span> </span>
</div> </div>

28
components/Sidebar.tsx
View File

@@ -31,18 +31,17 @@ export default function Sidebar() {
}; };
return ( return (
<aside className="fixed left-0 top-0 h-screen w-56 bg-[#0a0d0f] border-r border-[#1a2a1a] flex flex-col z-50"> <aside className="fixed left-0 top-0 h-screen w-56 bg-wy-dark border-r border-wy-border flex flex-col z-50">
{/* Logo */} {/* Logo */}
<div className="flex items-center gap-3 px-5 py-6 border-b border-[#1a2a1a]"> <div className="flex items-center gap-3 px-5 py-6 border-b border-wy-border">
<DragonEye size={32} /> <DragonEye size={32} />
<div> <div>
<div className="text-[8px] font-mono tracking-[0.3em] text-[#4aff8c]/40 uppercase">Analytics</div> <div className="text-[8px] font-mono tracking-[0.3em] text-acid-green/60 uppercase">Analytics</div>
<div className="text-base font-black tracking-widest text-white">WYVIEW</div> <div className="text-base font-black tracking-widest text-white">WYVIEW</div>
</div> </div>
</div> </div>
{/* Nav */}
<nav className="flex-1 px-3 py-4 flex flex-col gap-1"> <nav className="flex-1 px-3 py-4 flex flex-col gap-1">
{nav.map(({ label, href, icon: Icon }) => { {nav.map(({ label, href, icon: Icon }) => {
const active = pathname === href; const active = pathname === href;
@@ -50,28 +49,27 @@ export default function Sidebar() {
<button <button
key={href} key={href}
onClick={() => router.push(href)} onClick={() => router.push(href)}
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-sm text-left transition-all duration-150 group ${ className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-left transition-all duration-150 group ${
active active
? "bg-[#4aff8c]/8 border border-[#4aff8c]/20 text-[#4aff8c]" ? "bg-acid-green/10 border border-acid-green/30 text-acid-green"
: "border border-transparent text-[#4a6a4a] hover:text-[#a0c4a0] hover:bg-white/[0.03]" : "border border-transparent text-wy-text-secondary hover:text-wy-text-primary hover:bg-white/[0.04]"
}`} }`}
> >
<Icon size={14} className="flex-shrink-0" /> <Icon size={16} className="flex-shrink-0" />
<span className="text-[11px] font-mono tracking-wider">{label}</span> <span className="text-sm font-medium">{label}</span>
{active && <span className="ml-auto w-1 h-1 rounded-full bg-[#4aff8c]" />} {active && <span className="ml-auto w-1.5 h-1.5 rounded-full bg-acid-green" />}
</button> </button>
); );
})} })}
</nav> </nav>
{/* Footer */} <div className="px-3 py-4 border-t border-wy-border">
<div className="px-3 py-4 border-t border-[#1a2a1a]">
<button <button
onClick={handleLogout} onClick={handleLogout}
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-sm text-[#3a5a3a] hover:text-red-400 hover:bg-red-500/5 border border-transparent hover:border-red-500/20 transition-all duration-150" className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-wy-text-secondary hover:text-red-400 hover:bg-red-500/10 border border-transparent hover:border-red-500/25 transition-all duration-150"
> >
<LogOut size={14} /> <LogOut size={16} />
<span className="text-[11px] font-mono tracking-wider">DÉCONNEXION</span> <span className="text-sm font-medium">Déconnexion</span>
</button> </button>
</div> </div>

20
components/StatCard.tsx
View File

@@ -8,7 +8,7 @@ interface StatCardProps {
} }
const accentColors = { const accentColors = {
green: { val: "text-[#4aff8c]", border: "border-t-[#4aff8c]/40" }, green: { val: "text-acid-green", border: "border-t-acid-green/40" },
red: { val: "text-red-400", border: "border-t-red-500/40" }, red: { val: "text-red-400", border: "border-t-red-500/40" },
blue: { val: "text-blue-400", border: "border-t-blue-400/40" }, blue: { val: "text-blue-400", border: "border-t-blue-400/40" },
purple: { val: "text-purple-400", border: "border-t-purple-400/40" }, purple: { val: "text-purple-400", border: "border-t-purple-400/40" },
@@ -18,23 +18,23 @@ const accentColors = {
export default function StatCard({ label, value, sub, accent = "green", delta, deltaUp }: StatCardProps) { export default function StatCard({ label, value, sub, accent = "green", delta, deltaUp }: StatCardProps) {
const colors = accentColors[accent]; const colors = accentColors[accent];
return ( return (
<div className={`bg-[#0d1210] border border-[#1a2a1a] border-t-2 ${colors.border} rounded-sm p-5 relative group hover:-translate-y-0.5 transition-transform duration-200`}> <div className={`bg-wy-surface border border-wy-border border-t-2 ${colors.border} rounded-lg p-5 relative group hover:-translate-y-0.5 transition-transform duration-200`}>
<div className="text-[9px] font-mono tracking-[0.25em] text-[#3a5a3a] uppercase mb-3"> <div className="text-xs font-mono tracking-widest text-wy-text-secondary uppercase mb-3">
{label} {label}
</div> </div>
<div className={`text-3xl font-black tracking-tight ${colors.val} leading-none mb-1`}> <div className={`text-4xl font-black tracking-tight ${colors.val} leading-none mb-1`}>
{value === "—" || value === 0 ? <span className="text-[#2a3a2a]">—</span> : value} {value === "—" || value === 0 ? <span className="text-wy-text-secondary">—</span> : value}
</div> </div>
{sub && ( {sub && (
<div className="text-[11px] text-[#3a4a3a] font-mono mt-1">{sub}</div> <div className="text-xs text-wy-text-secondary font-mono mt-1">{sub}</div>
)} )}
{delta && ( {delta && (
<div className={`absolute top-4 right-4 text-[9px] font-mono tracking-wider px-2 py-1 rounded-sm border ${ <div className={`absolute top-4 right-4 text-xs font-mono tracking-wider px-2 py-1 rounded-md border ${
deltaUp deltaUp
? "text-[#4aff8c] bg-[#4aff8c]/5 border-[#4aff8c]/20" ? "text-acid-green bg-acid-green/10 border-acid-green/30"
: "text-red-400 bg-red-500/5 border-red-500/20" : "text-red-400 bg-red-500/10 border-red-500/30"
}`}> }`}>
{deltaUp ? "+" : ""}{delta} {deltaUp ? "▲" : "▼"} {delta}
</div> </div>
)} )}
</div> </div>

12
tailwind.config.js
View File

@@ -5,7 +5,17 @@ module.exports = {
"./components/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}",
], ],
theme: { theme: {
extend: {}, extend: {
colors: {
"acid-green": "#4aff8c",
"rathian-dark": "#0a8a3a",
"wy-dark": "#0d1117",
"wy-surface": "#161b22",
"wy-border": "#30363d",
"wy-text-primary": "#c9d1d9",
"wy-text-secondary": "#8b949e",
},
},
}, },
plugins: [], plugins: [],
} }