feat(banking): redesign banking overview with wallet hero, activity feed, and tabs

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

@@ -1,7 +1,7 @@
 import config from "@payload-config";
 import { getPayload } from "payload";
 import { headers as nextHeaders } from "next/headers";
-import type { BankAccount, Faction } from "@/payload-types";
+import type { BankAccount, BankTransaction, Faction, Resource } from "@/payload-types";
 import { LandmarkIcon } from "lucide-react";
 import { BankingOverview } from "@/components/frontend/banking/BankingOverview";
 import hasRoles from "@/utils/access-control/hasRoles";
@@ -26,6 +26,14 @@ export default async function BankingPage() {
   });
   const accounts = accountsRes.docs as unknown as BankAccount[];
 
+  const transactionsRes = await payload.find({
+    collection: "bank-transactions",
+    sort: "-timestamp",
+    limit: 25,
+    depth: 1,
+  });
+  const recentTransactions = transactionsRes.docs as unknown as BankTransaction[];
+
   const factionsRes = await payload.find({
     collection: "factions",
     limit: 100,
@@ -41,6 +49,21 @@ export default async function BankingPage() {
       (await hasLogisticsQualification(payload, user).catch(() => false))
     : false;
 
+  const currentUser = user
+    ? {
+        id: user.id as number,
+        username: user.username,
+        displayName: user.displayName ?? user.username,
+      }
+    : null;
+
+  // Currency is shared across all accounts (main currency set in Game Rules).
+  // Resolve from the first account whose currency populated at depth 1.
+  const currencyResource =
+    accounts.length > 0 && typeof accounts[0].currency === "object"
+      ? (accounts[0].currency as Resource)
+      : null;
+
   return (
     <div className="p-5 flex flex-col gap-6">
       <div className="flex flex-col gap-1">
@@ -55,7 +78,9 @@ export default async function BankingPage() {
 
       <BankingOverview
         accounts={accounts}
-        currentUserId={user?.id as number}
+        recentTransactions={recentTransactions}
+        currentUser={currentUser}
+        currencyResource={currencyResource}
         isManager={isManager}
         factions={factions}
       />

src/components/frontend/banking/BankTransactionDialog.tsx

@@ -124,6 +124,7 @@ export function BankTransactionDialog({
               size="sm"
               variant={mode === m ? "default" : "outline"}
               onClick={() => openMode(m)}
+              className="font-mono text-xs uppercase tracking-wider"
             >
               <Mc className="size-4" />
               {M.label}

src/components/frontend/banking/BankingOverview.tsx

@@ -1,18 +1,25 @@
 "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 type { BankAccount, BankTransaction, Resource } from "@/payload-types";
+import { LandmarkIcon } from "lucide-react";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "@/components/ui/tabs";
 import { AccountCard } from "@/components/frontend/banking/AccountCard";
 import { CreateAccountDialog } from "@/components/frontend/banking/CreateAccountDialog";
-import { MyWalletCard } from "@/components/frontend/banking/MyWalletCard";
+import { WalletHero } from "@/components/frontend/banking/WalletHero";
+import { ActivityFeed } from "@/components/frontend/banking/ActivityFeed";
+import { currencyLabel, formatAmount } from "@/lib/banking/format";
 
 interface BankingOverviewProps {
   accounts: BankAccount[];
-  currentUserId: number;
+  recentTransactions: BankTransaction[];
+  currentUser: { id: number; username: string; displayName?: string } | null;
+  currencyResource: Resource | null;
   isManager: boolean;
   factions: { id: number; name: string }[];
 }
@@ -29,10 +36,10 @@ function Section({
   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">
+        <h3 className="font-mono text-[11px] font-medium uppercase tracking-wider text-muted-foreground/80">
           {title}
-        </h2>
-        <span className="text-xs text-muted-foreground">
+        </h3>
+        <span className="font-mono text-[10px] text-muted-foreground/50">
           {count} account{count !== 1 ? "s" : ""}
         </span>
       </div>
@@ -49,123 +56,147 @@ function Section({
 
 export function BankingOverview({
   accounts,
-  currentUserId,
+  recentTransactions,
+  currentUser,
+  currencyResource,
   isManager,
   factions,
 }: BankingOverviewProps) {
   const treasury = accounts.filter((a) => a.accountType === "treasury");
-  const faction = accounts.filter((a) => a.accountType === "faction");
+  const factionAccounts = 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 myAccount = currentUser
+    ? personal.find((a) => {
+        if (!a.ownerUser) return false;
+        const ownerId =
+          typeof a.ownerUser === "object" ? a.ownerUser.id : a.ownerUser;
+        return ownerId === currentUser.id;
+      })
+    : undefined;
 
-  const unitFunds = [...treasury, ...faction].reduce(
+  // Regular users see only their own personal account; managers see everything.
+  const visiblePersonal = isManager
+    ? personal
+    : myAccount
+      ? [myAccount]
+      : [];
+
+  const unitFundsTotal = [...treasury, ...factionAccounts].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",
-  };
+  const visibleAccountsCount =
+    (isManager ? treasury.length + factionAccounts.length : 0) +
+    visiblePersonal.length;
+
+  const tickerCurrency = (label: string): string =>
+    label.length > 8 ? `${label.slice(0, 8)}…` : label;
 
   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>
+    <div className="flex flex-col gap-6">
+      <WalletHero
+        account={myAccount ?? null}
+        currentUser={currentUser}
+        currencyResource={currencyResource}
+      />
 
-        <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>
+      <Tabs defaultValue="activity" className="gap-4">
+        <div className="flex flex-wrap items-end justify-between gap-2">
+          <TabsList
+            variant="line"
+            className="grid w-full max-w-sm grid-cols-2"
+          >
+            <TabsTrigger
+              value="activity"
+              className="font-mono text-[10px] uppercase tracking-wider"
+            >
+              Activity
+            </TabsTrigger>
+            <TabsTrigger
+              value="accounts"
+              className="font-mono text-[10px] uppercase tracking-wider"
+            >
+              Accounts
+            </TabsTrigger>
+          </TabsList>
 
-        {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 />
+          {isManager && (
+            <p className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70">
+              UNIT FUNDS&nbsp;
+              {formatAmount(unitFundsTotal, currencyResource)}
+            </p>
           )}
         </div>
 
+        <TabsContent value="activity" className="m-0">
+          <ActivityFeed
+            transactions={recentTransactions}
+            currencyResource={currencyResource}
+          />
+        </TabsContent>
+
+        <TabsContent value="accounts" className="m-0 flex flex-col gap-6">
           <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
+              <LandmarkIcon className="size-4 text-muted-foreground" />
+              <h2 className="font-mono text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                Unit Accounts
               </h2>
+              <span className="font-mono text-[10px] text-muted-foreground/50">
+                {visibleAccountsCount}
+              </span>
             </div>
             <CreateAccountDialog isManager={isManager} factions={factions} />
           </div>
 
+          {visibleAccountsCount === 0 ? (
+            <p className="text-sm text-muted-foreground italic">
+              No accessible accounts.{" "}
+              {!isManager && "Ask logistics personnel to set up the unit treasury."}
+            </p>
+          ) : (
+            <>
+              {isManager && treasury.length > 0 && (
                 <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) => (
+              {isManager && factionAccounts.length > 0 && (
+                <Section title="Factions" count={factionAccounts.length}>
+                  {factionAccounts.map((account) => (
                     <AccountCard key={account.id} account={account} />
                   ))}
                 </Section>
+              )}
 
-      <Section title="Personal" count={personal.length}>
-        {personal.map((account) => (
+              {visiblePersonal.length > 0 && (
+                <Section
+                  title={isManager ? "Personal" : "My Account"}
+                  count={visiblePersonal.length}
+                >
+                  {visiblePersonal.map((account) => (
                     <AccountCard key={account.id} account={account} />
                   ))}
                 </Section>
+              )}
+            </>
+          )}
+        </TabsContent>
+      </Tabs>
 
       {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 className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground/40">
+        SYS.BANKING / currency={tickerCurrency(currencyLabel(currencyResource))}
       </p>
     </div>
   );