i18n: add Paraglide messages for all events pages (EN + ET)

messages/en.json

@@ -251,5 +251,74 @@
 	"entity_kanban_column": "column",
 	"entity_member": "member",
 	"entity_role": "role",
-	"entity_invite": "invite"
+	"entity_invite": "invite",
+	"entity_event": "event",
+	"nav_events": "Events",
+	"events_title": "Events",
+	"events_subtitle": "Organize and manage your events",
+	"events_new": "New Event",
+	"events_create": "Create Event",
+	"events_empty_title": "No events yet",
+	"events_empty_desc": "Create your first event to get started",
+	"events_no_dates": "No dates set",
+	"events_tab_all": "All Events",
+	"events_tab_planning": "Planning",
+	"events_tab_active": "Active",
+	"events_tab_completed": "Completed",
+	"events_tab_archived": "Archived",
+	"events_status_planning": "Planning",
+	"events_status_active": "Active",
+	"events_status_completed": "Completed",
+	"events_status_archived": "Archived",
+	"events_form_name": "Event Name",
+	"events_form_name_placeholder": "e.g., Summer Conference 2026",
+	"events_form_description": "Description",
+	"events_form_description_placeholder": "Brief description of the event...",
+	"events_form_start_date": "Start Date",
+	"events_form_end_date": "End Date",
+	"events_form_venue": "Venue",
+	"events_form_venue_placeholder": "e.g., Convention Center",
+	"events_form_venue_address_placeholder": "Venue address",
+	"events_form_color": "Color",
+	"events_form_select_color": "Select color {color}",
+	"events_creating": "Creating...",
+	"events_saving": "Saving...",
+	"events_deleting": "Deleting...",
+	"events_updated": "Event updated",
+	"events_created": "Event \"{name}\" created",
+	"events_deleted": "Event deleted",
+	"events_delete_title": "Delete Event?",
+	"events_delete_desc": "This will permanently delete {name} and all its data. This action cannot be undone.",
+	"events_delete_confirm": "Delete Event",
+	"events_days_ago": "{count} days ago",
+	"events_today": "Today!",
+	"events_tomorrow": "Tomorrow",
+	"events_in_days": "In {count} days",
+	"events_overview": "Overview",
+	"events_modules": "Modules",
+	"events_details": "Event Details",
+	"events_start_date": "Start Date",
+	"events_end_date": "End Date",
+	"events_venue": "Venue",
+	"events_not_set": "Not set",
+	"events_all_events": "All Events",
+	"events_team": "Team",
+	"events_team_count": "Team ({count})",
+	"events_team_manage": "Manage",
+	"events_team_empty": "No team members assigned yet",
+	"events_more_members": "+{count} more",
+	"events_mod_tasks": "Tasks",
+	"events_mod_tasks_desc": "Manage tasks, milestones, and progress",
+	"events_mod_files": "Files",
+	"events_mod_files_desc": "Documents, contracts, and media",
+	"events_mod_schedule": "Schedule",
+	"events_mod_schedule_desc": "Event timeline and program",
+	"events_mod_budget": "Budget",
+	"events_mod_budget_desc": "Income, expenses, and tracking",
+	"events_mod_guests": "Guests",
+	"events_mod_guests_desc": "Guest list and registration",
+	"events_mod_team": "Team",
+	"events_mod_team_desc": "Team members and shift scheduling",
+	"events_mod_sponsors": "Sponsors",
+	"events_mod_sponsors_desc": "Sponsors, partners, and deliverables"
 }

messages/et.json

@@ -251,5 +251,74 @@
 	"entity_kanban_column": "veeru",
 	"entity_member": "liikme",
 	"entity_role": "rolli",
-	"entity_invite": "kutse"
+	"entity_invite": "kutse",
+	"entity_event": "ürituse",
+	"nav_events": "Üritused",
+	"events_title": "Üritused",
+	"events_subtitle": "Korralda ja halda oma üritusi",
+	"events_new": "Uus üritus",
+	"events_create": "Loo üritus",
+	"events_empty_title": "Üritusi pole veel",
+	"events_empty_desc": "Loo oma esimene üritus alustamiseks",
+	"events_no_dates": "Kuupäevad määramata",
+	"events_tab_all": "Kõik üritused",
+	"events_tab_planning": "Planeerimisel",
+	"events_tab_active": "Aktiivne",
+	"events_tab_completed": "Lõpetatud",
+	"events_tab_archived": "Arhiveeritud",
+	"events_status_planning": "Planeerimisel",
+	"events_status_active": "Aktiivne",
+	"events_status_completed": "Lõpetatud",
+	"events_status_archived": "Arhiveeritud",
+	"events_form_name": "Ürituse nimi",
+	"events_form_name_placeholder": "nt Suvekonverents 2026",
+	"events_form_description": "Kirjeldus",
+	"events_form_description_placeholder": "Ürituse lühikirjeldus...",
+	"events_form_start_date": "Alguskuupäev",
+	"events_form_end_date": "Lõppkuupäev",
+	"events_form_venue": "Toimumiskoht",
+	"events_form_venue_placeholder": "nt Konverentsikeskus",
+	"events_form_venue_address_placeholder": "Toimumiskoha aadress",
+	"events_form_color": "Värv",
+	"events_form_select_color": "Vali värv {color}",
+	"events_creating": "Loomine...",
+	"events_saving": "Salvestamine...",
+	"events_deleting": "Kustutamine...",
+	"events_updated": "Üritus uuendatud",
+	"events_created": "Üritus \"{name}\" loodud",
+	"events_deleted": "Üritus kustutatud",
+	"events_delete_title": "Kustuta üritus?",
+	"events_delete_desc": "See kustutab jäädavalt ürituse {name} ja kõik selle andmed. Seda toimingut ei saa tagasi võtta.",
+	"events_delete_confirm": "Kustuta üritus",
+	"events_days_ago": "{count} päeva tagasi",
+	"events_today": "Täna!",
+	"events_tomorrow": "Homme",
+	"events_in_days": "{count} päeva pärast",
+	"events_overview": "Ülevaade",
+	"events_modules": "Moodulid",
+	"events_details": "Ürituse andmed",
+	"events_start_date": "Alguskuupäev",
+	"events_end_date": "Lõppkuupäev",
+	"events_venue": "Toimumiskoht",
+	"events_not_set": "Määramata",
+	"events_all_events": "Kõik üritused",
+	"events_team": "Meeskond",
+	"events_team_count": "Meeskond ({count})",
+	"events_team_manage": "Halda",
+	"events_team_empty": "Meeskonnaliikmeid pole veel määratud",
+	"events_more_members": "+{count} veel",
+	"events_mod_tasks": "Ülesanded",
+	"events_mod_tasks_desc": "Halda ülesandeid, verstaposte ja edenemist",
+	"events_mod_files": "Failid",
+	"events_mod_files_desc": "Dokumendid, lepingud ja meedia",
+	"events_mod_schedule": "Ajakava",
+	"events_mod_schedule_desc": "Ürituse ajakava ja programm",
+	"events_mod_budget": "Eelarve",
+	"events_mod_budget_desc": "Tulud, kulud ja jälgimine",
+	"events_mod_guests": "Külalised",
+	"events_mod_guests_desc": "Külaliste nimekiri ja registreerimine",
+	"events_mod_team": "Meeskond",
+	"events_mod_team_desc": "Meeskonnaliikmed ja vahetuste planeerimine",
+	"events_mod_sponsors": "Sponsorid",
+	"events_mod_sponsors_desc": "Sponsorid, partnerid ja kohustused"
 }

