feat(auth): implement full logout system and protect application routes

- Add LogoutProses function in app.tsx to destroy session via apiClient.logout() and clear user state
- Apply <AuthGuard> to private routes (/dashboard, /scan, /expert/reviews, etc.) to prevent unauthorized access
- Update the "Logout" button design in Navbar and MobileNav with a red accent and LogOut icon
- Fix vulnerability allowing direct URL access to the dashboard by bypassing login

apps/web/src/app.tsx

@@ -5,7 +5,7 @@ import {
   Navigate,
 } from "react-router-dom";
 import { AuthInitializer } from "@/components/auth-initializer";
-// import { AuthGuard } from "@/components/auth-guard";
+import { AuthGuard } from "@/components/auth-guard";
 import { DashboardPage } from "@/pages/dashboard-page";
 import { ScanPage } from "@/pages/scan-page";
 import { LibraryPage } from "@/pages/library-page";
@@ -14,78 +14,119 @@ import { DiseaseDetailPage } from "@/pages/disease-detail-page";
 import { DiagnosisDetailPage } from "@/pages/diagnosis-detail-page";
 import { ExpertReviewsPage } from "@/pages/expert-reviews-page";
 import { DiagnosesPage } from "@/pages/diagnoses-page";
-// import { LoginPage } from "@/pages/login-page";
-// import { RegisterPage } from "@/pages/register-page";
+import { LoginPage } from "@/pages/login-page";
+import { RegisterPage } from "@/pages/register-page";
 import { MainLayout } from "@/components/layout/main-layout";
+import { useEffect } from "react";
+import { useAuthStore } from "@/store/auth-store";
+import { apiClient } from "@/lib/api-client";
+
+function LogoutProses() {
+  const setUser = useAuthStore((state) => state.setUser);
+
+  useEffect(() => {
+    apiClient.logout().then(() => {
+      setUser(null);
+
+    }).catch((error) => {
+      console.error("Oops, gagal logout dari server:", error);
+      setUser(null); 
+    });
+  }, [setUser]);
+
+  return <Navigate to="/login" replace />;
+}
 
 const queryClient = new QueryClient();
 
 const router = createBrowserRouter([
-  { path: "/", element: <Navigate to="/dashboard" replace /> },
-  // { path: "/login", element: <LoginPage /> },
-  // { path: "/register", element: <RegisterPage /> },
+  { path: "/", element: <Navigate to="/login" replace /> },
+  { path: "/login", element: <LoginPage /> },
+  { path: "/register", element: <RegisterPage /> },
   {
     path: "/dashboard",
     element: (
-      <MainLayout>
-        <DashboardPage />
-      </MainLayout>
+      <AuthGuard>
+        <MainLayout>
+          <DashboardPage />
+        </MainLayout>
+      </AuthGuard>
     ),
   },
   {
     path: "/scan",
     element: (
-      <MainLayout>
-        <ScanPage />
-      </MainLayout>
+      <AuthGuard>
+        <MainLayout>
+          <ScanPage />
+        </MainLayout>
+      </AuthGuard>
     ),
   },
   {
     path: "/library",
     element: (
-      <MainLayout>
-        <LibraryPage />
-      </MainLayout>
+      <AuthGuard>
+        <MainLayout>
+          <LibraryPage />
+        </MainLayout>
+      </AuthGuard>
     ),
   },
   {
     path: "/diagnoses",
     element: (
-      <MainLayout>
-        <DiagnosesPage />
-      </MainLayout>
+      <AuthGuard>
+        <MainLayout>
+          <DiagnosesPage />
+        </MainLayout>
+      </AuthGuard>
     ),
   },
   {
     path: "/diagnoses/:id",
     element: (
-      <MainLayout>
-        <DiagnosisDetailPage />
-      </MainLayout>
+      <AuthGuard>
+        <MainLayout>
+          <DiagnosisDetailPage />
+        </MainLayout>
+      </AuthGuard>
     ),
   },
   {
     path: "/expert/reviews",
     element: (
-      <MainLayout>
-        <ExpertReviewsPage />
-      </MainLayout>
+      <AuthGuard requireExpert={true}>
+        <MainLayout>
+          <ExpertReviewsPage />
+        </MainLayout>
+      </AuthGuard>
     ),
   },
   {
     path: "/catalog",
     element: (
-      <MainLayout>
-        <CatalogPage />
-      </MainLayout>
+      <AuthGuard>
+        <MainLayout>
+          <CatalogPage />
+        </MainLayout>
+      </AuthGuard>
     ),
   },
   {
     path: "/catalog/:slug",
     element: (
-      <MainLayout>
-        <DiseaseDetailPage />
-      </MainLayout>
+      <AuthGuard>
+        <MainLayout>
+          <DiseaseDetailPage />
+        </MainLayout>
+      </AuthGuard>
+    ),
+  },
+  {
+    path: "/logout",
+    element: (
+      <LogoutProses />
     ),
   },
 ]);