feat: remove OTP gate from transactions, fix categories auth, add implementation plan

- Remove OtpGateGuard from transactions controller (OTP verified at login)
- Fix categories controller to use authenticated user instead of TEMP_USER_ID
- Add comprehensive implementation plan document
- Update .env.example with WEB_APP_URL
- Prepare for admin dashboard development

apps/web/src/App.tsx

@@ -1,64 +1,69 @@
-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";
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import { AuthProvider, useAuth } from './contexts/AuthContext'
+import { ThemeProvider } from './components/ThemeProvider'
+import { Dashboard } from './components/Dashboard'
+import { Login } from './components/pages/Login'
+import { Register } from './components/pages/Register'
+import { OtpVerification } from './components/pages/OtpVerification'
+import { AuthCallback } from './components/pages/AuthCallback'
+import { Loader2 } from 'lucide-react'
 
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { user, loading } = useAuth()
 
-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) {
+  if (loading) {
     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>
+          <Loader2 className="h-12 w-12 animate-spin text-blue-600 mx-auto" />
           <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 />;
+    return <Navigate to="/auth/login" replace />
   }
 
-  // Show dashboard if authenticated
-  return <Dashboard />;
+  return <>{children}</>
+}
+
+function PublicRoute({ children }: { children: React.ReactNode }) {
+  const { user, loading } = useAuth()
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <Loader2 className="h-8 w-8 animate-spin text-blue-600" />
+      </div>
+    )
+  }
+
+  if (user) {
+    return <Navigate to="/" replace />
+  }
+
+  return <>{children}</>
 }
 
 export default function App() {
   return (
-    <ThemeProvider defaultTheme="system" storageKey="tabungin-ui-theme">
-      <AppContent />
-    </ThemeProvider>
-  );
+    <BrowserRouter>
+      <ThemeProvider defaultTheme="light" storageKey="tabungin-ui-theme">
+        <AuthProvider>
+          <Routes>
+            {/* Public Routes */}
+            <Route path="/auth/login" element={<PublicRoute><Login /></PublicRoute>} />
+            <Route path="/auth/register" element={<PublicRoute><Register /></PublicRoute>} />
+            <Route path="/auth/otp" element={<OtpVerification />} />
+            <Route path="/auth/callback" element={<AuthCallback />} />
+
+            {/* Protected Routes */}
+            <Route path="/*" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
+          </Routes>
+        </AuthProvider>
+      </ThemeProvider>
+    </BrowserRouter>
+  )
 }