feat(nav): implement tab-based navigation system

src/pages/StudentDashboard.tsx

@@ -1,62 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import { useAuthStore } from "../stores/authStore";
-
-export const StudentDashboard = () => {
-  const user = useAuthStore((state) => state.user);
-  const logout = useAuthStore((state) => state.logout);
-  const navigate = useNavigate();
-
-  const handleLogout = () => {
-    logout();
-    navigate("/login");
-  };
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <nav className="bg-white shadow-sm">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <h1 className="text-xl font-semibold text-gray-800">
-              Student Portal
-            </h1>
-            <div className="flex items-center gap-4">
-              {user?.avatar_url && (
-                <img
-                  src={user.avatar_url}
-                  alt={user.name}
-                  className="w-8 h-8 rounded-full"
-                />
-              )}
-              <span className="text-sm text-gray-600">
-                Welcome, {user?.name}!
-              </span>
-              <button
-                onClick={handleLogout}
-                className="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition text-sm font-medium"
-              >
-                Logout
-              </button>
-            </div>
-          </div>
-        </div>
-      </nav>
-
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="bg-white rounded-lg shadow p-6">
-          <h2 className="text-2xl font-bold text-gray-800 mb-4">Dashboard</h2>
-          <div className="space-y-2 text-gray-600">
-            <p>Email: {user?.email}</p>
-            <p>Role: {user?.role}</p>
-            <p>Status: {user?.status}</p>
-            <p>
-              Member since:{" "}
-              {user?.joined_at
-                ? new Date(user.joined_at).toLocaleDateString()
-                : "N/A"}
-            </p>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-};

