@jhits/dashboard 0.0.1

package/src/assets/locales/nl/common.json

@@ -0,0 +1,48 @@
+{
+    "sidebar": {
+        "users": "Gebruikers",
+        "website": "Site",
+        "stats": "Statistieken",
+        "blog": "Content Beheer",
+        "newsletter": "Nieuwsbrief",
+        "settings": "Instellingen",
+        "logout": "Uitloggen",
+        "logging_out": "Uitloggen..."
+    },
+    "dashboard": {
+        "status": "PLATFORM ACTIEF",
+        "welcome": "Welkom terug, {name}",
+        "description": "Uw modulair ecosysteem is gereed. Bekijk uw statistieken, update uw content of beheer uw nieuwsbrieven vanaf één centrale plek.",
+        "your_modules": "Geïnstalleerde Modules",
+        "open_module": "Module Openen",
+        "module_desc": {
+            "users": "Beheer gebruikersaccounts, rollen en rechten.",
+            "website": "Configureer site-instellingen, pagina's en navigatie.",
+            "stats": "Bekijk realtime verkeer en betrokkenheidsgegevens.",
+            "blog": "Publiceer en bewerk uw nieuwste artikelen.",
+            "newsletter": "Beheer uw abonnees en campagnes."
+        }
+    },
+    "profile": {
+        "personal_information": "Persoonlijke Informatie",
+        "full_name": "Volledige Naam",
+        "email_address": "E-mailadres",
+        "save_changes": "Wijzigingen Opslaan",
+        "updating": "Bijwerken",
+        "verified_account": "Geverifieerd Account",
+        "login_activity": "Inlogactiviteit",
+        "current": "Huidig",
+        "revoke": "Intrekken",
+        "revoking": "Intrekken...",
+        "security_access": "Beveiliging & Toegang",
+        "change_password": "Wachtwoord Wijzigen",
+        "two_factor_auth": "Twee-Factor Authenticatie",
+        "billing_details": "Factureringsgegevens",
+        "security_update": "Beveiligingsupdate",
+        "new_password": "Nieuw Wachtwoord",
+        "confirm_new_password": "Bevestig Nieuw Wachtwoord",
+        "update_password": "Wachtwoord Bijwerken",
+        "updating_password": "Bijwerken...",
+        "terminate_session_confirm": "Weet u zeker dat u deze sessie wilt beëindigen?"
+    }
+}

package/src/assets/locales/sv/common.json

@@ -0,0 +1,48 @@
+{
+    "sidebar": {
+        "users": "Användare",
+        "website": "Site",
+        "stats": "Statistik",
+        "blog": "Innehållshantering",
+        "newsletter": "Nyhetsbrev",
+        "settings": "Inställningar",
+        "logout": "Logga ut",
+        "logging_out": "Loggar ut..."
+    },
+    "dashboard": {
+        "status": "PLATTFORM AKTIV",
+        "welcome": "Välkommen tillbaka, {name}",
+        "description": "Ditt modulära ekosystem är redo. Övervaka din statistik, uppdatera ditt innehåll eller hantera dina nyhetsbrev från en och samma plats.",
+        "your_modules": "Installerade Moduler",
+        "open_module": "Öppna Modul",
+        "module_desc": {
+            "users": "Hantera användarkonton, roller och behörigheter.",
+            "website": "Konfigurera webbplatsinställningar, sidor och navigering.",
+            "stats": "Visa trafik och engagemangsdata i realtid.",
+            "blog": "Publicera och redigera dina senaste artiklar.",
+            "newsletter": "Hantera dina prenumeranter och kampanjer."
+        }
+    },
+    "profile": {
+        "personal_information": "Personlig Information",
+        "full_name": "Fullständigt Namn",
+        "email_address": "E-postadress",
+        "save_changes": "Spara Ändringar",
+        "updating": "Uppdaterar",
+        "verified_account": "Verifierat Konto",
+        "login_activity": "Inloggningsaktivitet",
+        "current": "Nuvarande",
+        "revoke": "Återkalla",
+        "revoking": "Återkallar...",
+        "security_access": "Säkerhet & Åtkomst",
+        "change_password": "Ändra Lösenord",
+        "two_factor_auth": "Tvåfaktorsautentisering",
+        "billing_details": "Faktureringsuppgifter",
+        "security_update": "Säkerhetsuppdatering",
+        "new_password": "Nytt Lösenord",
+        "confirm_new_password": "Bekräfta Nytt Lösenord",
+        "update_password": "Uppdatera Lösenord",
+        "updating_password": "Uppdaterar...",
+        "terminate_session_confirm": "Är du säker på att du vill avsluta denna session?"
+    }
+}

