Start repository

src/App.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { LayoutDashboard, Shield, Settings, Database, AlertCircle } from 'lucide-react';
+import Dashboard from './components/Dashboard';
+import CVEList from './components/CVEList';
+import SourcesConfig from './components/SourcesConfig';
+import RulesConfig from './components/RulesConfig';
+
+function App() {
+  const [activeTab, setActiveTab] = useState<string>('dashboard');
+
+  const navigation = [
+    { id: 'dashboard', name: 'Dashboard', icon: <LayoutDashboard className="h-5 w-5" /> },
+    { id: 'cve', name: 'CVE Management', icon: <Shield className="h-5 w-5" /> },
+    { id: 'sources', name: 'Data Sources', icon: <Database className="h-5 w-5" /> },
+    { id: 'rules', name: 'Rules', icon: <Settings className="h-5 w-5" /> },
+  ];
+
+  return (
+    <div className="min-h-screen bg-gray-100 flex">
+      {/* Sidebar */}
+      <div className="w-64 bg-white shadow-md hidden md:block">
+        <div className="h-16 flex items-center px-6 border-b border-gray-200">
+          <AlertCircle className="h-6 w-6 mr-2 text-blue-600" />
+          <span className="font-bold text-lg">GLPI CVE Plugin</span>
+        </div>
+        <nav className="mt-6 px-3">
+          {navigation.map((item) => (
+            <button
+              key={item.id}
+              onClick={() => setActiveTab(item.id)}
+              className={`flex items-center px-3 py-2 mt-1 rounded-md w-full text-left ${
+                activeTab === item.id
+                  ? 'bg-blue-50 text-blue-700'
+                  : 'text-gray-700 hover:bg-gray-100'
+              }`}
+            >
+              <span className="mr-3">{item.icon}</span>
+              {item.name}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      {/* Mobile navbar */}
+      <div className="md:hidden w-full bg-white p-4 flex border-b border-gray-200">
+        <div className="flex items-center">
+          <AlertCircle className="h-6 w-6 mr-2 text-blue-600" />
+          <span className="font-bold text-lg">GLPI CVE Plugin</span>
+        </div>
+      </div>
+
+      {/* Mobile navigation */}
+      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around py-2 md:hidden">
+        {navigation.map((item) => (
+          <button
+            key={item.id}
+            onClick={() => setActiveTab(item.id)}
+            className={`flex flex-col items-center px-3 py-2 text-sm ${
+              activeTab === item.id ? 'text-blue-700' : 'text-gray-600'
+            }`}
+          >
+            {item.icon}
+            <span className="mt-1">{item.name}</span>
+          </button>
+        ))}
+      </div>
+
+      {/* Main content */}
+      <div className="flex-1 min-h-screen md:ml-64">
+        {activeTab === 'dashboard' && <Dashboard />}
+        {activeTab === 'cve' && <CVEList />}
+        {activeTab === 'sources' && <SourcesConfig />}
+        {activeTab === 'rules' && <RulesConfig />}
+      </div>
+    </div>
+  );
+}
+
+export default App;