src/pages/auth/Login.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import type { FormEvent } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
-import { useAuthStore } from "../stores/authStore";
+import { useAuthStore } from "../../stores/authStore";
 
 interface LocationState {
   from?: {

src/pages/student/Home.tsx

@@ -0,0 +1,29 @@
+import { useNavigate } from "react-router-dom";
+import { useAuthStore } from "../../stores/authStore";
+
+export const Home = () => {
+  const user = useAuthStore((state) => state.user);
+  // const logout = useAuthStore((state) => state.logout);
+  // const navigate = useNavigate();
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white rounded-lg shadow p-6">
+          <h2 className="text-2xl font-bold text-gray-800 mb-4">Dashboard</h2>
+          <div className="space-y-2 text-gray-600">
+            <p>Email: {user?.email}</p>
+            <p>Role: {user?.role}</p>
+            <p>Status: {user?.status}</p>
+            <p>
+              Member since:{" "}
+              {user?.joined_at
+                ? new Date(user.joined_at).toLocaleDateString()
+                : "N/A"}
+            </p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};

src/pages/student/Practice.tsx

@@ -0,0 +1,26 @@
+import { useAuthStore } from "../../stores/authStore";
+
+export const Practice = () => {
+  const user = useAuthStore((state) => state.user);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white rounded-lg shadow p-6">
+          <h2 className="text-2xl font-bold text-gray-800 mb-4">Practice</h2>
+          <div className="space-y-2 text-gray-600">
+            <p>Email: {user?.email}</p>
+            <p>Role: {user?.role}</p>
+            <p>Status: {user?.status}</p>
+            <p>
+              Member since:{" "}
+              {user?.joined_at
+                ? new Date(user.joined_at).toLocaleDateString()
+                : "N/A"}
+            </p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};

src/pages/student/Profile.tsx

@@ -0,0 +1,26 @@
+import { useAuthStore } from "../../stores/authStore";
+
+export const Profile = () => {
+  const user = useAuthStore((state) => state.user);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white rounded-lg shadow p-6">
+          <h2 className="text-2xl font-bold text-gray-800 mb-4">Profile</h2>
+          <div className="space-y-2 text-gray-600">
+            <p>Email: {user?.email}</p>
+            <p>Role: {user?.role}</p>
+            <p>Status: {user?.status}</p>
+            <p>
+              Member since:{" "}
+              {user?.joined_at
+                ? new Date(user.joined_at).toLocaleDateString()
+                : "N/A"}
+            </p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};

src/pages/student/Progress.tsx

@@ -0,0 +1,26 @@
+import { useAuthStore } from "../../stores/authStore";
+
+export const Progress = () => {
+  const user = useAuthStore((state) => state.user);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white rounded-lg shadow p-6">
+          <h2 className="text-2xl font-bold text-gray-800 mb-4">Progress</h2>
+          <div className="space-y-2 text-gray-600">
+            <p>Email: {user?.email}</p>
+            <p>Role: {user?.role}</p>
+            <p>Status: {user?.status}</p>
+            <p>
+              Member since:{" "}
+              {user?.joined_at
+                ? new Date(user.joined_at).toLocaleDateString()
+                : "N/A"}
+            </p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};

src/pages/student/Rewards.tsx

@@ -0,0 +1,26 @@
+import { useAuthStore } from "../../stores/authStore";
+
+export const Rewards = () => {
+  const user = useAuthStore((state) => state.user);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white rounded-lg shadow p-6">
+          <h2 className="text-2xl font-bold text-gray-800 mb-4">Rewards</h2>
+          <div className="space-y-2 text-gray-600">
+            <p>Email: {user?.email}</p>
+            <p>Role: {user?.role}</p>
+            <p>Status: {user?.status}</p>
+            <p>
+              Member since:{" "}
+              {user?.joined_at
+                ? new Date(user.joined_at).toLocaleDateString()
+                : "N/A"}
+            </p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};

src/pages/student/StudentLayout.tsx

@@ -0,0 +1,96 @@
+import { Outlet, NavLink, useNavigate } from "react-router-dom";
+import { Home, BookOpen, TrendingUp, Award, User, Menu } from "lucide-react";
+import { useAuthStore } from "../../stores/authStore";
+
+export function StudentLayout() {
+  // const user = useAuthStore((state) => state.user);
+  const logout = useAuthStore((state) => state.logout);
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logout();
+    navigate("/login");
+  };
+
+  const navItems = [
+    { to: "/student/home", icon: Home, label: "Home" },
+    { to: "/student/practice", icon: BookOpen, label: "Practice" },
+    { to: "/student/progress", icon: TrendingUp, label: "Progress" },
+    { to: "/student/rewards", icon: Award, label: "Rewards" },
+    { to: "/student/profile", icon: User, label: "Profile" },
+  ];
+
+  return (
+    <div className="flex flex-col min-h-screen bg-gray-50">
+      {/* Top Header */}
+      <header className="bg-white shadow-sm sticky top-0 z-10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-22">
+            <div className="flex items-center gap-3">
+              <img
+                src="../../src/assets/ed_logo.png"
+                alt="EdBridge logo"
+                className="h-10 w-auto object-contain"
+                draggable={false}
+              />
+            </div>
+            <button
+              onClick={handleLogout}
+              className="flex items-center gap-2 text-slate-600 hover:text-slate-700 transition px-3 py-2 rounded-lg hover:bg-red-50"
+            >
+              <Menu size={22} />
+              <span className="text-sm font-medium hidden sm:inline">
+                Logout
+              </span>
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="flex-1 pb-20 overflow-y-auto">
+        <Outlet />
+      </main>
+
+      {/* Bottom Tab Navigation */}
+      <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg z-20">
+        <div className="max-w-7xl mx-auto px-2">
+          <div className="flex justify-around items-center">
+            {navItems.map((item) => (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                className={({ isActive }) =>
+                  `flex flex-col items-center justify-center py-3 px-4 flex-1 transition-all duration-200 ${
+                    isActive
+                      ? "text-indigo-600"
+                      : "text-gray-500 hover:text-gray-700"
+                  }`
+                }
+              >
+                {({ isActive }) => (
+                  <>
+                    <item.icon
+                      size={24}
+                      className={`mb-1 transition-transform ${
+                        isActive ? "scale-110" : ""
+                      }`}
+                      strokeWidth={isActive ? 2.5 : 2}
+                    />
+                    <span
+                      className={`text-xs font-medium ${
+                        isActive ? "font-semibold" : ""
+                      }`}
+                    >
+                      {item.label}
+                    </span>
+                  </>
+                )}
+              </NavLink>
+            ))}
+          </div>
+        </div>
+      </nav>
+    </div>
+  );
+}