From f2d7b1809619519c3794961f2c2d3c02f57ae407 Mon Sep 17 00:00:00 2001
From: Adam <redblue2047@gmail.Com>
Date: Thu, 4 Dec 2025 00:31:58 +0100
Subject: [PATCH 1/2] fix: handle empty public folder in Docker build

---
 cdn-dashboard/Dockerfile      | 5 ++++-
 cdn-dashboard/public/.gitkeep | 0
 2 files changed, 4 insertions(+), 1 deletion(-)
 create mode 100644 cdn-dashboard/public/.gitkeep

diff --git a/cdn-dashboard/Dockerfile b/cdn-dashboard/Dockerfile
index 15b43b8..107a2a5 100644
--- a/cdn-dashboard/Dockerfile
+++ b/cdn-dashboard/Dockerfile
@@ -27,9 +27,12 @@ RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
 # Copy necessary files from builder
-COPY --from=builder /app/public ./public
+# Create public directory (may be empty)
+RUN mkdir -p ./public
 COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
+# Copy public files if they exist (using wildcard to handle empty dir)
+COPY --from=builder /app/public/. ./public/
 
 # Set correct permissions
 RUN chown -R nextjs:nodejs /app
diff --git a/cdn-dashboard/public/.gitkeep b/cdn-dashboard/public/.gitkeep
new file mode 100644
index 0000000..e69de29

From 364489af6dade0423b19216f8031a2a780157a7a Mon Sep 17 00:00:00 2001
From: Adam <redblue2047@gmail.Com>
Date: Thu, 4 Dec 2025 00:34:21 +0100
Subject: [PATCH 2/2] feat: enhance UI components with responsive design and
 improved layouts

---
 .../src/app/dashboard/files/page.tsx          |  64 +++---
 cdn-dashboard/src/app/dashboard/layout.tsx    |   7 +-
 cdn-dashboard/src/app/dashboard/logs/page.tsx |  66 +++---
 cdn-dashboard/src/app/dashboard/page.tsx      |  26 +--
 .../src/app/dashboard/tokens/page.tsx         |  19 +-
 cdn-dashboard/src/components/mobile-nav.tsx   | 215 ++++++++++++++++++
 .../src/components/notifications.tsx          |   6 +-
 cdn-dashboard/src/components/sidebar.tsx      |   3 +-
 docker-compose.yml                            |   2 +
 9 files changed, 316 insertions(+), 92 deletions(-)
 create mode 100644 cdn-dashboard/src/components/mobile-nav.tsx

