add billing system

src/layouts/AppLayout.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Outlet, NavLink, useNavigate } from 'react-router-dom';
 import { getClientTickets } from '../services/api';
+import { LayoutDashboard, Globe, Settings, FileText } from 'lucide-react';
 import ConfirmLogoutModal from '../components/ui/ConfirmLogoutModal'; // Le modal extrait !
 
 export default function AppLayout() {
@@ -15,7 +16,7 @@ export default function AppLayout() {
         const unread = data.list.filter(t => t.status === 'on_hold' || t.unread).length;
         setUnreadCount(unread);
       }
-    } catch (err) {}
+    } catch (err) { }
   };
 
   useEffect(() => {
@@ -30,19 +31,18 @@ export default function AppLayout() {
   };
 
   // 🌟 La fonction magique Tailwind pour les liens du menu
-  const navLinkClass = ({ isActive }) => 
-    `block px-6 py-4 no-underline border-l-4 transition-all uppercase tracking-widest text-sm font-mono ${
-      isActive 
-        ? 'text-cyan-400 bg-cyan-400/5 border-cyan-400' 
-        : 'text-[#888] border-transparent hover:text-gray-300 hover:bg-white/5'
+  const navLinkClass = ({ isActive }) =>
+    `block px-6 py-4 no-underline border-l-4 transition-all uppercase tracking-widest text-sm font-mono ${isActive
+      ? 'text-cyan-400 bg-cyan-400/5 border-cyan-400'
+      : 'text-[#888] border-transparent hover:text-gray-300 hover:bg-white/5'
     }`;
 
   return (
     <div className="flex min-h-screen bg-[#050505] text-[#E0E0E0] font-sans">
-      
+
       {/* SIDEBAR */}
       <aside className="w-65 bg-[#121212] border-r border-[#222222] h-screen flex flex-col fixed top-0 left-0">
-        
+
         <div className="px-6 py-8 border-b border-[#222]">
           <h1 className="text-white m-0 text-3xl font-black tracking-widest flex items-baseline gap-2">
             NEXUS
@@ -74,10 +74,8 @@ export default function AppLayout() {
             </div>
           </NavLink>
 
-          <div className="flex justify-between items-center px-6 py-4 text-[#444] border-l-4 border-transparent uppercase tracking-widest text-sm font-mono cursor-not-allowed select-none">
-            <span>Facturation</span>
-            <span className="text-[9px] text-[#333] border border-[#333] px-1.5 py-0.5 rounded font-bold">WIP</span>
-          </div>
+          <NavLink className={navLinkClass} to="/facturation">Facturation</NavLink>
+
           <div className="flex justify-between items-center px-6 py-4 text-[#444] border-l-4 border-transparent uppercase tracking-widest text-sm font-mono cursor-not-allowed select-none">
             <span>Profil & Sécurité</span>
             <span className="text-[9px] text-[#333] border border-[#333] px-1.5 py-0.5 rounded font-bold">WIP</span>