feat(mobile): mobile cards for yachts, companies, berths, invoices, expenses
Five new <EntityCard> files using the shared <ListCard> shell, wired
into each list page's <DataTable> via cardRender. Desktop view
(lg+) is unchanged.
- YachtCard: Ship icon, owner subtitle (User/Building2 icon by
ownerType), dimensions in meters preferred, hull #,
status pill. No accent bar (status is free-text).
- CompanyCard: Building2 icon, legalName subtitle, country (MapPin)
+ tax id (Hash) meta, member/yacht count line.
- BerthCard: Anchor icon, area subtitle (MapPin), dimensions
meta, status pill. Status-encoded accent bar
(emerald=available, amber=under_offer, slate=sold).
- InvoiceCard: FileText icon, client subtitle, due date (Calendar)
meta, prominent currency-formatted amount. Status
accent bar (emerald=paid, orange=overdue, ...).
- ExpenseCard: Receipt icon, category subtitle, expense date meta,
prominent amount, payment-status pill, "Possible
duplicate" pill when duplicateOf is set. Accent bar
by paymentStatus, overridden to amber when flagged
as duplicate.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
194
src/components/expenses/expense-card.tsx
Normal file
194
src/components/expenses/expense-card.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
'use client';
|
||||
|
||||
import { format } from 'date-fns';
|
||||
import { Archive, Calendar, Eye, MoreHorizontal, Pencil, Receipt, Tag } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { ListCard, ListCardAvatar, ListCardMeta } from '@/components/shared/list-card';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { ExpenseRow } from './expense-columns';
|
||||
|
||||
const PAYMENT_STATUS_COLORS: Record<string, string> = {
|
||||
unpaid: 'bg-red-100 text-red-700 border-red-200',
|
||||
paid: 'bg-green-100 text-green-700 border-green-200',
|
||||
partial: 'bg-yellow-100 text-yellow-700 border-yellow-200',
|
||||
reconciled: 'bg-green-100 text-green-700 border-green-200',
|
||||
flagged: 'bg-rose-100 text-rose-700 border-rose-200',
|
||||
pending: 'bg-amber-100 text-amber-700 border-amber-200',
|
||||
};
|
||||
|
||||
/**
|
||||
* Accent bar by payment status:
|
||||
* paid / reconciled → emerald
|
||||
* pending → amber
|
||||
* flagged → rose
|
||||
* other / null → slate
|
||||
* If duplicateOf is set, override to amber-500.
|
||||
*/
|
||||
function deriveAccent(status: string | null, duplicateOf: string | null): string {
|
||||
if (duplicateOf) return 'bg-amber-500';
|
||||
switch (status) {
|
||||
case 'paid':
|
||||
case 'reconciled':
|
||||
return 'bg-emerald-400';
|
||||
case 'pending':
|
||||
return 'bg-amber-400';
|
||||
case 'flagged':
|
||||
return 'bg-rose-400';
|
||||
default:
|
||||
return 'bg-slate-300';
|
||||
}
|
||||
}
|
||||
|
||||
function formatAmount(amount: string, currency: string): string {
|
||||
try {
|
||||
return new Intl.NumberFormat('en', { style: 'currency', currency }).format(Number(amount));
|
||||
} catch {
|
||||
return `${currency} ${amount}`;
|
||||
}
|
||||
}
|
||||
|
||||
interface ExpenseCardProps {
|
||||
expense: ExpenseRow;
|
||||
portSlug: string;
|
||||
onEdit: (expense: ExpenseRow) => void;
|
||||
onArchive: (expense: ExpenseRow) => void;
|
||||
}
|
||||
|
||||
export function ExpenseCard({ expense, portSlug, onEdit, onArchive }: ExpenseCardProps) {
|
||||
const accentClass = deriveAccent(expense.paymentStatus, expense.duplicateOf);
|
||||
|
||||
const title =
|
||||
expense.establishmentName ??
|
||||
(expense.description ? expense.description.slice(0, 40) : null) ??
|
||||
'Untitled expense';
|
||||
|
||||
// Subtitle: category (capitalized) or "{paymentMethod} by {payer}"
|
||||
let subtitle: string | null = null;
|
||||
if (expense.category) {
|
||||
subtitle = expense.category.replace(/_/g, ' ');
|
||||
// Capitalize first letter
|
||||
subtitle = subtitle.charAt(0).toUpperCase() + subtitle.slice(1);
|
||||
} else if (expense.paymentMethod || expense.payer) {
|
||||
const parts: string[] = [];
|
||||
if (expense.paymentMethod) parts.push(expense.paymentMethod);
|
||||
if (expense.payer) parts.push(`by ${expense.payer}`);
|
||||
subtitle = parts.join(' ');
|
||||
}
|
||||
const hasCategory = !!expense.category;
|
||||
|
||||
let dateFormatted: string | null = null;
|
||||
try {
|
||||
dateFormatted = format(new Date(expense.expenseDate), 'MMM d, yyyy');
|
||||
} catch {
|
||||
dateFormatted = expense.expenseDate;
|
||||
}
|
||||
|
||||
const amountFormatted = formatAmount(expense.amount, expense.currency);
|
||||
|
||||
const statusColor = expense.paymentStatus
|
||||
? (PAYMENT_STATUS_COLORS[expense.paymentStatus] ??
|
||||
'bg-muted text-muted-foreground border-muted')
|
||||
: null;
|
||||
|
||||
return (
|
||||
<ListCard
|
||||
href={`/${portSlug}/expenses/${expense.id}`}
|
||||
ariaLabel={`Expense: ${title}`}
|
||||
accentClassName={accentClass}
|
||||
actions={
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
aria-label={`Actions for expense: ${title}`}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={`/${portSlug}/expenses/${expense.id}`}>
|
||||
<Eye className="mr-2 h-3.5 w-3.5" />
|
||||
View
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => onEdit(expense)}>
|
||||
<Pencil className="mr-2 h-3.5 w-3.5" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-destructive" onClick={() => onArchive(expense)}>
|
||||
<Archive className="mr-2 h-3.5 w-3.5" />
|
||||
Archive
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<ListCardAvatar icon={<Receipt className="h-5 w-5" />} />
|
||||
<div className="min-w-0 flex-1">
|
||||
{/* Title row + spacer for actions button */}
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h3 className="truncate text-base font-semibold tracking-tight text-foreground">
|
||||
{title}
|
||||
</h3>
|
||||
<span aria-hidden className="block h-9 w-9 shrink-0" />
|
||||
</div>
|
||||
|
||||
{/* Category / payer subtitle */}
|
||||
{subtitle ? (
|
||||
<p className="mt-0.5 inline-flex items-center gap-1 truncate text-sm text-muted-foreground">
|
||||
{hasCategory ? (
|
||||
<Tag className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
|
||||
) : null}
|
||||
<span className="truncate">{subtitle}</span>
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{/* Amount — prominent */}
|
||||
<p className="mt-1 text-base font-semibold tabular-nums text-foreground">
|
||||
{amountFormatted}
|
||||
</p>
|
||||
|
||||
{/* Date meta */}
|
||||
{dateFormatted ? (
|
||||
<div className="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground">
|
||||
<ListCardMeta icon={<Calendar className="h-3 w-3" />}>{dateFormatted}</ListCardMeta>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Status + duplicate pills */}
|
||||
<div className="mt-1.5 flex flex-wrap items-center gap-1.5">
|
||||
{statusColor && expense.paymentStatus ? (
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium capitalize',
|
||||
statusColor,
|
||||
)}
|
||||
>
|
||||
{expense.paymentStatus}
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
{expense.duplicateOf ? (
|
||||
<span className="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700">
|
||||
Possible duplicate
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ListCard>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user