first commit

apps/web/src/App.tsx

@@ -0,0 +1,64 @@
+import { useEffect } from "react";
+import axios from "axios";
+import { useAuth } from "./hooks/useAuth";
+import { AuthForm } from "./components/AuthForm";
+import { Dashboard } from "./components/Dashboard";
+import { ThemeProvider } from "./components/ThemeProvider";
+
+
+function AppContent() {
+  // ---- Authentication (MUST be at top level) ----
+  const { user, loading: authLoading, getIdToken } = useAuth();
+
+  // ---- Effects ----
+
+  // ---- Setup Axios Interceptor for Auth ----
+  useEffect(() => {
+    const interceptor = axios.interceptors.request.use(async (config) => {
+      if (user && getIdToken) {
+        try {
+          const token = await getIdToken();
+          if (token) {
+            config.headers.Authorization = `Bearer ${token}`;
+          }
+        } catch (error) {
+          console.error('Failed to get auth token:', error);
+        }
+      }
+      return config;
+    });
+
+    return () => {
+      axios.interceptors.request.eject(interceptor);
+    };
+  }, [getIdToken, user]);
+
+
+  // Show loading screen while checking auth
+  if (authLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600 dark:text-gray-400">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Show auth form if not authenticated
+  if (!user) {
+    return <AuthForm />;
+  }
+
+  // Show dashboard if authenticated
+  return <Dashboard />;
+}
+
+export default function App() {
+  return (
+    <ThemeProvider defaultTheme="system" storageKey="tabungin-ui-theme">
+      <AppContent />
+    </ThemeProvider>
+  );
+}