perf: change the DA to something more readable

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

View File

@@ -15,6 +15,16 @@ export async function GET() {
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 } });
if (!tokenRecord) {
@@ -23,7 +33,6 @@ export async function GET() {
let { accessToken, refreshToken, openId, expiresAt } = tokenRecord;
// Refresh si expiré (avec 60s de marge)
if (expiresAt.getTime() - Date.now() < 60_000) {
try {
const refreshed = await refreshAccessToken(refreshToken);

View File

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

View File

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

View File

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

View File

@@ -5,11 +5,11 @@ export default function FinancesPage() {
return (
<div>
<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" />
</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>
</div>
</div>
@@ -21,9 +21,9 @@ export default function FinancesPage() {
<StatCard label="Abonnements" value="—" sub="Aucune donnée" accent="gold" />
</div>
<div className="bg-[#0d1210] border border-[#1a2a1a] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]">
<DollarSign size={32} className="text-yellow-400/20" />
<p className="text-[#3a5a3a] font-mono text-xs tracking-widest text-center">
<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/30" />
<p className="text-[#7a9a7a] font-mono text-xs tracking-widest text-center">
AUCUNE DONNÉE FINANCIÈRE DISPONIBLE<br />POUR LE MOMENT
</p>
</div>

View File

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

View File

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

View File

@@ -1,4 +1,3 @@
import StatCard from "@/components/StatCard";
import { Camera } from "lucide-react";
@@ -6,11 +5,11 @@ export default function InstagramPage() {
return (
<div>
<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" />
</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>
</div>
</div>
@@ -22,9 +21,9 @@ export default function InstagramPage() {
<StatCard label="Portée moy." value="—" sub="Aucune donnée" accent="gold" />
</div>
<div className="bg-[#0d1210] border border-[#1a2a1a] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]">
<Camera size={32} className="text-orange-400/20" />
<p className="text-[#3a5a3a] font-mono text-xs tracking-widest text-center">
<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/30" />
<p className="text-[#7a9a7a] font-mono text-xs tracking-widest text-center">
CONNECTEZ VOTRE COMPTE INSTAGRAM<br />POUR AFFICHER VOS STATISTIQUES
</p>
</div>

View File

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

View File

@@ -86,12 +86,12 @@ export default function AuthPage() {
};
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 ${
hasError ? "border-red-500/50" : "border-[#1a2a1a] focus:border-[#4aff8c]/40"
`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/60" : "border-wy-border focus:border-acid-green/60"
}`;
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
className="absolute inset-0 opacity-20 pointer-events-none"
style={{
@@ -99,30 +99,30 @@ export default function AuthPage() {
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">
{/* Header */}
<div className="flex flex-col items-center gap-5">
<DragonEye size={80} />
<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
</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
</h1>
</div>
</div>
{/* 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
onClick={() => { setTab("login"); setLoginError(""); }}
className={`flex-1 py-2 text-[10px] font-mono tracking-[0.3em] uppercase transition-all duration-200 ${
tab === "login"
? "bg-[#4aff8c]/10 text-[#4aff8c] border-r border-[#1a2a1a]"
: "text-[#2a4a2a] hover:text-[#4aff8c]/60 border-r border-[#1a2a1a]"
? "bg-acid-green/10 text-acid-green border-r border-wy-border"
: "text-wy-text-secondary hover:text-acid-green/80 border-r border-wy-border"
}`}
>
CONNEXION
@@ -131,8 +131,8 @@ export default function AuthPage() {
onClick={() => { setTab("register"); setRegError(""); setRegSuccess(""); }}
className={`flex-1 py-2 text-[10px] font-mono tracking-[0.3em] uppercase transition-all duration-200 ${
tab === "register"
? "bg-[#4aff8c]/10 text-[#4aff8c]"
: "text-[#2a4a2a] hover:text-[#4aff8c]/60"
? "bg-acid-green/10 text-acid-green"
: "text-wy-text-secondary hover:text-acid-green/80"
}`}
>
INSCRIPTION
@@ -164,7 +164,7 @@ export default function AuthPage() {
<button
type="submit"
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"}
</button>
@@ -210,19 +210,19 @@ export default function AuthPage() {
<p className="text-red-400/80 text-[11px] font-mono tracking-widest"> {regError}</p>
)}
{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
type="submit"
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"}
</button>
</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
</div>
</div>

View File

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

View File

@@ -69,7 +69,7 @@ export default function TikTokPage() {
<Music2 size={18} className="text-pink-400" />
</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>
</div>
</div>
@@ -99,8 +99,8 @@ export default function TikTokPage() {
{/* Chargement */}
{loading && (
<div className="flex items-center justify-center min-h-[200px] gap-3 text-[#3a5a3a] font-mono text-xs">
<Loader2 size={16} className="animate-spin text-pink-400/40" />
<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/60" />
Chargement...
</div>
)}
@@ -109,12 +109,12 @@ export default function TikTokPage() {
{!loading && stats && (
<>
{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 && (
<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-[9px] font-mono tracking-widest text-pink-400/30 uppercase ml-auto">Connecté</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/50 uppercase ml-auto">Connecté</span>
</div>
)}
@@ -149,14 +149,14 @@ export default function TikTokPage() {
{/* Non connecté */}
{!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]">
<Music2 size={36} className="text-pink-400/15" />
<p className="text-[#3a5a3a] font-mono text-xs tracking-widest text-center uppercase">
<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/30" />
<p className="text-[#7a9a7a] font-mono text-xs tracking-widest text-center uppercase">
Connectez votre compte TikTok<br />pour afficher vos statistiques
</p>
<a
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} />
Connecter TikTok
@@ -166,10 +166,10 @@ export default function TikTokPage() {
{/* Erreur API */}
{!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]">
<AlertTriangle size={28} className="text-red-400/40" />
<p className="text-red-400/60 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">
<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/60" />
<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-[#6a8a6a] hover:text-pink-400 uppercase transition-colors">
Réessayer
</button>
</div>

View File

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

View File

@@ -5,11 +5,11 @@ export default function TwitchPage() {
return (
<div>
<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" />
</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>
</div>
</div>
@@ -21,9 +21,9 @@ export default function TwitchPage() {
<StatCard label="Abonnés actifs" value="—" sub="Aucune donnée" accent="purple" />
</div>
<div className="bg-[#0d1210] border border-[#1a2a1a] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]">
<TwitchIcon size={32} className="text-purple-400/20" />
<p className="text-[#3a5a3a] font-mono text-xs tracking-widest text-center">
<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/30" />
<p className="text-[#7a9a7a] font-mono text-xs tracking-widest text-center">
CONNECTEZ VOTRE COMPTE TWITCH<br />POUR AFFICHER VOS STATISTIQUES
</p>
</div>

View File

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

View File

@@ -5,11 +5,11 @@ export default function YoutubePage() {
return (
<div>
<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" />
</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>
</div>
</div>
@@ -21,9 +21,9 @@ export default function YoutubePage() {
<StatCard label="Watch time (h)" value="—" sub="Aucune donnée" accent="red" />
</div>
<div className="bg-[#0d1210] border border-[#1a2a1a] rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]">
<YoutubeIcon size={32} className="text-red-400/20" />
<p className="text-[#3a5a3a] font-mono text-xs tracking-widest text-center">
<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/30" />
<p className="text-[#7a9a7a] font-mono text-xs tracking-widest text-center">
CONNECTEZ VOTRE COMPTE YOUTUBE<br />POUR AFFICHER VOS STATISTIQUES
</p>
</div>