feat: add logistics pages for resources and vehicles

- Add resources list page with resource cards and detail pages
- Add vehicles list page with vehicle cards, filters, and detail pages
- Add ResourceCard, VehicleCard, and VehicleFilters components
- Widen structure detail page max-width from 4xl to 7xl

src/app/(frontend)/logistics/resources/[id]/page.tsx

@@ -0,0 +1,292 @@
+import config from "@payload-config";
+import { getPayload } from "payload";
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import type { Resource, Structure, Asset } from "@/payload-types";
+import { RichText } from "@payloadcms/richtext-lexical/react";
+import { convertLexicalToPlaintext } from "@payloadcms/richtext-lexical/plaintext";
+import {
+  ArrowLeftIcon,
+  BoxIcon,
+  Building2Icon,
+  CoinsIcon,
+  Grid3x3Icon,
+  LayersIcon,
+  MoveIcon,
+  RotateCcwIcon,
+  ScaleIcon,
+  TagIcon,
+  WeightIcon,
+} from "lucide-react";
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemHeader,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+
+interface ResourceDetailPageProps {
+  params: Promise<{ id: string }>;
+}
+
+const rarityColors: Record<string, string> = {
+  common: "bg-muted text-muted-foreground",
+  uncommon: "bg-green-500/20 text-green-400",
+  rare: "bg-blue-500/20 text-blue-400",
+  epic: "bg-purple-500/20 text-purple-400",
+  legendary: "bg-amber-500/20 text-amber-400",
+  exotic: "bg-pink-500/20 text-pink-400",
+  unique: "bg-red-500/20 text-red-400",
+};
+
+const typeColors: Record<string, string> = {
+  physical: "bg-muted text-muted-foreground",
+  fluid: "bg-blue-500/20 text-blue-400",
+  energy: "bg-amber-500/20 text-amber-400",
+  abstract: "bg-purple-500/20 text-purple-400",
+};
+
+export default async function ResourceDetailPage({
+  params,
+}: ResourceDetailPageProps) {
+  const { id } = await params;
+  const payload = await getPayload({ config });
+
+  const resource = await payload
+    .findByID({
+      collection: "resources",
+      id: Number(id),
+      depth: 2,
+    })
+    .catch(() => null);
+
+  if (!resource) {
+    notFound();
+  }
+
+  const [producersRes, autoGenRes, craftingRes] = await Promise.all([
+    payload
+      .find({
+        collection: "structures",
+        where: {
+          "canProduce.value": { equals: resource.id },
+        },
+        limit: 50,
+        depth: 1,
+      })
+      .catch(() => ({ docs: [] })),
+    payload
+      .find({
+        collection: "structures",
+        where: {
+          "autoGeneratedResources.resource": { equals: resource.id },
+        },
+        limit: 50,
+        depth: 1,
+      })
+      .catch(() => ({ docs: [] })),
+    payload
+      .find({
+        collection: "assets",
+        where: {
+          "crafting.craftingData.inputs.resource": { equals: resource.id },
+        },
+        limit: 50,
+        depth: 1,
+      })
+      .catch(() => ({ docs: [] })),
+  ]);
+
+  const producers = producersRes.docs as unknown as Structure[];
+  const autoGenStructures = autoGenRes.docs as unknown as Structure[];
+  const craftingAssets = craftingRes.docs as unknown as Asset[];
+
+  const allRelatedStructures = [
+    ...producers,
+    ...autoGenStructures.filter(
+      (s) => !producers.some((p) => p.id === s.id),
+    ),
+  ];
+
+  return (
+    <div className="p-5 flex flex-col gap-6 max-w-7xl">
+      <Link
+        href="/logistics/resources"
+        className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center gap-1 w-fit"
+      >
+        <ArrowLeftIcon className="size-3" />
+        Back to Resources
+      </Link>
+
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center gap-2">
+            {resource.color ? (
+              <div
+                className="size-5 rounded-sm"
+                style={{ backgroundColor: resource.color }}
+              />
+            ) : (
+              <BoxIcon className="size-5 text-muted-foreground" />
+            )}
+            <h1 className="text-lg font-semibold">{resource.name}</h1>
+          </div>
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span
+              className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${typeColors[resource.type] ?? "bg-muted text-muted-foreground"}`}
+            >
+              {resource.type}
+            </span>
+            <span
+              className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${rarityColors[resource.rarity] ?? "bg-muted text-muted-foreground"}`}
+            >
+              {resource.rarity}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {resource.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={resource.description} />
+          </ItemContent>
+        </Item>
+      )}
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        <Item variant="muted" size="sm">
+          <ItemMedia variant="icon">
+            <CoinsIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Base Value</ItemTitle>
+            <ItemDescription>{resource.baseValue.toLocaleString()}</ItemDescription>
+          </ItemContent>
+        </Item>
+        <Item variant="muted" size="sm">
+          <ItemMedia variant="icon">
+            <TagIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Unit of Measure</ItemTitle>
+            <ItemDescription>{resource.unitOfMeasure}</ItemDescription>
+          </ItemContent>
+        </Item>
+        <Item variant="muted" size="sm">
+          <ItemMedia variant="icon">
+            <WeightIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Mass Per Unit</ItemTitle>
+            <ItemDescription>{resource.massPerUnit.toLocaleString()} kg</ItemDescription>
+          </ItemContent>
+        </Item>
+        <Item variant="muted" size="sm">
+          <ItemMedia variant="icon">
+            <LayersIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Stack Size</ItemTitle>
+            <ItemDescription>{resource.stackSize ?? 1}</ItemDescription>
+          </ItemContent>
+        </Item>
+        <Item variant="muted" size="sm">
+          <ItemMedia variant="icon">
+            <Grid3x3Icon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Grid</ItemTitle>
+            <ItemDescription>
+              {resource.gridWidth}×{resource.gridHeight}
+            </ItemDescription>
+          </ItemContent>
+        </Item>
+        <Item variant="muted" size="sm">
+          <ItemMedia variant="icon">
+            <LayersIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Stackable</ItemTitle>
+            <ItemDescription>{resource.stackable ? "Yes" : "No"}</ItemDescription>
+          </ItemContent>
+        </Item>
+        <Item variant="muted" size="sm">
+          <ItemMedia variant="icon">
+            <RotateCcwIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Rotatable</ItemTitle>
+            <ItemDescription>{resource.rotatable ? "Yes" : "No"}</ItemDescription>
+          </ItemContent>
+        </Item>
+        <Item variant="muted" size="sm">
+          <ItemMedia variant="icon">
+            <ScaleIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Tradeable</ItemTitle>
+            <ItemDescription>{resource.tradeable ? "Yes" : "No"}</ItemDescription>
+          </ItemContent>
+        </Item>
+      </div>
+
+      {allRelatedStructures.length > 0 && (
+        <section className="flex flex-col gap-3">
+          <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+            Related Structures
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+            {allRelatedStructures.map((structure) => (
+              <Link
+                key={structure.id}
+                href={`/logistics/structures/${structure.id}`}
+              >
+                <Item
+                  variant="outline"
+                  className="cursor-pointer group transition-all duration-200 hover:scale-[1.01]"
+                >
+                  <ItemHeader>
+                    <div className="flex items-center gap-2">
+                      <ItemMedia variant="icon">
+                        <Building2Icon />
+                      </ItemMedia>
+                      <ItemTitle>{structure.name}</ItemTitle>
+                    </div>
+                  </ItemHeader>
+                  <ItemContent>
+                    <ItemDescription className="line-clamp-1">
+                      {convertLexicalToPlaintext({ data: structure.description }).slice(0, 120)}
+                    </ItemDescription>
+                  </ItemContent>
+                </Item>
+              </Link>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {craftingAssets.length > 0 && (
+        <section className="flex flex-col gap-3">
+          <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+            Used in Crafting
+          </h2>
+          <div className="flex flex-wrap gap-2">
+            {craftingAssets.map((asset) => (
+              <Link key={asset.id} href={`/logistics/assets/${asset.id}`}>
+                <span className="text-xs font-medium bg-muted border border-border px-2.5 py-1 rounded-md hover:bg-accent/50 transition-colors">
+                  {asset.name}
+                </span>
+              </Link>
+            ))}
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}

src/app/(frontend)/logistics/resources/page.tsx

@@ -0,0 +1,47 @@
+import config from "@payload-config";
+import { getPayload } from "payload";
+import type { Resource } from "@/payload-types";
+import { PackageOpenIcon } from "lucide-react";
+import { ResourceCard } from "@/components/frontend/logistics/ResourceCard";
+
+export const metadata = {
+  title: "Resources — Polaris Task Force",
+};
+
+export default async function ResourcesPage() {
+  const payload = await getPayload({ config });
+
+  const resourcesRes = await payload.find({
+    collection: "resources",
+    limit: 500,
+    depth: 1,
+  });
+
+  const resources = resourcesRes.docs as Resource[];
+
+  return (
+    <div className="p-5 flex flex-col gap-6">
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <PackageOpenIcon className="size-5 text-muted-foreground" />
+          <h1 className="text-lg font-semibold">Resources</h1>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Resource catalog for the theater of operations.
+        </p>
+      </div>
+
+      {resources.length > 0 ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+          {resources.map((resource) => (
+            <ResourceCard key={resource.id} resource={resource as any} />
+          ))}
+        </div>
+      ) : (
+        <p className="text-sm text-muted-foreground italic">
+          No resources available.
+        </p>
+      )}
+    </div>
+  );
+}

src/app/(frontend)/logistics/structures/[id]/page.tsx

@@ -74,7 +74,7 @@ export default async function StructureDetailPage({ params }: StructureDetailPag
   }, 0);
 
   return (
-    <div className="p-5 flex flex-col gap-6 max-w-4xl">
+    <div className="p-5 flex flex-col gap-6 max-w-7xl">
       <div className="flex flex-col gap-3">
         <Link
           href="/logistics"

src/app/(frontend)/logistics/vehicles/VehiclesList.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import type { Vehicle } from "@/payload-types";
+import { VehicleCard } from "@/components/frontend/logistics/VehicleCard";
+import { VehicleFilters } from "@/components/frontend/logistics/VehicleFilters";
+
+const categories = [
+  "civilian",
+  "utility",
+  "transport",
+  "weaponized",
+  "military",
+];
+
+export function VehiclesList({ vehicles }: { vehicles: Vehicle[] }) {
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+
+  const filtered = useMemo(() => {
+    if (!selectedCategory) return vehicles;
+    return vehicles.filter(
+      (v) => v.category?.includes(selectedCategory as NonNullable<Vehicle["category"]>[number]),
+    );
+  }, [vehicles, selectedCategory]);
+
+  return (
+    <>
+      <VehicleFilters
+        categories={categories}
+        onFilterChange={setSelectedCategory}
+      />
+      {filtered.length > 0 ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+          {filtered.map((vehicle) => (
+            <VehicleCard key={vehicle.id} vehicle={vehicle as any} />
+          ))}
+        </div>
+      ) : (
+        <p className="text-sm text-muted-foreground italic">
+          No vehicles match the selected filters.
+        </p>
+      )}
+    </>
+  );
+}

src/app/(frontend)/logistics/vehicles/[id]/page.tsx

@@ -0,0 +1,401 @@
+import config from "@payload-config";
+import { getPayload } from "payload";
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import type { Vehicle, Resource, Technology, Structure } from "@/payload-types";
+import { RichText } from "@payloadcms/richtext-lexical/react";
+import { convertLexicalToPlaintext } from "@payloadcms/richtext-lexical/plaintext";
+import {
+  ArrowLeftIcon,
+  BoxIcon,
+  Building2Icon,
+  ClockIcon,
+  CrosshairIcon,
+  GaugeIcon,
+  HeartIcon,
+  ShieldIcon,
+  TruckIcon,
+  WrenchIcon,
+} from "lucide-react";
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemHeader,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+
+interface VehicleDetailPageProps {
+  params: Promise<{ id: string }>;
+}
+
+const categoryColors: Record<string, string> = {
+  civilian: "bg-muted text-muted-foreground",
+  utility: "bg-blue-500/20 text-blue-400",
+  transport: "bg-green-500/20 text-green-400",
+  weaponized: "bg-red-500/20 text-red-400",
+  military: "bg-amber-500/20 text-amber-400",
+};
+
+const armorColors: Record<string, string> = {
+  none: "bg-muted text-muted-foreground",
+  light: "bg-green-500/20 text-green-400",
+  medium: "bg-amber-500/20 text-amber-400",
+  heavy: "bg-red-500/20 text-red-400",
+  composite: "bg-purple-500/20 text-purple-400",
+};
+
+export default async function VehicleDetailPage({
+  params,
+}: VehicleDetailPageProps) {
+  const { id } = await params;
+  const payload = await getPayload({ config });
+
+  const vehicle = await payload
+    .findByID({
+      collection: "vehicles",
+      id: Number(id),
+      depth: 2,
+    })
+    .catch(() => null);
+
+  if (!vehicle) {
+    notFound();
+  }
+
+  const materials = (vehicle.materials ?? []).map((m) => ({
+    resource: m.resource as Resource,
+    amount: m.amount ?? 0,
+  }));
+
+  const requiredTech = (vehicle.requiredTech ?? []) as Technology[];
+
+  const scrapReturns = (vehicle.scrapReturns ?? []).map((s) => ({
+    resource: s.resource as Resource,
+    amount: s.amount ?? 0,
+    chance: s.chance ?? 100,
+  }));
+
+  const upkeepCosts = (vehicle.upkeepCosts ?? []).map((u) => ({
+    resource: u.resource as Resource,
+    amount: u.amount ?? 0,
+  }));
+
+  const producingStructures =
+    vehicle.requiredStructure?.docs?.filter(
+      (s): s is Structure => typeof s === "object" && s !== null,
+    ) ?? [];
+
+  return (
+    <div className="p-5 flex flex-col gap-6 max-w-7xl">
+      <Link
+        href="/logistics/vehicles"
+        className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center gap-1 w-fit"
+      >
+        <ArrowLeftIcon className="size-3" />
+        Back to Vehicles
+      </Link>
+
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center gap-2">
+            <TruckIcon className="size-5 text-muted-foreground" />
+            <h1 className="text-lg font-semibold">{vehicle.name}</h1>
+          </div>
+          <div className="flex items-center gap-2">
+            {(vehicle.category ?? []).map((cat) => (
+              <span
+                key={cat}
+                className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${categoryColors[cat] ?? "bg-muted text-muted-foreground"}`}
+              >
+                {cat}
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {vehicle.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={vehicle.description} />
+          </ItemContent>
+        </Item>
+      )}
+
+      {materials.length > 0 && (
+        <Item variant="outline">
+          <ItemHeader>
+            <ItemTitle className="flex items-center gap-2">
+              <WrenchIcon className="size-4 text-muted-foreground" />
+              Construction Materials
+            </ItemTitle>
+            {vehicle.constructionTime && (
+              <span className="text-xs text-muted-foreground flex items-center gap-1">
+                <ClockIcon className="size-3" />
+                {vehicle.constructionTime} tick{vehicle.constructionTime !== 1 ? "s" : ""}
+              </span>
+            )}
+          </ItemHeader>
+          <ItemContent>
+            <div className="flex flex-wrap gap-3">
+              {materials.map((mat, index) => (
+                <span
+                  key={index}
+                  className="text-sm bg-muted px-2.5 py-1 rounded-md"
+                >
+                  {mat.resource.name}: {mat.amount.toLocaleString()}
+                </span>
+              ))}
+            </div>
+          </ItemContent>
+        </Item>
+      )}
+
+      {requiredTech.length > 0 && (
+        <section className="flex flex-col gap-3">
+          <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+            Required Technologies
+          </h2>
+          <div className="flex flex-wrap gap-2">
+            {requiredTech.map((tech) => (
+              <span
+                key={tech.id}
+                className="text-xs font-medium bg-muted border border-border px-2.5 py-1 rounded-md"
+              >
+                {tech.name}
+              </span>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {(vehicle.maxHealth ||
+        vehicle.armorRating ||
+        vehicle.maxSpeedOnRoad ||
+        vehicle.maxSpeedOffRoad ||
+        vehicle.maxAirspeed ||
+        vehicle.maxKnots) && (
+        <section className="flex flex-col gap-3">
+          <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+            Combat &amp; Performance
+          </h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+            {vehicle.maxHealth && (
+              <Item variant="muted" size="sm">
+                <ItemMedia variant="icon">
+                  <HeartIcon />
+                </ItemMedia>
+                <ItemContent>
+                  <ItemTitle>Max Health</ItemTitle>
+                  <ItemDescription>{vehicle.maxHealth.toLocaleString()}</ItemDescription>
+                </ItemContent>
+              </Item>
+            )}
+            {vehicle.armorRating && (
+              <Item variant="muted" size="sm">
+                <ItemMedia variant="icon">
+                  <ShieldIcon />
+                </ItemMedia>
+                <ItemContent>
+                  <ItemTitle>Armor Rating</ItemTitle>
+                  <ItemDescription className="capitalize">
+                    {vehicle.armorRating}
+                  </ItemDescription>
+                </ItemContent>
+              </Item>
+            )}
+            {vehicle.maxSpeedOnRoad && (
+              <Item variant="muted" size="sm">
+                <ItemMedia variant="icon">
+                  <GaugeIcon />
+                </ItemMedia>
+                <ItemContent>
+                  <ItemTitle>Speed (Road)</ItemTitle>
+                  <ItemDescription>{vehicle.maxSpeedOnRoad} km/h</ItemDescription>
+                </ItemContent>
+              </Item>
+            )}
+            {vehicle.maxSpeedOffRoad && (
+              <Item variant="muted" size="sm">
+                <ItemMedia variant="icon">
+                  <GaugeIcon />
+                </ItemMedia>
+                <ItemContent>
+                  <ItemTitle>Speed (Off-Road)</ItemTitle>
+                  <ItemDescription>{vehicle.maxSpeedOffRoad} km/h</ItemDescription>
+                </ItemContent>
+              </Item>
+            )}
+            {vehicle.maxAirspeed && (
+              <Item variant="muted" size="sm">
+                <ItemMedia variant="icon">
+                  <GaugeIcon />
+                </ItemMedia>
+                <ItemContent>
+                  <ItemTitle>Airspeed</ItemTitle>
+                  <ItemDescription>{vehicle.maxAirspeed} km/h</ItemDescription>
+                </ItemContent>
+              </Item>
+            )}
+            {vehicle.maxKnots && (
+              <Item variant="muted" size="sm">
+                <ItemMedia variant="icon">
+                  <GaugeIcon />
+                </ItemMedia>
+                <ItemContent>
+                  <ItemTitle>Max Knots</ItemTitle>
+                  <ItemDescription>{vehicle.maxKnots} kn</ItemDescription>
+                </ItemContent>
+              </Item>
+            )}
+          </div>
+        </section>
+      )}
+
+      {(vehicle.width || vehicle.height || vehicle.maxMass || vehicle.aceCargoSlots) && (
+        <section className="flex flex-col gap-3">
+          <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+            Logistics
+          </h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+            {(vehicle.width || vehicle.height) && (
+              <Item variant="muted" size="sm">
+                <ItemMedia variant="icon">
+                  <BoxIcon />
+                </ItemMedia>
+                <ItemContent>
+                  <ItemTitle>Grid Dimensions</ItemTitle>
+                  <ItemDescription>
+                    {vehicle.width ?? "—"}×{vehicle.height ?? "—"}
+                  </ItemDescription>
+                </ItemContent>
+              </Item>
+            )}
+            {vehicle.maxMass && (
+              <Item variant="muted" size="sm">
+                <ItemMedia variant="icon">
+                  <TruckIcon />
+                </ItemMedia>
+                <ItemContent>
+                  <ItemTitle>Cargo Capacity</ItemTitle>
+                  <ItemDescription>{vehicle.maxMass.toLocaleString()} kg</ItemDescription>
+                </ItemContent>
+              </Item>
+            )}
+            {vehicle.aceCargoSlots != null && (
+              <Item variant="muted" size="sm">
+                <ItemMedia variant="icon">
+                  <BoxIcon />
+                </ItemMedia>
+                <ItemContent>
+                  <ItemTitle>ACE Cargo Slots</ItemTitle>
+                  <ItemDescription>{vehicle.aceCargoSlots}</ItemDescription>
+                </ItemContent>
+              </Item>
+            )}
+          </div>
+        </section>
+      )}
+
+      {(scrapReturns.length > 0 || upkeepCosts.length > 0) && (
+        <section className="flex flex-col gap-4">
+          <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+            Maintenance
+          </h2>
+
+          {scrapReturns.length > 0 && (
+            <Item variant="outline">
+              <ItemHeader>
+                <ItemTitle className="flex items-center gap-2">
+                  <WrenchIcon className="size-4 text-muted-foreground" />
+                  Scrap Returns
+                </ItemTitle>
+              </ItemHeader>
+              <ItemContent>
+                <div className="flex flex-wrap gap-3">
+                  {scrapReturns.map((scrap, index) => (
+                    <span
+                      key={index}
+                      className="text-sm bg-muted px-2.5 py-1 rounded-md"
+                    >
+                      {scrap.resource.name}: {scrap.amount.toLocaleString()}
+                      {scrap.chance < 100 && (
+                        <span className="text-muted-foreground ml-1">
+                          ({scrap.chance}%)
+                        </span>
+                      )}
+                    </span>
+                  ))}
+                </div>
+              </ItemContent>
+            </Item>
+          )}
+
+          {upkeepCosts.length > 0 && (
+            <Item variant="outline">
+              <ItemHeader>
+                <ItemTitle className="flex items-center gap-2">
+                  <ClockIcon className="size-4 text-muted-foreground" />
+                  Upkeep Costs
+                </ItemTitle>
+                <ItemDescription>Per game tick (every hour)</ItemDescription>
+              </ItemHeader>
+              <ItemContent>
+                <div className="flex flex-wrap gap-3">
+                  {upkeepCosts.map((upkeep, index) => (
+                    <span
+                      key={index}
+                      className="text-sm bg-muted px-2.5 py-1 rounded-md"
+                    >
+                      {upkeep.resource.name}: {upkeep.amount.toLocaleString()}/tick
+                    </span>
+                  ))}
+                </div>
+              </ItemContent>
+            </Item>
+          )}
+        </section>
+      )}
+
+      {producingStructures.length > 0 && (
+        <section className="flex flex-col gap-3">
+          <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+            Produced By
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+            {producingStructures.map((structure) => (
+              <Link
+                key={structure.id}
+                href={`/logistics/structures/${structure.id}`}
+              >
+                <Item
+                  variant="outline"
+                  className="cursor-pointer group transition-all duration-200 hover:scale-[1.01]"
+                >
+                  <ItemHeader>
+                    <div className="flex items-center gap-2">
+                      <ItemMedia variant="icon">
+                        <Building2Icon />
+                      </ItemMedia>
+                      <ItemTitle>{structure.name}</ItemTitle>
+                    </div>
+                  </ItemHeader>
+                  <ItemContent>
+                    <ItemDescription className="line-clamp-1">
+                      {convertLexicalToPlaintext({ data: structure.description }).slice(0, 120)}
+                    </ItemDescription>
+                  </ItemContent>
+                </Item>
+              </Link>
+            ))}
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}

src/app/(frontend)/logistics/vehicles/page.tsx

@@ -0,0 +1,37 @@
+import config from "@payload-config";
+import { getPayload } from "payload";
+import type { Vehicle } from "@/payload-types";
+import { TruckIcon } from "lucide-react";
+import { VehiclesList } from "./VehiclesList";
+
+export const metadata = {
+  title: "Vehicles — Polaris Task Force",
+};
+
+export default async function VehiclesPage() {
+  const payload = await getPayload({ config });
+
+  const vehiclesRes = await payload.find({
+    collection: "vehicles",
+    limit: 500,
+    depth: 1,
+  });
+
+  const vehicles = vehiclesRes.docs as Vehicle[];
+
+  return (
+    <div className="p-5 flex flex-col gap-6">
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <TruckIcon className="size-5 text-muted-foreground" />
+          <h1 className="text-lg font-semibold">Vehicles</h1>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Vehicle catalog for deployment and operations.
+        </p>
+      </div>
+
+      <VehiclesList vehicles={vehicles} />
+    </div>
+  );
+}

src/components/frontend/logistics/ResourceCard.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import Link from "next/link";
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemHeader,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+import { convertLexicalToPlaintext } from "@payloadcms/richtext-lexical/plaintext";
+import {
+  BrainIcon,
+  ChevronRightIcon,
+  DropletIcon,
+  HandshakeIcon,
+  PackageOpenIcon,
+  ScaleIcon,
+  ZapIcon,
+} from "lucide-react";
+
+interface ResourceCardProps {
+  resource: {
+    id: number;
+    name: string;
+    codeName: string;
+    type: "physical" | "fluid" | "energy" | "abstract";
+    rarity: string;
+    baseValue: number;
+    unitOfMeasure: string;
+    massPerUnit: number;
+    icon?: { url: string } | number | null;
+    color?: string | null;
+    tradeable?: boolean | null;
+    description?: {
+      root: {
+        type: string;
+        children: {
+          type: any;
+          version: number;
+          [k: string]: unknown;
+        }[];
+        direction: ("ltr" | "rtl") | null;
+        format: "left" | "start" | "center" | "right" | "end" | "justify" | "";
+        indent: number;
+        version: number;
+      };
+      [k: string]: unknown;
+    } | null;
+  };
+}
+
+const typeColors: Record<string, string> = {
+  physical: "bg-stone-500/20 text-stone-400",
+  fluid: "bg-blue-500/20 text-blue-400",
+  energy: "bg-amber-500/20 text-amber-400",
+  abstract: "bg-purple-500/20 text-purple-400",
+};
+
+const typeIcons: Record<string, React.ReactNode> = {
+  physical: <PackageOpenIcon className="size-4" />,
+  fluid: <DropletIcon className="size-4" />,
+  energy: <ZapIcon className="size-4" />,
+  abstract: <BrainIcon className="size-4" />,
+};
+
+const rarityColors: Record<string, string> = {
+  common: "bg-muted text-muted-foreground",
+  uncommon: "bg-green-500/20 text-green-400",
+  rare: "bg-blue-500/20 text-blue-400",
+  epic: "bg-purple-500/20 text-purple-400",
+  legendary: "bg-amber-500/20 text-amber-400",
+  exotic: "bg-pink-500/20 text-pink-400",
+  unique: "bg-red-500/20 text-red-400",
+};
+
+const rarityLabels: Record<string, string> = {
+  common: "Common",
+  uncommon: "Uncommon",
+  rare: "Rare",
+  epic: "Epic",
+  legendary: "Legendary",
+  exotic: "Exotic",
+  unique: "Unique",
+};
+
+export function ResourceCard({ resource }: ResourceCardProps) {
+  const icon =
+    resource.icon && typeof resource.icon === "object" ? resource.icon : null;
+  const description = resource.description
+    ? convertLexicalToPlaintext({ data: resource.description })
+    : null;
+  const truncatedDescription =
+    description && description.length > 150
+      ? description.slice(0, 150) + "…"
+      : description;
+
+  return (
+    <Link href={`/logistics/resources/${resource.id}`}>
+      <Item
+        variant="outline"
+        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)]"
+      >
+        <ItemHeader>
+          <div className="flex items-center gap-2">
+            {icon ? (
+              <ItemMedia variant="image">
+                <img
+                  src={icon.url}
+                  alt={resource.name}
+                  className="size-full object-cover"
+                />
+              </ItemMedia>
+            ) : resource.color ? (
+              <ItemMedia variant="icon">
+                <span
+                  className="size-4 rounded-full shrink-0"
+                  style={{ backgroundColor: resource.color }}
+                />
+              </ItemMedia>
+            ) : (
+              <ItemMedia variant="icon">{typeIcons[resource.type]}</ItemMedia>
+            )}
+            <ItemTitle className="flex flex-col">
+              <span className="font-mono text-xs text-muted-foreground">
+                {resource.codeName}
+              </span>
+              <span>{resource.name}</span>
+            </ItemTitle>
+          </div>
+          <div className="flex items-center gap-2">
+            <span
+              className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${typeColors[resource.type] ?? "bg-muted text-muted-foreground"}`}
+            >
+              {resource.type}
+            </span>
+            <span
+              className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${rarityColors[resource.rarity] ?? "bg-muted text-muted-foreground"}`}
+            >
+              {rarityLabels[resource.rarity] ?? resource.rarity}
+            </span>
+          </div>
+        </ItemHeader>
+        <ItemContent>
+          <div className="flex flex-col gap-3 w-full">
+            {truncatedDescription && (
+              <p className="text-sm text-muted-foreground line-clamp-2">
+                {truncatedDescription}
+              </p>
+            )}
+            <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-muted-foreground">
+              <span className="flex items-center gap-1 font-medium text-foreground">
+                {resource.baseValue.toLocaleString()} credits
+              </span>
+              <span className="flex items-center gap-1">
+                <ScaleIcon className="size-3" />
+                {resource.massPerUnit.toLocaleString()} kg/{resource.unitOfMeasure}
+              </span>
+              {resource.tradeable && (
+                <span className="flex items-center gap-1">
+                  <HandshakeIcon className="size-3" />
+                  Tradeable
+                </span>
+              )}
+            </div>
+          </div>
+        </ItemContent>
+        <ItemDescription>
+          {truncatedDescription ?? `${resource.type} resource — ${resource.unitOfMeasure}`}
+        </ItemDescription>
+        <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>
+    </Link>
+  );
+}

src/components/frontend/logistics/VehicleCard.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import Link from "next/link";
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemHeader,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+import { convertLexicalToPlaintext } from "@payloadcms/richtext-lexical/plaintext";
+import {
+  ChevronRightIcon,
+  HeartIcon,
+  TimerIcon,
+  TruckIcon,
+} from "lucide-react";
+
+interface VehicleCardProps {
+  vehicle: {
+    id: number;
+    name: string;
+    classname?: string | null;
+    category?: string[] | null;
+    description?: {
+      root: {
+        type: string;
+        children: {
+          type: any;
+          version: number;
+          [k: string]: unknown;
+        }[];
+        direction: ("ltr" | "rtl") | null;
+        format: "left" | "start" | "center" | "right" | "end" | "justify" | "";
+        indent: number;
+        version: number;
+      };
+      [k: string]: unknown;
+    } | null;
+    image?: { url: string } | number | null;
+    construction?: {
+      materials?: { resource: { name: string } | number; amount: number }[];
+      constructionTime?: number;
+    };
+    combat?: {
+      maxHealth?: number;
+      maxSpeedOnRoad?: number;
+    };
+  };
+}
+
+const categoryColors: Record<string, string> = {
+  civilian: "bg-stone-500/20 text-stone-400",
+  utility: "bg-emerald-500/20 text-emerald-400",
+  transport: "bg-blue-500/20 text-blue-400",
+  weaponized: "bg-red-500/20 text-red-400",
+  military: "bg-amber-500/20 text-amber-400",
+};
+
+const categoryLabels: Record<string, string> = {
+  civilian: "Civilian",
+  utility: "Utility",
+  transport: "Transport",
+  weaponized: "Weaponized",
+  military: "Military",
+};
+
+export function VehicleCard({ vehicle }: VehicleCardProps) {
+  const image =
+    vehicle.image && typeof vehicle.image === "object" ? vehicle.image : null;
+  const description = vehicle.description
+    ? convertLexicalToPlaintext({ data: vehicle.description })
+    : null;
+  const truncatedDescription =
+    description && description.length > 150
+      ? description.slice(0, 150) + "…"
+      : description;
+
+  const materialCount = vehicle.construction?.materials?.length ?? 0;
+  const constructionTime = vehicle.construction?.constructionTime;
+  const maxHealth = vehicle.combat?.maxHealth;
+  const maxSpeed = vehicle.combat?.maxSpeedOnRoad;
+
+  return (
+    <Link href={`/logistics/vehicles/${vehicle.id}`}>
+      <Item
+        variant="outline"
+        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)]"
+      >
+        <ItemHeader>
+          <div className="flex items-center gap-2">
+            {image ? (
+              <ItemMedia variant="image">
+                <img
+                  src={image.url}
+                  alt={vehicle.name}
+                  className="size-full object-cover"
+                />
+              </ItemMedia>
+            ) : (
+              <ItemMedia variant="icon">
+                <TruckIcon />
+              </ItemMedia>
+            )}
+            <ItemTitle className="flex flex-col">
+              {vehicle.classname && (
+                <span className="font-mono text-xs text-muted-foreground">
+                  {vehicle.classname}
+                </span>
+              )}
+              <span>{vehicle.name}</span>
+            </ItemTitle>
+          </div>
+          <div className="flex items-center gap-2">
+            {vehicle.category?.map((cat) => (
+              <span
+                key={cat}
+                className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${categoryColors[cat] ?? "bg-muted text-muted-foreground"}`}
+              >
+                {categoryLabels[cat] ?? cat}
+              </span>
+            ))}
+          </div>
+        </ItemHeader>
+        <ItemContent>
+          <div className="flex flex-col gap-3 w-full">
+            {truncatedDescription && (
+              <p className="text-sm text-muted-foreground line-clamp-2">
+                {truncatedDescription}
+              </p>
+            )}
+            <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-muted-foreground">
+              {materialCount > 0 && (
+                <span className="flex items-center gap-1">
+                  {materialCount} material{materialCount !== 1 ? "s" : ""}
+                  {constructionTime != null && (
+                    <>
+                      ,{" "}
+                      <TimerIcon className="size-3" />
+                      {constructionTime} tick{constructionTime !== 1 ? "s" : ""}
+                    </>
+                  )}
+                </span>
+              )}
+              {maxHealth != null && (
+                <span className="flex items-center gap-1">
+                  <HeartIcon className="size-3" />
+                  {maxHealth.toLocaleString()} HP
+                </span>
+              )}
+              {maxSpeed != null && (
+                <span className="flex items-center gap-1">
+                  <TruckIcon className="size-3" />
+                  {maxSpeed} km/h
+                </span>
+              )}
+            </div>
+          </div>
+        </ItemContent>
+        <ItemDescription>
+          {truncatedDescription ?? vehicle.classname ?? "Vehicle"}
+        </ItemDescription>
+        <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>
+    </Link>
+  );
+}

src/components/frontend/logistics/VehicleFilters.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface VehicleFiltersProps {
+  categories: string[];
+  onFilterChange: (category: string | null) => void;
+}
+
+const categoryLabels: Record<string, string> = {
+  civilian: "Civilian",
+  utility: "Utility",
+  transport: "Transport",
+  weaponized: "Weaponized",
+  military: "Military",
+};
+
+export function VehicleFilters({ categories, onFilterChange }: VehicleFiltersProps) {
+  const [selected, setSelected] = useState<string | null>(null);
+
+  const handleChange = (category: string | null) => {
+    const next = selected === category ? null : category;
+    setSelected(next);
+    onFilterChange(next);
+  };
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Button
+        variant={selected === null ? "default" : "outline"}
+        size="sm"
+        onClick={() => handleChange(null)}
+      >
+        All
+      </Button>
+      {categories.map((cat) => (
+        <Button
+          key={cat}
+          variant={selected === cat ? "default" : "outline"}
+          size="sm"
+          onClick={() => handleChange(cat)}
+        >
+          {categoryLabels[cat] ?? cat}
+        </Button>
+      ))}
+    </div>
+  );
+}