Z8MB1E
0fa6d9abb5
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
346 lines
13 KiB
TypeScript
346 lines
13 KiB
TypeScript
import config from "@payload-config";
|
|
import { getPayload } from "payload";
|
|
import { notFound } from "next/navigation";
|
|
import Link from "next/link";
|
|
import { headers as nextHeaders } from "next/headers";
|
|
import type { Faction, Media, Mission } from "@/payload-types";
|
|
import { RichText } from "@payloadcms/richtext-lexical/react";
|
|
import { ClientDate } from "@/components/frontend/ClientDate";
|
|
import {
|
|
ArrowLeftIcon,
|
|
CalendarDaysIcon,
|
|
ChevronRightIcon,
|
|
ShieldIcon,
|
|
TargetIcon,
|
|
UsersIcon,
|
|
} from "lucide-react";
|
|
import { Item, ItemContent, ItemDescription, ItemHeader, ItemTitle } from "@/components/ui/item";
|
|
import { MissionCard } from "@/components/frontend/intelligence/MissionCard";
|
|
import { statusColors as missionStatusColors } from "@/lib/intelligence/missionColors";
|
|
|
|
interface CampaignDetailPageProps {
|
|
params: Promise<{ id: string }>;
|
|
}
|
|
|
|
const statusColors: Record<string, string> = {
|
|
concept: "bg-muted text-muted-foreground",
|
|
inProgress: "bg-blue-500/20 text-blue-400",
|
|
completed: "bg-emerald-500/20 text-emerald-400",
|
|
};
|
|
|
|
const factionTypeColors: Record<string, string> = {
|
|
majorFaction: "bg-blue-500/20 text-blue-400",
|
|
minorFaction: "bg-muted text-muted-foreground",
|
|
corporation: "bg-amber-500/20 text-amber-400",
|
|
special: "bg-purple-500/20 text-purple-400",
|
|
};
|
|
|
|
export default async function CampaignDetailPage({ params }: CampaignDetailPageProps) {
|
|
const { id } = await params;
|
|
const payload = await getPayload({ config });
|
|
const { user } = await payload.auth({
|
|
headers: await nextHeaders(),
|
|
canSetHeaders: false,
|
|
});
|
|
|
|
const campaign = await payload
|
|
.findByID({
|
|
collection: "campaigns",
|
|
id: Number(id),
|
|
depth: 1,
|
|
select: {
|
|
id: true,
|
|
name: true,
|
|
summary: true,
|
|
status: true,
|
|
startDate: true,
|
|
endDate: true,
|
|
owner: true,
|
|
coverImage: true,
|
|
description: true,
|
|
},
|
|
})
|
|
.catch(() => null);
|
|
|
|
const owner = campaign?.owner;
|
|
const ownerName =
|
|
owner && typeof owner === "object" && "displayName" in owner
|
|
? owner.displayName
|
|
: "Unknown";
|
|
|
|
if (!campaign) {
|
|
notFound();
|
|
}
|
|
|
|
const coverImage =
|
|
typeof campaign.coverImage === "object" && campaign.coverImage !== null
|
|
? (campaign.coverImage as Media)
|
|
: null;
|
|
const coverImageUrl = coverImage?.url ?? null;
|
|
|
|
const [missionsRes, factionsRes] = await Promise.all([
|
|
payload
|
|
.find({
|
|
collection: "missions",
|
|
where: { "classification.campaign": { equals: campaign.id } },
|
|
sort: "-classification.startDateTime",
|
|
limit: 100,
|
|
depth: 1,
|
|
user,
|
|
overrideAccess: false,
|
|
select: {
|
|
name: true,
|
|
codeName: true,
|
|
summary: true,
|
|
operationType: true,
|
|
classification: true,
|
|
ownershipAndStatus: true,
|
|
missionRoles: true,
|
|
coverImage: true,
|
|
},
|
|
})
|
|
.catch(() => ({ docs: [] })),
|
|
payload.find({
|
|
collection: "factions",
|
|
where: { associatedCampaigns: { equals: campaign.id } },
|
|
limit: 100,
|
|
depth: 0,
|
|
select: { name: true, type: true, description: true },
|
|
}),
|
|
]);
|
|
|
|
const missions = missionsRes.docs as Mission[];
|
|
const factions = factionsRes.docs as Faction[];
|
|
|
|
// Mission status breakdown
|
|
const statusCounts: Record<string, number> = {};
|
|
for (const m of missions) {
|
|
const s = m.ownershipAndStatus.status;
|
|
statusCounts[s] = (statusCounts[s] ?? 0) + 1;
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col">
|
|
<header className="relative min-h-[500px] w-full overflow-hidden bg-background">
|
|
<div className="absolute top-0 left-0 px-5 pt-5 pb-3 z-10">
|
|
<Link
|
|
href="/intelligence/campaigns"
|
|
className="flex w-fit items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-primary"
|
|
>
|
|
<ArrowLeftIcon className="size-3" />
|
|
Back to Campaigns
|
|
</Link>
|
|
</div>
|
|
{coverImageUrl ? (
|
|
<img
|
|
src={coverImageUrl}
|
|
alt=""
|
|
fetchPriority="high"
|
|
className="absolute inset-0 size-full object-cover opacity-70"
|
|
/>
|
|
) : (
|
|
<div className="absolute inset-0 bg-gradient-to-b from-muted/40 to-background" />
|
|
)}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/40 to-background" />
|
|
<div className="absolute inset-0 bg-gradient-to-r from-black/30 via-transparent to-black/40" />
|
|
|
|
<div className="absolute top-4 right-4 z-20 flex gap-2">
|
|
<span
|
|
className={`rounded-md border border-white/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider backdrop-blur-sm ${statusColors[campaign.status] ?? "bg-muted text-muted-foreground"}`}
|
|
>
|
|
{campaign.status === "inProgress"
|
|
? "In Progress"
|
|
: campaign.status.charAt(0).toUpperCase() + campaign.status.slice(1)}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center p-6 md:p-10 lg:p-12 text-center">
|
|
<h1
|
|
id="campaign-title"
|
|
className="text-5xl font-bold tracking-tight text-white drop-shadow-2xl md:text-6xl"
|
|
>
|
|
{campaign.name}
|
|
</h1>
|
|
<p className="mt-3 max-w-3xl text-lg leading-relaxed text-white/80">{campaign.summary}</p>
|
|
{(campaign.startDate || campaign.endDate) && (
|
|
<div className="mt-6 flex items-center gap-2 text-sm text-white/70">
|
|
<CalendarDaysIcon className="size-4 text-white/60" />
|
|
{campaign.startDate && (
|
|
<span>
|
|
<ClientDate
|
|
date={campaign.startDate}
|
|
options={{ year: "numeric", month: "short", day: "numeric" }}
|
|
/>
|
|
</span>
|
|
)}
|
|
{campaign.startDate && campaign.endDate && <span>-</span>}
|
|
{campaign.endDate ? (
|
|
<span>
|
|
<ClientDate
|
|
date={campaign.endDate}
|
|
options={{ year: "numeric", month: "short", day: "numeric" }}
|
|
/>
|
|
</span>
|
|
) : campaign.startDate ? (
|
|
<span>Present</span>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
|
|
<div className="p-5 flex flex-col gap-6 max-w-7xl mx-auto w-full">
|
|
<div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
|
|
{/* ── Main Content (2/3) ──────────────────────────── */}
|
|
<div className="xl:col-span-2 flex flex-col gap-6">
|
|
{campaign.description && (
|
|
<Item variant="outline">
|
|
<ItemHeader>
|
|
<ItemTitle>Description</ItemTitle>
|
|
</ItemHeader>
|
|
<ItemContent className="prose-invert prose-sm max-w-none [&_p]:mb-2 [&_ul]:list-disc [&_ul]:ml-4 [&_ol]:list-decimal [&_ol]:ml-4 [&_strong]:text-foreground [&_em]:italic">
|
|
<RichText data={campaign.description} />
|
|
</ItemContent>
|
|
</Item>
|
|
)}
|
|
|
|
<section className="flex flex-col gap-3">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
|
|
Missions
|
|
</h2>
|
|
<span className="text-xs text-muted-foreground">
|
|
{missions.length} mission{missions.length !== 1 ? "s" : ""}
|
|
</span>
|
|
</div>
|
|
{missions.length > 0 ? (
|
|
<div className="flex flex-col gap-2">
|
|
{missions.map((mission) => (
|
|
<MissionCard
|
|
key={mission.id}
|
|
mission={mission}
|
|
variant="image"
|
|
showFullDetails={false}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Item variant="muted">
|
|
<ItemContent>
|
|
<p className="text-sm text-muted-foreground italic">
|
|
No missions in this campaign yet.
|
|
</p>
|
|
</ItemContent>
|
|
</Item>
|
|
)}
|
|
</section>
|
|
</div>
|
|
|
|
{/* ── Right Sidebar (1/3) ─────────────────────────── */}
|
|
<div className="flex flex-col gap-4">
|
|
{/* Campaign Stats */}
|
|
<Item variant="outline">
|
|
<ItemHeader>
|
|
<div className="flex items-center gap-2">
|
|
<TargetIcon className="size-4 text-muted-foreground" />
|
|
<ItemTitle>Campaign Stats</ItemTitle>
|
|
</div>
|
|
</ItemHeader>
|
|
<ItemContent>
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">Total Missions</span>
|
|
<span className="font-semibold">{missions.length}</span>
|
|
</div>
|
|
{Object.entries(statusCounts).map(([status, count]) => (
|
|
<div key={status} className="flex justify-between text-sm">
|
|
<span className="flex items-center gap-1.5">
|
|
<span
|
|
className={`size-2 rounded-full ${missionStatusColors[status]?.split(" ")[0] ?? "bg-muted"}`}
|
|
/>
|
|
<span className="text-muted-foreground">{status}</span>
|
|
</span>
|
|
<span className="font-mono">{count}</span>
|
|
</div>
|
|
))}
|
|
<div className="flex justify-between text-sm pt-1 border-t border-border/50">
|
|
<span className="text-muted-foreground">Duration</span>
|
|
<span>
|
|
{campaign.startDate && (
|
|
<ClientDate
|
|
date={campaign.startDate}
|
|
options={{ year: "numeric", month: "short", day: "numeric" }}
|
|
/>
|
|
)}
|
|
{campaign.endDate ? (
|
|
<>
|
|
{" - "}
|
|
<ClientDate
|
|
date={campaign.endDate}
|
|
options={{ year: "numeric", month: "short", day: "numeric" }}
|
|
/>
|
|
</>
|
|
) : (
|
|
" - Present"
|
|
)}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm pt-1 border-t border-border/50">
|
|
<span className="text-muted-foreground">Owner</span>
|
|
<span className="font-medium">{ownerName}</span>
|
|
</div>
|
|
</div>
|
|
</ItemContent>
|
|
</Item>
|
|
|
|
{/* Faction Roster */}
|
|
{factions.length > 0 && (
|
|
<Item variant="outline">
|
|
<ItemHeader>
|
|
<div className="flex items-center gap-2">
|
|
<UsersIcon className="size-4 text-muted-foreground" />
|
|
<ItemTitle>Faction Roster</ItemTitle>
|
|
</div>
|
|
<Link
|
|
href="/intelligence/factions"
|
|
className="text-xs text-muted-foreground hover:text-primary transition-colors"
|
|
>
|
|
View all
|
|
</Link>
|
|
</ItemHeader>
|
|
<ItemContent>
|
|
<div className="flex flex-col gap-2">
|
|
{factions.map((faction) => (
|
|
<Link
|
|
key={faction.id}
|
|
href="/intelligence/factions"
|
|
className="flex items-center gap-3 p-1.5 rounded-md hover:bg-muted/50 transition-colors group"
|
|
>
|
|
<ShieldIcon className="size-4 text-muted-foreground shrink-0" />
|
|
<div className="flex flex-col gap-0.5 min-w-0 flex-1">
|
|
<span className="text-sm font-medium truncate group-hover:text-primary transition-colors">
|
|
{faction.name}
|
|
</span>
|
|
<span
|
|
className={`text-[10px] font-semibold uppercase tracking-wider px-1 py-0.5 rounded w-fit ${factionTypeColors[faction.type] ?? "bg-muted text-muted-foreground"}`}
|
|
>
|
|
{faction.type === "majorFaction"
|
|
? "Major"
|
|
: faction.type === "minorFaction"
|
|
? "Minor"
|
|
: faction.type}
|
|
</span>
|
|
</div>
|
|
<ChevronRightIcon className="size-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</ItemContent>
|
|
</Item>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|