feat(dashboard): a team's events at /manage/team/events

dashboard/src/components/dashboard/events/EventCard.vue

@@ -2,12 +2,18 @@
 import type { MyEvent } from "@/types";
 import { dayLabel } from "@/utils/dateLabels";
 import { bannerPattern } from "@/utils/eventBanner";
-import { Avatar } from "frappe-ui";
+import { Avatar, Button } from "frappe-ui";
 import { computed } from "vue";
 
 // The Events page files cards under a date heading; a standalone list has to
 // carry the date on the card itself.
-const props = defineProps<{ event: MyEvent; showDate?: boolean }>();
+const props = withDefaults(
+	defineProps<{ event: MyEvent; showDate?: boolean; showManage?: boolean }>(),
+	{ showManage: true }
+);
+
+// Two gates: the caller has to want the button, and only a host has anything to manage.
+const canManage = computed(() => props.showManage && props.event.is_host);
 
 // Times arrive as a serialized timedelta ("9:00:00"), so the hour needs padding.
 const startTime = computed((): string => {
@@ -69,14 +75,18 @@ const venue = computed(() => {
 				</p>
 			</div>
 
-			<p class="mt-2 flex items-center gap-2 text-base text-ink-gray-5">
-				<span
-					class="size-4 shrink-0"
-					:class="[venue.icon, venue.tone]"
-					aria-hidden="true"
-				/>
-				{{ venue.label }}
-			</p>
+			<div class="flex justify-between">
+				<p class="mt-2 flex items-center gap-2 text-base text-ink-gray-5">
+					<span
+						class="size-4 shrink-0"
+						:class="[venue.icon, venue.tone]"
+						aria-hidden="true"
+					/>
+					{{ venue.label }}
+				</p>
+				<!-- TODO: wire this button up with the manage event page -->
+				<Button v-if="canManage" label="Manage" icon-right="arrow-right" size="sm" />
+			</div>
 		</div>
 	</article>
 </template>

dashboard/src/components/dashboard/teams/TeamPageHeader.vue

@@ -13,7 +13,7 @@ const items = computed(() => {
 </script>
 
 <template>
-	<PageHeader class="border-none pt-2">
+	<PageHeader class="border-none pt-2 bg-surface-elevation-1">
 		<Breadcrumbs :items="items" />
 		<Button variant="solid" icon-left="plus" label="Create Event" />
 	</PageHeader>

dashboard/src/layouts/ManagerLayout.vue

@@ -20,7 +20,7 @@ const route = useRoute();
 const isActive = (to: string) => route.path === to;
 
 const personalItems = [
-	{ label: "Events", icon: "lucide-calendar-days", to: "/manage/events" },
+	{ label: "My Events", icon: "lucide-calendar-days", to: "/manage/events" },
 	{ label: "My Tickets", icon: "lucide-ticket", to: "/manage/tickets" },
 	{ label: "Talk Proposals", icon: "lucide-file-text", to: "/manage/proposals" },
 	{ label: "Sponsorship", icon: "lucide-handshake", to: "/manage/sponsorship" },
@@ -30,10 +30,8 @@ const personalItems = [
 // so they are fixed and need no team loaded to render.
 const teamItems = [
 	{ label: "Overview", icon: "lucide-layout-dashboard", to: "/manage/team/overview" },
+	{ label: "Events", icon: "lucide-calendar-days", to: "/manage/team/events" },
 	{ label: "Members", icon: "lucide-users-round", to: "/manage/team/members" },
-	{ label: "Registrations", icon: "lucide-users", to: "/manage/registrations" },
-	{ label: "Sponsors", icon: "lucide-badge-dollar-sign", to: "/manage/sponsors" },
-	{ label: "More", icon: "lucide-ellipsis", to: "/manage/more" },
 ];
 </script>
 

dashboard/src/pages/manage/MyEvents.vue

@@ -17,7 +17,7 @@ const months = computed(() => groupEventsByMonth(myEvents.data?.[tab.value] || [
 <template>
 	<TimelineList
 		v-model:tab="tab"
-		heading="Events"
+		heading="My Events"
 		noun="events"
 		:months="months"
 		:loading="myEvents.loading"

dashboard/src/pages/manage/teams/TeamEvents.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import TimelineList from "@/components/dashboard/TimelineList.vue";
+import EventCard from "@/components/dashboard/events/EventCard.vue";
+import TeamPageHeader from "@/components/dashboard/teams/TeamPageHeader.vue";
+import { useMyEvents } from "@/data/events";
+import { currentTeam } from "@/data/teams";
+import { groupEventsByMonth } from "@/utils/eventGroups";
+import type { TimelineTab } from "@/utils/timelineTabs";
+import { computed, ref } from "vue";
+
+const myEvents = useMyEvents();
+
+const tab = ref<TimelineTab>("upcoming");
+
+// Reuses the feed the Events page already loads: a member sees every event their own
+// team hosts, so filtering that feed by team is the team's whole calendar.
+const months = computed(() =>
+	groupEventsByMonth(
+		(myEvents.data?.[tab.value] || []).filter(
+			(event) => event.team === currentTeam.value?.name
+		)
+	)
+);
+</script>
+
+<template>
+	<TeamPageHeader title="Events" />
+
+	<TimelineList
+		v-model:tab="tab"
+		heading="Events"
+		noun="events"
+		:months="months"
+		:loading="myEvents.loading"
+		:error="myEvents.error"
+	>
+		<!-- Every event here belongs to the team, so a per-card Manage button says nothing. -->
+		<template #default="{ item }">
+			<EventCard :event="item" :show-manage="false" />
+		</template>
+	</TimelineList>
+</template>

dashboard/src/pages/manage/teams/TeamOverview.vue

@@ -72,7 +72,7 @@ const hiddenMemberCount = computed(() =>
 						variant="ghost"
 						label="See all events"
 						class="w-fit"
-						:route="{ name: 'events' }"
+						:route="{ name: 'team-events' }"
 					/>
 				</section>
 

dashboard/src/router.ts

@@ -48,6 +48,11 @@ const routes: RouteRecordRaw[] = [
 				name: "team-overview",
 				component: () => import("@/pages/manage/teams/TeamOverview.vue"),
 			},
+			{
+				path: "team/events",
+				name: "team-events",
+				component: () => import("@/pages/manage/teams/TeamEvents.vue"),
+			},
 			{
 				path: "team/members",
 				name: "team-members",

e2e/tests/manage-access.spec.ts

@@ -13,9 +13,9 @@ test.describe("Manage access", () => {
 
 	test("routes a sidebar item with no page yet to the placeholder", async ({ page }) => {
 		await page.goto("/b/manage/events");
-		await page.getByRole("link", { name: "Registrations" }).click();
+		await page.getByRole("link", { name: "Sponsorship" }).click();
 
-		await expect(page).toHaveURL(/\/b\/manage\/registrations$/);
+		await expect(page).toHaveURL(/\/b\/manage\/sponsorship$/);
 		await expect(page.getByText("Work in progress")).toBeVisible();
 	});