diff --git a/cdn-dashboard/src/app/dashboard/files/page.tsx b/cdn-dashboard/src/app/dashboard/files/page.tsx
index 82fa3dc..7c69a2c 100644
--- a/cdn-dashboard/src/app/dashboard/files/page.tsx
+++ b/cdn-dashboard/src/app/dashboard/files/page.tsx
@@ -331,12 +331,12 @@ export default function FilesPage() {
   };
 
   return (
-    <PageTransition className="space-y-6">
+    <PageTransition className="space-y-4 sm:space-y-6">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-zinc-100">Fichiers</h1>
-          <p className="text-zinc-500 mt-1">Gérez vos fichiers uploadés</p>
+          <h1 className="text-xl sm:text-2xl font-bold text-zinc-100">Fichiers</h1>
+          <p className="text-sm text-zinc-500 mt-1">Gérez vos fichiers uploadés</p>
         </div>
         <div className="flex items-center gap-2">
           {filteredFiles.length > 0 && (
@@ -390,8 +390,8 @@ export default function FilesPage() {
 
       {/* Search & Filters */}
       <AnimatedCard delay={0.1}>
-        <CardContent className="p-4">
-          <div className="flex flex-col lg:flex-row gap-4">
+        <CardContent className="p-3 sm:p-4">
+          <div className="flex flex-col gap-3 sm:gap-4">
             {/* Search */}
             <div className="relative flex-1 group">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-zinc-600 group-focus-within:text-indigo-400 transition-colors" />
@@ -400,30 +400,31 @@ export default function FilesPage() {
                 placeholder="Rechercher un fichier..."
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
-                className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-zinc-800/50 border border-zinc-700/50 text-zinc-100 placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/50 transition-all"
+                className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-zinc-800/50 border border-zinc-700/50 text-zinc-100 placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/50 transition-all text-sm sm:text-base"
               />
             </div>
 
-            {/* Type Filter */}
-            <div className="flex items-center gap-2 overflow-x-auto pb-2 lg:pb-0">
-              {FILE_TYPE_FILTERS.map((filter) => (
-                <button
-                  key={filter.value}
-                  onClick={() => setTypeFilter(filter.value)}
-                  className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all ${
-                    typeFilter === filter.value
-                      ? 'bg-indigo-500/20 text-indigo-400 border border-indigo-500/30'
-                      : 'bg-zinc-800/50 text-zinc-400 border border-zinc-700/50 hover:bg-zinc-700/50'
-                  }`}
-                >
-                  {filter.icon}
-                  {filter.label}
-                </button>
-              ))}
-            </div>
+            <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 sm:items-center">
+              {/* Type Filter */}
+              <div className="flex items-center gap-2 overflow-x-auto pb-2 sm:pb-0 -mx-1 px-1">
+                {FILE_TYPE_FILTERS.map((filter) => (
+                  <button
+                    key={filter.value}
+                    onClick={() => setTypeFilter(filter.value)}
+                    className={`flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-3 py-2 rounded-lg text-xs sm:text-sm font-medium whitespace-nowrap transition-all ${
+                      typeFilter === filter.value
+                        ? 'bg-indigo-500/20 text-indigo-400 border border-indigo-500/30'
+                        : 'bg-zinc-800/50 text-zinc-400 border border-zinc-700/50 hover:bg-zinc-700/50'
+                    }`}
+                  >
+                    {filter.icon}
+                    <span className="hidden sm:inline">{filter.label}</span>
+                  </button>
+                ))}
+              </div>
 
             {/* View Toggle */}
-            <div className="flex items-center gap-1 bg-zinc-800/50 rounded-lg p-1 border border-zinc-700/50">
+            <div className="flex items-center gap-1 bg-zinc-800/50 rounded-lg p-1 border border-zinc-700/50 ml-auto sm:ml-0">
               <button
                 onClick={() => setViewMode('list')}
                 className={`p-2 rounded-md transition-all ${
@@ -441,19 +442,20 @@ export default function FilesPage() {
                 <Grid className="w-4 h-4" />
               </button>
             </div>
+            </div>
           </div>
         </CardContent>
       </AnimatedCard>
 
       {/* Files */}
       <AnimatedCard delay={0.2}>
-        <CardHeader className="flex flex-row items-center justify-between">
-          <h3 className="text-lg font-semibold text-zinc-100">
+        <CardHeader className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+          <h3 className="text-base sm:text-lg font-semibold text-zinc-100">
             {filteredFiles.length} fichier(s)
           </h3>
-          <div className="flex items-center gap-2 text-sm text-zinc-500">
-            <Filter className="w-4 h-4" />
-            <span>Trier par:</span>
+          <div className="flex items-center gap-2 text-xs sm:text-sm text-zinc-500 overflow-x-auto">
+            <Filter className="w-4 h-4 hidden sm:block" />
+            <span className="hidden sm:inline">Trier par:</span>
             <button
               onClick={() => toggleSort('created_at')}
               className={`flex items-center gap-1 px-2 py-1 rounded ${
@@ -587,7 +589,7 @@ export default function FilesPage() {
             </div>
           ) : (
             /* Grid View */
-            <div className="p-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+            <div className="p-4 sm:p-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 sm:gap-4">
               {filteredFiles.map((file: CDNFile, index: number) => {
                 const mimeType = file.mime_type || file.mimeType;
                 const isImage = mimeType?.startsWith('image/');
diff --git a/cdn-dashboard/src/app/dashboard/layout.tsx b/cdn-dashboard/src/app/dashboard/layout.tsx
index cdfd214..173a70c 100644
--- a/cdn-dashboard/src/app/dashboard/layout.tsx
+++ b/cdn-dashboard/src/app/dashboard/layout.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import { Sidebar } from '@/components/sidebar';
+import { MobileNav } from '@/components/mobile-nav';
 import { useAuthStore } from '@/lib/auth';
 import { cn } from '@/lib/utils';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -79,6 +80,7 @@ export default function DashboardLayout({
       </div>
       
       <Sidebar />
+      <MobileNav />
       
       <AnimatePresence mode="wait">
         <motion.main
@@ -89,10 +91,11 @@ export default function DashboardLayout({
           transition={{ duration: 0.3 }}
           className={cn(
             'transition-all duration-300',
-            'ml-64 min-h-screen relative z-10'
+            'lg:ml-64 min-h-screen relative z-10',
+            'pt-16 lg:pt-0'
           )}
         >
-          <div className="p-8">
+          <div className="p-4 sm:p-6 lg:p-8">
             {children}
           </div>
         </motion.main>
diff --git a/cdn-dashboard/src/app/dashboard/logs/page.tsx b/cdn-dashboard/src/app/dashboard/logs/page.tsx
index b238412..b208667 100644
--- a/cdn-dashboard/src/app/dashboard/logs/page.tsx
+++ b/cdn-dashboard/src/app/dashboard/logs/page.tsx
@@ -169,12 +169,12 @@ export default function LogsPage() {
   }, [data?.data]);
 
   return (
-    <PageTransition className="space-y-6">
+    <PageTransition className="space-y-4 sm:space-y-6">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-zinc-100">Logs d&apos;accès</h1>
-          <p className="text-zinc-500 mt-1">Historique des téléchargements et accès</p>
+          <h1 className="text-xl sm:text-2xl font-bold text-zinc-100">Logs d&apos;accès</h1>
+          <p className="text-sm text-zinc-500 mt-1">Historique des téléchargements et accès</p>
         </div>
         <div className="flex items-center gap-2">
           {filteredLogs.length > 0 && (
@@ -236,55 +236,55 @@ export default function LogsPage() {
       </div>
 
       {/* Quick Stats */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
         <AnimatedCard delay={0}>
-          <CardContent className="p-4">
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded-xl bg-emerald-500/20 flex items-center justify-center">
-                <Download className="w-5 h-5 text-emerald-400" />
+          <CardContent className="p-3 sm:p-4">
+            <div className="flex items-center gap-2 sm:gap-3">
+              <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-xl bg-emerald-500/20 flex items-center justify-center">
+                <Download className="w-4 h-4 sm:w-5 sm:h-5 text-emerald-400" />
               </div>
               <div>
-                <p className="text-2xl font-bold text-zinc-100">{stats.downloads}</p>
-                <p className="text-xs text-zinc-500">Téléchargements</p>
+                <p className="text-xl sm:text-2xl font-bold text-zinc-100">{stats.downloads}</p>
+                <p className="text-[10px] sm:text-xs text-zinc-500">Téléchargements</p>
               </div>
             </div>
           </CardContent>
         </AnimatedCard>
         <AnimatedCard delay={0.05}>
-          <CardContent className="p-4">
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded-xl bg-indigo-500/20 flex items-center justify-center">
-                <Upload className="w-5 h-5 text-indigo-400" />
+          <CardContent className="p-3 sm:p-4">
+            <div className="flex items-center gap-2 sm:gap-3">
+              <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-xl bg-indigo-500/20 flex items-center justify-center">
+                <Upload className="w-4 h-4 sm:w-5 sm:h-5 text-indigo-400" />
               </div>
               <div>
-                <p className="text-2xl font-bold text-zinc-100">{stats.uploads}</p>
-                <p className="text-xs text-zinc-500">Uploads</p>
+                <p className="text-xl sm:text-2xl font-bold text-zinc-100">{stats.uploads}</p>
+                <p className="text-[10px] sm:text-xs text-zinc-500">Uploads</p>
               </div>
             </div>
           </CardContent>
         </AnimatedCard>
         <AnimatedCard delay={0.1}>
-          <CardContent className="p-4">
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded-xl bg-red-500/20 flex items-center justify-center">
-                <AlertTriangle className="w-5 h-5 text-red-400" />
+          <CardContent className="p-3 sm:p-4">
+            <div className="flex items-center gap-2 sm:gap-3">
+              <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-xl bg-red-500/20 flex items-center justify-center">
+                <AlertTriangle className="w-4 h-4 sm:w-5 sm:h-5 text-red-400" />
               </div>
               <div>
-                <p className="text-2xl font-bold text-zinc-100">{stats.errors}</p>
-                <p className="text-xs text-zinc-500">Erreurs</p>
+                <p className="text-xl sm:text-2xl font-bold text-zinc-100">{stats.errors}</p>
+                <p className="text-[10px] sm:text-xs text-zinc-500">Erreurs</p>
               </div>
             </div>
           </CardContent>
         </AnimatedCard>
         <AnimatedCard delay={0.15}>
-          <CardContent className="p-4">
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded-xl bg-amber-500/20 flex items-center justify-center">
-                <Globe className="w-5 h-5 text-amber-400" />
+          <CardContent className="p-3 sm:p-4">
+            <div className="flex items-center gap-2 sm:gap-3">
+              <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-xl bg-amber-500/20 flex items-center justify-center">
+                <Globe className="w-4 h-4 sm:w-5 sm:h-5 text-amber-400" />
               </div>
               <div>
-                <p className="text-2xl font-bold text-zinc-100">{stats.uniqueIPs}</p>
-                <p className="text-xs text-zinc-500">IPs uniques</p>
+                <p className="text-xl sm:text-2xl font-bold text-zinc-100">{stats.uniqueIPs}</p>
+                <p className="text-[10px] sm:text-xs text-zinc-500">IPs uniques</p>
               </div>
             </div>
           </CardContent>
@@ -293,17 +293,17 @@ export default function LogsPage() {
 
       {/* Search & Filters */}
       <AnimatedCard delay={0.2}>
-        <CardContent className="p-4">
-          <div className="flex flex-col lg:flex-row gap-4">
+        <CardContent className="p-3 sm:p-4">
+          <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
             {/* Search */}
             <div className="relative flex-1 group">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-zinc-600 group-focus-within:text-indigo-400 transition-colors" />
               <input
                 type="text"
-                placeholder="Rechercher par fichier, IP, action..."
+                placeholder="Rechercher..."
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
-                className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-zinc-800/50 border border-zinc-700/50 text-zinc-100 placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/50 transition-all"
+                className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-zinc-800/50 border border-zinc-700/50 text-zinc-100 placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/50 transition-all text-sm"
               />
             </div>
             
diff --git a/cdn-dashboard/src/app/dashboard/page.tsx b/cdn-dashboard/src/app/dashboard/page.tsx
index 8d1817b..55a4ce9 100644
--- a/cdn-dashboard/src/app/dashboard/page.tsx
+++ b/cdn-dashboard/src/app/dashboard/page.tsx
@@ -47,15 +47,15 @@ function StatsCard({
 }) {
   return (
     <AnimatedCard delay={delay} glow="indigo">
-      <div className="p-6">
+      <div className="p-4 sm:p-6">
         <div className="flex items-start justify-between">
-          <div className="space-y-2">
-            <p className="text-sm font-medium text-zinc-400">{title}</p>
-            <div className="text-3xl font-bold text-zinc-100">
+          <div className="space-y-1 sm:space-y-2">
+            <p className="text-xs sm:text-sm font-medium text-zinc-400">{title}</p>
+            <div className="text-2xl sm:text-3xl font-bold text-zinc-100">
               <AnimatedNumber value={value} />
             </div>
             {subtitle && (
-              <p className="text-sm text-zinc-500">{subtitle}</p>
+              <p className="text-xs sm:text-sm text-zinc-500">{subtitle}</p>
             )}
             {trend && (
               <div className="flex items-center gap-1.5 mt-2">
@@ -173,13 +173,13 @@ export default function DashboardPage() {
         initial={{ opacity: 0, y: -10 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.1 }}
-        className="flex items-center justify-between"
+        className="flex flex-col sm:flex-row sm:items-center justify-between gap-4"
       >
         <div>
-          <h1 className="text-2xl font-bold text-zinc-100">Dashboard</h1>
-          <p className="text-zinc-500 mt-1">Vue d&apos;ensemble de votre CDN</p>
+          <h1 className="text-xl sm:text-2xl font-bold text-zinc-100">Dashboard</h1>
+          <p className="text-sm sm:text-base text-zinc-500 mt-1">Vue d&apos;ensemble de votre CDN</p>
         </div>
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2 sm:gap-4 flex-wrap">
           <ConnectionIndicator status={status} />
           <Button 
             variant="ghost" 
@@ -189,10 +189,10 @@ export default function DashboardPage() {
             disabled={isFetching}
           >
             <RefreshCw className={`w-4 h-4 ${isFetching ? 'animate-spin' : ''}`} />
-            {isFetching ? 'Actualisation...' : 'Actualiser'}
+            <span className="hidden sm:inline">{isFetching ? 'Actualisation...' : 'Actualiser'}</span>
           </Button>
           {lastUpdate && (
-            <span className="text-xs text-zinc-500">
+            <span className="text-xs text-zinc-500 hidden sm:inline">
               {formatRelativeTime(lastUpdate.toISOString())}
             </span>
           )}
@@ -200,7 +200,7 @@ export default function DashboardPage() {
       </motion.div>
 
       {/* Stats Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
         <StatsCard
           title="Fichiers"
           value={data?.files.total || 0}
@@ -236,7 +236,7 @@ export default function DashboardPage() {
       </div>
 
       {/* Charts & Activity */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
         {/* Downloads Chart */}
         <AnimatedCard delay={0.2} className="lg:col-span-2">
           <div className="p-6">
diff --git a/cdn-dashboard/src/app/dashboard/tokens/page.tsx b/cdn-dashboard/src/app/dashboard/tokens/page.tsx
index 8c8c4f3..bfeb2a8 100644
--- a/cdn-dashboard/src/app/dashboard/tokens/page.tsx
+++ b/cdn-dashboard/src/app/dashboard/tokens/page.tsx
@@ -115,31 +115,32 @@ export default function TokensPage() {
   });
 
   return (
-    <PageTransition className="space-y-6">
+    <PageTransition className="space-y-4 sm:space-y-6">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-zinc-100">Tokens d&apos;accès</h1>
-          <p className="text-zinc-500 mt-1">Gérez les tokens de téléchargement</p>
+          <h1 className="text-xl sm:text-2xl font-bold text-zinc-100">Tokens d&apos;accès</h1>
+          <p className="text-sm text-zinc-500 mt-1">Gérez les tokens de téléchargement</p>
         </div>
         <Button onClick={() => setIsCreateModalOpen(true)}>
           <Plus className="w-4 h-4 mr-2" />
-          Nouveau token
+          <span className="hidden sm:inline">Nouveau token</span>
+          <span className="sm:hidden">Nouveau</span>
         </Button>
       </div>
 
       {/* Search & Filters */}
       <AnimatedCard delay={0.1}>
-        <CardContent className="p-4">
+        <CardContent className="p-3 sm:p-4">
           <div className="flex items-center gap-4">
             <div className="relative flex-1 group">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-zinc-600 group-focus-within:text-indigo-400 transition-colors" />
               <input
                 type="text"
-                placeholder="Rechercher par token ou ID fichier..."
+                placeholder="Rechercher..."
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
-                className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-zinc-800/50 border border-zinc-700/50 text-zinc-100 placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/50 transition-all"
+                className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-zinc-800/50 border border-zinc-700/50 text-zinc-100 placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/50 transition-all text-sm"
               />
             </div>
           </div>
@@ -149,7 +150,7 @@ export default function TokensPage() {
       {/* Tokens List */}
       <AnimatedCard delay={0.2}>
         <CardHeader>
-          <h3 className="text-lg font-semibold text-zinc-100">
+          <h3 className="text-base sm:text-lg font-semibold text-zinc-100">
             {data?.pagination?.total || 0} token(s)
           </h3>
         </CardHeader>
diff --git a/cdn-dashboard/src/components/mobile-nav.tsx b/cdn-dashboard/src/components/mobile-nav.tsx
new file mode 100644
index 0000000..1d6fd78
--- /dev/null
+++ b/cdn-dashboard/src/components/mobile-nav.tsx
@@ -0,0 +1,215 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { 
+  LayoutDashboard, 
+  Files, 
+  Key, 
+  Users, 
+  Settings, 
+  LogOut,
+  Shield,
+  Activity,
+  Menu,
+  X,
+  Sparkles,
+  Bell
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useAuthStore, useIsSuperadmin } from '@/lib/auth';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useActivityStore } from '@/lib/notifications';
+
+const navigation = [
+  { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
+  { name: 'Fichiers', href: '/dashboard/files', icon: Files },
+  { name: 'Tokens', href: '/dashboard/tokens', icon: Key },
+  { name: 'Logs', href: '/dashboard/logs', icon: Activity },
+];
+
+const adminNavigation = [
+  { name: 'Utilisateurs', href: '/dashboard/users', icon: Users },
+  { name: 'Clés API', href: '/dashboard/api-keys', icon: Shield },
+  { name: 'Paramètres', href: '/dashboard/settings', icon: Settings },
+];
+
+export function MobileNav() {
+  const [isOpen, setIsOpen] = useState(false);
+  const pathname = usePathname();
+  const { user, logout } = useAuthStore();
+  const isSuperadmin = useIsSuperadmin();
+  const { unreadCount } = useActivityStore();
+
+  // Close menu when route changes
+  useEffect(() => {
+    setIsOpen(false);
+  }, [pathname]);
+
+  // Prevent scroll when menu is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  const handleLogout = async () => {
+    await logout();
+    window.location.href = '/login';
+  };
+
+  return (
+    <>
+      {/* Mobile Header */}
+      <div className="lg:hidden fixed top-0 left-0 right-0 z-50 h-16 bg-zinc-950/95 backdrop-blur-xl border-b border-zinc-800/50">
+        <div className="flex items-center justify-between h-full px-4">
+          {/* Logo */}
+          <Link href="/dashboard" className="flex items-center gap-2">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-indigo-500 via-violet-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500/20">
+              <Sparkles className="w-4 h-4 text-white" />
+            </div>
+            <div>
+              <h1 className="text-base font-bold text-zinc-100">CDN</h1>
+            </div>
+          </Link>
+
+          {/* Right actions */}
+          <div className="flex items-center gap-2">
+            {/* Notifications indicator */}
+            <button className="relative p-2 text-zinc-400 hover:text-zinc-100 transition-colors">
+              <Bell className="w-5 h-5" />
+              {unreadCount > 0 && (
+                <span className="absolute top-1 right-1 w-4 h-4 bg-indigo-500 rounded-full flex items-center justify-center text-[10px] font-bold text-white">
+                  {unreadCount > 9 ? '9+' : unreadCount}
+                </span>
+              )}
+            </button>
+
+            {/* Menu toggle */}
+            <button
+              onClick={() => setIsOpen(!isOpen)}
+              className="p-2 text-zinc-400 hover:text-zinc-100 transition-colors"
+            >
+              {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Menu Overlay */}
+      <AnimatePresence>
+        {isOpen && (
+          <>
+            {/* Backdrop */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              onClick={() => setIsOpen(false)}
+              className="lg:hidden fixed inset-0 z-40 bg-black/60 backdrop-blur-sm"
+            />
+
+            {/* Slide-out menu */}
+            <motion.div
+              initial={{ x: '100%' }}
+              animate={{ x: 0 }}
+              exit={{ x: '100%' }}
+              transition={{ type: 'spring', damping: 30, stiffness: 300 }}
+              className="lg:hidden fixed top-16 right-0 bottom-0 z-50 w-72 bg-zinc-950/95 backdrop-blur-xl border-l border-zinc-800/50 overflow-y-auto"
+            >
+              <nav className="p-4 space-y-1">
+                {/* User Info */}
+                <div className="flex items-center gap-3 p-3 mb-4 rounded-xl bg-zinc-800/30 border border-zinc-700/50">
+                  <div className="relative">
+                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center">
+                      <span className="text-white font-semibold text-sm">
+                        {user?.username?.charAt(0).toUpperCase()}
+                      </span>
+                    </div>
+                    <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-emerald-500 rounded-full border-2 border-zinc-950" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-zinc-100 truncate">{user?.username}</p>
+                    <p className={cn(
+                      'text-[10px] font-semibold tracking-wide uppercase',
+                      user?.role === 'superadmin' ? 'text-amber-400' : 'text-indigo-400'
+                    )}>
+                      {user?.role === 'superadmin' ? 'Super Admin' : 'Admin'}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Main Navigation */}
+                {navigation.map((item) => {
+                  const isActive = pathname === item.href;
+                  return (
+                    <Link
+                      key={item.name}
+                      href={item.href}
+                      className={cn(
+                        'flex items-center gap-3 px-4 py-3 rounded-xl transition-all',
+                        isActive
+                          ? 'bg-gradient-to-r from-indigo-500/15 to-violet-500/10 border border-indigo-500/20 text-zinc-100'
+                          : 'text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800/50'
+                      )}
+                    >
+                      <item.icon className={cn('w-5 h-5', isActive && 'text-indigo-400')} />
+                      <span className="font-medium">{item.name}</span>
+                    </Link>
+                  );
+                })}
+
+                {/* Admin Section */}
+                {isSuperadmin && (
+                  <>
+                    <div className="pt-4 pb-2">
+                      <p className="px-4 text-[10px] font-semibold text-zinc-500 uppercase tracking-widest">
+                        Administration
+                      </p>
+                    </div>
+                    
+                    {adminNavigation.map((item) => {
+                      const isActive = pathname === item.href;
+                      return (
+                        <Link
+                          key={item.name}
+                          href={item.href}
+                          className={cn(
+                            'flex items-center gap-3 px-4 py-3 rounded-xl transition-all',
+                            isActive
+                              ? 'bg-gradient-to-r from-amber-500/15 to-orange-500/10 border border-amber-500/20 text-zinc-100'
+                              : 'text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800/50'
+                          )}
+                        >
+                          <item.icon className={cn('w-5 h-5', isActive && 'text-amber-400')} />
+                          <span className="font-medium">{item.name}</span>
+                        </Link>
+                      );
+                    })}
+                  </>
+                )}
+
+                {/* Logout */}
+                <div className="pt-4">
+                  <button
+                    onClick={handleLogout}
+                    className="flex items-center gap-3 w-full px-4 py-3 rounded-xl text-zinc-400 hover:text-red-400 hover:bg-red-500/10 transition-all"
+                  >
+                    <LogOut className="w-5 h-5" />
+                    <span className="font-medium">Déconnexion</span>
+                  </button>
+                </div>
+              </nav>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}
diff --git a/cdn-dashboard/src/components/notifications.tsx b/cdn-dashboard/src/components/notifications.tsx
index 9c5729d..347f609 100644
--- a/cdn-dashboard/src/components/notifications.tsx
+++ b/cdn-dashboard/src/components/notifications.tsx
@@ -303,11 +303,11 @@ export function ActivityDropdown() {
             
             {/* Panel */}
             <motion.div
-              initial={{ opacity: 0, scale: 0.95, y: -10 }}
+              initial={{ opacity: 0, scale: 0.95, y: 10 }}
               animate={{ opacity: 1, scale: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.95, y: -10 }}
+              exit={{ opacity: 0, scale: 0.95, y: 10 }}
               transition={{ duration: 0.15 }}
-              className="absolute right-0 top-12 z-50 w-80 rounded-xl border border-zinc-800/50 bg-zinc-900/95 backdrop-blur-xl shadow-2xl overflow-hidden"
+              className="absolute left-0 bottom-12 z-[9999] w-80 rounded-xl border border-zinc-800/50 bg-zinc-900/95 backdrop-blur-xl shadow-2xl overflow-hidden"
             >
               <ActivityPanel />
             </motion.div>
diff --git a/cdn-dashboard/src/components/sidebar.tsx b/cdn-dashboard/src/components/sidebar.tsx
index a902ba2..579acd4 100644
--- a/cdn-dashboard/src/components/sidebar.tsx
+++ b/cdn-dashboard/src/components/sidebar.tsx
@@ -69,7 +69,8 @@ export function Sidebar() {
         'fixed left-0 top-0 z-40 h-screen',
         'bg-zinc-950/80 backdrop-blur-xl',
         'border-r border-zinc-800/50',
-        'flex flex-col'
+        'flex flex-col',
+        'hidden lg:flex'
       )}
     >
       {/* Logo Section */}
diff --git a/docker-compose.yml b/docker-compose.yml
index 3bc4947..46ffe10 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,6 +3,8 @@ services:
     build: ./services/postgres
     container_name: cdn-postgres
     restart: unless-stopped
+    ports:
+      - "5433:5432"
     environment:
       POSTGRES_DB: ${POSTGRES_DB:-cdn_db}
       POSTGRES_USER: ${POSTGRES_USER:-cdn_user}