Admin Dashboard Implementation Plan

apps/frontend/
├── app/admin/
│   ├── layout.tsx            # Admin layout with sidebar (CREATE)
│   ├── page.tsx             # Dashboard overview (CREATE)
│   ├── shows/
│   │   └── page.tsx         # Show templates list + edit (nuqs — NOT [id] segment)
│   ├── occurrences/
│   │   └── page.tsx         # Calendar view (CREATE)
│   ├── reservations/
│   │   └── page.tsx         # Reservation list (CREATE)
│   ├── addons/
│   │   └── page.tsx         # Add-ons library (CREATE)
│   └── analytics/
│       └── page.tsx         # Analytics dashboard (CREATE)
├── components/admin/
│   ├── sidebar.tsx          # Admin sidebar nav (CREATE)
│   ├── metric-card.tsx      # Metric card component (CREATE)
│   ├── at-risk-list.tsx     # At-risk occurrences list (CREATE)
│   └── recent-reservations.tsx # Recent reservations table (CREATE)
└── lib/
    └── admin/
        └── access-control.ts  # Role check utilities (CREATE)

convex/
├── functions/
│   ├── shows.ts             # Extend with admin mutations (MODIFY)
│   ├── occurrences.ts        # Extend with batch generation (MODIFY)
│   ├── reservations.ts       # Extend with admin queries (MODIFY)
│   ├── addons.ts            # Extend with admin mutations (MODIFY)
│   └── analytics.ts          # CREATE — analytics aggregation queries (CREATE)
└── auth.ts                   # Auth configuration (VERIFY — staffMutation needed from foundation-plan)

cat convex/auth.ts
cat apps/frontend/middleware.ts

import { authMiddleware } from "@clerk/nextjs/server";
 
export default authMiddleware({
  publicRoutes: ["/", "/programme", "/shows"],
  adminRoutes: ["/admin/:path*"],
});
 
export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)"],
};

// apps/frontend/app/admin/layout.tsx
import { redirect } from "next/navigation";
import { auth } from "@clerk/nextjs/server";
import { currentUser } from "@clerk/nextjs/server";
import { Sidebar } from "~/components/admin/sidebar";
import { getTranslations } from "next-intl/server";
 
export default async function AdminLayout({ children }: { children: React.ReactNode }) {
  const { userId } = await auth();
  if (!userId) redirect("/sign-in");
 
  // [P1 Fix]: Fetch role from Clerk publicMetadata
  const user = await currentUser();
  const role = (user?.publicMetadata?.role as "ADMIN" | "STAFF") ?? "STAFF";
 
  return (
    <div className="flex min-h-screen bg-[#1a1a1a]">
      <Sidebar role={role} />
      <main className="flex-1 p-6 overflow-auto">{children}</main>
    </div>
  );
}

// apps/frontend/components/admin/sidebar.tsx
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useTranslations } from "next-intl";
import { IconSymbol } from "~/components/ui/iconSymbol";
 
const navItems = [
  { href: "/admin", labelKey: "dashboard", icon: "chart.bar.fill", roles: ["ADMIN"] },
  { href: "/admin/shows", labelKey: "shows", icon: "theatermasks.fill", roles: ["ADMIN"] },
  { href: "/admin/occurrences", labelKey: "calendar", icon: "calendar", roles: ["ADMIN", "STAFF"] },
  { href: "/admin/reservations", labelKey: "reservations", icon: "ticket.fill", roles: ["ADMIN", "STAFF"] },
  { href: "/admin/addons", labelKey: "addons", icon: "plus.circle.fill", roles: ["ADMIN"] },
  { href: "/admin/analytics", labelKey: "analytics", icon: "chart.line.uptrend.xyaxis", roles: ["ADMIN"] },
];
 
export function Sidebar({ role }: { role: "ADMIN" | "STAFF" }) {
  const pathname = usePathname();
  const t = useTranslations("admin.nav");
  const visible = navItems.filter((item) => item.roles.includes(role));
 
  return (
    <aside className="w-64 bg-[#1a1a1a] border-r border-[#333333] p-4">
      <h1 className="text-[#C5A059] font-serif text-xl mb-8">
        {t("holAdmin")}
      </h1>
      <nav className="space-y-1">
        {visible.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            className={`flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-[#C5A059]/10 ${
              pathname === item.href ? "text-[#C5A059] bg-[#C5A059]/10" : "text-[#808080]"
            }`}
          >
            <IconSymbol name={item.icon} size={18} className="shrink-0" />
            <span>{t(item.labelKey)}</span>
          </Link>
        ))}
      </nav>
    </aside>
  );
}

