Add dashboard and login pages with authentication logic

Introduced the dashboard page that verifies user authentication and redirects unauthenticated users to the login page. Added a login page enabling users to sign in, with error handling and redirects upon successful authentication. Both pages are styled and handle loading states appropriately.

frontend/src/app/(main)/dashboard/page.tsx

@@ -0,0 +1,72 @@
+// src/app/(main)/dashboard/page.tsx
+"use client";
+
+import { useAuth } from "@/context/auth-context";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export default function DashboardPage() {
+  const { user, isLoading, isAuthenticated } = useAuth();
+  const router = useRouter();
+
+  // Redirect to login if not authenticated
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      router.push("/login");
+    }
+  }, [isLoading, isAuthenticated, router]);
+
+  // Show loading state
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <div className="h-8 w-8 mx-auto border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
+          <p className="mt-2">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-12">
+      <div className="max-w-7xl mx-auto">
+        <h1 className="text-3xl font-bold mb-8">Dashboard</h1>
+
+        <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-6">
+          <h2 className="text-xl font-semibold mb-4">
+            Welcome, {user?.first_name || "User"}!
+          </h2>
+          <p className="text-gray-600 dark:text-gray-300 mb-4">
+            You are now logged in to EventSpace.
+          </p>
+
+          <div className="mt-8">
+            <h3 className="text-lg font-medium mb-4">Your Events</h3>
+            <div className="bg-gray-100 dark:bg-slate-700 rounded p-8 text-center">
+              <p className="text-gray-500 dark:text-gray-400">No events yet</p>
+              <button
+                className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                onClick={() => alert("Create event functionality coming soon!")}
+              >
+                Create Your First Event
+              </button>
+            </div>
+          </div>
+
+          <div className="mt-8">
+            <button
+              className="px-4 py-2 bg-red-100 text-red-600 rounded hover:bg-red-200 transition-colors"
+              onClick={() => {
+                const auth = useAuth();
+                auth.logout();
+              }}
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}