package/src/assets/plugins.json

@@ -0,0 +1,42 @@
+[
+    {
+        "id": "user-management",
+        "repo": "plugin-users",
+        "routePrefix": "users",
+        "name": "User Management",
+        "version": "1.0.0",
+        "enabled": true
+    },
+    {
+        "id": "website-settings",
+        "repo": "plugin-website",
+        "routePrefix": "website",
+        "name": "Website Settings",
+        "version": "1.0.0",
+        "enabled": true
+    },
+    {
+        "id": "blog-system",
+        "repo": "plugin-blog",
+        "routePrefix": "blog",
+        "name": "Blog Management Pro",
+        "version": "1.0.0",
+        "enabled": true
+    },
+    {
+        "id": "image-management",
+        "repo": "plugin-images",
+        "routePrefix": "images",
+        "name": "Image Manager",
+        "version": "1.0.0",
+        "enabled": true
+    },
+    {
+        "id": "newsletter-management",
+        "repo": "plugin-newsletter",
+        "routePrefix": "newsletter",
+        "name": "Newsletter Manager",
+        "version": "1.0.0",
+        "enabled": true
+    }
+]

package/src/assets/public/animated-logo-white.svg

@@ -0,0 +1,5 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" class="animate-svg"><defs><style>.animate-svg path{-webkit-animation:draw ease-in-out forwards;animation:draw ease-in-out forwards;stroke:#000}.animate-svg{-webkit-animation:fillopacity 3 ease-in-out forwards;animation:fillopacity 3s ease-in-out forwards}@-webkit-keyframes draw{100%{stroke-dashoffset:0}}@keyframes draw{100%{stroke-dashoffset:0}}@-webkit-keyframes fillopacity{0%,70%{fill-opacity:0;stroke-width:0.5%}100%{fill-opacity:1;stroke-width:0}}@keyframes fillopacity{0%,70%{fill-opacity:0;stroke-width:0.5%}100%{fill-opacity:1;stroke-width:0}}</style></defs>
+<path d="M107.428 29.7635L107.426 5.23329C103.06 4.31776 98.5891 3.69177 94.0308 3.37646V25.4817V84.743C98.1903 84.1056 102.543 83.5975 107.428 83.2324V29.7635Z" fill="#F3F3F3" style="stroke-dasharray: 186.385px; stroke-dashoffset: 186.385px; animation-delay: 0s; animation-duration: 1.24993s;"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M80.6358 199.538C48.3919 197.43 20.3896 179.775 4.05225 153.999L4.28131 153.647C6.87071 149.667 10.5908 143.953 13.2505 140.741C13.4148 140.522 13.5753 140.309 13.7352 140.097C14.9218 138.517 16.0705 136.988 18.3439 134.332C27.3553 124.301 47.3779 105.717 76.9136 98.86C94.6562 94.7392 106.311 92.2758 132.545 92.2758C142.75 92.2758 153.293 92.5643 162.925 92.9553C169.007 93.2026 174.557 93.509 179.949 93.8073C181.746 93.9051 183.524 94.003 185.3 94.0983C194.196 94.6438 199.897 95.097 199.897 95.097C199.897 95.097 194.278 95.3336 185.295 95.8898L163.144 97.4804C146.094 98.8783 125.621 100.976 107.428 103.985V161.309C103.104 162.514 98.6251 163.346 94.0307 163.76V106.472C89.2068 107.48 84.6949 108.572 80.6358 109.748V199.538ZM67.2383 175.09C49.7919 170.385 34.8192 159.644 24.701 145.248C33.1855 136.527 48.1885 123.153 67.2383 114.643V175.09Z" fill="#F3F3F3" style="stroke-dasharray: 800.894px; stroke-dashoffset: 800.894px; animation-delay: 0.333333s; animation-duration: 2.27715s;"></path>
+<path d="M67.2383 90.5051C68.9502 90.0055 70.6876 89.5502 72.4481 89.1408C75.3076 88.4766 78.0076 87.8566 80.6357 87.2825V39.4291C76.0413 39.8456 71.5625 40.6752 67.2383 41.8806V90.5051Z" fill="#F3F3F3" style="stroke-dasharray: 123.899px; stroke-dashoffset: 123.899px; animation-delay: 0.666667s; animation-duration: 1.47s;"></path>
+</svg>