src/lib/api/events.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+
+// Test the slugify logic (extracted inline since it's not exported)
+function slugify(text: string): string {
+	return text
+		.toLowerCase()
+		.replace(/[^\w\s-]/g, '')
+		.replace(/[\s_]+/g, '-')
+		.replace(/-+/g, '-')
+		.replace(/^-|-$/g, '')
+		.slice(0, 60) || 'event';
+}
+
+describe('events API - slugify', () => {
+	it('converts simple name to slug', () => {
+		expect(slugify('Summer Conference')).toBe('summer-conference');
+	});
+
+	it('handles special characters', () => {
+		expect(slugify('Music & Arts Festival 2026!')).toBe('music-arts-festival-2026');
+	});
+
+	it('collapses multiple spaces and dashes', () => {
+		expect(slugify('My   Big   Event')).toBe('my-big-event');
+	});
+
+	it('trims leading/trailing dashes', () => {
+		expect(slugify('--hello--')).toBe('hello');
+	});
+
+	it('truncates to 60 characters', () => {
+		const longName = 'A'.repeat(100);
+		expect(slugify(longName).length).toBeLessThanOrEqual(60);
+	});
+
+	it('returns "event" for empty string', () => {
+		expect(slugify('')).toBe('event');
+	});
+
+	it('handles unicode characters', () => {
+		const result = slugify('Ürituse Korraldamine');
+		expect(result).toBe('rituse-korraldamine');
+	});
+
+	it('handles numbers', () => {
+		expect(slugify('Event 2026 Q1')).toBe('event-2026-q1');
+	});
+});

src/lib/api/events.ts

@@ -0,0 +1,277 @@
+import type { SupabaseClient } from '@supabase/supabase-js';
+import type { Database } from '$lib/supabase/types';
+import { createLogger } from '$lib/utils/logger';
+
+const log = createLogger('api.events');
+
+export interface Event {
+	id: string;
+	org_id: string;
+	name: string;
+	slug: string;
+	description: string | null;
+	status: 'planning' | 'active' | 'completed' | 'archived';
+	start_date: string | null;
+	end_date: string | null;
+	venue_name: string | null;
+	venue_address: string | null;
+	cover_image_url: string | null;
+	color: string | null;
+	created_by: string | null;
+	created_at: string;
+	updated_at: string;
+}
+
+export interface EventMember {
+	id: string;
+	event_id: string;
+	user_id: string;
+	role: 'lead' | 'manager' | 'member';
+	assigned_at: string;
+}
+
+export interface EventWithCounts extends Event {
+	member_count: number;
+}
+
+function slugify(text: string): string {
+	return text
+		.toLowerCase()
+		.replace(/[^\w\s-]/g, '')
+		.replace(/[\s_]+/g, '-')
+		.replace(/-+/g, '-')
+		.replace(/^-|-$/g, '')
+		.slice(0, 60) || 'event';
+}
+
+export async function fetchEvents(
+	supabase: SupabaseClient<Database>,
+	orgId: string,
+	status?: string
+): Promise<EventWithCounts[]> {
+	let query = supabase
+		.from('events')
+		.select('*, event_members(count)')
+		.eq('org_id', orgId)
+		.order('start_date', { ascending: true, nullsFirst: false });
+
+	if (status && status !== 'all') {
+		query = query.eq('status', status);
+	}
+
+	const { data, error } = await query;
+
+	if (error) {
+		log.error('fetchEvents failed', { error, data: { orgId } });
+		throw error;
+	}
+
+	const events: EventWithCounts[] = (data ?? []).map((e: any) => ({
+		...e,
+		member_count: e.event_members?.[0]?.count ?? 0,
+		event_members: undefined,
+	}));
+
+	log.debug('fetchEvents ok', { data: { count: events.length } });
+	return events;
+}
+
+export async function fetchEvent(
+	supabase: SupabaseClient<Database>,
+	eventId: string
+): Promise<Event | null> {
+	const { data, error } = await supabase
+		.from('events')
+		.select('*')
+		.eq('id', eventId)
+		.single();
+
+	if (error) {
+		if (error.code === 'PGRST116') return null;
+		log.error('fetchEvent failed', { error, data: { eventId } });
+		throw error;
+	}
+	return data as unknown as Event;
+}
+
+export async function fetchEventBySlug(
+	supabase: SupabaseClient<Database>,
+	orgId: string,
+	eventSlug: string
+): Promise<Event | null> {
+	const { data, error } = await supabase
+		.from('events')
+		.select('*')
+		.eq('org_id', orgId)
+		.eq('slug', eventSlug)
+		.single();
+
+	if (error) {
+		if (error.code === 'PGRST116') return null;
+		log.error('fetchEventBySlug failed', { error, data: { orgId, eventSlug } });
+		throw error;
+	}
+	return data as unknown as Event;
+}
+
+export async function createEvent(
+	supabase: SupabaseClient<Database>,
+	orgId: string,
+	userId: string,
+	params: {
+		name: string;
+		description?: string;
+		start_date?: string;
+		end_date?: string;
+		venue_name?: string;
+		venue_address?: string;
+		color?: string;
+	}
+): Promise<Event> {
+	const baseSlug = slugify(params.name);
+
+	// Ensure unique slug within org
+	const { data: existing } = await supabase
+		.from('events')
+		.select('slug')
+		.eq('org_id', orgId)
+		.like('slug', `${baseSlug}%`);
+
+	let slug = baseSlug;
+	if (existing && existing.length > 0) {
+		const existingSlugs = new Set(existing.map((e: any) => e.slug));
+		if (existingSlugs.has(slug)) {
+			let i = 2;
+			while (existingSlugs.has(`${baseSlug}-${i}`)) i++;
+			slug = `${baseSlug}-${i}`;
+		}
+	}
+
+	const { data, error } = await supabase
+		.from('events')
+		.insert({
+			org_id: orgId,
+			name: params.name,
+			slug,
+			description: params.description ?? null,
+			start_date: params.start_date ?? null,
+			end_date: params.end_date ?? null,
+			venue_name: params.venue_name ?? null,
+			venue_address: params.venue_address ?? null,
+			color: params.color ?? null,
+			created_by: userId,
+		})
+		.select()
+		.single();
+
+	if (error) {
+		log.error('createEvent failed', { error, data: { orgId, name: params.name } });
+		throw error;
+	}
+	log.info('createEvent ok', { data: { id: data.id, name: params.name, slug } });
+	return data as unknown as Event;
+}
+
+export async function updateEvent(
+	supabase: SupabaseClient<Database>,
+	eventId: string,
+	params: Partial<Pick<Event, 'name' | 'description' | 'status' | 'start_date' | 'end_date' | 'venue_name' | 'venue_address' | 'cover_image_url' | 'color'>>
+): Promise<Event> {
+	const { data, error } = await supabase
+		.from('events')
+		.update({ ...params, updated_at: new Date().toISOString() })
+		.eq('id', eventId)
+		.select()
+		.single();
+
+	if (error) {
+		log.error('updateEvent failed', { error, data: { eventId } });
+		throw error;
+	}
+	log.info('updateEvent ok', { data: { id: data.id } });
+	return data as unknown as Event;
+}
+
+export async function deleteEvent(
+	supabase: SupabaseClient<Database>,
+	eventId: string
+): Promise<void> {
+	const { error } = await supabase
+		.from('events')
+		.delete()
+		.eq('id', eventId);
+
+	if (error) {
+		log.error('deleteEvent failed', { error, data: { eventId } });
+		throw error;
+	}
+	log.info('deleteEvent ok', { data: { eventId } });
+}
+
+export async function fetchEventMembers(
+	supabase: SupabaseClient<Database>,
+	eventId: string
+): Promise<(EventMember & { profile?: { id: string; email: string; full_name: string | null; avatar_url: string | null } })[]> {
+	const { data: members, error } = await supabase
+		.from('event_members')
+		.select('*')
+		.eq('event_id', eventId)
+		.order('assigned_at');
+
+	if (error) {
+		log.error('fetchEventMembers failed', { error, data: { eventId } });
+		throw error;
+	}
+
+	if (!members || members.length === 0) return [];
+
+	// Fetch profiles separately (same pattern as org_members)
+	const userIds = members.map((m: any) => m.user_id);
+	const { data: profiles } = await supabase
+		.from('profiles')
+		.select('id, email, full_name, avatar_url')
+		.in('id', userIds);
+
+	const profileMap = Object.fromEntries((profiles ?? []).map(p => [p.id, p]));
+
+	return members.map((m: any) => ({
+		...m,
+		profile: profileMap[m.user_id] ?? undefined,
+	}));
+}
+
+export async function addEventMember(
+	supabase: SupabaseClient<Database>,
+	eventId: string,
+	userId: string,
+	role: 'lead' | 'manager' | 'member' = 'member'
+): Promise<EventMember> {
+	const { data, error } = await supabase
+		.from('event_members')
+		.upsert({ event_id: eventId, user_id: userId, role }, { onConflict: 'event_id,user_id' })
+		.select()
+		.single();
+
+	if (error) {
+		log.error('addEventMember failed', { error, data: { eventId, userId } });
+		throw error;
+	}
+	return data as unknown as EventMember;
+}
+
+export async function removeEventMember(
+	supabase: SupabaseClient<Database>,
+	eventId: string,
+	userId: string
+): Promise<void> {
+	const { error } = await supabase
+		.from('event_members')
+		.delete()
+		.eq('event_id', eventId)
+		.eq('user_id', userId);
+
+	if (error) {
+		log.error('removeEventMember failed', { error, data: { eventId, userId } });
+		throw error;
+	}
+}

