Show System Implementation Plan

convex/
├── schema.ts                    # ALREADY EXISTS — add indexes if needed
├── auth.ts                      # EXISTS — only getCurrentUser, upsertUser, isAdmin (no staffMutation/adminMutation)
├── functions/
│   ├── shows.ts               # ALREADY EXISTS — extend with upcoming query
│   └── occurrences.ts           # ALREADY EXISTS — extend with upcoming query

apps/frontend/
├── app/[locale]/
│   ├── page.tsx               # MODIFY — wire carousel to Convex upcoming query
│   ├── programme/page.tsx      # CREATE — full show list
│   └── shows/page.tsx         # CREATE — show detail (nuqs ?slug=, NOT dynamic [slug] route)
├── components/home/
│   └── upcoming-shows-section.tsx  # MODIFY — accept typed Convex data
└── lib/
    └── convex/
        └── provider.tsx       # ALREADY EXISTS

// Get upcoming occurrences for homepage carousel (next 8 across all shows)
export const upcoming = query({
  args: { limit: v.optional(v.number()) },
  handler: async (ctx, { limit }) => {
    const today = new Date().toISOString().split("T")[0];
    const occurrences = await ctx.db
      .query("showOccurrences")
      .withIndex("by_date_status", (q) =>
        q.gte("date", today).eq("status", "SCHEDULED"),
      )
      .collect();
 
    // Sort by date + time, take limit
    occurrences.sort((a, b) => {
      const dateCompare = a.date.localeCompare(b.date);
      return dateCompare !== 0 ? dateCompare : a.time.localeCompare(b.time);
    });
 
    const limited = occurrences.slice(0, limit ?? 8);
 
    // Enrich with template data
    const results = [];
    for (const occ of limited) {
      const template = await ctx.db.get(occ.templateId);
      if (template && template.status === "ACTIVE") {
        results.push({ occurrence: occ, show: template });
      }
    }
    return results;
  },
});

git add convex/functions/shows.ts
git commit -m "feat(shows): add upcoming query for homepage carousel"

cat convex/functions/occurrences.ts

// Get all occurrences for a specific show template
export const byTemplate = query({
  args: { templateId: v.id("showTemplates") },
  handler: async (ctx, { templateId }) => {
    return await ctx.db
      .query("showOccurrences")
      .withIndex("by_template", (q) => q.eq("templateId", templateId))
      .collect();
  },
});

// Get upcoming SCHEDULED occurrences for a specific show (for show detail page)
export const upcomingByTemplate = query({
  args: { templateId: v.id("showTemplates"), limit: v.optional(v.number()) },
  handler: async (ctx, { templateId, limit }) => {
    const today = new Date().toISOString().split("T")[0];
    const occurrences = await ctx.db
      .query("showOccurrences")
      .withIndex("by_template_date", (q) =>
        q.eq("templateId", templateId).gte("date", today),
      )
      .collect();
 
    // Filter to SCHEDULED only
    const scheduled = occurrences
      .filter((o) => o.status === "SCHEDULED")
      .sort((a, b) => {
        const dateCompare = a.date.localeCompare(b.date);
        return dateCompare !== 0 ? dateCompare : b.time.localeCompare(a.time);
      });
 
    return limit ? scheduled.slice(0, limit) : scheduled;
  },
});

// Get availability info for an occurrence (for booking flow + show page)
export const getAvailability = query({
  args: { occurrenceId: v.id("showOccurrences") },
  handler: async (ctx, { occurrenceId }) => {
    const occ = await ctx.db.get(occurrenceId);
    if (!occ) return null;
 
    const remaining = occ.actualCapacity - occ.bookedCount;
    const template = await ctx.db.get(occ.templateId);
 
    return {
      occurrenceId: occ._id,
      totalCapacity: occ.actualCapacity,
      bookedCount: occ.bookedCount,
      remaining,
      status: occ.status,
      // Badge: AVAILABLE / FEW_LEFT / SOLD_OUT — translated on frontend
      badge:
        remaining > 10 ? "AVAILABLE" : remaining > 0 ? "FEW_LEFT" : "SOLD_OUT",
      showOnlyEnabled: occ.showOnlyEnabled,
      dinnerPrice: occ.dinnerPriceOverride ?? template?.defaultDinnerPrice ?? 0,
      showOnlyPrice:
        occ.showOnlyPriceOverride ?? template?.defaultShowOnlyPrice ?? 0,
    };
  },
});