package/src/assets/public/logo_black.svg

@@ -0,0 +1,5 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="currentColor" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
+    <path d="M107.428 29.7635L107.426 5.23329C103.06 4.31776 98.5891 3.69177 94.0308 3.37646V25.4817V84.743C98.1903 84.1056 102.543 83.5975 107.428 83.2324V29.7635Z"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M80.6358 199.538C48.3919 197.43 20.3896 179.775 4.05225 153.999L4.28131 153.647C6.87071 149.667 10.5908 143.953 13.2505 140.741C13.4148 140.522 13.5753 140.309 13.7352 140.097C14.9218 138.517 16.0705 136.988 18.3439 134.332C27.3553 124.301 47.3779 105.717 76.9136 98.86C94.6562 94.7392 106.311 92.2758 132.545 92.2758C142.75 92.2758 153.293 92.5643 162.925 92.9553C169.007 93.2026 174.557 93.509 179.949 93.8073C181.746 93.9051 183.524 94.003 185.3 94.0983C194.196 94.6438 199.897 95.097 199.897 95.097C199.897 95.097 194.278 95.3336 185.295 95.8898L163.144 97.4804C146.094 98.8783 125.621 100.976 107.428 103.985V161.309C103.104 162.514 98.6251 163.346 94.0307 163.76V106.472C89.2068 107.48 84.6949 108.572 80.6358 109.748V199.538ZM67.2383 175.09C49.7919 170.385 34.8192 159.644 24.701 145.248C33.1855 136.527 48.1885 123.153 67.2383 114.643V175.09Z"></path>
+    <path d="M67.2383 90.5051C68.9502 90.0055 70.6876 89.5502 72.4481 89.1408C75.3076 88.4766 78.0076 87.8566 80.6357 87.2825V39.4291C76.0413 39.8456 71.5625 40.6752 67.2383 41.8806V90.5051Z"></path>
+</svg>

package/src/assets/public/logo_white.svg

@@ -0,0 +1,5 @@
+<svg width="200" height="200" view-box="0 0 200 200" fill="white" xmlns="http://www.w3.org/2000/svg">
+        <path d="M107.428 29.7635L107.426 5.23329C103.06 4.31776 98.5891 3.69177 94.0308 3.37646V25.4817V84.743C98.1903 84.1056 102.543 83.5975 107.428 83.2324V29.7635Z"></path>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M80.6358 199.538C48.3919 197.43 20.3896 179.775 4.05225 153.999L4.28131 153.647C6.87071 149.667 10.5908 143.953 13.2505 140.741C13.4148 140.522 13.5753 140.309 13.7352 140.097C14.9218 138.517 16.0705 136.988 18.3439 134.332C27.3553 124.301 47.3779 105.717 76.9136 98.86C94.6562 94.7392 106.311 92.2758 132.545 92.2758C142.75 92.2758 153.293 92.5643 162.925 92.9553C169.007 93.2026 174.557 93.509 179.949 93.8073C181.746 93.9051 183.524 94.003 185.3 94.0983C194.196 94.6438 199.897 95.097 199.897 95.097C199.897 95.097 194.278 95.3336 185.295 95.8898L163.144 97.4804C146.094 98.8783 125.621 100.976 107.428 103.985V161.309C103.104 162.514 98.6251 163.346 94.0307 163.76V106.472C89.2068 107.48 84.6949 108.572 80.6358 109.748V199.538ZM67.2383 175.09C49.7919 170.385 34.8192 159.644 24.701 145.248C33.1855 136.527 48.1885 123.153 67.2383 114.643V175.09Z"></path>
+        <path d="M67.2383 90.5051C68.9502 90.0055 70.6876 89.5502 72.4481 89.1408C75.3076 88.4766 78.0076 87.8566 80.6357 87.2825V39.4291C76.0413 39.8456 71.5625 40.6752 67.2383 41.8806V90.5051Z"></path>
+    </svg>

