92 lines
2.7 KiB
TypeScript
92 lines
2.7 KiB
TypeScript
"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>
|
|
);
|
|
}
|