From c4dd22b9c19af155bd99b5f72a6b7af317777e3a Mon Sep 17 00:00:00 2001
From: CycroftX <admin@cycroftx.com>
Date: Tue, 3 Feb 2026 20:35:49 +0530
Subject: [PATCH] Add Create Event sheet with form matching API spec

---
 .../events/components/CreateEventSheet.tsx    | 349 ++++++++++++++++++
 src/pages/Events.tsx                          |  17 +-
 2 files changed, 359 insertions(+), 7 deletions(-)
 create mode 100644 src/features/events/components/CreateEventSheet.tsx

diff --git a/src/features/events/components/CreateEventSheet.tsx b/src/features/events/components/CreateEventSheet.tsx
new file mode 100644
index 0000000..fb007bf
--- /dev/null
+++ b/src/features/events/components/CreateEventSheet.tsx
@@ -0,0 +1,349 @@
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { CalendarIcon, Loader2, Upload } from "lucide-react";
+import { format } from "date-fns";
+
+import {
+    Sheet,
+    SheetContent,
+    SheetDescription,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
+} from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+
+const formSchema = z.object({
+    title: z.string().min(2, "Title must be at least 2 characters"),
+    category: z.string().min(1, "Please select a category"),
+    date: z.date({ required_error: "Start date is required" }),
+    endDate: z.date().optional(),
+    location: z.string().min(2, "Location name is required"),
+    address: z.string().min(5, "Full address is required"),
+    description: z.string().optional(),
+    imageUrl: z.string().url("Please enter a valid image URL").optional().or(z.literal("")),
+    source: z.enum(["official", "community"]).default("official"),
+    mapUrl: z.string().url().optional().or(z.literal("")),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+interface CreateEventSheetProps {
+    children: React.ReactNode;
+}
+
+export function CreateEventSheet({ children }: CreateEventSheetProps) {
+    const [open, setOpen] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            title: "",
+            category: "",
+            location: "",
+            address: "",
+            description: "",
+            imageUrl: "",
+            source: "official",
+            mapUrl: "",
+        },
+    });
+
+    async function onSubmit(data: FormValues) {
+        setIsSubmitting(true);
+        // Simulate API call
+        await new Promise((resolve) => setTimeout(resolve, 1500));
+
+        console.log("Form submitted:", data);
+        toast.success("Event created successfully");
+
+        setIsSubmitting(false);
+        setOpen(false);
+        form.reset();
+    }
+
+    return (
+        <Sheet open={open} onOpenChange={setOpen}>
+            <SheetTrigger asChild>
+                {children}
+            </SheetTrigger>
+            <SheetContent className="w-[400px] sm:w-[540px] overflow-y-auto">
+                <SheetHeader>
+                    <SheetTitle>Create New Event</SheetTitle>
+                    <SheetDescription>
+                        Add a new event to the platform. Fill in legal details and publishing info.
+                    </SheetDescription>
+                </SheetHeader>
+
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 mt-6">
+
+                        <FormField
+                            control={form.control}
+                            name="title"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Event Title</FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="e.g. Summer Music Festival" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="category"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Category</FormLabel>
+                                        <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                            <FormControl>
+                                                <SelectTrigger>
+                                                    <SelectValue placeholder="Select one" />
+                                                </SelectTrigger>
+                                            </FormControl>
+                                            <SelectContent>
+                                                <SelectItem value="drama">Drama</SelectItem>
+                                                <SelectItem value="festivals">Festivals</SelectItem>
+                                                <SelectItem value="sport">Sport</SelectItem>
+                                                <SelectItem value="music">Music</SelectItem>
+                                                <SelectItem value="comedy">Comedy</SelectItem>
+                                                <SelectItem value="workshops">Workshops</SelectItem>
+                                            </SelectContent>
+                                        </Select>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+
+                            <FormField
+                                control={form.control}
+                                name="source"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Source type</FormLabel>
+                                        <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                            <FormControl>
+                                                <SelectTrigger>
+                                                    <SelectValue placeholder="Select Type" />
+                                                </SelectTrigger>
+                                            </FormControl>
+                                            <SelectContent>
+                                                <SelectItem value="official">Official</SelectItem>
+                                                <SelectItem value="community">Community</SelectItem>
+                                            </SelectContent>
+                                        </Select>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="date"
+                                render={({ field }) => (
+                                    <FormItem className="flex flex-col">
+                                        <FormLabel>Start Date</FormLabel>
+                                        <Popover>
+                                            <PopoverTrigger asChild>
+                                                <FormControl>
+                                                    <Button
+                                                        variant={"outline"}
+                                                        className={cn(
+                                                            "w-full pl-3 text-left font-normal",
+                                                            !field.value && "text-muted-foreground"
+                                                        )}
+                                                    >
+                                                        {field.value ? (
+                                                            format(field.value, "PPP")
+                                                        ) : (
+                                                            <span>Pick a date</span>
+                                                        )}
+                                                        <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                                                    </Button>
+                                                </FormControl>
+                                            </PopoverTrigger>
+                                            <PopoverContent className="w-auto p-0" align="start">
+                                                <Calendar
+                                                    mode="single"
+                                                    selected={field.value}
+                                                    onSelect={field.onChange}
+                                                    disabled={(date) =>
+                                                        date < new Date(new Date().setHours(0, 0, 0, 0))
+                                                    }
+                                                    initialFocus
+                                                />
+                                            </PopoverContent>
+                                        </Popover>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+
+                            <FormField
+                                control={form.control}
+                                name="endDate"
+                                render={({ field }) => (
+                                    <FormItem className="flex flex-col">
+                                        <FormLabel>End Date (Optional)</FormLabel>
+                                        <Popover>
+                                            <PopoverTrigger asChild>
+                                                <FormControl>
+                                                    <Button
+                                                        variant={"outline"}
+                                                        className={cn(
+                                                            "w-full pl-3 text-left font-normal",
+                                                            !field.value && "text-muted-foreground"
+                                                        )}
+                                                    >
+                                                        {field.value ? (
+                                                            format(field.value, "PPP")
+                                                        ) : (
+                                                            <span>Pick a date</span>
+                                                        )}
+                                                        <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                                                    </Button>
+                                                </FormControl>
+                                            </PopoverTrigger>
+                                            <PopoverContent className="w-auto p-0" align="start">
+                                                <Calendar
+                                                    mode="single"
+                                                    selected={field.value}
+                                                    onSelect={field.onChange}
+                                                    disabled={(date) =>
+                                                        date < new Date(new Date().setHours(0, 0, 0, 0))
+                                                    }
+                                                    initialFocus
+                                                />
+                                            </PopoverContent>
+                                        </Popover>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+
+                        <FormField
+                            control={form.control}
+                            name="location"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Venue Name</FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="e.g. Cultural Hall, Brookefield" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <FormField
+                            control={form.control}
+                            name="address"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Full Address</FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="e.g. #123 Main St, Kochi, Kerala" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <FormField
+                            control={form.control}
+                            name="imageUrl"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Banner Image URL</FormLabel>
+                                    <FormControl>
+                                        <div className="flex gap-2">
+                                            <Input placeholder="https://..." {...field} />
+                                            <Button type="button" variant="outline" size="icon">
+                                                <Upload className="h-4 w-4" />
+                                            </Button>
+                                        </div>
+                                    </FormControl>
+                                    <FormDescription>
+                                        Provide a direct link to the event banner image.
+                                    </FormDescription>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <FormField
+                            control={form.control}
+                            name="description"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Description</FormLabel>
+                                    <FormControl>
+                                        <Textarea
+                                            placeholder="Tell people what your event is about..."
+                                            className="resize-none min-h-[100px]"
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <div className="flex justify-end gap-3 pt-4">
+                            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+                                Cancel
+                            </Button>
+                            <Button type="submit" disabled={isSubmitting} className="bg-primary text-primary-foreground min-w-[120px]">
+                                {isSubmitting ? (
+                                    <>
+                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                        Creating...
+                                    </>
+                                ) : (
+                                    "Create Event"
+                                )}
+                            </Button>
+                        </div>
+                    </form>
+                </Form>
+            </SheetContent>
+        </Sheet>
+    );
+}
diff --git a/src/pages/Events.tsx b/src/pages/Events.tsx
index 0c2e22c..cf011a8 100644
--- a/src/pages/Events.tsx
+++ b/src/pages/Events.tsx
@@ -2,6 +2,7 @@ import { Calendar, Ticket, Flag, Search, Filter, Plus } from 'lucide-react';
 import { AppLayout } from '@/components/layout/AppLayout';
 import { cn } from '@/lib/utils';
 import { mockEvents, formatCurrency } from '@/data/mockData';
+import { CreateEventSheet } from '@/features/events/components/CreateEventSheet';
 
 const statusStyles = {
   draft: 'bg-muted text-muted-foreground',
@@ -14,8 +15,8 @@ const statusStyles = {
 
 export default function Events() {
   return (
-    <AppLayout 
-      title="Events" 
+    <AppLayout
+      title="Events"
       description="Monitor and manage all platform events."
     >
       {/* Quick Stats */}
@@ -72,10 +73,12 @@ export default function Events() {
               <Filter className="h-4 w-4" />
               <span className="text-sm font-medium">Filter</span>
             </button>
-            <button className="h-10 px-4 rounded-xl bg-primary text-primary-foreground flex items-center gap-2 shadow-neu-sm hover:shadow-neu transition-shadow">
-              <Plus className="h-4 w-4" />
-              <span className="text-sm font-medium">Create Event</span>
-            </button>
+            <CreateEventSheet>
+              <button className="h-10 px-4 rounded-xl bg-primary text-primary-foreground flex items-center gap-2 shadow-neu-sm hover:shadow-neu transition-shadow">
+                <Plus className="h-4 w-4" />
+                <span className="text-sm font-medium">Create Event</span>
+              </button>
+            </CreateEventSheet>
           </div>
         </div>
 
@@ -100,7 +103,7 @@ export default function Events() {
                   </td>
                   <td className="py-4 px-4 text-muted-foreground">{event.partnerName}</td>
                   <td className="py-4 px-4 text-muted-foreground">
-                    {event.date.toLocaleDateString('en-IN', { 
+                    {event.date.toLocaleDateString('en-IN', {
                       day: 'numeric',
                       month: 'short',
                       year: 'numeric'