package/src/components/DashboardCatchAll.tsx

@@ -0,0 +1,95 @@
+// Dashboard catch-all route handler
+// This component handles all routes and delegates dashboard routes to the dashboard router
+import DashboardLayout from '../app/[locale]/dashboard/layout';
+import DashboardHome from '../app/[locale]/dashboard/page';
+import DashboardPreferences from '../app/[locale]/dashboard/preferences/page';
+import DashboardProfile from '../app/[locale]/dashboard/profile/page';
+import DashboardPluginRoute from '../app/[locale]/dashboard/[...pluginRoute]/page';
+import { WebsiteProvider } from '../lib/website-context';
+import { getWebsiteInfo } from '../lib/get-website-info';
+import { notFound } from 'next/navigation';
+
+export interface DashboardCatchAllProps {
+    params: Promise<{ locale: string; path: string[] }>;
+}
+
+/**
+ * DashboardCatchAll - Handles routing for dashboard routes
+ * 
+ * This component checks if the current path is a dashboard route.
+ * If it is, it delegates to the DashboardRouter.
+ * If it's not, it returns 404.
+ * 
+ * Usage in client app:
+ *   export default async function CatchAllPage(props: { params: Promise<{ locale: string; path: string[] }> }) {
+ *       return <DashboardCatchAll params={props.params} />;
+ *   }
+ */
+
+export default async function DashboardCatchAll({ params }: DashboardCatchAllProps) {
+    const resolvedParams = await params;
+    const path = resolvedParams.path;
+    const locale = resolvedParams.locale;
+    
+    // Handle login routes first (these should be accessible without auth)
+    if (path.length > 0 && path[0] === 'login') {
+        const { default: LoginPage } = await import('../app/[locale]/(auth)/login/page');
+        const { Providers } = await import('../components/Providers');
+        const { WebsiteProvider } = await import('../lib/website-context');
+        const websiteInfo = await getWebsiteInfo(locale);
+        
+        return (
+            <Providers>
+                <WebsiteProvider website={websiteInfo}>
+                    <LoginPage />
+                </WebsiteProvider>
+            </Providers>
+        );
+    }
+    
+    // Handle dashboard routes (these require authentication)
+    // For /dashboard, path will be ['dashboard']
+    // For /dashboard/something, path will be ['dashboard', 'something']
+    if (path.length > 0 && path[0] === 'dashboard') {
+        // Remove 'dashboard' prefix and pass the rest to dashboard router
+        const dashboardPath = path.slice(1);
+        
+        // Get website info from host app
+        const websiteInfo = await getWebsiteInfo(locale);
+        
+        // Route to the appropriate dashboard page
+        const route = dashboardPath.length === 0 ? 'home' : dashboardPath[0];
+        
+        let dashboardContent;
+        switch (route) {
+            case 'preferences':
+                dashboardContent = <DashboardPreferences />;
+                break;
+            case 'profile':
+                dashboardContent = <DashboardProfile />;
+                break;
+            case 'home':
+            case '':
+                dashboardContent = <DashboardHome />;
+                break;
+            default:
+                // This is a plugin route - pass the full path as pluginRoute
+                dashboardContent = <DashboardPluginRoute params={Promise.resolve({ 
+                    locale, 
+                    pluginRoute: dashboardPath 
+                })} />;
+        }
+        
+        return (
+            <WebsiteProvider website={websiteInfo}>
+                <DashboardLayout>
+                    {dashboardContent}
+                </DashboardLayout>
+            </WebsiteProvider>
+        );
+    }
+    
+    // Not a dashboard route - return 404
+    notFound();
+}
+

