ADD new frontend

frontend/src/App.tsx

@@ -1,67 +1,55 @@
-import React, { useEffect } from 'react';
-import { RouterProvider } from 'react-router-dom';
-import { Provider } from 'react-redux';
+import { Suspense } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { BrowserRouter } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
-import { router } from './router';
-import { store } from './store';
-import ErrorBoundary from './components/ErrorBoundary';
-import { useAuth } from './hooks/useAuth';
+import { ErrorBoundary } from './components/shared/ErrorBoundary';
+import { LoadingSpinner } from './components/shared/LoadingSpinner';
+import { AppRouter } from './router/AppRouter';
+import { ThemeProvider } from './contexts/ThemeContext';
+import { AuthProvider } from './contexts/AuthContext';
+import { SSEProvider } from './contexts/SSEContext';
 
-// i18n
-import './i18n';
-
-// Global styles
-import './styles/globals.css';
-
-const AppContent: React.FC = () => {
-  const { initializeAuth } = useAuth();
-
-  useEffect(() => {
-    initializeAuth();
-  }, [initializeAuth]);
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000,
+      gcTime: 10 * 60 * 1000,
+      retry: 3,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
 
+function App() {
   return (
     <ErrorBoundary>
-      <div className="App min-h-screen bg-gray-50">
-        <RouterProvider router={router} />
-        
-        {/* Global Toast Notifications */}
-        <Toaster
-          position="top-right"
-          toastOptions={{
-            duration: 4000,
-            style: {
-              background: '#fff',
-              color: '#333',
-              boxShadow: '0 4px 25px -5px rgba(0, 0, 0, 0.1)',
-              borderRadius: '12px',
-              padding: '16px',
-            },
-            success: {
-              iconTheme: {
-                primary: '#22c55e',
-                secondary: '#fff',
-              },
-            },
-            error: {
-              iconTheme: {
-                primary: '#ef4444',
-                secondary: '#fff',
-              },
-            },
-          }}
-        />
-      </div>
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <ThemeProvider>
+            <AuthProvider>
+              <SSEProvider>
+                <Suspense fallback={<LoadingSpinner overlay />}>
+                  <AppRouter />
+                  <Toaster
+                    position="top-right"
+                    toastOptions={{
+                      duration: 4000,
+                      style: {
+                        background: '#363636',
+                        color: '#fff',
+                      },
+                    }}
+                  />
+                </Suspense>
+              </SSEProvider>
+            </AuthProvider>
+          </ThemeProvider>
+        </BrowserRouter>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
     </ErrorBoundary>
   );
-};
-
-const App: React.FC = () => {
-  return (
-    <Provider store={store}>
-      <AppContent />
-    </Provider>
-  );
-};
+}
 
 export default App;