diff --git a/dashboard/src/pages/manage/events/CreateEvent.vue b/dashboard/src/pages/manage/events/CreateEvent.vue
new file mode 100644
index 00000000..7b16c0a1
--- /dev/null
+++ b/dashboard/src/pages/manage/events/CreateEvent.vue
@@ -0,0 +1,295 @@
+
+
+
+
+
+
diff --git a/dashboard/src/router.ts b/dashboard/src/router.ts
index 5db00d1f..7265e670 100644
--- a/dashboard/src/router.ts
+++ b/dashboard/src/router.ts
@@ -12,6 +12,14 @@ const routes: RouteRecordRaw[] = [
name: (await isTeamMember()) ? "manage" : "bookings-tab",
}),
},
+ // Declared before /manage: this one opts out of the manager shell, so it cannot be a
+ // child of the route that renders it.
+ {
+ path: "/manage/team/events/new",
+ name: "create-event",
+ meta: { fullBleed: true },
+ component: () => import("@/pages/manage/events/CreateEvent.vue"),
+ },
{
path: "/manage",
meta: { fullBleed: true },
diff --git a/dashboard/src/utils/eventBanner.test.ts b/dashboard/src/utils/eventBanner.test.ts
index 24dc9ecc..a1372e27 100644
--- a/dashboard/src/utils/eventBanner.test.ts
+++ b/dashboard/src/utils/eventBanner.test.ts
@@ -25,7 +25,7 @@ test("ring origins stay off centre", () => {
test("ring spacing stays inside the readable range", () => {
for (const name of NAMES) {
- const gap = Number(bannerPattern(name).match(/1px (\d+\.\d)px/)?.[1])
- assert.ok(gap >= 9 && gap <= 12, `${name} drew a ${gap}px gap`)
+ const gap = Number(bannerPattern(name).match(/transparent \d+px (\d+\.\d)px/)?.[1])
+ assert.ok(gap >= 18 && gap <= 26, `${name} drew a ${gap}px gap`)
}
})
diff --git a/dashboard/src/utils/eventBanner.ts b/dashboard/src/utils/eventBanner.ts
index fe83bd7f..94894a5f 100644
--- a/dashboard/src/utils/eventBanner.ts
+++ b/dashboard/src/utils/eventBanner.ts
@@ -2,6 +2,7 @@
// squash come from the event name, so an event always draws the same pattern.
const LINE = "var(--outline-gray-2)"
+const LINE_WIDTH = 2
const SURFACE = "var(--surface-gray-1)"
/** FNV-1a seed, then xorshift — successive draws stay independent of each other. */
@@ -31,10 +32,11 @@ export function bannerPattern(seed: string): string {
// Squashing one axis is what keeps the rings from reading as a bullseye.
const width = Math.round(between(next(), 55, 110))
const height = Math.round(between(next(), 55, 110))
- const gap = between(next(), 9, 12).toFixed(1)
+ const gap = between(next(), 18, 26).toFixed(1)
return (
`repeating-radial-gradient(ellipse ${width}% ${height}% at ${originX}% ${originY}%,` +
- ` ${LINE} 0 1px, transparent 1px ${gap}px), linear-gradient(${SURFACE}, ${SURFACE})`
+ ` ${LINE} 0 ${LINE_WIDTH}px, transparent ${LINE_WIDTH}px ${gap}px),` +
+ ` linear-gradient(${SURFACE}, ${SURFACE})`
)
}
diff --git a/dashboard/src/utils/eventDates.test.ts b/dashboard/src/utils/eventDates.test.ts
new file mode 100644
index 00000000..31ab776f
--- /dev/null
+++ b/dashboard/src/utils/eventDates.test.ts
@@ -0,0 +1,53 @@
+import assert from "node:assert/strict"
+import { test } from "node:test"
+import { alignedEndDate, isEndBeforeStart } from "./eventDates.ts"
+
+test("an unset end date follows the start", () => {
+ assert.equal(alignedEndDate("2026-08-21", ""), "2026-08-21")
+})
+
+test("an end date behind the start is pulled up to it", () => {
+ assert.equal(alignedEndDate("2026-08-21", "2026-08-19"), "2026-08-21")
+})
+
+test("a multi-day span survives a start moved within it", () => {
+ assert.equal(alignedEndDate("2026-08-21", "2026-08-23"), "2026-08-23")
+})
+
+test("an end date on the start date stays put", () => {
+ assert.equal(alignedEndDate("2026-08-21", "2026-08-21"), "2026-08-21")
+})
+
+test("clearing the start leaves the end alone", () => {
+ assert.equal(alignedEndDate("", "2026-08-23"), "2026-08-23")
+})
+
+test("an end time after the start on a single-day event is fine", () => {
+ assert.equal(isEndBeforeStart("2026-08-21", "", "09:00:00", "17:00:00"), false)
+})
+
+test("an end time before the start on a single-day event is caught", () => {
+ assert.equal(isEndBeforeStart("2026-08-21", "", "17:00:00", "09:00:00"), true)
+})
+
+test("an end time equal to the start is caught", () => {
+ assert.equal(isEndBeforeStart("2026-08-21", "", "09:00:00", "09:00:00"), true)
+})
+
+test("an explicit end date matching the start is still a single day", () => {
+ assert.equal(isEndBeforeStart("2026-08-21", "2026-08-21", "17:00:00", "09:00:00"), true)
+})
+
+test("a multi-day event may end earlier in the day than it started", () => {
+ assert.equal(isEndBeforeStart("2026-08-21", "2026-08-23", "17:00:00", "09:00:00"), false)
+})
+
+test("the short and long time formats compare the same", () => {
+ assert.equal(isEndBeforeStart("2026-08-21", "", "09:00", "17:00:00"), false)
+ assert.equal(isEndBeforeStart("2026-08-21", "", "17:00:00", "09:00"), true)
+})
+
+test("a half-filled schedule is not reported as invalid", () => {
+ assert.equal(isEndBeforeStart("2026-08-21", "", "", "09:00:00"), false)
+ assert.equal(isEndBeforeStart("2026-08-21", "", "09:00:00", ""), false)
+})
diff --git a/dashboard/src/utils/eventDates.ts b/dashboard/src/utils/eventDates.ts
new file mode 100644
index 00000000..39558265
--- /dev/null
+++ b/dashboard/src/utils/eventDates.ts
@@ -0,0 +1,40 @@
+/**
+ * The end date an event should carry once its start date changes.
+ *
+ * An unset end date follows the start, so a single-day event needs one pick rather than
+ * two. An end date already past the start is left alone — a multi-day event keeps its
+ * span when the organiser shifts the start within it. Only an end that has fallen
+ * behind the start is pulled back into line.
+ *
+ * Dates are `YYYY-MM-DD`, which compares correctly as text.
+ */
+export function alignedEndDate(startDate: string, endDate: string): string {
+ if (!startDate) return endDate
+ return !endDate || endDate < startDate ? startDate : endDate
+}
+
+/** `HH:mm` and `HH:mm:ss` both reach here; padded, they compare correctly as text. */
+function normalizedTime(time: string): string {
+ return time.length === 5 ? `${time}:00` : time
+}
+
+/**
+ * Whether an event would end before — or exactly when — it starts.
+ *
+ * Only single-day events can fail this: a span that runs into another day may well end
+ * earlier in the day than it began. An unset end date is a single day, which is what
+ * `alignedEndDate` leaves behind. Mirrors `validate_dates` on Buzz Event, which is what
+ * actually enforces it; this is only here so the form says so before the save does.
+ *
+ * A half-filled schedule is not an error yet — the organiser is still picking.
+ */
+export function isEndBeforeStart(
+ startDate: string,
+ endDate: string,
+ startTime: string,
+ endTime: string
+): boolean {
+ if (!startTime || !endTime) return false
+ if (endDate && endDate !== startDate) return false
+ return normalizedTime(endTime) <= normalizedTime(startTime)
+}
diff --git a/dashboard/src/utils/teamRoles.test.ts b/dashboard/src/utils/teamRoles.test.ts
new file mode 100644
index 00000000..c1612d0b
--- /dev/null
+++ b/dashboard/src/utils/teamRoles.test.ts
@@ -0,0 +1,24 @@
+import assert from "node:assert/strict"
+import { test } from "node:test"
+import { canCreateEvents } from "./teamRoles.ts"
+
+test("a manager can create events", () => {
+ assert.equal(canCreateEvents("Manager"), true)
+})
+
+test("an admin and an owner can create events", () => {
+ assert.equal(canCreateEvents("Admin"), true)
+ assert.equal(canCreateEvents("Owner"), true)
+})
+
+test("a viewer cannot create events", () => {
+ assert.equal(canCreateEvents("Viewer"), false)
+})
+
+test("a frontdesk member cannot create events", () => {
+ assert.equal(canCreateEvents("Frontdesk"), false)
+})
+
+test("no team selected cannot create events", () => {
+ assert.equal(canCreateEvents(undefined), false)
+})
diff --git a/dashboard/src/utils/teamRoles.ts b/dashboard/src/utils/teamRoles.ts
new file mode 100644
index 00000000..cba39529
--- /dev/null
+++ b/dashboard/src/utils/teamRoles.ts
@@ -0,0 +1,7 @@
+// Mirrors WRITE_ROLES in buzz/permissions.py, which is what the server actually enforces.
+const EVENT_WRITE_ROLES = ["Owner", "Admin", "Manager"]
+
+/** Whether a team role may create events. Used to gate the form, not to secure it. */
+export function canCreateEvents(teamRole: string | undefined): boolean {
+ return Boolean(teamRole && EVENT_WRITE_ROLES.includes(teamRole))
+}
diff --git a/dashboard/src/utils/timeZones.test.ts b/dashboard/src/utils/timeZones.test.ts
new file mode 100644
index 00000000..15c8cbc3
--- /dev/null
+++ b/dashboard/src/utils/timeZones.test.ts
@@ -0,0 +1,109 @@
+import assert from "node:assert/strict"
+import { test } from "node:test"
+import {
+ allTimeZones,
+ canonicalZone,
+ zoneCity,
+ zoneCountry,
+ zoneGenericName,
+ zoneOffsetLabel,
+ zoneSearchText,
+} from "./timeZones.ts"
+
+// Mid-January and mid-July, so a zone that observes DST reads differently in each.
+const WINTER = new Date("2026-01-15T12:00:00Z")
+const SUMMER = new Date("2026-07-15T12:00:00Z")
+
+test("the zone list carries UTC and the region zones", () => {
+ const zones = allTimeZones()
+ for (const zone of ["UTC", "Europe/London", "America/New_York"]) {
+ assert.ok(zones.includes(zone), `${zone} missing from the list`)
+ }
+ assert.ok(zones.length > 100)
+})
+
+test("renamed zones reach the list under their current name", () => {
+ const zones = allTimeZones()
+ for (const [old_, current] of [
+ ["Asia/Calcutta", "Asia/Kolkata"],
+ ["Europe/Kiev", "Europe/Kyiv"],
+ ]) {
+ assert.ok(zones.includes(current), `${current} missing from the list`)
+ assert.ok(!zones.includes(old_), `${old_} still in the list`)
+ }
+})
+
+test("a zone with no rename passes through", () => {
+ assert.equal(canonicalZone("Europe/London"), "Europe/London")
+})
+
+test("a renamed zone still labels correctly", () => {
+ assert.equal(zoneOffsetLabel("Asia/Kolkata", WINTER), "GMT+05:30")
+ assert.equal(zoneCity("Asia/Kolkata"), "Kolkata")
+})
+
+test("every zone in the list can be labelled", () => {
+ for (const zone of allTimeZones()) {
+ assert.match(zoneOffsetLabel(zone, WINTER), /^GMT[+-]\d{2}:\d{2}$/, zone)
+ assert.ok(zoneCity(zone).length > 0, zone)
+ }
+})
+
+test("a half-hour offset keeps its minutes", () => {
+ assert.equal(zoneOffsetLabel("Asia/Kolkata", WINTER), "GMT+05:30")
+})
+
+test("a zero offset spells out its sign and minutes", () => {
+ assert.equal(zoneOffsetLabel("UTC", WINTER), "GMT+00:00")
+ assert.equal(zoneOffsetLabel("Europe/London", WINTER), "GMT+00:00")
+})
+
+test("the offset follows daylight saving", () => {
+ assert.equal(zoneOffsetLabel("Europe/London", SUMMER), "GMT+01:00")
+ assert.equal(zoneOffsetLabel("America/New_York", WINTER), "GMT-05:00")
+ assert.equal(zoneOffsetLabel("America/New_York", SUMMER), "GMT-04:00")
+})
+
+test("the city drops the region and the underscores", () => {
+ assert.equal(zoneCity("Asia/Kolkata"), "Kolkata")
+ assert.equal(zoneCity("America/New_York"), "New York")
+ assert.equal(zoneCity("America/Argentina/Buenos_Aires"), "Buenos Aires")
+ assert.equal(zoneCity("UTC"), "UTC")
+})
+
+test("a zone reports the country it sits in", () => {
+ assert.equal(zoneCountry("Asia/Kolkata"), "India")
+ assert.equal(zoneCountry("Europe/London"), "United Kingdom")
+ assert.equal(zoneCountry("America/New_York"), "United States")
+ assert.equal(zoneCountry("Pacific/Auckland"), "New Zealand")
+})
+
+test("an unknown zone has no country rather than throwing", () => {
+ assert.equal(zoneCountry("Nowhere/Nothing"), "")
+})
+
+test("every zone on offer has a country", () => {
+ // UTC is ours, not a place, so it is the one entry with nowhere to belong.
+ const placeless = allTimeZones().filter((zone) => zone !== "UTC" && !zoneCountry(zone))
+ assert.deepEqual(placeless, [])
+})
+
+test("an unknown zone is labelled empty rather than throwing", () => {
+ assert.equal(zoneOffsetLabel("Nowhere/Nothing"), "")
+ assert.equal(zoneGenericName("Nowhere/Nothing"), "")
+})
+
+test("a zone carries an everyday name", () => {
+ assert.equal(zoneGenericName("Asia/Kolkata", WINTER), "India Standard Time")
+ assert.equal(zoneGenericName("America/New_York", WINTER), "Eastern Time")
+})
+
+test("search text carries city, country and everyday name", () => {
+ assert.equal(zoneSearchText("Asia/Kolkata"), "Kolkata, India, India Standard Time")
+ // The zone id is matched separately by Combobox, so it is not repeated here.
+ assert.ok(!zoneSearchText("Asia/Kolkata").includes("Asia/"))
+})
+
+test("search text drops the parts a zone has no answer for", () => {
+ assert.equal(zoneSearchText("Nowhere/Nothing"), "Nothing")
+})
diff --git a/dashboard/src/utils/timeZones.ts b/dashboard/src/utils/timeZones.ts
new file mode 100644
index 00000000..3bb914d1
--- /dev/null
+++ b/dashboard/src/utils/timeZones.ts
@@ -0,0 +1,136 @@
+// Buzz Event stores an IANA zone name; these turn one into the two lines the picker
+// shows. Everything comes from Intl, so the list tracks the browser's own tzdata.
+
+/**
+ * Zones IANA has renamed, which the runtime still reports under the old name.
+ *
+ * Neither `supportedValuesOf` nor `resolvedOptions` canonicalises, so without this an
+ * organiser in India picks a zone labelled "Calcutta". Both spellings resolve to the
+ * same zone in Python's `ZoneInfo`, so the rename is safe for what gets stored. Only
+ * the renames a reader would notice are listed; the rest of the list passes through.
+ */
+const RENAMED = {
+ "Asia/Calcutta": "Asia/Kolkata",
+ "Asia/Katmandu": "Asia/Kathmandu",
+ "Asia/Rangoon": "Asia/Yangon",
+ "Asia/Saigon": "Asia/Ho_Chi_Minh",
+ "Asia/Thimbu": "Asia/Thimphu",
+ "Europe/Kiev": "Europe/Kyiv",
+ "America/Godthab": "America/Nuuk",
+ "Atlantic/Faeroe": "Atlantic/Faroe",
+} as const
+
+export function canonicalZone(zone: string): string {
+ return RENAMED[zone as keyof typeof RENAMED] ?? zone
+}
+
+/** Every zone the browser knows, e.g. "Asia/Kolkata", with UTC in front. */
+export function allTimeZones(): string[] {
+ // UTC is absent from the runtime's list, hence the prepend.
+ return ["UTC", ...Intl.supportedValuesOf("timeZone").map(canonicalZone)]
+}
+
+export function currentTimeZone(): string {
+ return canonicalZone(Intl.DateTimeFormat().resolvedOptions().timeZone)
+}
+
+/**
+ * Names a zone in one of Intl's styles.
+ *
+ * A zone the runtime does not recognise throws rather than returning nothing, and the
+ * stored zone on an old event may well be one of those, so an unknown zone reads as
+ * empty instead of taking the page down.
+ */
+function zoneName(zone: string, style: "longOffset" | "longGeneric", at: Date): string {
+ try {
+ return (
+ new Intl.DateTimeFormat("en-GB", { timeZone: zone, timeZoneName: style })
+ .formatToParts(at)
+ .find((part) => part.type === "timeZoneName")?.value ?? ""
+ )
+ } catch {
+ return ""
+ }
+}
+
+/** The zone's offset on a given date, e.g. "GMT+05:30" — DST-aware. */
+export function zoneOffsetLabel(zone: string, at: Date = new Date()): string {
+ const offset = zoneName(zone, "longOffset", at)
+ // Zero-offset zones format as a bare "GMT"; spell it out so every label reads alike.
+ return offset === "GMT" ? "GMT+00:00" : offset
+}
+
+/** The place the zone is named for, e.g. "Asia/Kolkata" → "Kolkata". */
+export function zoneCity(zone: string): string {
+ return zone.split("/").pop()?.replace(/_/g, " ") ?? zone
+}
+
+/**
+ * The zone's everyday name, e.g. "India Standard Time", "Eastern Time".
+ *
+ * The long form on purpose: it is the one that says "Eastern Time" rather than
+ * "New York Time", and people search for the region name they think in.
+ */
+export function zoneGenericName(zone: string, at: Date = new Date()): string {
+ return zoneName(zone, "longGeneric", at)
+}
+
+/**
+ * Country of each zone, built once on first use.
+ *
+ * There is no zone-to-country lookup in Intl, but the reverse exists: asking a region
+ * for its zones. Sweeping every two-letter code and inverting the result covers the
+ * whole list — brute force, but nothing to keep up to date as tzdata moves. Costs
+ * around 90ms, hence the memo.
+ */
+let zonesByCountry: Map | null = null
+
+function countryMap(): Map {
+ if (zonesByCountry) return zonesByCountry
+
+ zonesByCountry = new Map()
+ // Support for this is uneven; without it the picker simply shows no country.
+ // TS has no type for this yet; the runtime check above is the real guard.
+ type ZonedLocale = Intl.Locale & { getTimeZones?: () => string[] }
+ if (typeof (Intl.Locale.prototype as ZonedLocale).getTimeZones !== "function")
+ return zonesByCountry
+
+ const names = new Intl.DisplayNames(["en"], { type: "region" })
+
+ for (let first = 65; first <= 90; first++) {
+ for (let second = 65; second <= 90; second++) {
+ const code = String.fromCharCode(first, second)
+ let zones: string[] = []
+ try {
+ zones = (new Intl.Locale(`und-${code}`) as ZonedLocale).getTimeZones?.() ?? []
+ } catch {
+ // Not a region code the runtime knows — most of the 676 are not.
+ }
+ if (!zones.length) continue
+
+ const country = names.of(code) ?? code
+ // The sweep returns legacy names, the same as `supportedValuesOf`.
+ for (const zone of zones) zonesByCountry.set(canonicalZone(zone), country)
+ }
+ }
+
+ return zonesByCountry
+}
+
+/** The country a zone sits in, e.g. "India". Empty when the runtime cannot say. */
+export function zoneCountry(zone: string): string {
+ return countryMap().get(zone) ?? ""
+}
+
+/**
+ * Everything a zone should be findable by, as one string.
+ *
+ * Combobox matches on an option's label and value and nothing else, so the terms have
+ * to be folded into the label. What the reader sees comes from the `#item` slot
+ * instead, which is why this can afford to be a haystack rather than a caption.
+ */
+export function zoneSearchText(zone: string): string {
+ return [zoneCity(zone), zoneCountry(zone), zoneGenericName(zone)]
+ .filter(Boolean)
+ .join(", ")
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Create event
+ +
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+
+ + About +
+ +
+
+
+
+
+
+
+
+
+
+
+
+