package/src/components/DashboardRootLayout.tsx

@@ -0,0 +1,37 @@
+// Dashboard-specific root layout wrapper
+// This provides complete isolation from client app with dashboard metadata, fonts, and styles
+
+import type { Metadata } from "next";
+import '../app/globals.css';
+
+export const metadata: Metadata = {
+  title: "JHITS Dashboard | Platform V2",
+  description: "Your modular ecosystem dashboard. Monitor your stats, update your content, or manage your newsletters from one place.",
+  icons: {
+    icon: [
+      { url: '/logo_black.svg', media: '(prefers-color-scheme: light)' },
+      { url: '/logo_white.svg', media: '(prefers-color-scheme: dark)' },
+    ],
+  },
+};
+
+export default function DashboardRootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      {/* Dashboard font preload */}
+      <link
+        rel="preload"
+        href="https://cdn.prod.website-files.com/673af51dea86ab95d124c3ee/673b0f5784f7060c0ac05534_PPNeueCorp-TightUltrabold.otf"
+        as="font"
+        type="font/otf"
+        crossOrigin="anonymous"
+      />
+      {children}
+    </>
+  );
+}
+

package/src/components/PluginNotFound.tsx

@@ -0,0 +1,24 @@
+// apps/dashboard/components/PluginNotFound.tsx
+import { AlertTriangle } from "lucide-react";
+
+export function PluginNotFound({ requestedPath }: { requestedPath: string }) {
+    return (
+        <div className="min-h-[70vh] flex flex-col items-center justify-center p-8 text-center">
+            <div className="size-20 bg-red-50 dark:bg-red-950/20 rounded-full flex items-center justify-center mb-6">
+                <AlertTriangle className="size-10 text-red-500" />
+            </div>
+
+            <h1 className="text-2xl font-black uppercase italic tracking-tighter text-neutral-950 dark:text-white mb-2">
+                Plugin Inactive
+            </h1>
+
+            <p className="text-[10px] font-bold text-neutral-400 uppercase tracking-[0.2em] max-w-xs mb-8">
+                The module <span className="text-primary">&quot;/{requestedPath}&quot;</span> is either not in your library or hasn&apos;t been initialized for this workspace.
+            </p>
+
+            <button className="bg-neutral-950 dark:bg-white dark:text-neutral-950 text-white px-8 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:scale-105 transition-transform">
+                Visit Plugin Marketplace
+            </button>
+        </div>
+    );
+}

