Add event creation page and link from dashboard

Introduced a new page for creating events with a form to input event details and added a link from the dashboard to this page. The form includes fields for title, description, date, location, and public/private options, enhancing user functionality. Users are redirected to the event page upon successful creation.

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

@@ -0,0 +1,154 @@
+"use client";
+
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useEvents } from "@/context/event-context";
+import { EventCreate } from "@/client/types.gen";
+import Navbar from "@/components/layout/navbar";
+import { Button } from "@/components/ui/button";
+
+const CreateEventPage: React.FC = () => {
+  const router = useRouter();
+  const { createEvent, isCreating } = useEvents();
+
+  const [formData, setFormData] = useState<EventCreate>({
+    title: "",
+    description: "",
+    location_name: "",
+    location_address: "",
+    event_date: "",
+    timezone: "UTC",
+    slug: "",
+    is_public: false,
+  });
+
+  const onChange = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
+  ) => {
+    const { name, value, type } = e.target;
+    const checked =
+      type === "checkbox" ? (e.target as HTMLInputElement).checked : undefined;
+    setFormData({
+      ...formData,
+      [name]: type === "checkbox" ? checked : value,
+    });
+  };
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const event = await createEvent(formData);
+      router.push(`/dashboard/events/${event.slug}`);
+    } catch (error) {
+      console.error("Failed to create event:", error);
+      alert("Failed to create event. Please check your data and try again.");
+    }
+  };
+
+  return (
+    <>
+      <Navbar />
+      <div className="container mx-auto px-4 py-8 max-w-4xl">
+        <h1 className="text-3xl font-bold mb-8">Create New Event</h1>
+
+        <form
+          onSubmit={onSubmit}
+          className="bg-background shadow-lg rounded-md p-6 space-y-4"
+        >
+          <input
+            name="title"
+            value={formData.title}
+            onChange={onChange}
+            placeholder="Event Title"
+            required
+            className="w-full rounded border border-border bg-background text-foreground placeholder:text-muted-foreground p-2"
+          />
+
+          <textarea
+            name="description"
+            value={formData.description || ""}
+            onChange={onChange}
+            placeholder="Event Description"
+            className="w-full rounded border border-border bg-background text-foreground placeholder:text-muted-foreground p-2"
+          />
+
+          <input
+            name="slug"
+            value={formData.slug}
+            onChange={onChange}
+            placeholder="Slug (event-slug)"
+            pattern="^[a-z0-9-]+$"
+            required
+            className="w-full rounded border border-border bg-background text-foreground placeholder:text-muted-foreground p-2"
+          />
+
+          <input
+            type="datetime-local"
+            name="event_date"
+            value={formData.event_date}
+            onChange={onChange}
+            required
+            className="w-full rounded border border-border bg-background text-foreground placeholder:text-muted-foreground p-2"
+          />
+
+          <input
+            name="location_name"
+            value={formData.location_name || ""}
+            onChange={onChange}
+            placeholder="Location Name (e.g., Central Park)"
+            className="w-full rounded border border-border bg-background text-foreground placeholder:text-muted-foreground p-2"
+          />
+
+          <input
+            name="location_address"
+            value={formData.location_address || ""}
+            onChange={onChange}
+            placeholder="Location Address"
+            className="w-full rounded border border-border bg-background text-foreground placeholder:text-muted-foreground p-2"
+          />
+
+          <select
+            name="timezone"
+            value={formData.timezone}
+            onChange={onChange}
+            required
+            className="w-full rounded border border-border bg-background text-foreground placeholder:text-muted-foreground p-2"
+          >
+            <option value="UTC">UTC</option>
+            <option value="Europe">Europe</option>
+            {/*<option value="Europe/London">Europe/London</option>*/}
+            {/* Additional timezone options */}
+          </select>
+
+          <label className="inline-flex items-center mt-2 text-foreground">
+            <input
+              type="checkbox"
+              name="is_public"
+              checked={formData.is_public}
+              onChange={onChange}
+              className="checkbox mr-2 rounded bg-background"
+            />
+            Public Event
+          </label>
+
+          <div className="flex items-center justify-end gap-4 mt-4">
+            <Button type="submit" disabled={isCreating}>
+              {isCreating ? "Creating..." : "Create Event"}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => router.back()}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </div>
+    </>
+  );
+};
+
+export default CreateEventPage;

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

@@ -3,6 +3,7 @@
 
 import { useAuth } from "@/context/auth-context";
 import Navbar from "@/components/layout/navbar";
+import Link from "next/link";
 
 export default function DashboardPage() {
   const { user, isLoading } = useAuth();
@@ -40,14 +41,11 @@ export default function DashboardPage() {
                 <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!")
-                  }
-                >
+                <Link href="/dashboard/events/new">
+                  <button className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
                     Create Your First Event
                   </button>
+                </Link>
               </div>
             </div>
           </div>