git add apps/frontend/app/admin/layout.tsx apps/frontend/components/admin/sidebar.tsx
git commit -m "feat(admin): add admin layout with auth and sidebar"

// apps/frontend/app/admin/page.tsx
"use client";
import { useQuery } from "convex/react";
import { api } from "~/convex/_generated/api";
import { MetricCard } from "~/components/admin/metric-card";
import { AtRiskList } from "~/components/admin/at-risk-list";
import { RecentReservations } from "~/components/admin/recent-reservations";
import { useTranslations } from "next-intl";
import { Suspense } from "react";
 
export default function AdminDashboard() {
  const t = useTranslations("admin.dashboard");
 
  const occupancyRate = useQuery(api.analytics.averageOccupancyLast30Days, {});
  const revenueData = useQuery(api.analytics.revenueLast30Days, {});
  const avgCartValue = useQuery(api.analytics.averageCartValue, {});
  const topShows = useQuery(api.analytics.topShowsByRevenue, { limit: 3 });
  const atRiskOccurrences = useQuery(api.analytics.atRiskOccurrences, { daysOut: 7 });
  const recentReservations = useQuery(api.reservations.listPaginated, {
    occurrenceId: undefined,
    paymentStatus: undefined,
    emailSearch: undefined,
    cursor: undefined,
    limit: 10,
  });
  const upsellRate = useQuery(api.analytics.upsellRate, {});
 
  return (
    <div className="space-y-8">
      <h1 className="text-3xl font-serif text-[#C5A059]">{t("title")}</h1>
 
      {/* Metric cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <MetricCard
          title={t("avgOccupancy")}
          value={`${occupancyRate ?? 0}%`}
          trend="up"
          icon="chart.pie.fill"
        />
        <MetricCard
          title={t("revenue30d")}
          value={`${((revenueData ?? 0) / 1_000_000).toFixed(1)}M`}
          trend="up"
          icon="dollarsign.circle.fill"
        />
        <MetricCard
          title={t("avgCartValue")}
          value={`${avgCartValue ?? 0} VND`}
          trend="neutral"
          icon="cart.fill"
        />
        <MetricCard
          title={t("upsellRate")}
          value={`${upsellRate ?? 0}%`}
          trend="up"
          icon="arrow.up.circle.fill"
        />
      </div>
 
      {/* At-risk occurrences */}
      <Suspense fallback={<div className="h-48 bg-[#1a1a1a] animate-pulse rounded-lg" />}>
        <AtRiskList occurrences={atRiskOccurrences ?? []} />
      </Suspense>
 
      {/* Recent reservations */}
      <Suspense fallback={<div className="h-48 bg-[#1a1a1a] animate-pulse rounded-lg" />}>
        <RecentReservations reservations={recentReservations?.reservations ?? []} />
      </Suspense>
    </div>
  );
}

// apps/frontend/components/admin/metric-card.tsx
"use client";
import { useTranslations } from "next-intl";
import { IconSymbol } from "~/components/ui/iconSymbol";
 
interface MetricCardProps {
  title: string;
  value: string | number;
  trend?: "up" | "down" | "neutral";
  icon: string;
}
 
export function MetricCard({ title, value, trend = "neutral", icon }: MetricCardProps) {
  const trendColor = {
    up: "text-green-400",
    down: "text-red-400",
    neutral: "text-[#808080]",
  };
 
  return (
    <div className="bg-[#1a1a1a] border border-[#333333] p-4 rounded-lg">
      <div className="flex items-center justify-between mb-2">
        <p className="text-sm text-[#808080]">{title}</p>
        <IconSymbol name={icon} size={20} className="text-[#C5A059]" />
      </div>
      <p className="text-3xl font-serif text-[#e6e6e6] mt-1">{value}</p>
      {trend !== "neutral" && (
        <p className={`text-xs mt-1 ${trendColor[trend]}`}>
          {trend === "up" ? "Up" : "Down"}
        </p>
      )}
    </div>
  );
}

// apps/frontend/components/admin/at-risk-list.tsx
"use client";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { IconSymbol } from "~/components/ui/iconSymbol";
 
interface AtRiskOccurrence {
  _id: string;
  showTitle: string;
  date: string;
  occupancyPercent: number;
}
 
interface AtRiskListProps {
  occurrences: AtRiskOccurrence[];
}
 