package/src/components/Providers.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { SessionProvider } from "next-auth/react";
+import { ThemeProvider } from "next-themes";
+import { useSession } from "next-auth/react";
+import { useEffect } from "react";
+import { useRouter } from "@/i18n/navigation";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+    return (
+        <SessionProvider>
+            <ThemeProvider
+                attribute="data-theme"
+                defaultTheme="system"
+                enableSystem
+                enableColorScheme={false}
+                disableTransitionOnChange={false}
+            >
+                {children}
+            </ThemeProvider>
+        </SessionProvider>
+    );
+}
+
+export function AuthGuard({ children }: { children: React.ReactNode }) {
+    const { data: session, status } = useSession();
+    const router = useRouter();
+
+    useEffect(() => {
+        // If the session exists but the background check failed (returned null)
+        // status becomes "unauthenticated"
+        if (status === "unauthenticated") {
+            // Redirect to login page
+            // Using type assertion since the route is dynamically constructed
+            router.push('/login' as Parameters<typeof router.push>[0]);
+        }
+    }, [status, router]);
+
+    // Show loading state while checking authentication
+    if (status === "loading") {
+        return (
+            <div className="flex items-center justify-center min-h-screen bg-neutral-100 dark:bg-neutral-950">
+                <div className="text-center">
+                    <div className="size-8 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+                    <p className="text-sm font-bold uppercase tracking-wider text-neutral-600 dark:text-neutral-400">
+                        Verifying Access...
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+    // If not authenticated, don't render children (redirect will happen in useEffect)
+    if (status === "unauthenticated") {
+        return null;
+    }
+
+    return <>{children}</>;
+}

package/src/components/dashboard/Sidebar.tsx

@@ -0,0 +1,263 @@
+"use client";
+import { useState, useEffect } from 'react';
+import { Link, usePathname } from '@/i18n/navigation';
+import { PLATFORM_MODULES } from '../../lib/modules-config';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import { ChevronLeft, Menu, X, LogOut, Loader2, Home, ExternalLink } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { signOut } from 'next-auth/react';
+import { useWebsite } from '../../lib/website-context';
+
+/* --- HELPER: TOOLTIP COMPONENT --- */
+function SidebarTooltip({ text, isVisible }: { text: string; isVisible: boolean }) {
+    if (!isVisible) return null;
+    return (
+        <div className="fixed left-[80px] px-3 py-1.5 bg-neutral-900 dark:bg-neutral-800 text-white text-[10px] rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-all duration-200 uppercase font-bold tracking-widest z-9999 whitespace-nowrap border border-neutral-700 shadow-2xl translate-x-[-10px] group-hover:translate-x-2">
+            {text}
+            <div className="absolute left-[-4px] top-1/2 -translate-y-1/2 w-2 h-2 bg-neutral-900 dark:bg-neutral-800 rotate-45 border-l border-b border-neutral-700" />
+        </div>
+    );
+}
+
+/* --- SUB-COMPONENT: HEADER --- */
+function SidebarHeader({ isCollapsed }: { isCollapsed: boolean }) {
+    const website = useWebsite();
+
+    return (
+        <div className="relative pt-4 pb-10 px-3">
+            <Link href="/dashboard" className="flex items-center gap-4 overflow-hidden mb-2">
+                <motion.div
+                    layout
+                    className="relative size-14 shrink-0 flex items-center justify-center rounded-xl bg-dashboard-card border border-dashboard-border"
+                >
+                    <Image src="/logo_black.svg" alt="L" width={32} height={32} className="dark:hidden" />
+                    <Image src="/logo_white.svg" alt="L" width={32} height={32} className="hidden dark:block" />
+                </motion.div>
+
+                <AnimatePresence mode="popLayout">
+                    {!isCollapsed && (
+                        <motion.div
+                            initial={{ opacity: 0, x: -20 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            exit={{ opacity: 0, x: -20 }}
+                            className="flex flex-col border-l-2 border-primary pl-4 py-0.5 whitespace-nowrap"
+                        >
+                            <span className="font-pp text-4xl uppercase leading-[0.8] text-neutral-900 dark:text-neutral-100 font-medium">JHITS</span>
+                            <div className="flex items-center gap-2 mt-2">
+                                <span className="text-[9px] font-bold tracking-[0.4em] uppercase text-neutral-500 dark:text-neutral-400">Platform</span>
+                                <span className="text-[9px] font-bold text-primary italic">V2</span>
+                            </div>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </Link>
+
+            <motion.div
+                initial={false}
+                animate={{
+                    height: isCollapsed ? 0 : 40,
+                    opacity: isCollapsed ? 0 : 1,
+                    marginTop: isCollapsed ? 0 : 16,
+                    marginBottom: isCollapsed ? 0 : 8
+                }}
+                transition={{ duration: 0.3, ease: "easeInOut" }}
+                className="overflow-hidden"
+            >
+                <a
+                    href={website.homeUrl}
+                    className="flex items-center gap-2 px-3 py-2 rounded-xl bg-dashboard-card hover:bg-dashboard-bg transition-colors group whitespace-nowrap"
+                >
+                    <Home className="size-4 text-neutral-600 dark:text-neutral-400 group-hover:text-primary transition-colors shrink-0" />
+                    <span className="text-[10px] font-bold uppercase tracking-wider text-neutral-600 dark:text-neutral-400 group-hover:text-primary transition-colors">
+                        {website.name}
+                    </span>
+                    <ExternalLink className="size-3 text-neutral-500 dark:text-neutral-500 group-hover:text-primary transition-colors ml-auto shrink-0" />
+                </a>
+            </motion.div>
+        </div>
+    );
+}
+
+/* --- SUB-COMPONENT: NAVIGATION --- */
+function SidebarNav({ isCollapsed, pathname, t, closeMobile }: { isCollapsed: boolean, pathname: string, t: ReturnType<typeof useTranslations>, closeMobile: () => void }) {
+    return (
+        <nav className="flex-1 flex flex-col gap-2 px-3">
+            {PLATFORM_MODULES.map((module) => {
+                const isActive = pathname === module.path;
+                const Icon = module.icon;
+
+                return (
+                    <Link key={module.id} href={module.path as Parameters<typeof Link>[0]['href']} onClick={closeMobile} className="relative group flex items-center h-12 outline-none">
+                        <motion.div
+                            whileHover={{ y: -1 }}
+                            whileTap={{ scale: 0.98 }}
+                            className={`relative flex items-center h-full w-full rounded-xl transition-all duration-300 ${isActive
+                                ? 'bg-dashboard-card shadow-[0_4px_12px_rgba(0,0,0,0.05)] dark:shadow-[0_4px_20px_rgba(0,0,0,0.3)] border border-dashboard-border'
+                                : 'hover:bg-dashboard-card border border-transparent'
+                                }`}
+                        >
+                            <div className="w-[56px] flex items-center justify-center shrink-0 relative">
+                                {Icon && <Icon className={`size-5 transition-all duration-300 z-10 ${isActive ? 'text-primary scale-110' : 'text-neutral-500 group-hover:text-neutral-900 dark:group-hover:text-neutral-200'}`} />}
+                                {isActive && <motion.div layoutId="activeDot" className="absolute size-1.5 bg-primary rounded-full -left-1 shadow-[0_0_8px_#3b82f6]" />}
+                            </div>
+
+                            <div className="flex-1 overflow-hidden">
+                                <AnimatePresence mode="wait">
+                                    {!isCollapsed && (
+                                        <motion.span
+                                            initial={{ opacity: 0, x: -10 }}
+                                            animate={{ opacity: 1, x: 0 }}
+                                            exit={{ opacity: 0, x: -10 }}
+                                            className={`text-[15px] font-bold whitespace-nowrap transition-colors ${isActive ? 'text-dashboard-text' : 'text-neutral-500 dark:text-neutral-400 group-hover:text-dashboard-text'}`}
+                                        >
+                                            {t(module.id)}
+                                        </motion.span>
+                                    )}
+                                </AnimatePresence>
+                            </div>
+                        </motion.div>
+                        <SidebarTooltip text={t(module.id)} isVisible={isCollapsed} />
+                    </Link>
+                );
+            })}
+        </nav>
+    );
+}
+
+/* --- SUB-COMPONENT: FOOTER --- */
+function SidebarFooter({ isCollapsed, t }: { isCollapsed: boolean, t: ReturnType<typeof useTranslations> }) {
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleLogout = async () => {
+        try {
+            setIsLoading(true);
+            await signOut({ callbackUrl: '/', redirect: true });
+        } catch (error) {
+            console.error('Logout error:', error);
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="mt-auto border-t border-neutral-200 dark:border-neutral-800 group relative">
+            <button
+                onClick={handleLogout}
+                disabled={isLoading}
+                className="flex cursor-pointer items-center h-16 w-full text-neutral-600 dark:text-neutral-400 hover:text-red-500 transition-colors relative disabled:opacity-50"
+            >
+                <div className="min-w-[80px] flex items-center justify-center shrink-0 z-10">
+                    {isLoading ? <Loader2 className="size-5 animate-spin" /> : <LogOut className="size-5 transition-transform group-hover:-translate-x-1" />}
+                </div>
+
+                <AnimatePresence mode="popLayout" initial={false}>
+                    {!isCollapsed && (
+                        <motion.div
+                            initial={{ opacity: 0, width: 0 }}
+                            animate={{ opacity: 1, width: "auto" }}
+                            exit={{ opacity: 0, width: 0 }}
+                            className="overflow-hidden whitespace-nowrap"
+                        >
+                            <span className="font-pp text-xl uppercase font-bold pr-6">
+                                {isLoading ? t('logging_out') : t('logout')}
+                            </span>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </button>
+            <SidebarTooltip text={t('logout')} isVisible={isCollapsed} />
+        </div>
+    );
+}
+
+/* --- MAIN EXPORT --- */
+export default function Sidebar() {
+    const t = useTranslations('common.sidebar');
+    const pathname = usePathname();
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const [isMobileOpen, setIsMobileOpen] = useState(false);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setIsMobileOpen(false);
+        }, 0);
+    }, [pathname]);
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            // Don't handle Ctrl+B if user is typing in an input, textarea, or contentEditable
+            const target = e.target as HTMLElement;
+            const isEditable = target && (
+                target.tagName === 'INPUT' ||
+                target.tagName === 'TEXTAREA' ||
+                target.contentEditable === 'true' ||
+                target.closest('[contenteditable="true"]') !== null
+            );
+
+            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'b') {
+                // Only handle if not in an editable element
+                if (!isEditable) {
+                    e.preventDefault();
+                    setIsCollapsed((prev) => !prev);
+                }
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, []);
+
+    return (
+        <>
+            <AnimatePresence>
+                {!isMobileOpen && (
+                    <motion.button
+                        initial={{ opacity: 0, scale: 0.8 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        exit={{ opacity: 0, scale: 0 }}
+                        onClick={() => setIsMobileOpen(true)}
+                        className="lg:hidden fixed top-4 left-5 z-50 size-11 flex items-center justify-center bg-dashboard-card backdrop-blur-xl border border-dashboard-border rounded-2xl shadow-2xl active:scale-95 transition-all"
+                    >
+                        <Menu className="size-6 text-neutral-600 dark:text-neutral-300" />
+                    </motion.button>
+                )}
+            </AnimatePresence>
+
+            <AnimatePresence>
+                {isMobileOpen && (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        onClick={() => setIsMobileOpen(false)}
+                        className="fixed inset-0 bg-black/40 backdrop-blur-sm z-48 lg:hidden"
+                    />
+                )}
+            </AnimatePresence>
+
+            <motion.aside
+                initial={false}
+                animate={{
+                    width: isCollapsed ? 80 : 280,
+                    x: isMobileOpen ? 0 : (typeof window !== 'undefined' && window.innerWidth < 1024 ? -280 : 0)
+                }}
+                className="fixed inset-y-0 left-0 z-50 flex flex-col bg-dashboard-sidebar border-r border-dashboard-border h-dvh lg:sticky top-0 transition-colors duration-300"
+            >
+                <button onClick={() => setIsMobileOpen(false)} className="lg:hidden absolute right-4 top-5 p-2 bg-dashboard-card rounded-lg text-neutral-500 dark:text-neutral-400">
+                    <X className="size-5" />
+                </button>
+
+                <div className="flex flex-col h-full w-full relative">
+                    <SidebarHeader isCollapsed={isCollapsed} />
+                    <div className="flex-1 overflow-y-auto overflow-x-visible custom-scrollbar">
+                        <SidebarNav isCollapsed={isCollapsed} pathname={pathname} t={t} closeMobile={() => setIsMobileOpen(false)} />
+                    </div>
+                    <SidebarFooter isCollapsed={isCollapsed} t={t} />
+                </div>
+
+                <button onClick={() => setIsCollapsed(!isCollapsed)} className="hidden lg:flex absolute -right-3 top-14 size-6 bg-dashboard-card border border-dashboard-border rounded-full items-center justify-center shadow-md z-50 hover:scale-110 transition-transform">
+                    <ChevronLeft className={`size-3 text-neutral-500 dark:text-neutral-400 transition-transform duration-500 ${isCollapsed ? 'rotate-180' : ''}`} />
+                </button>
+            </motion.aside>
+        </>
+    );
+}