pic/webui/src/App.jsx

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { 
  Home, 
  Users, 
  Network, 
  Shield, 
  Mail, 
  Calendar as CalendarIcon, 
  FolderOpen, 
  Activity,
  Wifi,
  Server,
  Key,
  Package2,
  Settings as SettingsIcon
} from 'lucide-react';
import { healthAPI } from './services/api';
import Sidebar from './components/Sidebar';
import Dashboard from './pages/Dashboard';
import Peers from './pages/Peers';
import NetworkServices from './pages/NetworkServices';
import WireGuard from './pages/WireGuard';
import Email from './pages/Email';
import Calendar from './pages/Calendar';
import Files from './pages/Files';
import Routing from './pages/Routing';
import Logs from './pages/Logs';
import Settings from './pages/Settings';
import Vault from './pages/Vault';
import ContainerDashboard from './components/ContainerDashboard';

function App() {
  const [isOnline, setIsOnline] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const checkHealth = async () => {
      try {
        await healthAPI.check();
        setIsOnline(true);
      } catch (error) {
        console.error('Backend not available:', error);
        setIsOnline(false);
      } finally {
        setIsLoading(false);
      }
    };

    checkHealth();
    const interval = setInterval(checkHealth, 30000); // Check every 30 seconds

    return () => clearInterval(interval);
  }, []);

  const navigation = [
    { name: 'Dashboard', href: '/', icon: Home },
    { name: 'Peers', href: '/peers', icon: Users },
    { name: 'Network Services', href: '/network', icon: Network },
    { name: 'WireGuard', href: '/wireguard', icon: Shield },
    { name: 'Email', href: '/email', icon: Mail },
    { name: 'Calendar', href: '/calendar', icon: CalendarIcon },
    { name: 'Files', href: '/files', icon: FolderOpen },
    { name: 'Routing', href: '/routing', icon: Wifi },
    { name: 'Vault', href: '/vault', icon: Key },
    { name: 'Containers', href: '/containers', icon: Package2 },
    { name: 'Logs', href: '/logs', icon: Activity },
    { name: 'Settings', href: '/settings', icon: SettingsIcon },
  ];

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto"></div>
          <p className="mt-4 text-gray-600">Connecting to Personal Internet Cell...</p>
        </div>
      </div>
    );
  }

  return (
    <Router>
      <div className="min-h-screen bg-gray-50">
        <Sidebar navigation={navigation} isOnline={isOnline} />
        
        <div className="lg:pl-72">
          <main className="py-10">
            <div className="px-4 sm:px-6 lg:px-8">
              {!isOnline && (
                <div className="mb-6 bg-danger-50 border border-danger-200 rounded-lg p-4">
                  <div className="flex">
                    <div className="flex-shrink-0">
                      <Server className="h-5 w-5 text-danger-400" />
                    </div>
                    <div className="ml-3">
                      <h3 className="text-sm font-medium text-danger-800">
                        Backend Unavailable
                      </h3>
                      <div className="mt-2 text-sm text-danger-700">
                        <p>
                          Unable to connect to the Personal Internet Cell backend. 
                          Please ensure the API server is running on port 3000.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              )}
              
              <Routes>
                <Route path="/" element={<Dashboard isOnline={isOnline} />} />
                <Route path="/peers" element={<Peers />} />
                <Route path="/network" element={<NetworkServices />} />
                <Route path="/wireguard" element={<WireGuard />} />
                <Route path="/email" element={<Email />} />
                <Route path="/calendar" element={<Calendar />} />
                <Route path="/files" element={<Files />} />
                <Route path="/routing" element={<Routing />} />
                <Route path="/vault" element={<Vault />} />
                <Route path="/containers" element={<ContainerDashboard />} />
                <Route path="/logs" element={<Logs />} />
                <Route path="/settings" element={<Settings />} />
              </Routes>
            </div>
          </main>
        </div>
      </div>
    </Router>
  );
}

export default App;