feat(nav): implement tab-based navigation system

src/pages/auth/Login.tsx

@@ -0,0 +1,157 @@
+import { useState, useEffect } from "react";
+import type { FormEvent } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { useAuthStore } from "../../stores/authStore";
+
+interface LocationState {
+  from?: {
+    pathname: string;
+  };
+}
+
+export const Login = () => {
+  const [email, setEmail] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const { login, isAuthenticated, isLoading, error, clearError } =
+    useAuthStore();
+
+  const from = (location.state as LocationState)?.from?.pathname || "/student";
+
+  // Redirect if already authenticated
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate("/student", { replace: true });
+    }
+  }, [isAuthenticated, navigate]);
+
+  // Clear error when component unmounts or inputs change
+  useEffect(() => {
+    return () => clearError();
+  }, [clearError]);
+
+  const handleSubmit = async (e: FormEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    clearError();
+
+    const success = await login({ email, password });
+    if (success) {
+      navigate(from, { replace: true });
+    }
+  };
+
+  // Don't render login form if already authenticated
+  if (isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center ">
+      <div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-sm border border-gray-300">
+        <div className="flex justify-center mb-6">
+          <img
+            src="src/assets/ed_logo.png"
+            alt="EdBridge logo"
+            className="h-15 w-auto object-contain"
+            draggable={false}
+          />
+        </div>
+        <h2 className="text-3xl font-satoshi-bold text-center text-gray-800">
+          Welcome Back
+        </h2>
+        <div className="space-y-6">
+          <div>
+            <label
+              htmlFor="email"
+              className="block text-sm font-satoshi-medium text-gray-700 mb-2"
+            >
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              disabled={isLoading}
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition disabled:bg-gray-100 disabled:cursor-not-allowed"
+              placeholder="Enter your email"
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="password"
+              className="block text-sm font-satoshi-medium text-gray-700 mb-2"
+            >
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              disabled={isLoading}
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition disabled:bg-gray-100 disabled:cursor-not-allowed"
+              placeholder="Enter your password"
+            />
+            <div className="flex items-center mt-4">
+              <input
+                id="rememberMe"
+                type="checkbox"
+                className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
+              />
+              <label
+                htmlFor="rememberMe"
+                className="ml-2 block text-sm font-satoshi-medium text-gray-700"
+              >
+                Remember me
+              </label>
+            </div>
+          </div>
+
+          {error && (
+            <div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm">
+              {error}
+            </div>
+          )}
+
+          <button
+            onClick={handleSubmit}
+            disabled={isLoading || !email || !password}
+            className="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition font-medium disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center justify-center font-satoshi"
+          >
+            {isLoading ? (
+              <>
+                <svg
+                  className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                Signing in...
+              </>
+            ) : (
+              "Sign In"
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};