Merge pull request #105 from R0m1k3/1.1

Organize backup, NocoDB, and database debug tools into a single utili…

client/src/components/RouterProduction.tsx

@@ -18,6 +18,7 @@ import CustomerOrders from "@/pages/CustomerOrders";
 
 import DlcPage from "@/pages/DlcPage";
 import BackupManager from "@/pages/BackupManager";
+import Utilities from "@/pages/Utilities";
 import Tasks from "@/pages/Tasks";
 import TasksSimplified from "@/pages/TasksSimplified";
 import Layout from "@/components/Layout";
@@ -77,10 +78,14 @@ function RouterProduction() {
         <Route path="/publicities" component={Publicities} />
         <Route path="/customer-orders" component={CustomerOrders} />
         <Route path="/dlc" component={DlcPage} />
-        <Route path="/backup" component={BackupManager} />
+        <Route path="/utilities" component={Utilities} />
         <Route path="/tasks" component={Tasks} />
-        <Route path="/nocodb-config" component={NocoDBConfig} />
-        <Route path="/database-debug" component={DatabaseDebug} />
+        
+        {/* Routes de compatibilité - redirection vers utilities */}
+        <Route path="/backup" component={Utilities} />
+        <Route path="/nocodb-config" component={Utilities} />
+        <Route path="/database-debug" component={Utilities} />
+        
         <Route path="/" component={Dashboard} />
         <Route component={NotFound} />
       </Switch>

client/src/components/Sidebar.tsx

@@ -21,7 +21,8 @@ import {
   ListTodo,
   ChevronLeft,
   ChevronRight,
-  X
+  X,
+  Settings
 } from "lucide-react";
 
 export default function Sidebar() {
@@ -147,21 +148,9 @@ export default function Sidebar() {
       roles: ["admin"] 
     },
     { 
-      path: "/backup", 
-      label: "Sauvegardes", 
-      icon: Database, 
-      roles: ["admin"] 
-    },
-    { 
-      path: "/nocodb-config", 
-      label: "Configuration NocoDB", 
-      icon: Database, 
-      roles: ["admin"] 
-    },
-    { 
-      path: "/database-debug", 
-      label: "Debug Base de Données", 
-      icon: Database, 
+      path: "/utilities", 
+      label: "Utilitaires", 
+      icon: Settings, 
       roles: ["admin"] 
     },
   ];

client/src/pages/Utilities.tsx

@@ -0,0 +1,121 @@
+import { useState } from "react";
+import { useAuthUnified } from "@/hooks/useAuthUnified";
+import { hasPermission } from "@/lib/permissions";
+import { 
+  Settings,
+  Database,
+  Server,
+  Bug
+} from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { AlertTriangle } from "lucide-react";
+
+// Import des composants existants
+import BackupManager from "./BackupManager";
+import NocoDBConfig from "./NocoDBConfig";
+import DatabaseDebug from "./DatabaseDebug";
+
+export default function Utilities() {
+  const { user } = useAuthUnified();
+  // Détecter l'onglet actif basé sur l'URL pour la compatibilité
+  const [activeTab, setActiveTab] = useState(() => {
+    const path = window.location.pathname;
+    if (path === '/backup') return 'backups';
+    if (path === '/nocodb-config') return 'nocodb';
+    if (path === '/database-debug') return 'debug';
+    return 'backups';
+  });
+
+  // Vérification des permissions pour chaque onglet
+  const canManageBackups = hasPermission(user?.role || '', 'backups', 'manage');
+  const canManageNocoDB = user?.role === 'admin';
+  const canDebugDatabase = user?.role === 'admin';
+
+  // Si l'utilisateur n'a aucune permission, afficher le message d'accès refusé
+  if (!canManageBackups && !canManageNocoDB && !canDebugDatabase) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <Card className="w-96">
+          <CardHeader className="text-center">
+            <AlertTriangle className="w-12 h-12 text-orange-500 mx-auto mb-4" />
+            <CardTitle>Accès refusé</CardTitle>
+            <CardDescription>
+              Vous n'avez pas les permissions nécessaires pour accéder aux utilitaires d'administration.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden">
+      {/* Header */}
+      <div className="bg-white shadow-sm border-b border-gray-200 p-6">
+        <div className="flex items-center">
+          <Settings className="w-8 h-8 text-blue-600 mr-3" />
+          <div>
+            <h2 className="text-2xl font-bold text-gray-900">
+              Utilitaires d'Administration
+            </h2>
+            <p className="text-gray-600">
+              Outils de gestion et de maintenance du système
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Content avec onglets */}
+      <div className="flex-1 p-6 overflow-hidden">
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="h-full flex flex-col">
+          <TabsList className="grid w-full grid-cols-3 mb-6">
+            {canManageBackups && (
+              <TabsTrigger value="backups" className="flex items-center gap-2">
+                <Database className="w-4 h-4" />
+                Sauvegardes
+              </TabsTrigger>
+            )}
+            {canManageNocoDB && (
+              <TabsTrigger value="nocodb" className="flex items-center gap-2">
+                <Server className="w-4 h-4" />
+                Configuration NocoDB
+              </TabsTrigger>
+            )}
+            {canDebugDatabase && (
+              <TabsTrigger value="debug" className="flex items-center gap-2">
+                <Bug className="w-4 h-4" />
+                Debug Base de Données
+              </TabsTrigger>
+            )}
+          </TabsList>
+
+          {/* Contenu des onglets */}
+          {canManageBackups && (
+            <TabsContent value="backups" className="flex-1 overflow-hidden">
+              <div className="h-full bg-gray-50 -m-6 p-6">
+                <BackupManager />
+              </div>
+            </TabsContent>
+          )}
+
+          {canManageNocoDB && (
+            <TabsContent value="nocodb" className="flex-1 overflow-hidden">
+              <div className="h-full bg-gray-50 -m-6 p-6">
+                <NocoDBConfig />
+              </div>
+            </TabsContent>
+          )}
+
+          {canDebugDatabase && (
+            <TabsContent value="debug" className="flex-1 overflow-hidden">
+              <div className="h-full bg-gray-50 -m-6 p-6">
+                <DatabaseDebug />
+              </div>
+            </TabsContent>
+          )}
+        </Tabs>
+      </div>
+    </div>
+  );
+}