feat(campaigns): add cover image and mission stats to campaign cards

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

src/app/(frontend)/intelligence/campaigns/page.tsx

@@ -1,8 +1,8 @@
 import config from "@payload-config";
 import { getPayload } from "payload";
-import type { Campaign } from "@/payload-types";
 import { ShieldIcon } from "lucide-react";
 import { CampaignCard } from "@/components/frontend/intelligence/CampaignCard";
+import type { Media } from "@/payload-types";
 
 export const metadata = {
   title: "Campaigns — Polaris Task Force",
@@ -15,9 +15,10 @@ export default async function CampaignsPage() {
     collection: "campaigns",
     sort: "-createdAt",
     limit: 100,
+    depth: 1,
   });
 
-  const campaigns = campaignsRes.docs as Campaign[];
+  const campaigns = campaignsRes.docs;
 
   const statusOrder: Record<string, number> = {
     inProgress: 0,
@@ -25,8 +26,47 @@ export default async function CampaignsPage() {
     completed: 2,
   };
   const sorted = [...campaigns].sort(
-    (a, b) =>
+    (a, b) => (statusOrder[a.status] ?? 99) - (statusOrder[b.status] ?? 99),
-      (statusOrder[a.status] ?? 99) - (statusOrder[b.status] ?? 99),
+  );
+
+  const campaignsWithStats = await Promise.all(
+    sorted.map(async (campaign) => {
+      const missionsRes = await payload.find({
+        collection: "missions",
+        where: { "classification.campaign": { equals: campaign.id } },
+        depth: 0,
+        limit: 100,
+        select: {
+          missionRoles: true,
+          classification: true,
+          ownershipAndStatus: true,
+        },
+      });
+
+      const missionCount = missionsRes.docs.length;
+      const totalPlayers = missionsRes.docs.reduce(
+        (total, mission) => total + mission.missionRoles.maxPlayers,
+        0,
+      );
+      const totalDurationMinutes = missionsRes.docs.reduce(
+        (total, mission) => total + mission.classification.estimatedDuration,
+        0,
+      );
+
+      const coverImage: Media | null =
+        typeof campaign.coverImage === "object" && campaign.coverImage !== null
+          ? campaign.coverImage
+          : null;
+      const coverImageUrl = coverImage?.url ?? null;
+
+      return {
+        ...campaign,
+        coverImageUrl,
+        missionCount,
+        avgPlayers: missionCount === 0 ? 0 : totalPlayers / missionCount,
+        avgDurationMinutes: missionCount === 0 ? 0 : totalDurationMinutes / missionCount,
+      };
+    }),
   );
 
   return (
@@ -37,14 +77,14 @@ export default async function CampaignsPage() {
           <h1 className="text-lg font-semibold">Campaigns</h1>
         </div>
         <p className="text-sm text-muted-foreground">
-          {campaigns.length} campaign{campaigns.length !== 1 ? "s" : ""}{" "}
+          {campaigns.length} campaign{campaigns.length !== 1 ? "s" : ""} across all theaters of
-          across all theaters of operation.
+          operation.
         </p>
       </div>
 
       {sorted.length > 0 ? (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-          {sorted.map((campaign) => (
+          {campaignsWithStats.map((campaign) => (
             <CampaignCard key={campaign.id} campaign={campaign} />
           ))}
         </div>

src/collections/intelligence/Campaigns.ts

@@ -58,5 +58,14 @@ export const Campaigns: CollectionConfig = {
       name: "endDate",
       type: "date",
     },
+    {
+      name: "coverImage",
+      type: "upload",
+      relationTo: "media",
+      admin: {
+        description:
+          "Background image for the campaign selector card on the campaigns page. Renders translucent with hover effects. Recommended aspect ratio: 16:9 or square.",
+      },
+    },
   ],
 };

src/components/frontend/intelligence/CampaignCard.tsx

@@ -1,98 +1,120 @@
 "use client";
 
 import Link from "next/link";
-import {
+import type { Campaign } from "@/payload-types";
-  Item,
+import { cn } from "@/lib/utils";
-  ItemContent,
+import { ClockIcon, CrosshairIcon, UsersIcon } from "lucide-react";
-  ItemDescription,
-  ItemHeader,
-  ItemMedia,
-  ItemTitle,
-} from "@/components/ui/item";
-import {
-  CalendarDaysIcon,
-  ChevronRightIcon,
-  FlagIcon,
-} from "lucide-react";
 
-interface CampaignCardProps {
+interface CampaignCardCampaign
-  campaign: {
+  extends Pick<Campaign, "id" | "name" | "summary" | "status" | "startDate" | "endDate"> {
-    id: number;
+  readonly coverImageUrl: string | null;
-    name: string;
+  readonly missionCount: number;
-    summary: string;
+  readonly avgPlayers: number;
-    status: "concept" | "inProgress" | "completed";
+  readonly avgDurationMinutes: number;
-    startDate?: string | null;
-    endDate?: string | null;
-  };
 }
 
-const statusColors: Record<string, string> = {
+type CampaignCardInput = CampaignCardCampaign | Campaign;
+
+interface CampaignCardProps {
+  readonly campaign: CampaignCardInput;
+}
+
+const statusColors: Record<Campaign["status"], string> = {
   concept: "bg-muted text-muted-foreground",
   inProgress: "bg-blue-500/20 text-blue-400",
-  completed: "bg-green-500/20 text-green-400",
+  completed: "bg-emerald-500/20 text-emerald-400",
 };
 
-const statusLabels: Record<string, string> = {
+const statusLabels: Record<Campaign["status"], string> = {
   concept: "Concept",
   inProgress: "In Progress",
   completed: "Completed",
 };
 
 export function CampaignCard({ campaign }: CampaignCardProps) {
-  const startDate = campaign.startDate
+  const coverImageUrl =
-    ? new Date(campaign.startDate).toLocaleDateString("en-US", {
+    "coverImageUrl" in campaign
-        month: "short",
+      ? campaign.coverImageUrl
-        day: "numeric",
+      : typeof campaign.coverImage === "object" && campaign.coverImage !== null
-        year: "numeric",
+        ? (campaign.coverImage.url ?? null)
-      })
+        : null;
-    : null;
+  const missionCount = "missionCount" in campaign ? campaign.missionCount : 0;
-  const endDate = campaign.endDate
+  const avgPlayers = "avgPlayers" in campaign ? campaign.avgPlayers : 0;
-    ? new Date(campaign.endDate).toLocaleDateString("en-US", {
+  const avgDurationMinutes = "avgDurationMinutes" in campaign ? campaign.avgDurationMinutes : 0;
-        month: "short",
+
-        day: "numeric",
+  const roundedDuration = Math.round(avgDurationMinutes);
-        year: "numeric",
+  const durationHours = Math.floor(roundedDuration / 60);
-      })
+  const durationMinutes = roundedDuration % 60;
-    : null;
+  const durationLabel =
+    roundedDuration >= 60 ? `${durationHours}h ${durationMinutes}m` : `${roundedDuration}m`;
+  const playersLabel = Number.isInteger(avgPlayers) ? avgPlayers.toString() : avgPlayers.toFixed(1);
 
   return (
-    <Link href={`/intelligence/campaigns/${campaign.id}`}>
+    <Link
-      <Item
+      href={`/intelligence/campaigns/${campaign.id}`}
-        variant="outline"
+      aria-label={`Open campaign ${campaign.name}`}
-        className="cursor-pointer group transition-all duration-200 hover:scale-[1.01] hover:[box-shadow:inset_0_2px_8px_rgba(255,255,255,0.33)]"
+      className="block rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-      >
+    >
-        <ItemHeader>
+      <article className="group relative aspect-[4/3] overflow-hidden rounded-lg border border-border/70 bg-card transition-colors duration-300 group-hover:border-foreground/30">
-          <div className="flex items-center gap-2">
+        <div className="absolute inset-0 scale-100 transition-transform duration-500 ease-out group-hover:scale-110 motion-reduce:transition-none motion-reduce:group-hover:scale-100">
-            <ItemMedia variant="icon">
+          {coverImageUrl !== null ? (
-              <FlagIcon />
+            <img
-            </ItemMedia>
+              src={coverImageUrl}
-            <ItemTitle>{campaign.name}</ItemTitle>
+              alt=""
-          </div>
+              aria-hidden="true"
-          <span
+              className="absolute inset-0 size-full object-cover opacity-30 transition-opacity duration-500 ease-out group-hover:opacity-50 motion-reduce:transition-none"
-            className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${statusColors[campaign.status] ?? "bg-muted text-muted-foreground"}`}
+            />
-          >
+          ) : (
-            {statusLabels[campaign.status] ?? campaign.status}
+            <div
-          </span>
+              aria-hidden="true"
-        </ItemHeader>
+              className="absolute inset-0 bg-gradient-to-br from-muted to-muted/50 opacity-30 transition-opacity duration-500 ease-out group-hover:opacity-50 motion-reduce:transition-none"
-        <ItemContent>
+            />
-          <div className="flex flex-col gap-3 w-full">
+          )}
-            <p className="text-sm text-muted-foreground line-clamp-2">
+        </div>
-              {campaign.summary}
+
-            </p>
+        <div
-            {(startDate || endDate) && (
+          aria-hidden="true"
-              <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"
-                <CalendarDaysIcon className="size-3" />
+        />
-                {startDate && <span>{startDate}</span>}
+
-                {startDate && endDate && <span>—</span>}
+        <span
-                {endDate && <span>{endDate}</span>}
+          className={cn(
-              </div>
+            "absolute right-3 top-3 z-10 rounded-full px-2 py-1 text-[10px] font-semibold uppercase tracking-wider",
-            )}
+            statusColors[campaign.status],
-          </div>
+          )}
-        </ItemContent>
+        >
-        <ItemDescription>{campaign.summary}</ItemDescription>
+          {statusLabels[campaign.status]}
-        <span className="text-xs text-muted-foreground group-hover:text-primary transition-colors flex items-center gap-1">
-          View details <ChevronRightIcon className="size-3" />
         </span>
-      </Item>
+
+        <div className="absolute inset-0 z-10 flex items-center justify-center px-6 pb-6 text-center">
+          <div className="flex max-w-full flex-col items-center gap-2">
+            <h2 className="text-balance text-center text-xl font-bold text-white drop-shadow-lg">
+              {campaign.name}
+            </h2>
+            <p className="text-sm uppercase tracking-wider text-white/70 drop-shadow">
+              {statusLabels[campaign.status]}
+            </p>
+          </div>
+        </div>
+
+        <footer className="absolute inset-x-0 bottom-0 z-20 flex translate-y-4 items-center bg-black/60 px-2 py-2.5 opacity-0 backdrop-blur-sm transition-all duration-300 ease-out group-hover:translate-y-0 group-hover:opacity-100 motion-reduce:transition-none">
+          <div className="flex min-w-0 flex-1 items-center justify-center gap-1.5 border-r border-white/15 text-xs text-white/80">
+            <CrosshairIcon aria-hidden="true" className="size-3.5 shrink-0 text-white/60" />
+            <span className="sr-only">Missions</span>
+            <span className="truncate">{missionCount}</span>
+          </div>
+          <div className="flex min-w-0 flex-1 items-center justify-center gap-1.5 border-r border-white/15 text-xs text-white/80">
+            <UsersIcon aria-hidden="true" className="size-3.5 shrink-0 text-white/60" />
+            <span className="sr-only">Avg players</span>
+            <span className="truncate">{playersLabel}</span>
+          </div>
+          <div className="flex min-w-0 flex-1 items-center justify-center gap-1.5 text-xs text-white/80">
+            <ClockIcon aria-hidden="true" className="size-3.5 shrink-0 text-white/60" />
+            <span className="sr-only">Avg duration</span>
+            <span className="truncate">{durationLabel}</span>
+          </div>
+        </footer>
+      </article>
     </Link>
   );
 }