feat(missions): add cover image and redesign mission detail page with hero header
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
parent
cce00861c2
commit
dcf8a03dea
2 changed files with 286 additions and 241 deletions
|
|
@ -11,6 +11,7 @@ import type {
|
||||||
Faction,
|
Faction,
|
||||||
Qualification,
|
Qualification,
|
||||||
Rank,
|
Rank,
|
||||||
|
Media,
|
||||||
} from "@/payload-types";
|
} from "@/payload-types";
|
||||||
import {
|
import {
|
||||||
ArrowLeftIcon,
|
ArrowLeftIcon,
|
||||||
|
|
@ -31,7 +32,6 @@ import {
|
||||||
ItemMedia,
|
ItemMedia,
|
||||||
ItemTitle,
|
ItemTitle,
|
||||||
} from "@/components/ui/item";
|
} from "@/components/ui/item";
|
||||||
import { MissionHeader } from "@/components/frontend/intelligence/MissionHeader";
|
|
||||||
import { MissionBriefingSection } from "@/components/frontend/intelligence/MissionBriefingSection";
|
import { MissionBriefingSection } from "@/components/frontend/intelligence/MissionBriefingSection";
|
||||||
import { MissionObjectives } from "@/components/frontend/intelligence/MissionObjectives";
|
import { MissionObjectives } from "@/components/frontend/intelligence/MissionObjectives";
|
||||||
import { MissionFactions } from "@/components/frontend/intelligence/MissionFactions";
|
import { MissionFactions } from "@/components/frontend/intelligence/MissionFactions";
|
||||||
|
|
@ -50,6 +50,10 @@ interface MissionDetailPageProps {
|
||||||
params: Promise<{ id: string }>;
|
params: Promise<{ id: string }>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type MissionWithCoverImage = Mission & {
|
||||||
|
coverImage?: number | null | Media;
|
||||||
|
};
|
||||||
|
|
||||||
const statusColors: Record<string, string> = {
|
const statusColors: Record<string, string> = {
|
||||||
Concept: "bg-muted text-muted-foreground",
|
Concept: "bg-muted text-muted-foreground",
|
||||||
Planning: "bg-muted text-muted-foreground",
|
Planning: "bg-muted text-muted-foreground",
|
||||||
|
|
@ -60,9 +64,19 @@ const statusColors: Record<string, string> = {
|
||||||
Cancelled: "bg-red-500/20 text-red-400",
|
Cancelled: "bg-red-500/20 text-red-400",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default async function MissionDetailPage({
|
const operationTypeColors: Record<string, string> = {
|
||||||
params,
|
main: "bg-primary/20 text-primary",
|
||||||
}: MissionDetailPageProps) {
|
side: "bg-muted text-muted-foreground",
|
||||||
|
external: "bg-purple-500/20 text-purple-400",
|
||||||
|
};
|
||||||
|
|
||||||
|
const operationTypeLabels: Record<string, string> = {
|
||||||
|
main: "Main Operation",
|
||||||
|
side: "Side Operation",
|
||||||
|
external: "External Operation",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default async function MissionDetailPage({ params }: MissionDetailPageProps) {
|
||||||
const { id } = await params;
|
const { id } = await params;
|
||||||
const payload = await getPayload({ config });
|
const payload = await getPayload({ config });
|
||||||
|
|
||||||
|
|
@ -79,13 +93,18 @@ export default async function MissionDetailPage({
|
||||||
}
|
}
|
||||||
|
|
||||||
const map =
|
const map =
|
||||||
typeof mission.classification.map === "object"
|
typeof mission.classification.map === "object" ? (mission.classification.map as Map) : null;
|
||||||
? (mission.classification.map as Map)
|
|
||||||
: null;
|
|
||||||
const campaign =
|
const campaign =
|
||||||
typeof mission.classification.campaign === "object"
|
typeof mission.classification.campaign === "object"
|
||||||
? (mission.classification.campaign as Campaign)
|
? (mission.classification.campaign as Campaign)
|
||||||
: null;
|
: null;
|
||||||
|
const missionWithCoverImage = mission as MissionWithCoverImage;
|
||||||
|
const coverImage =
|
||||||
|
typeof missionWithCoverImage.coverImage === "object" &&
|
||||||
|
missionWithCoverImage.coverImage !== null
|
||||||
|
? (missionWithCoverImage.coverImage as Media)
|
||||||
|
: null;
|
||||||
|
const coverImageUrl = coverImage?.url ?? null;
|
||||||
|
|
||||||
const startDate = new Date(mission.classification.startDateTime);
|
const startDate = new Date(mission.classification.startDateTime);
|
||||||
const dateStr = startDate.toLocaleDateString("en-US", {
|
const dateStr = startDate.toLocaleDateString("en-US", {
|
||||||
|
|
@ -98,14 +117,9 @@ export default async function MissionDetailPage({
|
||||||
hour: "2-digit",
|
hour: "2-digit",
|
||||||
minute: "2-digit",
|
minute: "2-digit",
|
||||||
});
|
});
|
||||||
const durationHours = Math.floor(
|
const durationHours = Math.floor(mission.classification.estimatedDuration / 60);
|
||||||
mission.classification.estimatedDuration / 60,
|
|
||||||
);
|
|
||||||
const durationMins = mission.classification.estimatedDuration % 60;
|
const durationMins = mission.classification.estimatedDuration % 60;
|
||||||
const durationStr =
|
const durationStr = durationMins > 0 ? `${durationHours}h ${durationMins}m` : `${durationHours}h`;
|
||||||
durationMins > 0
|
|
||||||
? `${durationHours}h ${durationMins}m`
|
|
||||||
: `${durationHours}h`;
|
|
||||||
|
|
||||||
// Fetch sibling missions in the same campaign
|
// Fetch sibling missions in the same campaign
|
||||||
const campaignId =
|
const campaignId =
|
||||||
|
|
@ -160,244 +174,265 @@ export default async function MissionDetailPage({
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-5 flex flex-col gap-6 max-w-7xl">
|
<div className="flex flex-col">
|
||||||
<Link
|
<header className="relative min-h-[500px] w-full overflow-hidden bg-background">
|
||||||
href="/intelligence/missions"
|
<div className="absolute top-0 left-0 px-5 pt-5 pb-3 z-10">
|
||||||
className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center gap-1 w-fit"
|
<Link
|
||||||
>
|
href="/intelligence/missions"
|
||||||
<ArrowLeftIcon className="size-3" />
|
className="flex w-fit items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-primary"
|
||||||
Back to Missions
|
>
|
||||||
</Link>
|
<ArrowLeftIcon className="size-3" />
|
||||||
|
Back to Missions
|
||||||
|
</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" />
|
||||||
|
|
||||||
<MissionHeader
|
<div className="absolute top-4 right-4 z-20 flex gap-2">
|
||||||
name={mission.name}
|
<span
|
||||||
codeName={mission.codeName}
|
className={`rounded-md border border-white/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider backdrop-blur-sm ${statusColors[mission.ownershipAndStatus.status] ?? "bg-muted text-muted-foreground"}`}
|
||||||
operationType={mission.operationType}
|
>
|
||||||
status={mission.ownershipAndStatus.status}
|
{mission.ownershipAndStatus.status}
|
||||||
/>
|
</span>
|
||||||
|
<span
|
||||||
|
className={`rounded-md border border-white/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider backdrop-blur-sm ${operationTypeColors[mission.operationType] ?? "bg-muted text-muted-foreground"}`}
|
||||||
|
>
|
||||||
|
{operationTypeLabels[mission.operationType] ?? mission.operationType}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
|
<div className="absolute inset-0 flex flex-col justify-end p-6 md:p-10 lg:p-12">
|
||||||
{/* ── Main Content (2/3) ──────────────────────────── */}
|
<div className="mx-auto flex w-full max-w-7xl flex-col">
|
||||||
<div className="xl:col-span-2 flex flex-col gap-6">
|
<div className="flex items-center gap-2 font-mono text-sm uppercase tracking-widest text-white/60">
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
<CrosshairIcon className="size-4" />
|
||||||
<Item variant="muted" size="sm">
|
<span>{mission.codeName}</span>
|
||||||
<ItemMedia variant="icon">
|
</div>
|
||||||
<CalendarDaysIcon />
|
<h1
|
||||||
</ItemMedia>
|
id="mission-title"
|
||||||
|
className="mt-3 text-5xl font-bold tracking-tight text-white drop-shadow-2xl md:text-6xl"
|
||||||
|
>
|
||||||
|
{mission.name}
|
||||||
|
</h1>
|
||||||
|
<p className="mt-2 max-w-3xl text-lg leading-relaxed text-white/80">
|
||||||
|
{mission.summary}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-6 flex flex-wrap gap-3">
|
||||||
|
<div className="flex items-center gap-2 px-3 py-2">
|
||||||
|
<CalendarDaysIcon className="size-4 text-white/60" />
|
||||||
|
<span className="flex flex-col">
|
||||||
|
<span className="text-[10px] font-semibold uppercase tracking-wider text-white/50">
|
||||||
|
Date
|
||||||
|
</span>
|
||||||
|
<span className="text-sm text-white">{dateStr}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 px-3 py-2">
|
||||||
|
<ClockIcon className="size-4 text-white/60" />
|
||||||
|
<span className="flex flex-col">
|
||||||
|
<span className="text-[10px] font-semibold uppercase tracking-wider text-white/50">
|
||||||
|
Time
|
||||||
|
</span>
|
||||||
|
<span className="text-sm text-white">
|
||||||
|
{timeStr} · {durationStr}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{map && (
|
||||||
|
<div className="flex items-center gap-2 px-3 py-2">
|
||||||
|
<MapPinIcon className="size-4 text-white/60" />
|
||||||
|
<span className="flex flex-col">
|
||||||
|
<span className="text-[10px] font-semibold uppercase tracking-wider text-white/50">
|
||||||
|
Map
|
||||||
|
</span>
|
||||||
|
<span className="text-sm text-white">{map.name}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{campaign && (
|
||||||
|
<Link
|
||||||
|
href={`/intelligence/campaigns/${campaign.id}`}
|
||||||
|
className="flex items-center gap-2 px-3 py-2 transition-colors hover:border-white/30"
|
||||||
|
>
|
||||||
|
<FlagIcon className="size-4 text-white/60" />
|
||||||
|
<span className="flex flex-col">
|
||||||
|
<span className="text-[10px] font-semibold uppercase tracking-wider text-white/50">
|
||||||
|
Campaign
|
||||||
|
</span>
|
||||||
|
<span className="max-w-56 truncate text-sm text-white">{campaign.name}</span>
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<Item variant="outline">
|
||||||
|
<ItemHeader>
|
||||||
|
<ItemTitle>Mission Details</ItemTitle>
|
||||||
|
</ItemHeader>
|
||||||
<ItemContent>
|
<ItemContent>
|
||||||
<ItemTitle>Date</ItemTitle>
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-3 text-sm">
|
||||||
<ItemDescription>{dateStr}</ItemDescription>
|
<div>
|
||||||
|
<span className="text-muted-foreground">Type</span>
|
||||||
|
<p className="font-medium">{mission.classification.missionType}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-muted-foreground">Operation Type</span>
|
||||||
|
<p className="font-medium capitalize">{mission.operationType}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-muted-foreground">Max Players</span>
|
||||||
|
<p className="font-medium">{mission.missionRoles?.maxPlayers ?? "—"}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</ItemContent>
|
</ItemContent>
|
||||||
</Item>
|
</Item>
|
||||||
<Item variant="muted" size="sm">
|
|
||||||
<ItemMedia variant="icon">
|
<MissionBriefingSection briefing={mission.briefing ?? null} />
|
||||||
<ClockIcon />
|
|
||||||
</ItemMedia>
|
<MissionObjectives objectives={mission.missionObjectives ?? null} />
|
||||||
<ItemContent>
|
|
||||||
<ItemTitle>Time & Duration</ItemTitle>
|
<MissionFactions factionsInvolved={mission.factionsInvolved ?? null} />
|
||||||
<ItemDescription>
|
|
||||||
{timeStr} · {durationStr}
|
<MissionRoles
|
||||||
</ItemDescription>
|
roles={mission.missionRoles?.providedRoles ?? null}
|
||||||
</ItemContent>
|
notes={mission.missionRoles?.notes ?? null}
|
||||||
</Item>
|
maxPlayers={mission.missionRoles?.maxPlayers ?? 32}
|
||||||
{map && (
|
/>
|
||||||
<Item variant="muted" size="sm">
|
|
||||||
<ItemMedia variant="icon">
|
<MissionLogistics logisticsAndSupport={mission.logisticsAndSupport ?? null} />
|
||||||
<MapPinIcon />
|
|
||||||
</ItemMedia>
|
<MissionComms commsAndDocs={mission.commsAndDocs ?? null} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Right Sidebar (1/3) ─────────────────────────── */}
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<MissionAttendance
|
||||||
|
missionId={mission.id}
|
||||||
|
currentUserId={currentUser ? (currentUser.id as number) : null}
|
||||||
|
currentResponse={currentResponse}
|
||||||
|
attendanceClosed={attendanceClosed}
|
||||||
|
{...attendanceProps}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Campaign Card */}
|
||||||
|
{campaign && (
|
||||||
|
<Item variant="outline">
|
||||||
|
<ItemHeader>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<FlagIcon className="size-4 text-muted-foreground" />
|
||||||
|
<ItemTitle>Campaign</ItemTitle>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
href={`/intelligence/campaigns/${campaign.id}`}
|
||||||
|
className="text-xs text-muted-foreground hover:text-primary transition-colors"
|
||||||
|
>
|
||||||
|
View
|
||||||
|
</Link>
|
||||||
|
</ItemHeader>
|
||||||
<ItemContent>
|
<ItemContent>
|
||||||
<ItemTitle>Map</ItemTitle>
|
<div className="flex flex-col gap-2">
|
||||||
<ItemDescription>{map.name}</ItemDescription>
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold">{campaign.name}</h3>
|
||||||
|
<span
|
||||||
|
className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded mt-1 inline-block ${campaign.status === "inProgress" ? "bg-blue-500/20 text-blue-400" : "bg-muted text-muted-foreground"}`}
|
||||||
|
>
|
||||||
|
{campaign.status === "inProgress" ? "In Progress" : campaign.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground line-clamp-3">{campaign.summary}</p>
|
||||||
|
</div>
|
||||||
</ItemContent>
|
</ItemContent>
|
||||||
</Item>
|
</Item>
|
||||||
)}
|
)}
|
||||||
{campaign && (
|
|
||||||
<Link href={`/intelligence/campaigns/${campaign.id}`}>
|
{/* Sibling Missions */}
|
||||||
<Item
|
{siblingMissions.length > 0 && (
|
||||||
variant="muted"
|
<Item variant="outline">
|
||||||
size="sm"
|
<ItemHeader>
|
||||||
className="cursor-pointer hover:border-primary/50 transition-colors"
|
<div className="flex items-center gap-2">
|
||||||
>
|
<CrosshairIcon className="size-4 text-muted-foreground" />
|
||||||
<ItemMedia variant="icon">
|
<ItemTitle>Other Missions in Campaign</ItemTitle>
|
||||||
<CrosshairIcon />
|
</div>
|
||||||
</ItemMedia>
|
</ItemHeader>
|
||||||
<ItemContent>
|
<ItemContent>
|
||||||
<ItemTitle>Campaign</ItemTitle>
|
<div className="flex flex-col gap-1.5">
|
||||||
<ItemDescription>{campaign.name}</ItemDescription>
|
{siblingMissions.map((m) => {
|
||||||
</ItemContent>
|
const mDate = new Date(m.classification.startDateTime);
|
||||||
</Item>
|
return (
|
||||||
</Link>
|
<Link
|
||||||
|
key={m.id}
|
||||||
|
href={`/intelligence/missions/${m.id}`}
|
||||||
|
className="flex items-center gap-3 p-1.5 rounded-md hover:bg-muted/50 transition-colors group"
|
||||||
|
>
|
||||||
|
<div className="flex flex-col min-w-0 flex-1">
|
||||||
|
<span className="font-mono text-[10px] text-muted-foreground">
|
||||||
|
{m.codeName}
|
||||||
|
</span>
|
||||||
|
<span className="text-sm truncate group-hover:text-primary transition-colors">
|
||||||
|
{m.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 shrink-0">
|
||||||
|
<span
|
||||||
|
className={`text-[10px] font-semibold uppercase tracking-wider px-1 py-0.5 rounded ${statusColors[m.ownershipAndStatus.status] ?? "bg-muted text-muted-foreground"}`}
|
||||||
|
>
|
||||||
|
{m.ownershipAndStatus.status}
|
||||||
|
</span>
|
||||||
|
<ChevronRightIcon className="size-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Server Details */}
|
||||||
|
{mission.gameDetails?.serverDetails?.serverIp && (
|
||||||
|
<Item variant="outline">
|
||||||
|
<ItemHeader>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<ServerIcon className="size-4 text-muted-foreground" />
|
||||||
|
<ItemTitle>Server</ItemTitle>
|
||||||
|
</div>
|
||||||
|
</ItemHeader>
|
||||||
|
<ItemContent>
|
||||||
|
<div className="flex flex-col gap-1.5 text-sm">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-muted-foreground">Address</span>
|
||||||
|
<span className="font-mono">
|
||||||
|
{mission.gameDetails.serverDetails.serverIp}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-muted-foreground">Port</span>
|
||||||
|
<span className="font-mono">
|
||||||
|
{mission.gameDetails.serverDetails.serverPort}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p className="text-sm text-muted-foreground">{mission.summary}</p>
|
|
||||||
|
|
||||||
<Item variant="outline">
|
|
||||||
<ItemHeader>
|
|
||||||
<ItemTitle>Mission Details</ItemTitle>
|
|
||||||
</ItemHeader>
|
|
||||||
<ItemContent>
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3 text-sm">
|
|
||||||
<div>
|
|
||||||
<span className="text-muted-foreground">Type</span>
|
|
||||||
<p className="font-medium">
|
|
||||||
{mission.classification.missionType}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-muted-foreground">Operation Type</span>
|
|
||||||
<p className="font-medium capitalize">
|
|
||||||
{mission.operationType}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-muted-foreground">Max Players</span>
|
|
||||||
<p className="font-medium">
|
|
||||||
{mission.missionRoles?.maxPlayers ?? "—"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ItemContent>
|
|
||||||
</Item>
|
|
||||||
|
|
||||||
<MissionBriefingSection briefing={mission.briefing ?? null} />
|
|
||||||
|
|
||||||
<MissionObjectives objectives={mission.missionObjectives ?? null} />
|
|
||||||
|
|
||||||
<MissionFactions
|
|
||||||
factionsInvolved={mission.factionsInvolved ?? null}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<MissionRoles
|
|
||||||
roles={mission.missionRoles?.providedRoles ?? null}
|
|
||||||
notes={mission.missionRoles?.notes ?? null}
|
|
||||||
maxPlayers={mission.missionRoles?.maxPlayers ?? 32}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<MissionLogistics
|
|
||||||
logisticsAndSupport={mission.logisticsAndSupport ?? null}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<MissionComms commsAndDocs={mission.commsAndDocs ?? null} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Right Sidebar (1/3) ─────────────────────────── */}
|
|
||||||
<div className="flex flex-col gap-4">
|
|
||||||
<MissionAttendance
|
|
||||||
missionId={mission.id}
|
|
||||||
currentUserId={currentUser ? (currentUser.id as number) : null}
|
|
||||||
currentResponse={currentResponse}
|
|
||||||
attendanceClosed={attendanceClosed}
|
|
||||||
{...attendanceProps}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Campaign Card */}
|
|
||||||
{campaign && (
|
|
||||||
<Item variant="outline">
|
|
||||||
<ItemHeader>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<FlagIcon className="size-4 text-muted-foreground" />
|
|
||||||
<ItemTitle>Campaign</ItemTitle>
|
|
||||||
</div>
|
|
||||||
<Link
|
|
||||||
href={`/intelligence/campaigns/${campaign.id}`}
|
|
||||||
className="text-xs text-muted-foreground hover:text-primary transition-colors"
|
|
||||||
>
|
|
||||||
View
|
|
||||||
</Link>
|
|
||||||
</ItemHeader>
|
|
||||||
<ItemContent>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<div>
|
|
||||||
<h3 className="text-sm font-semibold">{campaign.name}</h3>
|
|
||||||
<span
|
|
||||||
className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded mt-1 inline-block ${campaign.status === "inProgress" ? "bg-blue-500/20 text-blue-400" : "bg-muted text-muted-foreground"}`}
|
|
||||||
>
|
|
||||||
{campaign.status === "inProgress"
|
|
||||||
? "In Progress"
|
|
||||||
: campaign.status}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-muted-foreground line-clamp-3">
|
|
||||||
{campaign.summary}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</ItemContent>
|
|
||||||
</Item>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Sibling Missions */}
|
|
||||||
{siblingMissions.length > 0 && (
|
|
||||||
<Item variant="outline">
|
|
||||||
<ItemHeader>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<CrosshairIcon className="size-4 text-muted-foreground" />
|
|
||||||
<ItemTitle>Other Missions in Campaign</ItemTitle>
|
|
||||||
</div>
|
|
||||||
</ItemHeader>
|
|
||||||
<ItemContent>
|
|
||||||
<div className="flex flex-col gap-1.5">
|
|
||||||
{siblingMissions.map((m) => {
|
|
||||||
const mDate = new Date(
|
|
||||||
m.classification.startDateTime,
|
|
||||||
);
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
key={m.id}
|
|
||||||
href={`/intelligence/missions/${m.id}`}
|
|
||||||
className="flex items-center gap-3 p-1.5 rounded-md hover:bg-muted/50 transition-colors group"
|
|
||||||
>
|
|
||||||
<div className="flex flex-col min-w-0 flex-1">
|
|
||||||
<span className="font-mono text-[10px] text-muted-foreground">
|
|
||||||
{m.codeName}
|
|
||||||
</span>
|
|
||||||
<span className="text-sm truncate group-hover:text-primary transition-colors">
|
|
||||||
{m.name}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 shrink-0">
|
|
||||||
<span
|
|
||||||
className={`text-[10px] font-semibold uppercase tracking-wider px-1 py-0.5 rounded ${statusColors[m.ownershipAndStatus.status] ?? "bg-muted text-muted-foreground"}`}
|
|
||||||
>
|
|
||||||
{m.ownershipAndStatus.status}
|
|
||||||
</span>
|
|
||||||
<ChevronRightIcon className="size-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</ItemContent>
|
|
||||||
</Item>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Server Details */}
|
|
||||||
{mission.gameDetails?.serverDetails?.serverIp && (
|
|
||||||
<Item variant="outline">
|
|
||||||
<ItemHeader>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<ServerIcon className="size-4 text-muted-foreground" />
|
|
||||||
<ItemTitle>Server</ItemTitle>
|
|
||||||
</div>
|
|
||||||
</ItemHeader>
|
|
||||||
<ItemContent>
|
|
||||||
<div className="flex flex-col gap-1.5 text-sm">
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-muted-foreground">Address</span>
|
|
||||||
<span className="font-mono">
|
|
||||||
{mission.gameDetails.serverDetails.serverIp}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-muted-foreground">Port</span>
|
|
||||||
<span className="font-mono">
|
|
||||||
{mission.gameDetails.serverDetails.serverPort}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ItemContent>
|
|
||||||
</Item>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,7 @@ export const Missions: CollectionConfig = {
|
||||||
slug: "missions",
|
slug: "missions",
|
||||||
admin: {
|
admin: {
|
||||||
group: "Intelligence",
|
group: "Intelligence",
|
||||||
|
useAsTitle: "name",
|
||||||
},
|
},
|
||||||
access: {
|
access: {
|
||||||
create: isDeveloper,
|
create: isDeveloper,
|
||||||
|
|
@ -164,6 +165,15 @@ export const Missions: CollectionConfig = {
|
||||||
hidden: true,
|
hidden: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "coverImage",
|
||||||
|
type: "upload",
|
||||||
|
relationTo: "media",
|
||||||
|
admin: {
|
||||||
|
description:
|
||||||
|
"Background image for the mission page hero header. Renders translucent with a top-to-bottom fade to black. Recommended aspect ratio: 16:9 or wider.",
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: "tabs",
|
type: "tabs",
|
||||||
tabs: [
|
tabs: [
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue