feat(banking): redesign banking overview with wallet hero, activity feed, and tabs
This commit is contained in:
parent
9210b7bbec
commit
4a2e0d5406
3 changed files with 162 additions and 105 deletions
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
)}
|
||||
</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>
|
||||
{isManager && (
|
||||
<p className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70">
|
||||
UNIT FUNDS
|
||||
{formatAmount(unitFundsTotal, currencyResource)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<CreateAccountDialog isManager={isManager} factions={factions} />
|
||||
</div>
|
||||
|
||||
<Section title="Treasury" count={treasury.length}>
|
||||
{treasury.map((account) => (
|
||||
<AccountCard key={account.id} account={account} />
|
||||
))}
|
||||
</Section>
|
||||
<TabsContent value="activity" className="m-0">
|
||||
<ActivityFeed
|
||||
transactions={recentTransactions}
|
||||
currencyResource={currencyResource}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<Section title="Factions" count={faction.length}>
|
||||
{faction.map((account) => (
|
||||
<AccountCard key={account.id} account={account} />
|
||||
))}
|
||||
</Section>
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<Section title="Personal" count={personal.length}>
|
||||
{personal.map((account) => (
|
||||
<AccountCard key={account.id} account={account} />
|
||||
))}
|
||||
</Section>
|
||||
{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>
|
||||
)}
|
||||
|
||||
{isManager && factionAccounts.length > 0 && (
|
||||
<Section title="Factions" count={factionAccounts.length}>
|
||||
{factionAccounts.map((account) => (
|
||||
<AccountCard key={account.id} account={account} />
|
||||
))}
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue