51 lines
2.2 KiB
TypeScript
51 lines
2.2 KiB
TypeScript
import DigitalProgressBar from '@/components/DigitalProgressBar';
|
|
import { type Bucket } from '@/types';
|
|
|
|
const centsToDollars = (cents: number): number => cents / 100;
|
|
const basisPointsToPercent = (bp: number): number => bp / 100;
|
|
const formatDollars = (cents: number): string => `$${centsToDollars(cents).toFixed(0)}`;
|
|
|
|
export default function BucketCard({ bucket }: { bucket: Bucket }) {
|
|
const hasFiniteCapacity = bucket.allocation_type === 'fixed_limit' && bucket.effective_capacity !== null;
|
|
|
|
return (
|
|
<div className="divide-y-4 divide-red-500">
|
|
{/* Name */}
|
|
<div className="px-3 py-1.5">
|
|
<span className="text-red-500 font-mono font-bold uppercase tracking-wider text-sm truncate block">
|
|
{bucket.name}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Progress bars or text — fixed height */}
|
|
<div className="px-3 py-3 h-14 flex items-center">
|
|
{hasFiniteCapacity ? (
|
|
<div className="w-full">
|
|
<DigitalProgressBar
|
|
current={bucket.current_balance}
|
|
capacity={bucket.effective_capacity!}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="w-full text-center">
|
|
<span className="font-mono text-red-500/30 text-xs uppercase tracking-widest">
|
|
{bucket.allocation_type === 'unlimited' ? '~ ALL REMAINING ~' : `~ ${basisPointsToPercent(bucket.allocation_value ?? 0).toFixed(2)}% ~`}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Amount */}
|
|
<div className="px-3 py-1.5 text-center">
|
|
<span className="font-digital text-red-500 text-sm">
|
|
{formatDollars(bucket.current_balance)}
|
|
</span>
|
|
{hasFiniteCapacity && (
|
|
<span className="font-digital text-red-500/50 text-sm">
|
|
{' '}/ {formatDollars(bucket.effective_capacity!)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|