git add convex/functions/occurrences.ts
git commit -m "feat(occurrences): add template queries and availability"

cat apps/frontend/app/\[locale\]/page.tsx
cat apps/frontend/components/home/upcoming-shows-section.tsx

type UpcomingShow = {
  occurrence: {
    _id: Id<"showOccurrences">;
    date: string;
    time: string;
    status: "SCHEDULED" | "CANCELLED" | "SOLD_OUT";
    bookedCount: number;
    actualCapacity: number;
  };
  show: {
    _id: Id<"showTemplates">;
    title: string;
    slug: string;
    gallery: string[];
    defaultDinnerPrice: number;
    supportedTicketTypes: ("DINNER_THEATRE" | "SHOW_ONLY")[];
  };
};

git add apps/frontend/app/\[locale\]/page.tsx apps/frontend/components/home/upcoming-shows-section.tsx
git commit -m "feat(homepage): wire carousel to Convex upcoming query"

"use client";
 
import { useTranslations } from "next-intl";
import { useQuery } from "convex/react";
import { api } from "~/convex/_generated/api";
import { useRouter } from "next/navigation";
 
export default function ProgrammePage() {
  const t = useTranslations();
  const router = useRouter();
  // CORRECT: useQuery(api.shows.listActive) NOT useQuery(api.shows.listActive())
  const shows = useQuery(api.shows.listActive);
 
  if (!shows) {
    return (
      <div className="min-h-screen bg-[#1a1a1a] flex items-center justify-center">
        <p className="text-[#808080]">{t("shows.programme.loading")}</p>
      </div>
    );
  }
 
  return (
    <div className="min-h-screen bg-[#1a1a1a] py-12">
      <div className="max-w-7xl mx-auto px-6">
        <h1 className="font-serif text-[#C5A059] text-4xl mb-8">
          {t("shows.programme.title")}
        </h1>
 
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {shows.map((show) => (
            <button
              key={show._id}
              onClick={() => router.push(`/shows?slug=${show.slug}`)}
              className="bg-[#1a1a1a] border border-[#333] rounded-lg overflow-hidden hover:border-[#C5A059]/50 transition-colors text-left"
            >
              {show.gallery[0] && (
                <div className="aspect-video bg-gray-800">
                  <img
                    src={show.gallery[0]}
                    alt={show.title}
                    className="w-full h-full object-cover"
                  />
                </div>
              )}
              <div className="p-4">
                <h2 className="font-serif text-[#C5A059] text-xl mb-2">
                  {show.title}
                </h2>
                <p className="text-[#e6e6e6]/60 text-sm mb-4 line-clamp-2">
                  {show.tagline}
                </p>
                <div className="flex justify-between items-center">
                  <span className="text-[#C5A059] font-bold">
                    {t("shows.fromPrice", { price: show.defaultDinnerPrice.toLocaleString() })}
                  </span>
                  <span className="text-sm text-[#808080]">
                    {t("shows.viewDates")}
                  </span>
                </div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

git add apps/frontend/app/\[locale\]/programme/
git commit -m "feat(programme): add show listing page"

"use client";
 
import { useQueryState } from "nuqs";
import { useQuery } from "convex/react";
import { api } from "~/convex/_generated/api";
import { ShowDetailClient } from "~/components/shows/show-detail-client";
 
export default function ShowDetailPage() {
  const [slug] = useQueryState("slug", { defaultValue: "" });
  // CORRECT: useQuery(api.shows.getBySlug, { slug }) NOT useQuery(api.shows.getBySlug({ slug }))
  const show = useQuery(api.shows.getBySlug, { slug });
 
  if (slug && !show) return null; // 404 handled by notFound in parent
  if (!slug || !show) {
    return (
      <div className="min-h-screen bg-[#1a1a1a] flex items-center justify-center">
        <p className="text-[#808080]">{t("shows.detail.loading")}</p>
      </div>
    );
  }
 
  return <ShowDetailClient show={show} />;
}

Friday    May 2    7:30 PM    ● 12 seats left    [Book]

import { useTranslations } from "next-intl";
 
function getBadge(remaining: number, t: (key: string) => string) {
  if (remaining > 10)
    return {
      colorClass: "bg-green-500",           // dot color class
      labelKey: "shows.availability.available",
    };
  if (remaining > 0)
    return {
      colorClass: "bg-orange-500",
      labelKey: "shows.availability.fewLeft",
      labelParams: { count: remaining },
    };
  return {
    colorClass: "bg-gray-500",
    labelKey: "shows.availability.soldOut",
  };
}
 
// In JSX:
<span className={`inline-block w-2 h-2 rounded-full ${colorClass}`} />
<span>{t(labelKey, labelParams)}</span>

git add apps/frontend/app/\[locale\]/shows/
git commit -m "feat(show-detail): add show page with occurrence list"

// convex/functions/shows.ts
import { z } from "zod";
 
export const ShowSlugSchema = z.object({
  slug: z.string().min(1, "Slug is required"),
});
 
export const UpcomingQuerySchema = z.object({
  limit: z.number().int().positive().optional(),
});
 
export const UpcomingByTemplateSchema = z.object({
  templateId: z.string().min(1, "Template ID is required"),
  limit: z.number().int().positive().optional(),
});
 
export const GetAvailabilitySchema = z.object({
  occurrenceId: z.string().min(1, "Occurrence ID is required"),
});
 
export const CreateShowTemplateSchema = z.object({
  title: z.string().min(1, "Title is required"),
  slug: z.string().min(1, "Slug is required"),
  tagline: z.string().optional(),
  description: z.string().optional(),
  gallery: z.array(z.string()).default([]),
  videoUrl: z.string().url().optional(),
  defaultDinnerPrice: z.number().nonnegative(),
  defaultShowOnlyPrice: z.number().nonnegative().optional(),
  actualCapacity: z.number().int().positive(),
  supportedTicketTypes: z
    .array(z.enum(["DINNER_THEATRE", "SHOW_ONLY"]))
    .default(["DINNER_THEATRE"]),
  status: z.enum(["ACTIVE", "DRAFT", "ARCHIVED"]).default("DRAFT"),
});
 
export const UpdateShowTemplateSchema = z.object({
  id: z.string().min(1),
  title: z.string().min(1).optional(),
  tagline: z.string().optional(),
  description: z.string().optional(),
  gallery: z.array(z.string()).optional(),
  videoUrl: z.string().url().optional(),
  defaultDinnerPrice: z.number().nonnegative().optional(),
  defaultShowOnlyPrice: z.number().nonnegative().optional(),
  actualCapacity: z.number().int().positive().optional(),
  supportedTicketTypes: z
    .array(z.enum(["DINNER_THEATRE", "SHOW_ONLY"]))
    .optional(),
  status: z.enum(["ACTIVE", "DRAFT", "ARCHIVED"]).optional(),
});
 
export const CreateOccurrenceSchema = z.object({
  templateId: z.string().min(1, "Template ID is required"),
  date: z
    .string()
    .regex(/^\d{4}-\d{2}-\d{2}$/, "Date must be YYYY-MM-DD format"),
  time: z.string().regex(/^\d{2}:\d{2}$/, "Time must be HH:MM format"),
  actualCapacity: z.number().int().positive(),
  dinnerPriceOverride: z.number().nonnegative().optional(),
  showOnlyPriceOverride: z.number().nonnegative().optional(),
  showOnlyEnabled: z.boolean().default(false),
  status: z.enum(["SCHEDULED", "CANCELLED", "SOLD_OUT"]).default("SCHEDULED"),
});
 
export const UpdateOccurrenceSchema = z.object({
  id: z.string().min(1),
  date: z
    .string()
    .regex(/^\d{4}-\d{2}-\d{2}$/)
    .optional(),
  time: z
    .string()
    .regex(/^\d{2}:\d{2}$/)
    .optional(),
  actualCapacity: z.number().int().positive().optional(),
  dinnerPriceOverride: z.number().nonnegative().optional(),
  showOnlyPriceOverride: z.number().nonnegative().optional(),
  showOnlyEnabled: z.boolean().optional(),
  status: z.enum(["SCHEDULED", "CANCELLED", "SOLD_OUT"]).optional(),
});

// convex/functions/shows.ts + occurrences.ts
export const SHOW_ERROR_CODES = {
  SHOW_NOT_FOUND: "SHOW_NOT_FOUND",
  TEMPLATE_NOT_FOUND: "TEMPLATE_NOT_FOUND",
  OCCURRENCE_NOT_FOUND: "OCCURRENCE_NOT_FOUND",
  OCCURRENCE_NOT_SCHEDULED: "OCCURRENCE_NOT_SCHEDULED",
  SHOW_ONLY_NOT_ENABLED: "SHOW_ONLY_NOT_ENABLED",
  GENERATION_FAILED: "GENERATION_FAILED",
} as const;
 
export type ShowErrorCode = keyof typeof SHOW_ERROR_CODES;

// Homepage carousel — all upcoming shows
// CORRECT: pass function reference, not call it
const upcoming = useQuery(api.shows.upcoming, { limit: 8 });
 
// Programme page — all active shows
const shows = useQuery(api.shows.listActive);
 
// Show detail page — single show
const show = useQuery(api.shows.getBySlug, { slug });
 
// Show detail page — occurrences for this show
// CORRECT: pass function reference, not call it
const occurrences = useQuery(api.occurrences.upcomingByTemplate, {
  templateId: show._id,
  limit: 5,
});
 
// Booking flow — availability for selected occurrence
// CORRECT: pass function reference, not call it
const availability = useQuery(api.occurrences.getAvailability, {
  occurrenceId,
});

{
  "shows": {
    "programme": {
      "title": "Programme",
      "loading": "Loading shows..."
    },
    "detail": {
      "loading": "Loading show details...",
      "seeDates": "See Dates",
      "bookNow": "Book Now"
    },
    "availability": {
      "available": "Available",
      "fewLeft": "Only {count} seats left",
      "soldOut": "Sold Out"
    },
    "fromPrice": "From {price} VND",
    "viewDates": "View Dates & Book",
    "seeMoreDates": "See more dates",
    "showLessDates": "Show less"
  },
  "common": {
    "days": {
      "short": {
        "0": "Sun",
        "1": "Mon",
        "2": "Tue",
        "3": "Wed",
        "4": "Thu",
        "5": "Fri",
        "6": "Sat"
      }
    },
    "currency": "VND"
  },
  "errors": {
    "shows": {
      "showNotFound": "Show not found",
      "templateNotFound": "Show template not found",
      "occurrenceNotFound": "Show date not found",
      "occurrenceNotScheduled": "This show date is no longer available",
      "generationFailed": "Failed to generate show dates"
    },
    "auth": {
      "unauthorized": "You must be signed in as staff or admin"
    }
  }
}

const formattedDate = new Intl.DateTimeFormat(locale, {
  weekday: "long",
  month: "long",
  day: "numeric",
}).format(new Date(occurrence.date));

# Server-only (never exposed to client):
CLERK_SECRET_KEY=           # Clerk secret key
 
# Client-safe (NEXT_PUBLIC_ prefix):
NEXT_PUBLIC_CONVEX_URL=    # Convex deployment URL
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=  # Clerk publishable key

// e2e/show-system.spec.ts
 
test("SS-E2E-1.1: Homepage displays upcoming show carousel", async ({
  page,
}) => {
  // Given: 3 active shows with upcoming occurrences exist
  // When: Guest visits homepage
  // Then: Carousel shows up to 8 occurrence cards with show title, date, time, and price
  await page.goto("/");
  await expect(
    page.locator('[data-testid="upcoming-shows-carousel"]'),
  ).toBeVisible();
});
 
test("SS-E2E-1.2: Programme page shows all active shows", async ({ page }) => {
  // Given: 5 active show templates exist
  // When: Guest navigates to /programme
  // Then: Grid displays 5 show cards with title, tagline, hero image, and CTA
  await page.goto("/en/programme");
  const cards = page.locator('[data-testid="show-card"]');
  await expect(cards).toHaveCount(5);
});
 
test("SS-E2E-1.3: Show detail page loads with slug param", async ({ page }) => {
  // Given: Show "A" exists with slug "show-a"
  // When: Guest navigates to /shows?slug=show-a
  // Then: Page shows video, description, gallery, and occurrence list
  await page.goto("/en/shows?slug=show-a");
  await expect(page.locator('[data-testid="show-hero"]')).toBeVisible();
  await expect(page.locator('[data-testid="occurrence-list"]')).toBeVisible();
});
 
test("SS-E2E-1.4: Invalid slug shows 404", async ({ page }) => {
  // Given: No show with slug "nonexistent" exists
  // When: Guest navigates to /shows?slug=nonexistent
  // Then: Page shows notFound()
  await page.goto("/en/shows?slug=nonexistent");
  await expect(page.locator('[data-testid="not-found"]')).toBeVisible();
});
 
test("SS-E2E-1.5: Book button navigates to booking flow", async ({ page }) => {
  // Given: Show "A" has a scheduled occurrence with ID "occ123"
  // When: Guest on show detail page clicks [Book] on that occurrence
  // Then: Guest navigates to /booking?step=tickets&occurrenceId=occ123
  await page.goto("/en/shows?slug=show-a");
  await page.getByTestId("book-btn-occ123").click();
  await expect(page).toHaveURL(/\/booking\?step=tickets&occurrenceId=occ123/);
});
 
test("SS-E2E-1.6: See more dates expands occurrence list", async ({ page }) => {
  // Given: Show "A" has 12 upcoming occurrences
  // When: Guest on show detail page clicks "See more dates"
  // Then: 5 more occurrences appear inline, button updates to "Show less"
  await page.goto("/en/shows?slug=show-a");
  await page.getByTestId("see-more-dates-btn").click();
  await expect(page.locator('[data-testid="occurrence-row"]')).toHaveCount(10);
});

// __tests__/components/upcoming-shows-section.test.tsx
 
it("SS-CT-1.1: Renders all available occurrences with correct data", async () => {
  // Given: Mock upcoming shows data with 3 occurrences
  const mockData = [
    { occurrence: { date: "2026-05-15", time: "19:30", status: "SCHEDULED", bookedCount: 5, actualCapacity: 50 }, show: { title: "Show A", slug: "show-a", gallery: [], defaultDinnerPrice: 900000 } },
  ];
  render(<UpcomingShowsSection shows={mockData} />);
  // Then: Each occurrence shows date, time, availability badge
  expect(screen.getByText("2026-05-15")).toBeInTheDocument();
  expect(screen.getByText("7:30 PM")).toBeInTheDocument();
});
 
it("SS-CT-1.2: Availability badge shows green for available", async () => {
  // Given: Occurrence with 25 remaining seats (out of 50)
  const mockData = [{ occurrence: { bookedCount: 25, actualCapacity: 50 }, show: { title: "Show A" } }];
  render(<UpcomingShowsSection shows={mockData} />);
  // Then: Green badge with "Available" text
  const badge = screen.getByTestId("availability-badge");
  expect(badge).toHaveClass("bg-green-500");
  expect(badge).toContainText("Available");
});
 
it("SS-CT-1.3: Availability badge shows orange for few left", async () => {
  // Given: Occurrence with 8 remaining seats
  const mockData = [{ occurrence: { bookedCount: 42, actualCapacity: 50 }, show: { title: "Show A" } }];
  render(<UpcomingShowsSection shows={mockData} />);
  // Then: Orange badge with "Only 8 seats left" text
  const badge = screen.getByTestId("availability-badge");
  expect(badge).toHaveClass("bg-orange-500");
  expect(badge).toContainText("Only 8 seats left");
});
 
it("SS-CT-1.4: Sold out occurrence shows disabled Book button", async () => {
  // Given: Occurrence with 0 remaining seats
  const mockData = [{ occurrence: { _id: "occ1", bookedCount: 50, actualCapacity: 50, status: "SOLD_OUT" }, show: { title: "Show A", slug: "show-a" } }];
  render(<UpcomingShowsSection shows={mockData} />);
  // Then: Book button is disabled
  const bookBtn = screen.getByTestId("book-btn-occ1");
  expect(bookBtn).toBeDisabled();
});
 
it("SS-CT-1.5: Empty state shown when no upcoming shows", async () => {
  // Given: Empty shows array
  render(<UpcomingShowsSection shows={[]} />);
  // Then: Empty state message or placeholder
  expect(screen.getByTestId("empty-state")).toBeInTheDocument();
});

// __tests__/convex/shows.test.ts
 
it("SS-BE-1.1: upcoming query returns only SCHEDULED occurrences", async () => {
  // Given: Mixed SCHEDULED and CANCELLED occurrences in DB
  // When: Calling api.shows.upcoming query
  // Then: Only SCHEDULED occurrences returned
  const result = await ctx.runQuery(api.shows.upcoming, { limit: 8 });
  for (const { occurrence } of result) {
    expect(occurrence.status).toBe("SCHEDULED");
  }
});
 
it("SS-BE-1.2: upcoming query returns occurrences sorted by date then time", async () => {
  // Given: Multiple upcoming occurrences
  // When: Calling api.shows.upcoming query
  // Then: Results sorted chronologically
  const result = await ctx.runQuery(api.shows.upcoming, { limit: 8 });
  for (let i = 1; i < result.length; i++) {
    const prevDate = result[i - 1].occurrence.date;
    const currDate = result[i].occurrence.date;
    expect(prevDate.localeCompare(currDate) <= 0).toBe(true);
  }
});
 
it("SS-BE-1.3: upcoming query enriches with ACTIVE show templates only", async () => {
  // Given: Occurrences linked to ACTIVE and ARCHIVED templates
  // When: Calling api.shows.upcoming query
  // Then: Only occurrences linked to ACTIVE templates returned
  const result = await ctx.runQuery(api.shows.upcoming, { limit: 8 });
  for (const { show } of result) {
    expect(show.status).toBe("ACTIVE");
  }
});
 
it("SS-BE-1.4: getAvailability returns null for nonexistent occurrence", async () => {
  // Given: Non-existent occurrence ID
  // When: Calling api.occurrences.getAvailability
  // Then: Returns null
  const result = await ctx.runQuery(api.occurrences.getAvailability, {
    occurrenceId: "nonexistent",
  });
  expect(result).toBeNull();
});
 
it("SS-BE-1.5: getAvailability computes AVAILABLE badge correctly", async () => {
  // Given: Occurrence with 20 remaining seats
  // When: Calling api.occurrences.getAvailability
  // Then: Badge is "AVAILABLE" and remaining is 20
  const result = await ctx.runQuery(api.occurrences.getAvailability, {
    occurrenceId: "occWith20Remaining",
  });
  expect(result?.badge).toBe("AVAILABLE");
  expect(result?.remaining).toBe(20);
});
 
it("SS-BE-1.6: getAvailability computes FEW_LEFT badge correctly", async () => {
  // Given: Occurrence with 5 remaining seats
  // When: Calling api.occurrences.getAvailability
  // Then: Badge is "FEW_LEFT" and remaining is 5
  const result = await ctx.runQuery(api.occurrences.getAvailability, {
    occurrenceId: "occWith5Remaining",
  });
  expect(result?.badge).toBe("FEW_LEFT");
  expect(result?.remaining).toBe(5);
});
 
it("SS-BE-1.7: getAvailability computes SOLD_OUT badge correctly", async () => {
  // Given: Occurrence with 0 remaining seats
  // When: Calling api.occurrences.getAvailability
  // Then: Badge is "SOLD_OUT" and remaining is 0
  const result = await ctx.runQuery(api.occurrences.getAvailability, {
    occurrenceId: "occWith0Remaining",
  });
  expect(result?.badge).toBe("SOLD_OUT");
  expect(result?.remaining).toBe(0);
});
 
it("SS-BE-1.8: upcomingByTemplate returns only SCHEDULED occurrences for given template", async () => {
  // Given: Template "A" with 3 SCHEDULED and 1 CANCELLED occurrences
  // When: Calling api.occurrences.upcomingByTemplate with templateId
  // Then: Returns only SCHEDULED occurrences (3), sorted by date
  const result = await ctx.runQuery(api.occurrences.upcomingByTemplate, {
    templateId: "templateA",
    limit: 5,
  });
  expect(result).toHaveLength(3);
  for (const occ of result) {
    expect(occ.status).toBe("SCHEDULED");
  }
});
 
it("SS-BE-1.9: upcomingByTemplate returns empty array for template with no upcoming occurrences", async () => {
  // Given: Template with all past/cancelled occurrences
  // When: Calling api.occurrences.upcomingByTemplate
  // Then: Returns empty array
  const result = await ctx.runQuery(api.occurrences.upcomingByTemplate, {
    templateId: "templateWithNoUpcoming",
  });
  expect(result).toHaveLength(0);
});