90 lines
3.2 KiB
TypeScript
90 lines
3.2 KiB
TypeScript
"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 { type AccountStatus, accountStatusBase, accountStatusClass } from "@/lib/banking/ui";
|
|
import { accountTypeInfo } from "@/components/frontend/banking/AccountCard";
|
|
import { BankTransactionDialog } from "@/components/frontend/banking/BankTransactionDialog";
|
|
import { LedgerTable } from "@/components/frontend/banking/LedgerTable";
|
|
|
|
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 statusKey = (account.status ?? "open") as AccountStatus;
|
|
|
|
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={`${accountStatusBase} ${accountStatusClass[statusKey] ?? accountStatusClass.open}`}
|
|
>
|
|
{statusKey}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{meta.label}
|
|
{owner ? ` · ${owner}` : ""}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="font-mono text-[10px] 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>
|
|
);
|
|
}
|