Initial commit

client/src/App.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { Toaster } from 'react-hot-toast';
+import { AuthProvider } from './contexts/AuthContext';
+import { SocketProvider } from './contexts/SocketContext';
+import Layout from './components/Layout';
+import Dashboard from './pages/Dashboard';
+import MapView from './pages/MapView';
+import Devices from './pages/Devices';
+import Detections from './pages/Detections';
+import Alerts from './pages/Alerts';
+import Login from './pages/Login';
+import ProtectedRoute from './components/ProtectedRoute';
+
+function App() {
+  return (
+    <AuthProvider>
+      <SocketProvider>
+        <Router>
+          <div className="App">
+            <Toaster 
+              position="top-right"
+              toastOptions={{
+                duration: 4000,
+                style: {
+                  background: '#363636',
+                  color: '#fff',
+                },
+                success: {
+                  duration: 3000,
+                  iconTheme: {
+                    primary: '#4ade80',
+                    secondary: '#fff',
+                  },
+                },
+                error: {
+                  duration: 5000,
+                  iconTheme: {
+                    primary: '#ef4444',
+                    secondary: '#fff',
+                  },
+                },
+              }}
+            />
+            
+            <Routes>
+              <Route path="/login" element={<Login />} />
+              
+              <Route path="/" element={
+                <ProtectedRoute>
+                  <Layout />
+                </ProtectedRoute>
+              }>
+                <Route index element={<Dashboard />} />
+                <Route path="map" element={<MapView />} />
+                <Route path="devices" element={<Devices />} />
+                <Route path="detections" element={<Detections />} />
+                <Route path="alerts" element={<Alerts />} />
+              </Route>
+            </Routes>
+          </div>
+        </Router>
+      </SocketProvider>
+    </AuthProvider>
+  );
+}
+
+export default App;