export function AtRiskList({ occurrences }: AtRiskListProps) {
  const t = useTranslations("admin.dashboard");
 
  return (
    <section>
      <h2 className="text-xl font-serif text-[#C5A059] mb-4">{t("atRiskShows")}</h2>
      <div className="bg-[#1a1a1a] border border-[#333333] rounded-lg overflow-hidden">
        {occurrences.length === 0 ? (
          <p className="p-4 text-[#808080] flex items-center gap-2">
            <IconSymbol name="checkmark.circle.fill" size={16} className="text-green-400" />
            {t("allHealthy")}
          </p>
        ) : (
          <table className="w-full">
            <thead className="border-b border-[#333333]">
              <tr className="text-left text-sm text-[#808080]">
                <th className="p-3">{t("show")}</th>
                <th className="p-3">{t("date")}</th>
                <th className="p-3">{t("occupancy")}</th>
                <th className="p-3">{t("action")}</th>
              </tr>
            </thead>
            <tbody>
              {occurrences.map((occ) => (
                <tr key={occ._id} className="border-b border-[#333333]">
                  <td className="p-3">{occ.showTitle}</td>
                  <td className="p-3">{occ.date}</td>
                  <td className="p-3 text-red-400">{occ.occupancyPercent}%</td>
                  <td className="p-3">
                    <Link
                      href={`/admin/occurrences?selectedId=${occ._id}`}
                      className="text-[#C5A059] underline flex items-center gap-1"
                    >
                      <IconSymbol name="pencil" size={14} />
                      {t("edit")}
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </section>
  );
}

// apps/frontend/components/admin/recent-reservations.tsx
"use client";
import { useTranslations } from "next-intl";
import { IconSymbol } from "~/components/ui/iconSymbol";
 
interface RecentReservation {
  _id: string;
  customerFirstName: string;
  customerLastName: string;
  showTitle: string;
  paymentStatus: string;
  totalAmount: number;
}
 
interface RecentReservationsProps {
  reservations: RecentReservation[];
}
 
export function RecentReservations({ reservations }: RecentReservationsProps) {
  const t = useTranslations("admin.dashboard");
 
  return (
    <section>
      <h2 className="text-xl font-serif text-[#C5A059] mb-4">{t("recentReservations")}</h2>
      <div className="bg-[#1a1a1a] border border-[#333333] rounded-lg overflow-hidden">
        <table className="w-full text-sm">
          <thead className="border-b border-[#333333]">
            <tr className="text-left text-[#808080]">
              <th className="p-3">{t("id")}</th>
              <th className="p-3">{t("customer")}</th>
              <th className="p-3">{t("show")}</th>
              <th className="p-3">{t("status")}</th>
              <th className="p-3">{t("total")}</th>
            </tr>
          </thead>
          <tbody>
            {reservations.map((res) => (
              <tr key={res._id} className="border-b border-[#333333]">
                <td className="p-3 font-mono text-xs">{res._id.slice(0, 8)}</td>
                <td className="p-3">
                  {res.customerFirstName} {res.customerLastName}
                </td>
                <td className="p-3">{res.showTitle}</td>
                <td className="p-3">
                  <span
                    className={`px-2 py-1 rounded text-xs flex items-center gap-1 w-fit ${
                      res.paymentStatus === "PAID"
                        ? "bg-green-900 text-green-400"
                        : res.paymentStatus === "PENDING"
                        ? "bg-yellow-900 text-yellow-400"
                        : "bg-red-900 text-red-400"
                    }`}
                  >
                    <IconSymbol
                      name={
                        res.paymentStatus === "PAID"
                          ? "checkmark.circle.fill"
                          : res.paymentStatus === "PENDING"
                          ? "clock.fill"
                          : "xmark.circle.fill"
                      }
                      size={12}
                    />
                    {t(`status.${res.paymentStatus.toLowerCase()}`)}
                  </span>
                </td>
                <td className="p-3">{res.totalAmount.toLocaleString()} VND</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

// convex/functions/analytics.ts
import { query } from "../_generated/server";
import { v } from "convex/values";
import { consola } from "consola";
 
export const averageOccupancyLast30Days = query({
  args: {},
  handler: async (ctx) => {
    const thirtyDaysAgo = new Date();
    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
    const cutoff = thirtyDaysAgo.toISOString().split("T")[0];
 
    // [P1 PERFORMANCE FIX]: Use by_date index to filter before collect()
    const occurrences = await ctx.db
      .query("showOccurrences")
      .withIndex("by_date")
      .collect();
 
    const filtered = occurrences.filter((o) => o.date >= cutoff);
    if (filtered.length === 0) return 0;
 
    const totalOccupancy = filtered.reduce(
      (sum, occ) => sum + (occ.bookedCount / occ.actualCapacity) * 100,
      0,
    );
 
    return Math.round(totalOccupancy / filtered.length);
  },
});
 
export const revenueLast30Days = query({
  args: {},
  handler: async (ctx) => {
    const thirtyDaysAgo = new Date();
    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
    const cutoff = thirtyDaysAgo.getTime();
 
    // [P1 PERFORMANCE FIX]: Use by_paymentStatus index
    const reservations = await ctx.db
      .query("reservations")
      .withIndex("by_paymentStatus")
      .collect();
 
    return reservations
      .filter((r) => r.paymentStatus === "PAID" && r.createdAt >= cutoff)
      .reduce((sum, r) => sum + r.totalAmount, 0);
  },
});
 
export const topShowsByRevenue = query({
  args: { limit: v.optional(v.number()) },
  handler: async (ctx, { limit = 5 }) => {
    // [P1 PERFORMANCE FIX]: Use by_paymentStatus index
    const reservations = await ctx.db
      .query("reservations")
      .withIndex("by_paymentStatus")
      .collect();
 
    const paid = reservations.filter((r) => r.paymentStatus === "PAID");
 
    const byShow: Record<string, number> = {};
    for (const res of paid) {
      byShow[res.showTitle] = (byShow[res.showTitle] ?? 0) + res.totalAmount;
    }
 
    return Object.entries(byShow)
      .sort(([, a], [, b]) => b - a)
      .slice(0, limit)
      .map(([showTitle, revenue]) => ({ showTitle, revenue }));
  },
});
 
export const atRiskOccurrences = query({
  args: { daysOut: v.number() },
  handler: async (ctx, { daysOut }) => {
    const futureDate = new Date();
    futureDate.setDate(futureDate.getDate() + daysOut);
    const cutoff = futureDate.toISOString().split("T")[0];
 
    // [P1 PERFORMANCE FIX]: Use by_date index
    const occurrences = await ctx.db
      .query("showOccurrences")
      .withIndex("by_date")
      .collect();
 
    const futureAndScheduled = occurrences.filter(
      (o) => o.date <= cutoff && o.status === "SCHEDULED",
    );
 
    return futureAndScheduled
      .filter((occ) => occ.bookedCount / occ.actualCapacity < 0.3)
      .slice(0, 10)
      .map((occ) => ({
        _id: occ._id,
        showTitle: occ.showTitle ?? "Unknown Show",
        date: occ.date,
        occupancyPercent: Math.round(
          (occ.bookedCount / occ.actualCapacity) * 100,
        ),
      }));
  },
});
 
export const upsellRate = query({
  args: {},
  handler: async (ctx) => {
    const thirtyDaysAgo = new Date();
    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
    const cutoff = thirtyDaysAgo.getTime();
 
    // [P1 PERFORMANCE FIX]: Use by_paymentStatus index
    const reservations = await ctx.db
      .query("reservations")
      .withIndex("by_paymentStatus")
      .collect();
 
    const paid = reservations.filter(
      (r) => r.paymentStatus === "PAID" && r.createdAt >= cutoff,
    );
 
    if (paid.length === 0) return 0;
    const withAddons = paid.filter((r) => (r.addons?.length ?? 0) > 0);
    return Math.round((withAddons.length / paid.length) * 100);
  },
});
 
export const averageCartValue = query({
  args: {},
  handler: async (ctx) => {
    const thirtyDaysAgo = new Date();
    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
    const cutoff = thirtyDaysAgo.getTime();
 
    // [P1 PERFORMANCE FIX]: Use by_paymentStatus index
    const reservations = await ctx.db
      .query("reservations")
      .withIndex("by_paymentStatus")
      .collect();
 
    const paid = reservations.filter(
      (r) => r.paymentStatus === "PAID" && r.createdAt >= cutoff,
    );
 
    if (paid.length === 0) return 0;
    const total = paid.reduce((sum, r) => sum + r.totalAmount, 0);
    return Math.round(total / paid.length);
  },
});

// showOccurrences — add to existing table definition
.index("by_date", ["date"])
 
// reservations — add to existing table definition
.index("by_paymentStatus", ["paymentStatus"])

export const listAll = query({
  args: {},
  handler: async (ctx) => {
    return await ctx.db.query("showTemplates").collect();
  },
});

// apps/frontend/app/admin/shows/page.tsx
"use client";
import { useQueryState } from "nuqs"; // [P0 Fix]: Use nuqs, not [id] segments
import { useQuery } from "convex/react";
import { api } from "~/convex/_generated/api";
import { useTranslations } from "next-intl";
import { IconSymbol } from "~/components/ui/iconSymbol";
 
export default function AdminShowsPage() {
  const t = useTranslations("admin.shows");
  const shows = useQuery(api.shows.listAll);
  const [selectedId, setSelectedId] = useQueryState("selectedId", { defaultValue: "" });
 
  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-3xl font-serif text-[#C5A059]">{t("title")}</h1>
        <button
          onClick={() => setSelectedId("new")}
          className="px-4 py-2 bg-[#C5A059] text-black font-bold rounded-lg flex items-center gap-2"
        >
          <IconSymbol name="plus" size={16} />
          {t("createShow")}
        </button>
      </div>
 
      <div className="bg-[#1a1a1a] border border-[#333333] rounded-lg overflow-hidden">
        <table className="w-full">
          <thead className="border-b border-[#333333] bg-[#808080]/10">
            <tr className="text-left text-sm text-[#808080]">
              <th className="p-3">{t("col.title")}</th>
              <th className="p-3">{t("col.slug")}</th>
              <th className="p-3">{t("col.status")}</th>
              <th className="p-3">{t("col.price")}</th>
              <th className="p-3">{t("col.actions")}</th>
            </tr>
          </thead>
          <tbody>
            {shows?.map((show) => (
              <tr key={show._id} className="border-b border-[#333333]">
                <td className="p-3 font-medium text-[#e6e6e6]">{show.title}</td>
                <td className="p-3 text-[#808080]">{show.slug}</td>
                <td className="p-3">
                  <span className={`px-2 py-1 rounded text-xs ${
                    show.status === "ACTIVE"
                      ? "bg-green-900 text-green-400"
                      : show.status === "DRAFT"
                      ? "bg-yellow-900 text-yellow-400"
                      : "bg-[#333333] text-[#808080]"
                  }`}>{show.status}</span>
                </td>
                <td className="p-3 text-[#808080]">{show.defaultDinnerPrice.toLocaleString()} VND</td>
                <td className="p-3">
                  <button
                    onClick={() => setSelectedId(show._id)}
                    className="text-[#C5A059] underline flex items-center gap-1"
                  >
                    <IconSymbol name="pencil" size={14} />
                    {t("edit")}
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
 
      {selectedId && (
        <ShowForm
          showId={selectedId === "new" ? undefined : selectedId}
          onClose={() => setSelectedId("")}
        />
      )}
    </div>
  );
}

// apps/frontend/components/admin/show-form.tsx
"use client";
import { useTransition } from "react";
import { useMutation } from "convex/react";
import { api } from "~/convex/_generated/api";
import { useTranslations } from "next-intl";
import { showTemplateSchema } from "~/lib/schemas/admin-show"; // [P0 Fix]: Zod validation
import { IconSymbol } from "~/components/ui/iconSymbol";
 
interface ShowFormProps {
  showId?: string;
  onClose: () => void;
}
 
export function ShowForm({ showId, onClose }: ShowFormProps) {
  const t = useTranslations("admin.shows.form");
  const [isPending, startTransition] = useTransition();
  const createShow = useMutation(api.shows.create);
  const updateShow = useMutation(api.shows.update);
 
  const handleSubmit = async (data: unknown) => {
    // [P0 Fix]: Zod parse instead of as any
    const parsed = showTemplateSchema.safeParse(data);
    if (!parsed.success) {
      throw new Error("Validation failed");
    }
    startTransition(async () => {
      if (showId) {
        await updateShow({ id: showId, ...parsed.data });
      } else {
        await createShow(parsed.data);
      }
      onClose();
    });
  };
 
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-[#1a1a1a] border border-[#333333] p-6 rounded-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-serif text-[#e6e6e6]">
            {showId ? t("editTitle") : t("createTitle")}
          </h2>
          <button onClick={onClose} className="text-[#808080] hover:text-[#e6e6e6]">
            <IconSymbol name="xmark" size={20} />
          </button>
        </div>
        {/* Form fields */}
      </div>
    </div>
  );
}

// convex/functions/occurrences.ts — ADD generateBatch mutation
export const generateBatch = mutation({
  args: {
    templateId: v.id("showTemplates"), // [P1 Fix]: Use v.id()
    daysOfWeek: v.array(v.number()), // 0=Sun, 1=Mon, ... 6=Sat
    time: v.string(), // "19:30"
    startDate: v.string(), // "2026-05-01"
    endDate: v.string(), // "2026-06-30"
    actualCapacity: v.optional(v.number()),
    dinnerPriceOverride: v.optional(v.number()),
    showOnlyPriceOverride: v.optional(v.number()),
    showOnlyEnabled: v.boolean(),
  },
  handler: async (ctx, args) => {
    const template = await ctx.db.get(args.templateId);
    if (!template) throw new AppError("OCC_NOT_FOUND", "Template not found");
 
    const defaultCapacity = args.actualCapacity ?? template.defaultCapacity;
    const generated = [];
 
    const current = new Date(args.startDate);
    const end = new Date(args.endDate);
 
    while (current <= end) {
      const dayOfWeek = current.getDay();
      if (args.daysOfWeek.includes(dayOfWeek)) {
        const dateStr = current.toISOString().split("T")[0];
        const id = await ctx.db.insert("showOccurrences", {
          templateId: args.templateId,
          date: dateStr,
          time: args.time,
          actualCapacity: defaultCapacity,
          dinnerPriceOverride: args.dinnerPriceOverride,
          showOnlyPriceOverride: args.showOnlyPriceOverride,
          showOnlyEnabled: args.showOnlyEnabled,
          status: "SCHEDULED",
          bookedCount: 0,
          createdAt: Date.now(),
          updatedAt: Date.now(),
        });
        generated.push(id);
      }
      current.setDate(current.getDate() + 1);
    }
 
    return { count: generated.length, ids: generated };
  },
});

// apps/frontend/components/admin/calendar-grid.tsx
"use client";
import { useTranslations } from "next-intl";
import { IconSymbol } from "~/components/ui/iconSymbol";
 
type CalendarOccurrence = {
  _id: string;
  showTitle: string;
  bookedCount: number;
  actualCapacity: number;
  status: "SCHEDULED" | "CANCELLED" | "SOLD_OUT";
};
 
type CalendarDay = {
  date: string; // "2026-05-01"
  occurrences: CalendarOccurrence[];
  fillPercent: number;
  colorClass: "green" | "orange" | "red" | "gray";
};
 
interface CalendarGridProps {
  days: CalendarDay[];
  onDayClick: (date: string) => void;
}
 
export function CalendarGrid({ days, onDayClick }: CalendarGridProps) {
  const t = useTranslations("admin.calendar");
  const colorMap = {
    green: "bg-green-500",
    orange: "bg-orange-500",
    red: "bg-red-500",
    gray: "bg-[#808080]",
  };
 
  return (
    <div className="grid grid-cols-7 gap-1">
      {/* Day headers */}
      {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((d) => (
        <div key={d} className="text-center text-xs text-[#808080] p-2">
          {t(`days.${d.toLowerCase()}`)}
        </div>
      ))}
      {/* Day cells */}
      {days.map((day) => (
        <button
          key={day.date}
          onClick={() => onDayClick(day.date)}
          className="min-h-[80px] border border-[#333333] rounded p-1 text-left hover:bg-[#1a1a1a] transition-colors"
        >
          <span className="text-xs text-[#808080]">{day.date.split("-")[2]}</span>
          <div className="mt-1 space-y-1">
            {day.occurrences.slice(0, 3).map((occ) => (
              <div
                key={occ._id}
                className={`text-xs px-1 rounded text-white truncate flex items-center gap-1 ${colorMap[day.colorClass]}`}
              >
                <IconSymbol name="ticket.fill" size={10} />
                {occ.showTitle}
              </div>
            ))}
            {day.occurrences.length > 3 && (
              <div className="text-xs text-[#808080]">+{day.occurrences.length - 3}</div>
            )}
          </div>
        </button>
      ))}
    </div>
  );
}

// convex/functions/reservations.ts
export const listPaginated = query({
  args: {
    occurrenceId: v.optional(v.id("showOccurrences")),
    paymentStatus: v.optional(v.string()),
    emailSearch: v.optional(v.string()),
    cursor: v.optional(v.id("reservations")),
    limit: v.number(),
  },
  handler: async (ctx, args) => {
    let results = await ctx.db.query("reservations").collect();
 
    if (args.occurrenceId) {
      results = results.filter((r) => r.occurrenceId === args.occurrenceId);
    }
    if (args.paymentStatus) {
      results = results.filter((r) => r.paymentStatus === args.paymentStatus);
    }
    if (args.emailSearch) {
      results = results.filter((r) =>
        r.customerEmail.toLowerCase().includes(args.emailSearch!.toLowerCase()),
      );
    }
 
    results.sort((a, b) => b.createdAt - a.createdAt);
 
    // Paginate
    const startIndex = args.cursor
      ? results.findIndex((r) => r._id === args.cursor) + 1
      : 0;
    const page = results.slice(startIndex, startIndex + args.limit);
 
    return {
      reservations: page,
      nextCursor: page.length === args.limit ? page[page.length - 1]._id : null,
    };
  },
});

// apps/frontend/app/admin/reservations/page.tsx
"use client";
import { useQueryState } from "nuqs"; // [P0 Fix]: Use nuqs
import { useQuery } from "convex/react";
import { api } from "~/convex/_generated/api";
import { useTranslations } from "next-intl";
import { useTransition } from "react";
import { IconSymbol } from "~/components/ui/iconSymbol";
 
export default function AdminReservationsPage() {
  const t = useTranslations("admin.reservations");
  const [isPending, startTransition] = useTransition();
 
  const [date, setDate] = useQueryState("date", { defaultValue: "" });
  const [status, setStatus] = useQueryState("status", { defaultValue: "" });
  const [search, setSearch] = useQueryState("search", { defaultValue: "" });
 
  const { reservations, nextCursor } = useQuery(
    api.reservations.listPaginated,
    {
      occurrenceId: undefined,
      paymentStatus: status || undefined,
      emailSearch: search || undefined,
      cursor: undefined,
      limit: 20,
    }
  ) ?? { reservations: [], nextCursor: undefined };
 
  return (
    <div>
      {/* Filters */}
      <div className="flex gap-4 mb-6 flex-wrap">
        <input
          type="date"
          value={date}
          onChange={(e) => startTransition(() => setDate(e.target.value))}
          className="bg-[#1a1a1a] border border-[#333333] rounded-lg px-3 py-2 text-[#e6e6e6]"
        />
        <select
          value={status}
          onChange={(e) => startTransition(() => setStatus(e.target.value))}
          className="bg-[#1a1a1a] border border-[#333333] rounded-lg px-3 py-2 text-[#e6e6e6]"
        >
          <option value="">{t("allStatuses")}</option>
          <option value="PENDING">{t("status.pending")}</option>
          <option value="PAID">{t("status.paid")}</option>
          <option value="CANCELLED">{t("status.cancelled")}</option>
          <option value="REFUNDED">{t("status.refunded")}</option>
        </select>
        <input
          type="search"
          placeholder={t("searchPlaceholder")}
          value={search}
          onChange={(e) => startTransition(() => setSearch(e.target.value))}
          className="bg-[#1a1a1a] border border-[#333333] rounded-lg px-3 py-2 text-[#e6e6e6] flex-1"
        />
      </div>
 
      {/* Table */}
      <ReservationTable reservations={reservations} />
 
      {/* Pagination */}
      {nextCursor && (
        <div className="mt-4 text-center">
          <button
            onClick={() => setDate(date)}
            className="px-4 py-2 border border-[#333333] rounded-lg text-[#e6e6e6] flex items-center gap-2 mx-auto"
          >
            <IconSymbol name="arrow.down" size={16} />
            {t("loadMore")}
          </button>
        </div>
      )}
    </div>
  );
}

// convex/functions/addons.ts
export const create = mutation({
  args: {
    name: v.string(),
    description: v.string(),
    price: v.number(),
    imageUrl: v.optional(v.string()),
    type: v.union(
      v.literal("COCKTAIL"),
      v.literal("FOOD"),
      v.literal("UPGRADE"),
      v.literal("OTHER"),
    ),
    enabled: v.boolean(),
  },
  handler: async (ctx, args) => {
    return await ctx.db.insert("addOns", {
      ...args,
      createdAt: Date.now(),
      updatedAt: Date.now(),
    });
  },
});
 
export const update = mutation({
  args: {
    id: v.id("addOns"),
    name: v.optional(v.string()),
    description: v.optional(v.string()),
    price: v.optional(v.number()),
    imageUrl: v.optional(v.string()),
    type: v.optional(
      v.union(
        v.literal("COCKTAIL"),
        v.literal("FOOD"),
        v.literal("UPGRADE"),
        v.literal("OTHER"),
      ),
    ),
    enabled: v.optional(v.boolean()),
  },
  handler: async (ctx, args) => {
    const { id, ...updates } = args;
    await ctx.db.patch(id, { ...updates, updatedAt: Date.now() });
    return id;
  },
});

// convex/functions/d1-automation.ts
// [P0 GAP: staffMutation not yet implemented — use mutation() with inline auth]
import { mutation } from "../_generated/server";
import { v } from "convex/values";
import { AppError, ERRORS } from "~/convex/lib/errors";
import { consola } from "consola";
 
// Run daily at midnight — use Convex scheduler.define (not mutation)
export const runD1Automation = mutation({
  args: {},
  handler: async (ctx) => {
    // [P0 GAP]: Add staffMutation check when available from foundation-plan
    const identity = await ctx.auth.getUserIdentity();
    if (!identity) {
      throw new AppError(ERRORS.UNAUTHORIZED, "Authentication required");
    }
    const role = identity.publicMetadata?.role;
    if (role !== "ADMIN" && role !== "STAFF") {
      throw new AppError(ERRORS.STAFF_ACCESS_REQUIRED, "Staff access required");
    }
 
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    const tomorrowStr = tomorrow.toISOString().split("T")[0];
 
    const occurrences = await ctx.db
      .query("showOccurrences")
      .withIndex("by_date")
      .collect();
 
    const tomorrowOccs = occurrences.filter((o) => o.date === tomorrowStr);
 
    for (const occ of tomorrowOccs) {
      if (occ.status !== "SCHEDULED") continue;
 
      const occupancyRate = occ.bookedCount / occ.actualCapacity;
      const template = await ctx.db.get(occ.templateId);
 
      // If < 50% AND show-only not enabled AND show-only price exists
      if (
        occupancyRate < 0.5 &&
        !occ.showOnlyEnabled &&
        (occ.showOnlyPriceOverride ?? template?.defaultShowOnlyPrice)
      ) {
        await ctx.db.patch(occ._id, {
          showOnlyEnabled: true,
          updatedAt: Date.now(),
        });
 
        await sendLowOccupancyAlert(
          occ,
          template?.title ?? "Unknown Show",
          occupancyRate,
        );
      }
    }
 
    return { processed: tomorrowOccs.length };
  },
});
 
async function sendLowOccupancyAlert(
  occurrence: {
    date: string;
    time: string;
    bookedCount: number;
    actualCapacity: number;
  },
  showTitle: string,
  occupancyRate: number,
) {
  // [P0 GAP]: WhatsApp Business API not yet integrated
  // Actual WhatsApp integration in notifications-crm plan
  consola.info("Low occupancy alert queued", {
    showTitle,
    date: occurrence.date,
    occupancyRate: Math.round(occupancyRate * 100),
  });
}

// lib/schemas/admin.ts
import { z } from "zod";
 
export const generateBatchSchema = z.object({
  templateId: z.string(),
  daysOfWeek: z.array(z.number().int().min(0).max(6)),
  time: z.string().regex(/^\d{2}:\d{2}$/),
  startDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
  endDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
  actualCapacity: z.number().int().positive().max(32).optional(),
  dinnerPriceOverride: z.number().int().nonnegative().optional(),
  showOnlyPriceOverride: z.number().int().nonnegative().optional(),
  showOnlyEnabled: z.boolean(),
});
 
export const addonCrudSchema = z.object({
  id: z.string().optional(),
  name: z.string().min(1).max(200),
  description: z.string().max(500).optional(),
  price: z.number().int().nonnegative(),
  imageUrl: z.string().url().optional(),
  type: z.enum(["COCKTAIL", "FOOD", "UPGRADE", "OTHER"]),
  enabled: z.boolean(),
});
 
export const occurrenceOverrideSchema = z.object({
  actualCapacity: z.number().int().positive().max(32).optional(),
  dinnerPriceOverride: z.number().int().nonnegative().optional(),
  showOnlyPriceOverride: z.number().int().nonnegative().optional(),
  showOnlyEnabled: z.boolean().optional(),
  status: z.enum(["SCHEDULED", "CANCELLED", "SOLD_OUT"]).optional(),
});

// convex/lib/errors.ts (shared error codes)
export const ERRORS = {
  UNAUTHORIZED: "AUTH_001",
  STAFF_ACCESS_REQUIRED: "AUTH_002",
  ADMIN_ACCESS_REQUIRED: "AUTH_003",
  OCC_NOT_FOUND: "OCC_001",
  OCC_BATCH_EMPTY: "OCC_002",
  OCC_BATCH_TOO_LARGE: "OCC_003",
  RES_NOT_FOUND: "RES_001",
  RES_ALREADY_CANCELLED: "RES_002",
  ADDON_NOT_FOUND: "ADD_001",
  SHOW_NOT_FOUND: "SHOW_001",
} as const;
 
type AdminError = keyof typeof ERRORS;
 
// Usage in mutations:
if (!template)
  throw new AppError(ERRORS.OCC_NOT_FOUND, `Show template not found`);
if (occurrences.length === 0)
  throw new AppError(ERRORS.OCC_BATCH_EMPTY, "No occurrences provided");
if (occurrences.length > 100)
  throw new AppError(
    ERRORS.OCC_BATCH_TOO_LARGE,
    "Cannot create more than 100 occurrences at once",
  );

// apps/frontend/app/admin/page.tsx — CLIENT COMPONENT
"use client";
// Real-time: auto-updates when Convex data changes
const occupancyRate = useQuery(api.analytics.averageOccupancyLast30Days, {});
const atRiskOccurrences = useQuery(api.analytics.atRiskOccurrences, {
  daysOut: 7,
});
const recentReservations = useQuery(api.reservations.listPaginated, {
  occurrenceId: undefined,
  paymentStatus: undefined,
  emailSearch: undefined,
  cursor: undefined,
  limit: 10,
});

// In server component — direct call, no subscription
const show = await api.shows.getById({ id });