mirror of
https://github.com/soconnor0919/beenvoice.git
synced 2026-05-08 09:38:55 -04:00
Update README and improve mobile responsiveness for invoicing UI
- README: fix auth (better-auth), database (PostgreSQL), env vars, Docker setup, and feature list to reflect actual implementation - InvoicesDataTable: show status badge + amount inline on mobile (previously hidden behind sm: breakpoint, leaving mobile users with no financial or status info at a glance) - InvoiceItemsTable: hide Date/Hours/Rate columns on mobile and fold that info into the Description cell as secondary text - invoice-view.tsx header card: wrap to column layout on mobile so status/amount/button don't overflow narrow screens; also improve item rows to show date, hours, and rate as subtext https://claude.ai/code/session_012sqEgNQpx676isepeoX4Mi
This commit is contained in:
@@ -134,13 +134,23 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
|
||||
<div className="bg-primary/10 hidden p-2 sm:flex">
|
||||
<FileText className="text-primary h-4 w-4" />
|
||||
</div>
|
||||
<div className="max-w-[80px] min-w-0 sm:max-w-[200px] lg:max-w-[300px]">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate font-medium">
|
||||
{invoice.client?.name ?? "—"}
|
||||
</p>
|
||||
<p className="text-muted-foreground truncate text-xs sm:text-sm">
|
||||
{invoice.invoiceNumber}
|
||||
</p>
|
||||
{/* Show status + amount inline on mobile only */}
|
||||
<div className="mt-1 flex items-center gap-2 sm:hidden">
|
||||
<StatusBadge
|
||||
status={getStatusType(invoice)}
|
||||
className="text-xs"
|
||||
/>
|
||||
<span className="text-foreground text-xs font-semibold">
|
||||
{formatCurrency(invoice.totalAmount)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user