mirror of
https://github.com/soconnor0919/beenvoice.git
synced 2026-05-08 17:48:55 -04:00
feat: polish invoice editor and viewer UI with custom NumberInput
component - Create custom NumberInput component with increment/decrement buttons - Add 0.25 step increments for hours and rates in invoice forms - Implement emerald-themed styling with hover states and accessibility - Add keyboard navigation (arrow keys) and proper ARIA support - Condense invoice editor tax/totals section into efficient grid layout - Update client dropdown to single-line format (name + email) - Add fixed footer with floating action bar pattern matching business forms - Redesign invoice viewer with better space utilization and visual hierarchy - Maintain professional appearance and consistent design system - Fix Next.js 15 params Promise handling across all invoice pages - Resolve TypeScript compilation errors and type-only imports
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
import { api } from "~/trpc/react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { StatusBadge, type StatusType } from "~/components/ui/status-badge";
|
||||
import {
|
||||
Users,
|
||||
FileText,
|
||||
@@ -44,60 +45,60 @@ export function DashboardStats() {
|
||||
|
||||
return (
|
||||
<div className="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
|
||||
<Card className="border-0 bg-white/80 shadow-xl backdrop-blur-sm transition-all duration-300 hover:shadow-2xl dark:bg-gray-800/80">
|
||||
<Card className="shadow-xl backdrop-blur-sm transition-all duration-300 hover:shadow-2xl">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
<CardTitle className="text-muted-foreground text-sm font-medium">
|
||||
Total Clients
|
||||
</CardTitle>
|
||||
<div className="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
|
||||
<Users className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
|
||||
<div className="rounded-lg bg-emerald-100 p-2">
|
||||
<Users className="h-4 w-4 text-emerald-600" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold text-emerald-600 dark:text-emerald-400">
|
||||
<div className="text-3xl font-bold text-emerald-600">
|
||||
{totalClients}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
<p className="text-muted-foreground text-xs">
|
||||
{totalClients > lastMonthClients ? "+" : ""}
|
||||
{totalClients - lastMonthClients} from last month
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-0 bg-white/80 shadow-xl backdrop-blur-sm transition-all duration-300 hover:shadow-2xl dark:bg-gray-800/80">
|
||||
<Card className="shadow-xl backdrop-blur-sm transition-all duration-300 hover:shadow-2xl">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
<CardTitle className="text-muted-foreground text-sm font-medium">
|
||||
Total Invoices
|
||||
</CardTitle>
|
||||
<div className="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30">
|
||||
<FileText className="h-4 w-4 text-blue-600 dark:text-blue-400" />
|
||||
<div className="rounded-lg bg-blue-100 p-2">
|
||||
<FileText className="h-4 w-4 text-blue-600" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold text-blue-600 dark:text-blue-400">
|
||||
<div className="text-3xl font-bold text-blue-600">
|
||||
{totalInvoices}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
<p className="text-muted-foreground text-xs">
|
||||
{totalInvoices > lastMonthInvoices ? "+" : ""}
|
||||
{totalInvoices - lastMonthInvoices} from last month
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-0 bg-white/80 shadow-xl backdrop-blur-sm transition-all duration-300 hover:shadow-2xl dark:bg-gray-800/80">
|
||||
<Card className="shadow-xl backdrop-blur-sm transition-all duration-300 hover:shadow-2xl">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
<CardTitle className="text-muted-foreground text-sm font-medium">
|
||||
Revenue
|
||||
</CardTitle>
|
||||
<div className="rounded-lg bg-teal-100 p-2 dark:bg-teal-900/30">
|
||||
<TrendingUp className="h-4 w-4 text-teal-600 dark:text-teal-400" />
|
||||
<div className="rounded-lg bg-teal-100 p-2">
|
||||
<TrendingUp className="h-4 w-4 text-teal-600" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold text-teal-600 dark:text-teal-400">
|
||||
<div className="text-3xl font-bold text-teal-600">
|
||||
${totalRevenue.toFixed(2)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
<p className="text-muted-foreground text-xs">
|
||||
{totalRevenue > lastMonthRevenue ? "+" : ""}
|
||||
{(
|
||||
((totalRevenue - lastMonthRevenue) / (lastMonthRevenue || 1)) *
|
||||
@@ -108,22 +109,20 @@ export function DashboardStats() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-0 bg-white/80 shadow-xl backdrop-blur-sm transition-all duration-300 hover:shadow-2xl dark:bg-gray-800/80">
|
||||
<Card className="shadow-xl backdrop-blur-sm transition-all duration-300 hover:shadow-2xl">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
<CardTitle className="text-muted-foreground text-sm font-medium">
|
||||
Pending Invoices
|
||||
</CardTitle>
|
||||
<div className="rounded-lg bg-orange-100 p-2 dark:bg-orange-900/30">
|
||||
<Calendar className="h-4 w-4 text-orange-600 dark:text-orange-400" />
|
||||
<div className="rounded-lg bg-orange-100 p-2">
|
||||
<Calendar className="h-4 w-4 text-orange-600" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold text-orange-600 dark:text-orange-400">
|
||||
<div className="text-3xl font-bold text-orange-600">
|
||||
{pendingInvoices}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Due this month
|
||||
</p>
|
||||
<p className="text-muted-foreground text-xs">Due this month</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
@@ -134,34 +133,27 @@ export function DashboardStats() {
|
||||
export function DashboardCards() {
|
||||
return (
|
||||
<div className="mb-8 grid grid-cols-1 gap-8 lg:grid-cols-2">
|
||||
<Card className="border-0 bg-white/80 shadow-xl backdrop-blur-sm transition-all duration-300 hover:shadow-2xl dark:bg-gray-800/80">
|
||||
<Card className="shadow-xl backdrop-blur-sm transition-all duration-300 hover:shadow-2xl">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-emerald-700 dark:text-emerald-400">
|
||||
<div className="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
|
||||
<CardTitle className="flex items-center gap-2 text-emerald-700">
|
||||
<div className="rounded-lg bg-emerald-100 p-2">
|
||||
<Users className="h-5 w-5" />
|
||||
</div>
|
||||
Manage Clients
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-gray-600 dark:text-gray-300">
|
||||
<p className="text-muted-foreground">
|
||||
Add new clients and manage your existing client relationships.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
asChild
|
||||
className="bg-gradient-to-r from-emerald-600 to-teal-600 font-medium text-white shadow-lg transition-all duration-200 hover:from-emerald-700 hover:to-teal-700 hover:shadow-xl"
|
||||
>
|
||||
<Button asChild variant="brand">
|
||||
<Link href="/dashboard/clients/new">
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add Client
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
asChild
|
||||
className="border-gray-300 font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
|
||||
>
|
||||
<Button variant="outline" asChild className="font-medium">
|
||||
<Link href="/dashboard/clients">
|
||||
View All Clients
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
@@ -171,34 +163,27 @@ export function DashboardCards() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-0 bg-white/80 shadow-xl backdrop-blur-sm transition-all duration-300 hover:shadow-2xl dark:bg-gray-800/80">
|
||||
<Card className="shadow-xl backdrop-blur-sm transition-all duration-300 hover:shadow-2xl">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-emerald-700 dark:text-emerald-400">
|
||||
<div className="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
|
||||
<CardTitle className="flex items-center gap-2 text-emerald-700">
|
||||
<div className="rounded-lg bg-emerald-100 p-2">
|
||||
<FileText className="h-5 w-5" />
|
||||
</div>
|
||||
Create Invoices
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-gray-600 dark:text-gray-300">
|
||||
<p className="text-muted-foreground">
|
||||
Generate professional invoices and track payments.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
asChild
|
||||
className="bg-gradient-to-r from-emerald-600 to-teal-600 font-medium text-white shadow-lg transition-all duration-200 hover:from-emerald-700 hover:to-teal-700 hover:shadow-xl"
|
||||
>
|
||||
<Button asChild variant="brand">
|
||||
<Link href="/dashboard/invoices/new">
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
New Invoice
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
asChild
|
||||
className="border-gray-300 font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
|
||||
>
|
||||
<Button variant="outline" asChild className="font-medium">
|
||||
<Link href="/dashboard/invoices">
|
||||
View All Invoices
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
@@ -222,22 +207,20 @@ export function DashboardActivity() {
|
||||
const recentInvoices = invoices?.slice(0, 5) ?? [];
|
||||
|
||||
return (
|
||||
<Card className="border-0 bg-white/80 shadow-xl backdrop-blur-sm dark:bg-gray-800/80">
|
||||
<Card className="shadow-xl backdrop-blur-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-emerald-700 dark:text-emerald-400">
|
||||
Recent Activity
|
||||
</CardTitle>
|
||||
<CardTitle className="text-emerald-700">Recent Activity</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{recentInvoices.length === 0 ? (
|
||||
<div className="py-12 text-center text-gray-500 dark:text-gray-400">
|
||||
<div className="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-gray-100 p-4 dark:bg-gray-700">
|
||||
<FileText className="h-8 w-8 text-gray-400 dark:text-gray-500" />
|
||||
<div className="text-muted-foreground py-12 text-center">
|
||||
<div className="bg-muted mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full p-4">
|
||||
<FileText className="text-muted-foreground h-8 w-8" />
|
||||
</div>
|
||||
<p className="mb-2 text-lg font-medium dark:text-gray-300">
|
||||
<p className="text-foreground mb-2 text-lg font-medium">
|
||||
No recent activity
|
||||
</p>
|
||||
<p className="text-sm dark:text-gray-400">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Start by adding your first client or creating an invoice
|
||||
</p>
|
||||
</div>
|
||||
@@ -246,37 +229,24 @@ export function DashboardActivity() {
|
||||
{recentInvoices.map((invoice) => (
|
||||
<div
|
||||
key={invoice.id}
|
||||
className="flex items-center justify-between rounded-lg bg-gray-50 p-4 dark:bg-gray-700"
|
||||
className="bg-muted/50 flex items-center justify-between rounded-lg p-4"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
|
||||
<FileText className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
|
||||
<div className="rounded-lg bg-emerald-100 p-2">
|
||||
<FileText className="h-4 w-4 text-emerald-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-900 dark:text-white">
|
||||
<p className="text-foreground font-medium">
|
||||
Invoice #{invoice.invoiceNumber}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{invoice.client?.name ?? "Unknown Client"} • $
|
||||
{invoice.totalAmount.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`rounded-full px-2 py-1 text-xs font-medium ${
|
||||
invoice.status === "paid"
|
||||
? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
|
||||
: invoice.status === "sent"
|
||||
? "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
|
||||
: invoice.status === "overdue"
|
||||
? "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
|
||||
: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300"
|
||||
}`}
|
||||
>
|
||||
{invoice.status.charAt(0).toUpperCase() +
|
||||
invoice.status.slice(1)}
|
||||
</span>
|
||||
<StatusBadge status={invoice.status as StatusType} />
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<Link href={`/dashboard/invoices/${invoice.id}`}>
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
|
||||
Reference in New Issue
Block a user