src/lib/supabase/types.ts

@@ -360,6 +360,100 @@ export type Database = {
           },
         ]
       }
+      event_members: {
+        Row: {
+          assigned_at: string | null
+          event_id: string
+          id: string
+          role: string
+          user_id: string
+        }
+        Insert: {
+          assigned_at?: string | null
+          event_id: string
+          id?: string
+          role?: string
+          user_id: string
+        }
+        Update: {
+          assigned_at?: string | null
+          event_id?: string
+          id?: string
+          role?: string
+          user_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "event_members_event_id_fkey"
+            columns: ["event_id"]
+            isOneToOne: false
+            referencedRelation: "events"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      events: {
+        Row: {
+          color: string | null
+          cover_image_url: string | null
+          created_at: string | null
+          created_by: string | null
+          description: string | null
+          end_date: string | null
+          id: string
+          name: string
+          org_id: string
+          slug: string
+          start_date: string | null
+          status: string
+          updated_at: string | null
+          venue_address: string | null
+          venue_name: string | null
+        }
+        Insert: {
+          color?: string | null
+          cover_image_url?: string | null
+          created_at?: string | null
+          created_by?: string | null
+          description?: string | null
+          end_date?: string | null
+          id?: string
+          name: string
+          org_id: string
+          slug: string
+          start_date?: string | null
+          status?: string
+          updated_at?: string | null
+          venue_address?: string | null
+          venue_name?: string | null
+        }
+        Update: {
+          color?: string | null
+          cover_image_url?: string | null
+          created_at?: string | null
+          created_by?: string | null
+          description?: string | null
+          end_date?: string | null
+          id?: string
+          name?: string
+          org_id?: string
+          slug?: string
+          start_date?: string | null
+          status?: string
+          updated_at?: string | null
+          venue_address?: string | null
+          venue_name?: string | null
+        }
+        Relationships: [
+          {
+            foreignKeyName: "events_org_id_fkey"
+            columns: ["org_id"]
+            isOneToOne: false
+            referencedRelation: "organizations"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       kanban_boards: {
         Row: {
           created_at: string | null
@@ -1226,3 +1320,5 @@ export type OrgGoogleCalendar = PublicTables['org_google_calendars']['Row']
 export type ActivityLog = PublicTables['activity_log']['Row']
 export type UserPreferences = PublicTables['user_preferences']['Row']
 export type MatrixCredentials = PublicTables['matrix_credentials']['Row']
+export type EventRow = PublicTables['events']['Row']
+export type EventMemberRow = PublicTables['event_members']['Row']

src/routes/[orgSlug]/+layout.svelte

@@ -123,6 +123,11 @@
 					},
 				]
 			: []),
+		{
+			href: `/${data.org.slug}/events`,
+			label: m.nav_events(),
+			icon: "celebration",
+		},
 		{
 			href: `/${data.org.slug}/chat`,
 			label: "Chat",
@@ -349,6 +354,8 @@
 					? "files"
 					: target.includes("/calendar")
 						? "calendar"
+						: target.includes("/events")
+							? "default"
 							: target.includes("/settings")
 								? "settings"
 								: "default"}

src/routes/[orgSlug]/events/+page.server.ts

@@ -0,0 +1,29 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import { fetchEvents } from '$lib/api/events';
+import { createLogger } from '$lib/utils/logger';
+
+const log = createLogger('page.events');
+
+export const load: PageServerLoad = async ({ params, locals, url }) => {
+	const { session, user } = await locals.safeGetSession();
+	if (!session || !user) error(401, 'Unauthorized');
+
+	const { data: org } = await locals.supabase
+		.from('organizations')
+		.select('id')
+		.eq('slug', params.orgSlug)
+		.single();
+
+	if (!org) error(404, 'Organization not found');
+
+	const statusFilter = url.searchParams.get('status') || 'all';
+
+	try {
+		const events = await fetchEvents(locals.supabase, org.id, statusFilter);
+		return { events, statusFilter };
+	} catch (e: any) {
+		log.error('Failed to load events', { error: e, data: { orgId: org.id } });
+		return { events: [], statusFilter };
+	}
+};

src/routes/[orgSlug]/events/+page.svelte

@@ -0,0 +1,504 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { page } from "$app/stores";
+	import { Avatar } from "$lib/components/ui";
+	import { getContext } from "svelte";
+	import type { SupabaseClient } from "@supabase/supabase-js";
+	import type { Database } from "$lib/supabase/types";
+	import { toasts } from "$lib/stores/ui";
+	import * as m from "$lib/paraglide/messages";
+
+	interface EventItem {
+		id: string;
+		org_id: string;
+		name: string;
+		slug: string;
+		description: string | null;
+		status: "planning" | "active" | "completed" | "archived";
+		start_date: string | null;
+		end_date: string | null;
+		venue_name: string | null;
+		color: string | null;
+		member_count: number;
+	}
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+			userRole: string;
+			events: EventItem[];
+			statusFilter: string;
+		};
+	}
+
+	let { data }: Props = $props();
+
+	const supabase = getContext<SupabaseClient<Database>>("supabase");
+
+	const isEditor = $derived(
+		["owner", "admin", "editor"].includes(data.userRole),
+	);
+
+	// Create event modal
+	let showCreateModal = $state(false);
+	let newEventName = $state("");
+	let newEventDescription = $state("");
+	let newEventStartDate = $state("");
+	let newEventEndDate = $state("");
+	let newEventVenue = $state("");
+	let newEventColor = $state("#00A3E0");
+	let creating = $state(false);
+
+	const statusTabs = $derived([
+		{ value: "all", label: m.events_tab_all(), icon: "apps" },
+		{ value: "planning", label: m.events_tab_planning(), icon: "edit_note" },
+		{ value: "active", label: m.events_tab_active(), icon: "play_circle" },
+		{ value: "completed", label: m.events_tab_completed(), icon: "check_circle" },
+		{ value: "archived", label: m.events_tab_archived(), icon: "archive" },
+	]);
+
+	const presetColors = [
+		"#00A3E0",
+		"#8B5CF6",
+		"#EC4899",
+		"#F59E0B",
+		"#10B981",
+		"#EF4444",
+		"#6366F1",
+		"#14B8A6",
+	];
+
+	function getStatusColor(status: string): string {
+		const map: Record<string, string> = {
+			planning: "text-amber-400 bg-amber-400/10",
+			active: "text-emerald-400 bg-emerald-400/10",
+			completed: "text-blue-400 bg-blue-400/10",
+			archived: "text-light/40 bg-light/5",
+		};
+		return map[status] ?? "text-light/40 bg-light/5";
+	}
+
+	function getStatusIcon(status: string): string {
+		const map: Record<string, string> = {
+			planning: "edit_note",
+			active: "play_circle",
+			completed: "check_circle",
+			archived: "archive",
+		};
+		return map[status] ?? "help";
+	}
+
+	function formatDate(dateStr: string | null): string {
+		if (!dateStr) return "";
+		return new Date(dateStr).toLocaleDateString(undefined, {
+			month: "short",
+			day: "numeric",
+			year: "numeric",
+		});
+	}
+
+	function formatDateRange(
+		start: string | null,
+		end: string | null,
+	): string {
+		if (!start && !end) return m.events_no_dates();
+		if (start && !end) return formatDate(start);
+		if (!start && end) return `Until ${formatDate(end)}`;
+		return `${formatDate(start)} — ${formatDate(end)}`;
+	}
+
+	async function handleCreate() {
+		if (!newEventName.trim()) return;
+		creating = true;
+		try {
+			const { data: created, error } = await (supabase as any)
+				.from("events")
+				.insert({
+					org_id: data.org.id,
+					name: newEventName.trim(),
+					slug: newEventName
+						.trim()
+						.toLowerCase()
+						.replace(/[^\w\s-]/g, "")
+						.replace(/[\s_]+/g, "-")
+						.replace(/-+/g, "-")
+						.slice(0, 60) || "event",
+					description: newEventDescription.trim() || null,
+					start_date: newEventStartDate || null,
+					end_date: newEventEndDate || null,
+					venue_name: newEventVenue.trim() || null,
+					color: newEventColor,
+					created_by: (await supabase.auth.getUser()).data.user?.id,
+				})
+				.select()
+				.single();
+
+			if (error) throw error;
+
+			toasts.success(m.events_created({ name: created.name }));
+			showCreateModal = false;
+			resetForm();
+			goto(`/${data.org.slug}/events/${created.slug}`);
+		} catch (e: any) {
+			toasts.error(e.message || "Failed to create event");
+		} finally {
+			creating = false;
+		}
+	}
+
+	function resetForm() {
+		newEventName = "";
+		newEventDescription = "";
+		newEventStartDate = "";
+		newEventEndDate = "";
+		newEventVenue = "";
+		newEventColor = "#00A3E0";
+	}
+
+	function switchStatus(status: string) {
+		const url = new URL($page.url);
+		if (status === "all") {
+			url.searchParams.delete("status");
+		} else {
+			url.searchParams.set("status", status);
+		}
+		goto(url.toString(), { replaceState: true, invalidateAll: true });
+	}
+</script>
+
+<svelte:head>
+	<title>{m.events_title()} | {data.org.name}</title>
+</svelte:head>
+
+<div class="flex flex-col h-full">
+	<!-- Header -->
+	<header
+		class="flex items-center justify-between px-6 py-5 border-b border-light/5"
+	>
+		<div>
+			<h1 class="text-h1 font-heading text-white">{m.events_title()}</h1>
+			<p class="text-body-sm text-light/50 mt-1">
+				{m.events_subtitle()}
+			</p>
+		</div>
+		{#if isEditor}
+			<button
+				type="button"
+				class="flex items-center gap-2 px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors"
+				onclick={() => (showCreateModal = true)}
+			>
+				<span
+					class="material-symbols-rounded"
+					style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
+					>add</span
+				>
+				{m.events_new()}
+			</button>
+		{/if}
+	</header>
+
+	<!-- Status Tabs -->
+	<div class="flex items-center gap-1 px-6 py-3 border-b border-light/5">
+		{#each statusTabs as tab}
+			<button
+				type="button"
+				class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-body-sm font-body transition-colors {data.statusFilter ===
+				tab.value
+					? 'bg-primary text-background'
+					: 'text-light/60 hover:text-white hover:bg-dark/50'}"
+				onclick={() => switchStatus(tab.value)}
+			>
+				<span
+					class="material-symbols-rounded"
+					style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
+					>{tab.icon}</span
+				>
+				{tab.label}
+			</button>
+		{/each}
+	</div>
+
+	<!-- Events Grid -->
+	<div class="flex-1 overflow-auto p-6">
+		{#if data.events.length === 0}
+			<div
+				class="flex flex-col items-center justify-center h-full text-light/40"
+			>
+				<span
+					class="material-symbols-rounded mb-4"
+					style="font-size: 64px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;"
+					>celebration</span
+				>
+				<p class="text-h3 font-heading mb-2">{m.events_empty_title()}</p>
+				<p class="text-body text-light/30">
+					{m.events_empty_desc()}
+				</p>
+				{#if isEditor}
+					<button
+						type="button"
+						class="mt-4 flex items-center gap-2 px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors"
+						onclick={() => (showCreateModal = true)}
+					>
+						<span
+							class="material-symbols-rounded"
+							style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
+							>add</span
+						>
+						{m.events_create()}
+					</button>
+				{/if}
+			</div>
+		{:else}
+			<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+				{#each data.events as event}
+					<a
+						href="/{data.org.slug}/events/{event.slug}"
+						class="group bg-dark/30 hover:bg-dark/60 border border-light/5 hover:border-light/10 rounded-2xl p-5 flex flex-col gap-3 transition-all"
+					>
+						<!-- Color bar + Status -->
+						<div class="flex items-center justify-between">
+							<div class="flex items-center gap-2">
+								<div
+									class="w-3 h-3 rounded-full"
+									style="background-color: {event.color ||
+										'#00A3E0'}"
+								></div>
+								<h3
+									class="text-body font-heading text-white group-hover:text-primary transition-colors truncate"
+								>
+									{event.name}
+								</h3>
+							</div>
+							<span
+								class="text-[11px] font-body px-2 py-0.5 rounded-full capitalize {getStatusColor(
+									event.status,
+								)}"
+							>
+								{event.status}
+							</span>
+						</div>
+
+						<!-- Description -->
+						{#if event.description}
+							<p
+								class="text-body-sm text-light/50 line-clamp-2"
+							>
+								{event.description}
+							</p>
+						{/if}
+
+						<!-- Meta row -->
+						<div
+							class="flex items-center gap-4 text-[12px] text-light/40 mt-auto pt-2"
+						>
+							<!-- Date -->
+							<div class="flex items-center gap-1">
+								<span
+									class="material-symbols-rounded"
+									style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
+									>calendar_today</span
+								>
+								<span
+									>{formatDateRange(
+										event.start_date,
+										event.end_date,
+									)}</span
+								>
+							</div>
+
+							<!-- Venue -->
+							{#if event.venue_name}
+								<div class="flex items-center gap-1">
+									<span
+										class="material-symbols-rounded"
+										style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
+										>location_on</span
+									>
+									<span class="truncate max-w-[120px]"
+										>{event.venue_name}</span
+									>
+								</div>
+							{/if}
+
+							<!-- Members -->
+							<div class="flex items-center gap-1 ml-auto">
+								<span
+									class="material-symbols-rounded"
+									style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
+									>group</span
+								>
+								<span>{event.member_count}</span>
+							</div>
+						</div>
+					</a>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<!-- Create Event Modal -->
+{#if showCreateModal}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<!-- svelte-ignore a11y_interactive_supports_focus -->
+	<div
+		class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
+		onkeydown={(e) => e.key === "Escape" && (showCreateModal = false)}
+		onclick={(e) => e.target === e.currentTarget && (showCreateModal = false)}
+		role="dialog"
+		aria-modal="true"
+		aria-label={m.events_create()}
+	>
+		<div
+			class="bg-night rounded-2xl w-full max-w-lg shadow-2xl border border-light/10"
+		>
+			<div class="flex items-center justify-between p-5 border-b border-light/5">
+				<h2 class="text-h3 font-heading text-white">{m.events_create()}</h2>
+				<button
+					type="button"
+					class="text-light/40 hover:text-white transition-colors"
+					onclick={() => (showCreateModal = false)}
+					aria-label={m.btn_close()}
+				>
+					<span
+						class="material-symbols-rounded"
+						style="font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;"
+						>close</span
+					>
+				</button>
+			</div>
+
+			<form
+				class="p-5 flex flex-col gap-4"
+				onsubmit={(e) => {
+					e.preventDefault();
+					handleCreate();
+				}}
+			>
+				<!-- Name -->
+				<div class="flex flex-col gap-1.5">
+					<label
+						for="event-name"
+						class="text-body-sm text-light/60 font-body"
+						>{m.events_form_name()}</label
+					>
+					<input
+						id="event-name"
+						type="text"
+						bind:value={newEventName}
+						placeholder={m.events_form_name_placeholder()}
+						class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white placeholder:text-light/30 focus:outline-none focus:border-primary"
+						required
+					/>
+				</div>
+
+				<!-- Description -->
+				<div class="flex flex-col gap-1.5">
+					<label
+						for="event-desc"
+						class="text-body-sm text-light/60 font-body"
+						>{m.events_form_description()}</label
+					>
+					<textarea
+						id="event-desc"
+						bind:value={newEventDescription}
+						placeholder={m.events_form_description_placeholder()}
+						rows="2"
+						class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white placeholder:text-light/30 focus:outline-none focus:border-primary resize-none"
+					></textarea>
+				</div>
+
+				<!-- Dates -->
+				<div class="grid grid-cols-2 gap-3">
+					<div class="flex flex-col gap-1.5">
+						<label
+							for="event-start"
+							class="text-body-sm text-light/60 font-body"
+							>{m.events_form_start_date()}</label
+						>
+						<input
+							id="event-start"
+							type="date"
+							bind:value={newEventStartDate}
+							class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white focus:outline-none focus:border-primary"
+						/>
+					</div>
+					<div class="flex flex-col gap-1.5">
+						<label
+							for="event-end"
+							class="text-body-sm text-light/60 font-body"
+							>{m.events_form_end_date()}</label
+						>
+						<input
+							id="event-end"
+							type="date"
+							bind:value={newEventEndDate}
+							class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white focus:outline-none focus:border-primary"
+						/>
+					</div>
+				</div>
+
+				<!-- Venue -->
+				<div class="flex flex-col gap-1.5">
+					<label
+						for="event-venue"
+						class="text-body-sm text-light/60 font-body"
+						>{m.events_form_venue()}</label
+					>
+					<input
+						id="event-venue"
+						type="text"
+						bind:value={newEventVenue}
+						placeholder={m.events_form_venue_placeholder()}
+						class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white placeholder:text-light/30 focus:outline-none focus:border-primary"
+					/>
+				</div>
+
+				<!-- Color -->
+				<div class="flex flex-col gap-1.5">
+					<!-- svelte-ignore a11y_label_has_associated_control -->
+					<label class="text-body-sm text-light/60 font-body"
+						>{m.events_form_color()}</label
+					>
+					<div class="flex items-center gap-2">
+						{#each presetColors as color}
+							<button
+								type="button"
+								class="w-7 h-7 rounded-full border-2 transition-all {newEventColor ===
+								color
+									? 'border-white scale-110'
+									: 'border-transparent hover:border-light/30'}"
+								style="background-color: {color}"
+								onclick={() => (newEventColor = color)}
+								aria-label={m.events_form_select_color({ color })}
+							></button>
+						{/each}
+					</div>
+				</div>
+
+				<!-- Actions -->
+				<div
+					class="flex items-center justify-end gap-3 pt-2 border-t border-light/5"
+				>
+					<button
+						type="button"
+						class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors"
+						onclick={() => {
+							showCreateModal = false;
+							resetForm();
+						}}
+					>
+						{m.btn_cancel()}
+					</button>
+					<button
+						type="submit"
+						disabled={!newEventName.trim() || creating}
+						class="px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+					>
+						{creating ? m.events_creating() : m.events_create()}
+					</button>
+				</div>
+			</form>
+		</div>
+	</div>
+{/if}

src/routes/[orgSlug]/events/[eventSlug]/+layout.server.ts

@@ -0,0 +1,27 @@
+import { error } from '@sveltejs/kit';
+import type { LayoutServerLoad } from './$types';
+import { fetchEventBySlug, fetchEventMembers } from '$lib/api/events';
+import { createLogger } from '$lib/utils/logger';
+
+const log = createLogger('page.event-detail');
+
+export const load: LayoutServerLoad = async ({ params, locals, parent }) => {
+	const { session, user } = await locals.safeGetSession();
+	if (!session || !user) error(401, 'Unauthorized');
+
+	const parentData = await parent() as { org: { id: string; name: string; slug: string } };
+	const orgId = parentData.org.id;
+
+	try {
+		const event = await fetchEventBySlug(locals.supabase, orgId, params.eventSlug);
+		if (!event) error(404, 'Event not found');
+
+		const members = await fetchEventMembers(locals.supabase, event.id);
+
+		return { event, eventMembers: members };
+	} catch (e: any) {
+		if (e?.status === 404) throw e;
+		log.error('Failed to load event', { error: e, data: { orgId, eventSlug: params.eventSlug } });
+		error(500, 'Failed to load event');
+	}
+};

src/routes/[orgSlug]/events/[eventSlug]/+layout.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+	import { Avatar } from "$lib/components/ui";
+	import type { Snippet } from "svelte";
+	import type { Event, EventMember } from "$lib/api/events";
+	import * as m from "$lib/paraglide/messages";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+			userRole: string;
+			event: Event;
+			eventMembers: (EventMember & {
+				profile?: {
+					id: string;
+					email: string;
+					full_name: string | null;
+					avatar_url: string | null;
+				};
+			})[];
+		};
+		children: Snippet;
+	}
+
+	let { data, children }: Props = $props();
+
+	const basePath = $derived(
+		`/${data.org.slug}/events/${data.event.slug}`,
+	);
+
+	const modules = $derived([
+		{
+			href: basePath,
+			label: m.events_overview(),
+			icon: "dashboard",
+			exact: true,
+		},
+		{
+			href: `${basePath}/tasks`,
+			label: m.events_mod_tasks(),
+			icon: "task_alt",
+		},
+		{
+			href: `${basePath}/files`,
+			label: m.events_mod_files(),
+			icon: "folder",
+		},
+		{
+			href: `${basePath}/schedule`,
+			label: m.events_mod_schedule(),
+			icon: "calendar_today",
+		},
+		{
+			href: `${basePath}/budget`,
+			label: m.events_mod_budget(),
+			icon: "account_balance_wallet",
+		},
+		{
+			href: `${basePath}/guests`,
+			label: m.events_mod_guests(),
+			icon: "groups",
+		},
+		{
+			href: `${basePath}/team`,
+			label: m.events_mod_team(),
+			icon: "badge",
+		},
+		{
+			href: `${basePath}/sponsors`,
+			label: m.events_mod_sponsors(),
+			icon: "handshake",
+		},
+	]);
+
+	function isModuleActive(href: string, exact?: boolean): boolean {
+		if (exact) return $page.url.pathname === href;
+		return $page.url.pathname.startsWith(href);
+	}
+
+	function getStatusColor(status: string): string {
+		const map: Record<string, string> = {
+			planning: "bg-amber-400",
+			active: "bg-emerald-400",
+			completed: "bg-blue-400",
+			archived: "bg-light/40",
+		};
+		return map[status] ?? "bg-light/40";
+	}
+
+	function formatDateCompact(dateStr: string | null): string {
+		if (!dateStr) return "";
+		return new Date(dateStr).toLocaleDateString(undefined, {
+			month: "short",
+			day: "numeric",
+		});
+	}
+</script>
+
+<div class="flex h-full">
+	<!-- Event Module Sidebar -->
+	<aside
+		class="w-56 shrink-0 bg-dark/30 border-r border-light/5 flex flex-col overflow-hidden"
+	>
+		<!-- Event Header -->
+		<div class="p-4 border-b border-light/5">
+			<div class="flex items-center gap-2 mb-2">
+				<div
+					class="w-2.5 h-2.5 rounded-full shrink-0 {getStatusColor(
+						data.event.status,
+					)}"
+				></div>
+				<h2
+					class="text-body font-heading text-white truncate"
+					title={data.event.name}
+				>
+					{data.event.name}
+				</h2>
+			</div>
+			{#if data.event.start_date}
+				<p class="text-[11px] text-light/40 flex items-center gap-1">
+					<span
+						class="material-symbols-rounded"
+						style="font-size: 12px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 12;"
+						>calendar_today</span
+					>
+					{formatDateCompact(data.event.start_date)}{data.event
+						.end_date
+						? ` — ${formatDateCompact(data.event.end_date)}`
+						: ""}
+				</p>
+			{/if}
+		</div>
+
+		<!-- Module Navigation -->
+		<nav class="flex-1 flex flex-col gap-0.5 p-2 overflow-auto">
+			{#each modules as mod}
+				<a
+					href={mod.href}
+					class="flex items-center gap-2.5 px-3 py-2 rounded-xl text-body-sm font-body transition-colors {isModuleActive(
+						mod.href,
+						mod.exact,
+					)
+						? 'bg-primary text-background'
+						: 'text-light/60 hover:text-white hover:bg-dark/50'}"
+				>
+					<span
+						class="material-symbols-rounded"
+						style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
+						>{mod.icon}</span
+					>
+					{mod.label}
+				</a>
+			{/each}
+		</nav>
+
+		<!-- Event Team Preview -->
+		<div class="p-3 border-t border-light/5">
+			<p class="text-[11px] text-light/40 mb-2 px-1">
+				{m.events_team_count({ count: String(data.eventMembers.length) })}
+			</p>
+			<div class="flex flex-wrap gap-1 px-1">
+				{#each data.eventMembers.slice(0, 8) as member}
+					<div title={member.profile?.full_name || member.profile?.email || "Member"}>
+						<Avatar
+							name={member.profile?.full_name ||
+								member.profile?.email ||
+								"?"}
+							src={member.profile?.avatar_url}
+							size="xs"
+						/>
+					</div>
+				{/each}
+				{#if data.eventMembers.length > 8}
+					<div
+						class="w-6 h-6 rounded-full bg-dark flex items-center justify-center text-[10px] text-light/50"
+					>
+						+{data.eventMembers.length - 8}
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Back link -->
+		<a
+			href="/{data.org.slug}/events"
+			class="flex items-center gap-2 px-4 py-3 border-t border-light/5 text-body-sm text-light/40 hover:text-white transition-colors"
+		>
+			<span
+				class="material-symbols-rounded"
+				style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
+				>arrow_back</span
+			>
+			{m.events_all_events()}
+		</a>
+	</aside>
+
+	<!-- Module Content -->
+	<div class="flex-1 overflow-auto">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>

src/routes/[orgSlug]/events/[eventSlug]/+page.svelte

@@ -0,0 +1,575 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { Avatar } from "$lib/components/ui";
+	import { getContext } from "svelte";
+	import type { SupabaseClient } from "@supabase/supabase-js";
+	import type { Database } from "$lib/supabase/types";
+	import { toasts } from "$lib/stores/ui";
+	import type { Event, EventMember } from "$lib/api/events";
+	import * as m from "$lib/paraglide/messages";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+			userRole: string;
+			event: Event;
+			eventMembers: (EventMember & {
+				profile?: {
+					id: string;
+					email: string;
+					full_name: string | null;
+					avatar_url: string | null;
+				};
+			})[];
+		};
+	}
+
+	let { data }: Props = $props();
+
+	const supabase = getContext<SupabaseClient<Database>>("supabase");
+
+	const isEditor = $derived(
+		["owner", "admin", "editor"].includes(data.userRole),
+	);
+
+	// Edit mode
+	let editing = $state(false);
+	let editName = $state("");
+	let editDescription = $state("");
+	let editStatus = $state<string>("planning");
+	let editStartDate = $state("");
+	let editEndDate = $state("");
+	let editVenueName = $state("");
+	let editVenueAddress = $state("");
+	let saving = $state(false);
+
+	// Sync edit fields when data changes or edit mode opens
+	$effect(() => {
+		if (editing) {
+			editName = data.event.name;
+			editDescription = data.event.description ?? "";
+			editStatus = data.event.status;
+			editStartDate = data.event.start_date ?? "";
+			editEndDate = data.event.end_date ?? "";
+			editVenueName = data.event.venue_name ?? "";
+			editVenueAddress = data.event.venue_address ?? "";
+		}
+	});
+
+	// Delete confirmation
+	let showDeleteConfirm = $state(false);
+	let deleting = $state(false);
+
+	const basePath = $derived(
+		`/${data.org.slug}/events/${data.event.slug}`,
+	);
+
+	const statusOptions = $derived([
+		{ value: "planning", label: m.events_status_planning(), icon: "edit_note", color: "text-amber-400" },
+		{ value: "active", label: m.events_status_active(), icon: "play_circle", color: "text-emerald-400" },
+		{ value: "completed", label: m.events_status_completed(), icon: "check_circle", color: "text-blue-400" },
+		{ value: "archived", label: m.events_status_archived(), icon: "archive", color: "text-light/40" },
+	]);
+
+	const moduleCards = $derived([
+		{
+			href: `${basePath}/tasks`,
+			label: m.events_mod_tasks(),
+			icon: "task_alt",
+			description: m.events_mod_tasks_desc(),
+			color: "text-emerald-400",
+			bg: "bg-emerald-400/10",
+		},
+		{
+			href: `${basePath}/files`,
+			label: m.events_mod_files(),
+			icon: "folder",
+			description: m.events_mod_files_desc(),
+			color: "text-blue-400",
+			bg: "bg-blue-400/10",
+		},
+		{
+			href: `${basePath}/schedule`,
+			label: m.events_mod_schedule(),
+			icon: "calendar_today",
+			description: m.events_mod_schedule_desc(),
+			color: "text-purple-400",
+			bg: "bg-purple-400/10",
+		},
+		{
+			href: `${basePath}/budget`,
+			label: m.events_mod_budget(),
+			icon: "account_balance_wallet",
+			description: m.events_mod_budget_desc(),
+			color: "text-amber-400",
+			bg: "bg-amber-400/10",
+		},
+		{
+			href: `${basePath}/guests`,
+			label: m.events_mod_guests(),
+			icon: "groups",
+			description: m.events_mod_guests_desc(),
+			color: "text-pink-400",
+			bg: "bg-pink-400/10",
+		},
+		{
+			href: `${basePath}/team`,
+			label: m.events_mod_team(),
+			icon: "badge",
+			description: m.events_mod_team_desc(),
+			color: "text-teal-400",
+			bg: "bg-teal-400/10",
+		},
+		{
+			href: `${basePath}/sponsors`,
+			label: m.events_mod_sponsors(),
+			icon: "handshake",
+			description: m.events_mod_sponsors_desc(),
+			color: "text-orange-400",
+			bg: "bg-orange-400/10",
+		},
+	]);
+
+	function formatDate(dateStr: string | null): string {
+		if (!dateStr) return m.events_not_set();
+		return new Date(dateStr).toLocaleDateString(undefined, {
+			weekday: "short",
+			month: "long",
+			day: "numeric",
+			year: "numeric",
+		});
+	}
+
+	function daysUntilEvent(): string {
+		if (!data.event.start_date) return "";
+		const now = new Date();
+		const start = new Date(data.event.start_date);
+		const diff = Math.ceil(
+			(start.getTime() - now.getTime()) / (1000 * 60 * 60 * 24),
+		);
+		if (diff < 0) return m.events_days_ago({ count: String(Math.abs(diff)) });
+		if (diff === 0) return m.events_today();
+		if (diff === 1) return m.events_tomorrow();
+		return m.events_in_days({ count: String(diff) });
+	}
+
+	async function handleSave() {
+		saving = true;
+		try {
+			const { error } = await (supabase as any)
+				.from("events")
+				.update({
+					name: editName.trim(),
+					description: editDescription.trim() || null,
+					status: editStatus,
+					start_date: editStartDate || null,
+					end_date: editEndDate || null,
+					venue_name: editVenueName.trim() || null,
+					venue_address: editVenueAddress.trim() || null,
+					updated_at: new Date().toISOString(),
+				})
+				.eq("id", data.event.id);
+
+			if (error) throw error;
+
+			toasts.success(m.events_updated());
+			editing = false;
+			// Refresh the page data
+			goto(`/${data.org.slug}/events/${data.event.slug}`, {
+				invalidateAll: true,
+			});
+		} catch (e: any) {
+			toasts.error(e.message || "Failed to update event");
+		} finally {
+			saving = false;
+		}
+	}
+
+	async function handleDelete() {
+		deleting = true;
+		try {
+			const { error } = await (supabase as any)
+				.from("events")
+				.delete()
+				.eq("id", data.event.id);
+
+			if (error) throw error;
+
+			toasts.success(m.events_deleted());
+			goto(`/${data.org.slug}/events`);
+		} catch (e: any) {
+			toasts.error(e.message || "Failed to delete event");
+		} finally {
+			deleting = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>{data.event.name} | {data.org.name}</title>
+</svelte:head>
+
+<div class="flex flex-col h-full overflow-auto">
+	<!-- Event Header -->
+	<header class="px-6 py-5 border-b border-light/5">
+		<div class="flex items-start justify-between">
+			<div class="flex-1">
+				{#if editing}
+					<input
+						type="text"
+						bind:value={editName}
+						class="text-h1 font-heading text-white bg-transparent border-b border-primary focus:outline-none w-full"
+					/>
+				{:else}
+					<div class="flex items-center gap-3">
+						<div
+							class="w-4 h-4 rounded-full shrink-0"
+							style="background-color: {data.event.color ||
+								'#00A3E0'}"
+						></div>
+						<h1 class="text-h1 font-heading text-white">
+							{data.event.name}
+						</h1>
+					</div>
+				{/if}
+
+				<div
+					class="flex items-center gap-4 mt-2 text-body-sm text-light/50"
+				>
+					{#if editing}
+						<select
+							bind:value={editStatus}
+							class="bg-dark border border-light/10 rounded-lg px-2 py-1 text-body-sm text-white focus:outline-none"
+						>
+							{#each statusOptions as opt}
+								<option value={opt.value}>{opt.label}</option>
+							{/each}
+						</select>
+					{:else}
+						<span
+							class="capitalize flex items-center gap-1 {statusOptions.find(
+								(s) => s.value === data.event.status,
+							)?.color ?? 'text-light/40'}"
+						>
+							<span
+								class="material-symbols-rounded"
+								style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
+								>{statusOptions.find(
+									(s) => s.value === data.event.status,
+								)?.icon ?? "help"}</span
+							>
+							{data.event.status}
+						</span>
+					{/if}
+
+					{#if data.event.start_date && !editing}
+						<span class="flex items-center gap-1">
+							<span
+								class="material-symbols-rounded"
+								style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
+								>calendar_today</span
+							>
+							{formatDate(data.event.start_date)}
+						</span>
+						{@const countdown = daysUntilEvent()}
+						{#if countdown}
+							<span class="text-primary font-bold"
+								>{countdown}</span
+							>
+						{/if}
+					{/if}
+
+					{#if data.event.venue_name && !editing}
+						<span class="flex items-center gap-1">
+							<span
+								class="material-symbols-rounded"
+								style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
+								>location_on</span
+							>
+							{data.event.venue_name}
+						</span>
+					{/if}
+				</div>
+			</div>
+
+			{#if isEditor}
+				<div class="flex items-center gap-2">
+					{#if editing}
+						<button
+							type="button"
+							class="px-3 py-1.5 text-body-sm text-light/60 hover:text-white transition-colors"
+							onclick={() => (editing = false)}
+						>
+							{m.btn_cancel()}
+						</button>
+						<button
+							type="button"
+							class="px-3 py-1.5 bg-primary text-background rounded-lg text-body-sm hover:bg-primary-hover transition-colors disabled:opacity-50"
+							disabled={saving}
+							onclick={handleSave}
+						>
+							{saving ? m.events_saving() : m.btn_save()}
+						</button>
+					{:else}
+						<button
+							type="button"
+							class="p-2 text-light/40 hover:text-white transition-colors rounded-lg hover:bg-dark/50"
+							title={m.btn_edit()}
+							onclick={() => (editing = true)}
+						>
+							<span
+								class="material-symbols-rounded"
+								style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
+								>edit</span
+							>
+						</button>
+						<button
+							type="button"
+							class="p-2 text-light/40 hover:text-error transition-colors rounded-lg hover:bg-error/10"
+							title={m.btn_delete()}
+							onclick={() => (showDeleteConfirm = true)}
+						>
+							<span
+								class="material-symbols-rounded"
+								style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
+								>delete</span
+							>
+						</button>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</header>
+
+	<!-- Edit fields (when editing) -->
+	{#if editing}
+		<div class="px-6 py-4 border-b border-light/5 flex flex-col gap-3">
+			<textarea
+				bind:value={editDescription}
+				placeholder="Event description..."
+				rows="2"
+				class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white placeholder:text-light/30 focus:outline-none focus:border-primary resize-none w-full"
+			></textarea>
+			<div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
+				<input
+					type="date"
+					bind:value={editStartDate}
+					class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white focus:outline-none focus:border-primary"
+					placeholder="Start date"
+				/>
+				<input
+					type="date"
+					bind:value={editEndDate}
+					class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white focus:outline-none focus:border-primary"
+					placeholder="End date"
+				/>
+				<input
+					type="text"
+					bind:value={editVenueName}
+					placeholder={m.events_form_venue_placeholder()}
+					class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white placeholder:text-light/30 focus:outline-none focus:border-primary"
+				/>
+				<input
+					type="text"
+					bind:value={editVenueAddress}
+					placeholder={m.events_form_venue_address_placeholder()}
+					class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body-sm text-white placeholder:text-light/30 focus:outline-none focus:border-primary"
+				/>
+			</div>
+		</div>
+	{/if}
+
+	<!-- Overview Content -->
+	<div class="flex-1 p-6 overflow-auto">
+		<!-- Description -->
+		{#if data.event.description && !editing}
+			<p class="text-body text-light/60 mb-6 max-w-2xl">
+				{data.event.description}
+			</p>
+		{/if}
+
+		<!-- Module Cards Grid -->
+		<h2 class="text-h3 font-heading text-white mb-4">{m.events_modules()}</h2>
+		<div
+			class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3"
+		>
+			{#each moduleCards as mod}
+				<a
+					href={mod.href}
+					class="group bg-dark/30 hover:bg-dark/60 border border-light/5 hover:border-light/10 rounded-xl p-4 flex flex-col gap-2 transition-all"
+				>
+					<div
+						class="w-10 h-10 rounded-xl {mod.bg} flex items-center justify-center"
+					>
+						<span
+							class="material-symbols-rounded {mod.color}"
+							style="font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 22;"
+							>{mod.icon}</span
+						>
+					</div>
+					<h3
+						class="text-body font-heading text-white group-hover:text-primary transition-colors"
+					>
+						{mod.label}
+					</h3>
+					<p class="text-[12px] text-light/40">{mod.description}</p>
+				</a>
+			{/each}
+		</div>
+
+		<!-- Event Details Section -->
+		<div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
+			<!-- Info Card -->
+			<div class="bg-dark/30 border border-light/5 rounded-xl p-5">
+				<h3 class="text-body font-heading text-white mb-3">
+					{m.events_details()}
+				</h3>
+				<div class="flex flex-col gap-2.5">
+					<div class="flex items-center gap-3">
+						<span
+							class="material-symbols-rounded text-light/30"
+							style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
+							>calendar_today</span
+						>
+						<div>
+							<p class="text-[11px] text-light/40">
+								{m.events_start_date()}
+							</p>
+							<p class="text-body-sm text-white">
+								{formatDate(data.event.start_date)}
+							</p>
+						</div>
+					</div>
+					<div class="flex items-center gap-3">
+						<span
+							class="material-symbols-rounded text-light/30"
+							style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
+							>event</span
+						>
+						<div>
+							<p class="text-[11px] text-light/40">{m.events_end_date()}</p>
+							<p class="text-body-sm text-white">
+								{formatDate(data.event.end_date)}
+							</p>
+						</div>
+					</div>
+					{#if data.event.venue_name}
+						<div class="flex items-center gap-3">
+							<span
+								class="material-symbols-rounded text-light/30"
+								style="font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;"
+								>location_on</span
+							>
+							<div>
+								<p class="text-[11px] text-light/40">{m.events_venue()}</p>
+								<p class="text-body-sm text-white">
+									{data.event.venue_name}
+								</p>
+								{#if data.event.venue_address}
+									<p class="text-[11px] text-light/40">
+										{data.event.venue_address}
+									</p>
+								{/if}
+							</div>
+						</div>
+					{/if}
+				</div>
+			</div>
+
+			<!-- Team Card -->
+			<div class="bg-dark/30 border border-light/5 rounded-xl p-5">
+				<div class="flex items-center justify-between mb-3">
+					<h3 class="text-body font-heading text-white">
+						{m.events_team_count({ count: String(data.eventMembers.length) })}
+					</h3>
+					<a
+						href="{basePath}/team"
+						class="text-[12px] text-primary hover:underline"
+						>{m.events_team_manage()}</a
+					>
+				</div>
+				<div class="flex flex-col gap-2">
+					{#each data.eventMembers.slice(0, 6) as member}
+						<div class="flex items-center gap-2.5">
+							<Avatar
+								name={member.profile?.full_name ||
+									member.profile?.email ||
+									"?"}
+								src={member.profile?.avatar_url}
+								size="sm"
+							/>
+							<div class="flex-1 min-w-0">
+								<p
+									class="text-body-sm text-white truncate"
+								>
+									{member.profile?.full_name ||
+										member.profile?.email ||
+										"Unknown"}
+								</p>
+								<p
+									class="text-[11px] text-light/40 capitalize"
+								>
+									{member.role}
+								</p>
+							</div>
+						</div>
+					{/each}
+					{#if data.eventMembers.length > 6}
+						<a
+							href="{basePath}/team"
+							class="text-body-sm text-primary hover:underline text-center pt-1"
+						>
+							{m.events_more_members({ count: String(data.eventMembers.length - 6) })}
+						</a>
+					{/if}
+					{#if data.eventMembers.length === 0}
+						<p class="text-body-sm text-light/30 text-center py-4">
+							{m.events_team_empty()}
+						</p>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- Delete Confirmation -->
+{#if showDeleteConfirm}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<!-- svelte-ignore a11y_interactive_supports_focus -->
+	<div
+		class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
+		onkeydown={(e) => e.key === "Escape" && (showDeleteConfirm = false)}
+		onclick={(e) =>
+			e.target === e.currentTarget && (showDeleteConfirm = false)}
+		role="dialog"
+		aria-modal="true"
+		aria-label={m.events_delete_title()}
+	>
+		<div
+			class="bg-night rounded-2xl w-full max-w-sm shadow-2xl border border-light/10 p-6"
+		>
+			<h2 class="text-h3 font-heading text-white mb-2">{m.events_delete_title()}</h2>
+			<p class="text-body-sm text-light/50 mb-6">
+				{m.events_delete_desc({ name: data.event.name })}
+			</p>
+			<div class="flex items-center justify-end gap-3">
+				<button
+					type="button"
+					class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors"
+					onclick={() => (showDeleteConfirm = false)}
+				>
+					{m.btn_cancel()}
+				</button>
+				<button
+					type="button"
+					class="px-4 py-2 bg-error text-white rounded-xl text-body-sm hover:bg-error/80 transition-colors disabled:opacity-50"
+					disabled={deleting}
+					onclick={handleDelete}
+				>
+					{deleting ? m.events_deleting() : m.events_delete_confirm()}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}

supabase/migrations/022_events.sql

@@ -0,0 +1,84 @@
+-- Events: the core project entity within an organization
+-- Each event represents a project (conference, festival, meetup, etc.)
+
+CREATE TABLE events (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  org_id UUID NOT NULL REFERENCES organizations(id) ON DELETE CASCADE,
+  name TEXT NOT NULL,
+  slug TEXT NOT NULL,
+  description TEXT,
+  status TEXT NOT NULL DEFAULT 'planning' CHECK (status IN ('planning', 'active', 'completed', 'archived')),
+  start_date DATE,
+  end_date DATE,
+  venue_name TEXT,
+  venue_address TEXT,
+  cover_image_url TEXT,
+  color TEXT,
+  created_by UUID REFERENCES auth.users(id),
+  created_at TIMESTAMPTZ DEFAULT now(),
+  updated_at TIMESTAMPTZ DEFAULT now(),
+  UNIQUE(org_id, slug)
+);
+
+-- Event members: subset of org members assigned to an event
+CREATE TABLE event_members (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  event_id UUID NOT NULL REFERENCES events(id) ON DELETE CASCADE,
+  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+  role TEXT NOT NULL DEFAULT 'member' CHECK (role IN ('lead', 'manager', 'member')),
+  assigned_at TIMESTAMPTZ DEFAULT now(),
+  UNIQUE(event_id, user_id)
+);
+
+-- Indexes
+CREATE INDEX idx_events_org ON events(org_id);
+CREATE INDEX idx_events_status ON events(org_id, status);
+CREATE INDEX idx_events_dates ON events(start_date, end_date);
+CREATE INDEX idx_event_members_event ON event_members(event_id);
+CREATE INDEX idx_event_members_user ON event_members(user_id);
+
+-- RLS
+ALTER TABLE events ENABLE ROW LEVEL SECURITY;
+ALTER TABLE event_members ENABLE ROW LEVEL SECURITY;
+
+-- Events: org members can view, editors+ can manage
+CREATE POLICY "Org members can view events" ON events FOR SELECT
+  USING (EXISTS (SELECT 1 FROM org_members WHERE org_id = events.org_id AND user_id = auth.uid()));
+
+CREATE POLICY "Editors can manage events" ON events FOR ALL
+  USING (EXISTS (SELECT 1 FROM org_members WHERE org_id = events.org_id AND user_id = auth.uid() AND role IN ('owner', 'admin', 'editor')));
+
+-- Event members: org members can view, editors+ can manage
+CREATE POLICY "Org members can view event members" ON event_members FOR SELECT
+  USING (EXISTS (
+    SELECT 1 FROM events e
+    JOIN org_members om ON e.org_id = om.org_id
+    WHERE e.id = event_members.event_id AND om.user_id = auth.uid()
+  ));
+
+CREATE POLICY "Editors can manage event members" ON event_members FOR ALL
+  USING (EXISTS (
+    SELECT 1 FROM events e
+    JOIN org_members om ON e.org_id = om.org_id
+    WHERE e.id = event_members.event_id AND om.user_id = auth.uid() AND om.role IN ('owner', 'admin', 'editor')
+  ));
+
+-- Enable realtime
+ALTER PUBLICATION supabase_realtime ADD TABLE events;
+
+-- Auto-add creator as event lead
+CREATE OR REPLACE FUNCTION public.handle_new_event()
+RETURNS TRIGGER AS $$
+BEGIN
+  IF NEW.created_by IS NOT NULL THEN
+    INSERT INTO public.event_members (event_id, user_id, role)
+    VALUES (NEW.id, NEW.created_by, 'lead')
+    ON CONFLICT (event_id, user_id) DO NOTHING;
+  END IF;
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+CREATE TRIGGER on_event_created
+  AFTER INSERT ON events
+  FOR EACH ROW EXECUTE FUNCTION public.handle_new_event();