feat(banking): add banking overview and account detail UI

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

@@ -0,0 +1,87 @@
+import config from "@payload-config";
+import { getPayload } from "payload";
+import { headers as nextHeaders } from "next/headers";
+import { notFound } from "next/navigation";
+import type { BankAccount, LedgerEntry } from "@/payload-types";
+import { AccountDetail } from "@/components/frontend/banking/AccountDetail";
+import hasRoles from "@/utils/access-control/hasRoles";
+import { hasLogisticsQualification } from "@/utils/access-control/hasLogisticsQualification";
+
+export const metadata = {
+  title: "Account — Polaris Task Force",
+};
+
+interface AccountPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function AccountPage({ params }: AccountPageProps) {
+  const { id } = await params;
+  const payload = await getPayload({ config });
+  const { user } = await payload.auth({
+    headers: await nextHeaders(),
+    canSetHeaders: false,
+  });
+
+  const account = await payload
+    .findByID({
+      collection: "bank-accounts",
+      id: Number(id),
+      depth: 1,
+    })
+    .catch(() => null);
+
+  if (!account) {
+    notFound();
+  }
+
+  const typedAccount = account as unknown as BankAccount;
+
+  const isManager = user
+    ? hasRoles(["admin", "developer"], user) ||
+      (await hasLogisticsQualification(payload, user).catch(() => false))
+    : false;
+
+  const ownerId =
+    typeof typedAccount.ownerUser === "object"
+      ? typedAccount.ownerUser?.id
+      : typedAccount.ownerUser;
+
+  const isOwner =
+    typedAccount.accountType === "personal" &&
+    user !== null &&
+    ownerId === user.id;
+
+  if (!isManager && !isOwner) {
+    notFound();
+  }
+
+  const ledgerRes = await payload.find({
+    collection: "ledger-entries",
+    where: { account: { equals: Number(id) } },
+    sort: "-timestamp",
+    limit: 200,
+    depth: 0,
+  });
+  const ledger = ledgerRes.docs as unknown as LedgerEntry[];
+
+  const allAccountsRes = await payload.find({
+    collection: "bank-accounts",
+    limit: 500,
+    depth: 0,
+  });
+  const otherAccounts = (allAccountsRes.docs as unknown as BankAccount[])
+    .filter((a) => a.id !== typedAccount.id)
+    .map((a) => ({ id: a.id, name: a.name }));
+
+  return (
+    <div className="p-5 max-w-7xl">
+      <AccountDetail
+        account={typedAccount}
+        ledger={ledger}
+        otherAccounts={otherAccounts}
+        canTransact={isManager || isOwner}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,64 @@
+import config from "@payload-config";
+import { getPayload } from "payload";
+import { headers as nextHeaders } from "next/headers";
+import type { BankAccount, Faction } from "@/payload-types";
+import { LandmarkIcon } from "lucide-react";
+import { BankingOverview } from "@/components/frontend/banking/BankingOverview";
+import hasRoles from "@/utils/access-control/hasRoles";
+import { hasLogisticsQualification } from "@/utils/access-control/hasLogisticsQualification";
+
+export const metadata = {
+  title: "Banking — Polaris Task Force",
+};
+
+export default async function BankingPage() {
+  const payload = await getPayload({ config });
+  const { user } = await payload.auth({
+    headers: await nextHeaders(),
+    canSetHeaders: false,
+  });
+
+  const accountsRes = await payload.find({
+    collection: "bank-accounts",
+    sort: "name",
+    limit: 500,
+    depth: 1,
+  });
+  const accounts = accountsRes.docs as unknown as BankAccount[];
+
+  const factionsRes = await payload.find({
+    collection: "factions",
+    limit: 100,
+    depth: 0,
+  });
+  const factions = (factionsRes.docs as unknown as Faction[]).map((f) => ({
+    id: f.id,
+    name: f.name,
+  }));
+
+  const isManager = user
+    ? hasRoles(["admin", "developer"], user) ||
+      (await hasLogisticsQualification(payload, user).catch(() => false))
+    : false;
+
+  return (
+    <div className="p-5 flex flex-col gap-6">
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <LandmarkIcon className="size-5 text-muted-foreground" />
+          <h1 className="text-lg font-semibold">Banking</h1>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Unit accounts, faction reserves, and personal wallets.
+        </p>
+      </div>
+
+      <BankingOverview
+        accounts={accounts}
+        currentUserId={user?.id as number}
+        isManager={isManager}
+        factions={factions}
+      />
+    </div>
+  );
+}

src/components/frontend/banking/AccountCard.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import Link from "next/link";
+import type { BankAccount } from "@/payload-types";
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemHeader,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+import { LandmarkIcon, UsersIcon, WalletIcon } from "lucide-react";
+import { formatAmount } from "@/lib/banking/format";
+
+const accountTypeMeta = {
+  treasury: {
+    label: "Treasury",
+    icon: LandmarkIcon,
+    accent: "text-blue-400",
+    iconBg: "bg-blue-500/10",
+  },
+  faction: {
+    label: "Faction",
+    icon: UsersIcon,
+    accent: "text-amber-400",
+    iconBg: "bg-amber-500/10",
+  },
+  personal: {
+    label: "Personal",
+    icon: WalletIcon,
+    accent: "text-emerald-400",
+    iconBg: "bg-emerald-500/10",
+  },
+} as const;
+
+export function accountTypeInfo(accountType: string) {
+  return accountTypeMeta[accountType as keyof typeof accountTypeMeta] ?? accountTypeMeta.personal;
+}
+
+const statusColor: Record<string, string> = {
+  open: "bg-green-500/20 text-green-400",
+  frozen: "bg-amber-500/20 text-amber-400",
+  closed: "bg-muted text-muted-foreground",
+};
+
+export function AccountCard({ account }: { account: BankAccount }) {
+  const meta = accountTypeInfo(account.accountType);
+  const Icon = meta.icon;
+  const currency = typeof account.currency === "object" ? account.currency : null;
+
+  const owner =
+    account.accountType === "personal"
+      ? typeof account.ownerUser === "object" && account.ownerUser
+        ? (account.ownerUser.displayName ?? account.ownerUser.username)
+        : null
+      : account.accountType === "faction" && typeof account.ownerFaction === "object"
+        ? account.ownerFaction?.name
+        : null;
+
+  return (
+    <Link href={`/logistics/banking/${account.id}`} className="block">
+      <Item
+        variant="outline"
+        className="hover:border-border/80 transition-colors [&[data-variant=outline]]:border-border"
+      >
+        <ItemMedia variant="icon" className={meta.iconBg}>
+          <Icon className={meta.accent} />
+        </ItemMedia>
+        <ItemContent>
+          <ItemHeader>
+            <ItemTitle>{account.name}</ItemTitle>
+            <span
+              className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${statusColor[account.status] ?? "bg-muted text-muted-foreground"}`}
+            >
+              {account.status}
+            </span>
+          </ItemHeader>
+          <ItemDescription>
+            {meta.label}
+            {owner ? ` · ${owner}` : ""}
+          </ItemDescription>
+          <div className="mt-1">
+            <span className="text-lg font-semibold font-mono">
+              {formatAmount(account.balance ?? 0, currency)}
+            </span>
+          </div>
+        </ItemContent>
+      </Item>
+    </Link>
+  );
+}

src/components/frontend/banking/AccountDetail.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowLeftIcon } from "lucide-react";
+import type { BankAccount, LedgerEntry } from "@/payload-types";
+import {
+  Item,
+  ItemContent,
+  ItemHeader,
+  ItemTitle,
+} from "@/components/ui/item";
+import { formatAmount } from "@/lib/banking/format";
+import { accountTypeInfo } from "@/components/frontend/banking/AccountCard";
+import { BankTransactionDialog } from "@/components/frontend/banking/BankTransactionDialog";
+import { LedgerTable } from "@/components/frontend/banking/LedgerTable";
+
+const statusColor: Record<string, string> = {
+  open: "bg-green-500/20 text-green-400",
+  frozen: "bg-amber-500/20 text-amber-400",
+  closed: "bg-muted text-muted-foreground",
+};
+
+interface AccountDetailProps {
+  account: BankAccount;
+  ledger: LedgerEntry[];
+  otherAccounts: { id: number; name: string }[];
+  canTransact: boolean;
+}
+
+export function AccountDetail({
+  account,
+  ledger,
+  otherAccounts,
+  canTransact,
+}: AccountDetailProps) {
+  const meta = accountTypeInfo(account.accountType);
+  const Icon = meta.icon;
+  const currency = typeof account.currency === "object" ? account.currency : null;
+
+  const owner =
+    account.accountType === "personal"
+      ? typeof account.ownerUser === "object" && account.ownerUser
+        ? (account.ownerUser.displayName ?? account.ownerUser.username)
+        : null
+      : account.accountType === "faction" && typeof account.ownerFaction === "object"
+        ? account.ownerFaction?.name
+        : null;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <Link
+        href="/logistics/banking"
+        className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center gap-1 w-fit"
+      >
+        <ArrowLeftIcon className="size-3" />
+        Back to Banking
+      </Link>
+
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center gap-2">
+            <Icon className={`size-5 ${meta.accent}`} />
+            <h1 className="text-lg font-semibold">{account.name}</h1>
+          </div>
+          <div className="flex items-center gap-2">
+            <span
+              className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${statusColor[account.status] ?? "bg-muted text-muted-foreground"}`}
+            >
+              {account.status}
+            </span>
+            <span className="text-xs text-muted-foreground">
+              {meta.label}
+              {owner ? ` · ${owner}` : ""}
+            </span>
+          </div>
+        </div>
+        <div className="text-right">
+          <p className="text-xs text-muted-foreground uppercase tracking-wider">
+            Balance
+          </p>
+          <p className="text-2xl font-semibold font-mono">
+            {formatAmount(account.balance ?? 0, currency)}
+          </p>
+        </div>
+      </div>
+
+      {canTransact && (
+        <BankTransactionDialog
+          accountId={account.id}
+          otherAccounts={otherAccounts}
+        />
+      )}
+
+      <Item variant="outline">
+        <ItemHeader>
+          <ItemTitle>Ledger</ItemTitle>
+          <span className="text-xs text-muted-foreground">
+            {ledger.length} entr{ledger.length !== 1 ? "ies" : "y"}
+          </span>
+        </ItemHeader>
+        <ItemContent>
+          <LedgerTable entries={ledger} />
+        </ItemContent>
+      </Item>
+    </div>
+  );
+}

src/components/frontend/banking/BankTransactionDialog.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { ArrowDownLeftIcon, ArrowRightLeftIcon, ArrowUpRightIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  depositFunds,
+  transferFunds,
+  withdrawFunds,
+} from "@/app/(frontend)/logistics/banking/actions";
+
+type Mode = "deposit" | "withdraw" | "transfer";
+
+const modeMeta: Record<
+  Mode,
+  { label: string; verb: string; description: string; icon: typeof ArrowDownLeftIcon }
+> = {
+  deposit: {
+    label: "Deposit",
+    verb: "Deposit",
+    description: "Add funds to this account.",
+    icon: ArrowDownLeftIcon,
+  },
+  withdraw: {
+    label: "Withdraw",
+    verb: "Withdraw",
+    description: "Remove funds from this account.",
+    icon: ArrowUpRightIcon,
+  },
+  transfer: {
+    label: "Transfer",
+    verb: "Transfer",
+    description: "Move funds from this account to another account.",
+    icon: ArrowRightLeftIcon,
+  },
+};
+
+interface BankTransactionDialogProps {
+  accountId: number;
+  otherAccounts: { id: number; name: string }[];
+}
+
+export function BankTransactionDialog({
+  accountId,
+  otherAccounts,
+}: BankTransactionDialogProps) {
+  const router = useRouter();
+  const [mode, setMode] = useState<Mode>("deposit");
+  const [open, setOpen] = useState(false);
+  const [amount, setAmount] = useState("");
+  const [toId, setToId] = useState("");
+  const [memo, setMemo] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  function openMode(next: Mode) {
+    setMode(next);
+    setError(null);
+    setOpen(true);
+  }
+
+  async function handleSubmit() {
+    const value = Number(amount);
+    if (!value || value <= 0) {
+      setError("Enter a valid amount.");
+      return;
+    }
+    if (mode === "transfer" && !toId) {
+      setError("Select a destination account.");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    const res =
+      mode === "deposit"
+        ? await depositFunds(accountId, value, memo || undefined)
+        : mode === "withdraw"
+          ? await withdrawFunds(accountId, value, memo || undefined)
+          : await transferFunds(accountId, Number(toId), value, memo || undefined);
+
+    if (res.success) {
+      setOpen(false);
+      setAmount("");
+      setToId("");
+      setMemo("");
+      router.refresh();
+    } else {
+      setError(res.error ?? "Transaction failed.");
+      setLoading(false);
+    }
+  }
+
+  const meta = modeMeta[mode];
+  const Icon = meta.icon;
+
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        {(Object.keys(modeMeta) as Mode[]).map((m) => {
+          const M = modeMeta[m];
+          const Mc = M.icon;
+          return (
+            <Button
+              key={m}
+              size="sm"
+              variant={mode === m ? "default" : "outline"}
+              onClick={() => openMode(m)}
+            >
+              <Mc className="size-4" />
+              {M.label}
+            </Button>
+          );
+        })}
+      </div>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Icon className="size-4" />
+              {meta.verb} Funds
+            </DialogTitle>
+            <DialogDescription>{meta.description}</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-1.5">
+              <Label>Amount</Label>
+              <Input
+                type="number"
+                min={1}
+                value={amount}
+                onChange={(e) => setAmount(e.target.value)}
+                placeholder="0"
+              />
+            </div>
+            {mode === "transfer" && (
+              <div className="flex flex-col gap-1.5">
+                <Label>Destination account</Label>
+                <Select value={toId} onValueChange={setToId}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select account" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {otherAccounts.map((a) => (
+                      <SelectItem key={a.id} value={String(a.id)}>
+                        {a.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+            <div className="flex flex-col gap-1.5">
+              <Label>Memo (optional)</Label>
+              <Textarea
+                value={memo}
+                onChange={(e) => setMemo(e.target.value)}
+                placeholder="Reason / reference"
+                rows={2}
+              />
+            </div>
+            {error && <p className="text-sm text-red-400">{error}</p>}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleSubmit} disabled={loading}>
+              {loading ? "Processing..." : meta.verb}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

src/components/frontend/banking/BankingOverview.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import type { ReactNode } from "react";
+import Link from "next/link";
+import type { BankAccount } from "@/payload-types";
+import { LandmarkIcon, WalletIcon } from "lucide-react";
+import { Item, ItemContent, ItemHeader, ItemMedia, ItemTitle } from "@/components/ui/item";
+import { formatAmount } from "@/lib/banking/format";
+import { AccountCard } from "@/components/frontend/banking/AccountCard";
+import { CreateAccountDialog } from "@/components/frontend/banking/CreateAccountDialog";
+import { MyWalletCard } from "@/components/frontend/banking/MyWalletCard";
+
+interface BankingOverviewProps {
+  accounts: BankAccount[];
+  currentUserId: number;
+  isManager: boolean;
+  factions: { id: number; name: string }[];
+}
+
+function Section({
+  title,
+  count,
+  children,
+}: {
+  title: string;
+  count: number;
+  children: ReactNode;
+}) {
+  return (
+    <section className="flex flex-col gap-3">
+      <div className="flex items-center gap-2">
+        <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+          {title}
+        </h2>
+        <span className="text-xs text-muted-foreground">
+          {count} account{count !== 1 ? "s" : ""}
+        </span>
+      </div>
+      {count === 0 ? (
+        <p className="text-sm text-muted-foreground italic">None.</p>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+          {children}
+        </div>
+      )}
+    </section>
+  );
+}
+
+export function BankingOverview({
+  accounts,
+  currentUserId,
+  isManager,
+  factions,
+}: BankingOverviewProps) {
+  const treasury = accounts.filter((a) => a.accountType === "treasury");
+  const faction = accounts.filter((a) => a.accountType === "faction");
+  const personal = accounts.filter((a) => a.accountType === "personal");
+
+  const myAccount = personal.find((a) => {
+    const ownerId = typeof a.ownerUser === "object" ? a.ownerUser?.id : a.ownerUser;
+    return ownerId === currentUserId;
+  });
+
+  const unitFunds = [...treasury, ...faction].reduce(
+    (sum, a) => sum + (a.balance ?? 0),
+    0,
+  );
+  const currency =
+    accounts.length > 0 && typeof accounts[0].currency === "object"
+      ? accounts[0].currency
+      : null;
+
+  const accountTypeLabels: Record<string, string> = {
+    treasury: "Treasury",
+    faction: "Faction",
+    personal: "Personal",
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <Item variant="outline">
+          <ItemMedia variant="icon" className="bg-blue-500/10">
+            <LandmarkIcon className="text-blue-400" />
+          </ItemMedia>
+          <ItemContent>
+            <ItemHeader>
+              <ItemTitle>Unit funds</ItemTitle>
+            </ItemHeader>
+            <span className="text-lg font-semibold font-mono">
+              {formatAmount(unitFunds, currency)}
+            </span>
+          </ItemContent>
+        </Item>
+
+        <Item variant="outline">
+          <ItemMedia variant="icon" className="bg-muted">
+            <LandmarkIcon className="text-muted-foreground" />
+          </ItemMedia>
+          <ItemContent>
+            <ItemHeader>
+              <ItemTitle>Accounts</ItemTitle>
+            </ItemHeader>
+            <span className="text-lg font-semibold font-mono">
+              {accounts.length}
+            </span>
+          </ItemContent>
+        </Item>
+
+        {myAccount ? (
+          <Link href={`/logistics/banking/${myAccount.id}`} className="block">
+            <Item variant="outline" className="transition-colors">
+              <ItemMedia variant="icon" className="bg-emerald-500/10">
+                <WalletIcon className="text-emerald-400" />
+              </ItemMedia>
+              <ItemContent>
+                <ItemHeader>
+                  <ItemTitle>My wallet</ItemTitle>
+                </ItemHeader>
+                <span className="text-lg font-semibold font-mono">
+                  {formatAmount(myAccount.balance ?? 0, currency)}
+                </span>
+              </ItemContent>
+            </Item>
+          </Link>
+        ) : (
+          <MyWalletCard />
+        )}
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+            Accounts
+          </h2>
+        </div>
+        <CreateAccountDialog isManager={isManager} factions={factions} />
+      </div>
+
+      <Section title="Treasury" count={treasury.length}>
+        {treasury.map((account) => (
+          <AccountCard key={account.id} account={account} />
+        ))}
+      </Section>
+
+      <Section title="Factions" count={faction.length}>
+        {faction.map((account) => (
+          <AccountCard key={account.id} account={account} />
+        ))}
+      </Section>
+
+      <Section title="Personal" count={personal.length}>
+        {personal.map((account) => (
+          <AccountCard key={account.id} account={account} />
+        ))}
+      </Section>
+
+      {accounts.length === 0 && (
+        <p className="text-sm text-muted-foreground italic">
+          No accounts yet. Create your first account to get started.
+          {isManager ? "" : " (Ask logistics personnel to set up the unit treasury.)"}
+        </p>
+      )}
+
+      <p className="text-xs text-muted-foreground">
+        Account types: {Object.values(accountTypeLabels).join(" · ")}.
+        Balances are denominated in the main currency set in Game Rules.
+      </p>
+    </div>
+  );
+}

src/components/frontend/banking/CreateAccountDialog.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { PlusIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { createBankAccount } from "@/app/(frontend)/logistics/banking/actions";
+
+interface CreateAccountDialogProps {
+  isManager: boolean;
+  factions: { id: number; name: string }[];
+}
+
+type AccountType = "treasury" | "faction" | "personal";
+
+export function CreateAccountDialog({ isManager, factions }: CreateAccountDialogProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [accountType, setAccountType] = useState<AccountType>("personal");
+  const [ownerFactionId, setOwnerFactionId] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit() {
+    if (!name.trim()) {
+      setError("Account name is required.");
+      return;
+    }
+    if (accountType === "faction" && !ownerFactionId) {
+      setError("Select an owner faction.");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    const res = await createBankAccount({
+      name: name.trim(),
+      accountType,
+      ownerFactionId: accountType === "faction" ? Number(ownerFactionId) : undefined,
+    });
+    if (res.success) {
+      setOpen(false);
+      setName("");
+      setAccountType("personal");
+      setOwnerFactionId("");
+      router.refresh();
+    } else {
+      setError(res.error ?? "Failed to create account.");
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm">
+          <PlusIcon className="size-4" />
+          New Account
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create Account</DialogTitle>
+          <DialogDescription>
+            Create a new bank account for the unit, a faction, or yourself.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1.5">
+            <Label>Account name</Label>
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g., Unit Treasury"
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label>Account type</Label>
+            <Select
+              value={accountType}
+              onValueChange={(v) => setAccountType(v as AccountType)}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="treasury">Treasury</SelectItem>
+                {isManager && <SelectItem value="faction">Faction</SelectItem>}
+                <SelectItem value="personal">Personal</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          {accountType === "faction" && (
+            <div className="flex flex-col gap-1.5">
+              <Label>Owner faction</Label>
+              <Select value={ownerFactionId} onValueChange={setOwnerFactionId}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select faction" />
+                </SelectTrigger>
+                <SelectContent>
+                  {factions.map((f) => (
+                    <SelectItem key={f.id} value={String(f.id)}>
+                      {f.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+          {accountType === "personal" && !isManager && (
+            <p className="text-xs text-muted-foreground">
+              This will create a personal account for you.
+            </p>
+          )}
+          {error && <p className="text-sm text-red-400">{error}</p>}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={loading}>
+            {loading ? "Creating..." : "Create"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/frontend/banking/LedgerTable.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import type { LedgerEntry } from "@/payload-types";
+import { formatDate } from "@/lib/banking/format";
+
+const typeMeta: Record<string, { label: string; cls: string }> = {
+  deposit: { label: "Deposit", cls: "text-emerald-400" },
+  withdrawal: { label: "Withdrawal", cls: "text-red-400" },
+  transfer: { label: "Transfer", cls: "text-blue-400" },
+  payment: { label: "Payment", cls: "text-red-400" },
+  fee: { label: "Fee", cls: "text-muted-foreground" },
+  salary: { label: "Salary", cls: "text-green-400" },
+  adjustment: { label: "Adjustment", cls: "text-amber-400" },
+};
+
+export function LedgerTable({ entries }: { entries: LedgerEntry[] }) {
+  if (entries.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground italic">
+        No ledger entries yet.
+      </p>
+    );
+  }
+
+  return (
+    <div className="border border-border rounded-lg overflow-hidden">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="bg-muted/50 border-b border-border">
+            <th className="text-left px-4 py-2.5 font-semibold uppercase text-xs tracking-wider text-muted-foreground">
+              Date
+            </th>
+            <th className="text-left px-4 py-2.5 font-semibold uppercase text-xs tracking-wider text-muted-foreground">
+              Type
+            </th>
+            <th className="text-left px-4 py-2.5 font-semibold uppercase text-xs tracking-wider text-muted-foreground">
+              Memo
+            </th>
+            <th className="text-right px-4 py-2.5 font-semibold uppercase text-xs tracking-wider text-muted-foreground">
+              Amount
+            </th>
+            <th className="text-right px-4 py-2.5 font-semibold uppercase text-xs tracking-wider text-muted-foreground">
+              Balance
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {entries.map((entry) => {
+            const meta = typeMeta[entry.type] ?? {
+              label: entry.type,
+              cls: "text-muted-foreground",
+            };
+            const amount = entry.amount ?? 0;
+            return (
+              <tr key={entry.id} className="border-b border-border/50">
+                <td className="px-4 py-2 text-muted-foreground">
+                  {formatDate(entry.timestamp)}
+                </td>
+                <td className={`px-4 py-2 font-medium ${meta.cls}`}>
+                  {meta.label}
+                </td>
+                <td className="px-4 py-2 text-muted-foreground">{entry.memo}</td>
+                <td
+                  className={`px-4 py-2 text-right font-mono ${amount >= 0 ? "text-emerald-400" : "text-red-400"}`}
+                >
+                  {amount >= 0 ? "+" : ""}
+                  {amount.toLocaleString()}
+                </td>
+                <td className="px-4 py-2 text-right font-mono">
+                  {(entry.balanceAfter ?? 0).toLocaleString()}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}

src/components/frontend/banking/MyWalletCard.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { WalletIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ensureMyAccount } from "@/app/(frontend)/logistics/banking/actions";
+
+export function MyWalletCard() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleCreate() {
+    setLoading(true);
+    setError(null);
+    const res = await ensureMyAccount();
+    if (res.success) {
+      router.push(`/logistics/banking/${res.data}`);
+      router.refresh();
+    } else {
+      setError(res.error ?? "Failed to create wallet.");
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="border border-border rounded-md p-4 flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        <WalletIcon className="size-4 text-emerald-400" />
+        <p className="text-sm font-semibold">My wallet</p>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        You don&apos;t have a personal account yet.
+      </p>
+      {error && <p className="text-xs text-red-400">{error}</p>}
+      <Button
+        size="sm"
+        className="w-fit"
+        onClick={handleCreate}
+        disabled={loading}
+      >
+        {loading ? "Creating..." : "Create wallet"}
+      </Button>
+    </div>
+  );
+}

src/components/frontend/blocks/AppSidebar.tsx

@@ -80,6 +80,10 @@ const data = {
           title: "Deployed Vehicles",
           url: "/logistics/game-vehicles",
         },
+        {
+          title: "Banking",
+          url: "/logistics/banking",
+        },
       ],
     },
   ],