soconnor/beenvoice
1
0
Fork 0
mirror of https://github.com/soconnor0919/beenvoice.git synced 2026-05-08 09:38:55 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: polish invoice editor and viewer UI with custom NumberInput

Browse Source 
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:
Sean O'Connor
2025-07-15 00:29:02 -04:00
parent 89de059501
commit f331136090
79 changed files with 9944 additions and 4223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/page.tsx
+50 -77
View File
@@ -23,26 +23,19 @@ import {
export default function HomePage() {
return (
<div className="min-h-screen bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-900 dark:to-gray-800">
<div className="bg-gradient-auth min-h-screen">
<AuthRedirect />
{/* Header */}
<header className="border-b border-green-200 bg-white/80 backdrop-blur-sm dark:border-gray-700 dark:bg-gray-900/80">
<header className="border-border bg-card/80 border-b backdrop-blur-sm">
<div className="container mx-auto px-4 py-4">
<div className="flex items-center justify-between">
<Logo />
<div className="flex items-center space-x-4">
<Link href="/auth/signin">
<Button
variant="ghost"
className="dark:text-gray-300 dark:hover:bg-gray-800"
>
Sign In
</Button>
<Button variant="ghost">Sign In</Button>
</Link>
<Link href="/auth/register">
<Button className="dark:bg-green-600 dark:hover:bg-green-700">
Get Started
</Button>
<Button>Get Started</Button>
</Link>
</div>
</div>
@@ -52,33 +45,23 @@ export default function HomePage() {
{/* Hero Section */}
<section className="px-4 py-20">
<div className="container mx-auto max-w-4xl text-center">
<h1 className="mb-6 text-5xl font-bold text-gray-900 md:text-6xl dark:text-white">
<h1 className="text-foreground mb-6 text-5xl font-bold md:text-6xl">
Simple Invoicing for
<span className="text-green-600 dark:text-green-400">
{" "}
Freelancers
</span>
<span className="text-green-600"> Freelancers</span>
</h1>
<p className="mx-auto mb-8 max-w-2xl text-xl text-gray-600 dark:text-gray-300">
<p className="text-muted-foreground mx-auto mb-8 max-w-2xl text-xl">
Create professional invoices, manage clients, and get paid faster
with beenvoice. The invoicing app that works as hard as you do.
</p>
<div className="flex flex-col justify-center gap-4 sm:flex-row">
<Link href="/auth/register">
<Button
size="lg"
className="px-8 py-6 text-lg dark:bg-green-600 dark:hover:bg-green-700"
>
<Button size="lg" className="px-8 py-6 text-lg">
Start Free Trial
<ArrowRight className="ml-2 h-5 w-5" />
</Button>
</Link>
<Link href="#features">
<Button
variant="outline"
size="lg"
className="px-8 py-6 text-lg dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
>
<Button variant="outline" size="lg" className="px-8 py-6 text-lg">
See How It Works
</Button>
</Link>
@@ -87,30 +70,28 @@ export default function HomePage() {
</section>
{/* Features Section */}
<section id="features" className="bg-white px-4 py-20 dark:bg-gray-800">
<section id="features" className="bg-card px-4 py-20">
<div className="container mx-auto max-w-6xl">
<div className="mb-16 text-center">
<h2 className="mb-4 text-4xl font-bold text-gray-900 dark:text-white">
<h2 className="text-card-foreground mb-4 text-4xl font-bold">
Everything you need to invoice like a pro
</h2>
<p className="mx-auto max-w-2xl text-xl text-gray-600 dark:text-gray-300">
<p className="text-muted-foreground mx-auto max-w-2xl text-xl">
Powerful features designed for freelancers and small businesses
</p>
</div>
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<Card className="border-0 shadow-lg dark:bg-gray-700">
<Card className="border-0 shadow-lg">
<CardHeader>
<Users className="mb-4 h-12 w-12 text-green-600 dark:text-green-400" />
<CardTitle className="dark:text-white">
Client Management
</CardTitle>
<CardDescription className="dark:text-gray-300">
<Users className="mb-4 h-12 w-12 text-green-600" />
<CardTitle>Client Management</CardTitle>
<CardDescription>
Keep all your client information organized in one place
</CardDescription>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
<ul className="text-muted-foreground space-y-2 text-sm">
<li className="flex items-center">
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
Store contact details and addresses
@@ -127,18 +108,16 @@ export default function HomePage() {
</CardContent>
</Card>
<Card className="border-0 shadow-lg dark:bg-gray-700">
<Card className="border-0 shadow-lg">
<CardHeader>
<FileText className="mb-4 h-12 w-12 text-green-600 dark:text-green-400" />
<CardTitle className="dark:text-white">
Professional Invoices
</CardTitle>
<CardDescription className="dark:text-gray-300">
<FileText className="mb-4 h-12 w-12 text-green-600" />
<CardTitle>Professional Invoices</CardTitle>
<CardDescription>
Create beautiful, detailed invoices with line items
</CardDescription>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
<ul className="text-muted-foreground space-y-2 text-sm">
<li className="flex items-center">
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
Add multiple line items with dates
@@ -155,18 +134,16 @@ export default function HomePage() {
</CardContent>
</Card>
<Card className="border-0 shadow-lg dark:bg-gray-700">
<Card className="border-0 shadow-lg">
<CardHeader>
<DollarSign className="mb-4 h-12 w-12 text-green-600 dark:text-green-400" />
<CardTitle className="dark:text-white">
Payment Tracking
</CardTitle>
<CardDescription className="dark:text-gray-300">
<DollarSign className="mb-4 h-12 w-12 text-green-600" />
<CardTitle>Payment Tracking</CardTitle>
<CardDescription>
Monitor invoice status and track payments
</CardDescription>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
<ul className="text-muted-foreground space-y-2 text-sm">
<li className="flex items-center">
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
Track draft, sent, paid, and overdue status
@@ -187,21 +164,21 @@ export default function HomePage() {
</section>
{/* Benefits Section */}
<section className="bg-gray-50 px-4 py-20 dark:bg-gray-900">
<section className="bg-muted/50 px-4 py-20">
<div className="container mx-auto max-w-4xl text-center">
<h2 className="mb-16 text-4xl font-bold text-gray-900 dark:text-white">
<h2 className="text-foreground mb-16 text-4xl font-bold">
Why choose beenvoice?
</h2>
<div className="grid gap-12 md:grid-cols-2">
<div className="space-y-6">
<div className="flex items-start space-x-4">
<Zap className="mt-1 h-8 w-8 text-green-600 dark:text-green-400" />
<Zap className="mt-1 h-8 w-8 text-green-600" />
<div className="text-left">
<h3 className="mb-2 text-xl font-semibold dark:text-white">
<h3 className="text-foreground mb-2 text-xl font-semibold">
Lightning Fast
</h3>
<p className="text-gray-600 dark:text-gray-300">
<p className="text-muted-foreground">
Create invoices in seconds, not minutes. Our streamlined
interface gets you back to work faster.
</p>
@@ -209,12 +186,12 @@ export default function HomePage() {
</div>
<div className="flex items-start space-x-4">
<Shield className="mt-1 h-8 w-8 text-green-600 dark:text-green-400" />
<Shield className="mt-1 h-8 w-8 text-green-600" />
<div className="text-left">
<h3 className="mb-2 text-xl font-semibold dark:text-white">
<h3 className="text-foreground mb-2 text-xl font-semibold">
Secure & Private
</h3>
<p className="text-gray-600 dark:text-gray-300">
<p className="text-muted-foreground">
Your data is encrypted and secure. We never share your
information with third parties.
</p>
@@ -224,12 +201,12 @@ export default function HomePage() {
<div className="space-y-6">
<div className="flex items-start space-x-4">
<Star className="mt-1 h-8 w-8 text-green-600 dark:text-green-400" />
<Star className="mt-1 h-8 w-8 text-green-600" />
<div className="text-left">
<h3 className="mb-2 text-xl font-semibold dark:text-white">
<h3 className="text-foreground mb-2 text-xl font-semibold">
Professional Quality
</h3>
<p className="text-gray-600 dark:text-gray-300">
<p className="text-muted-foreground">
Generate invoices that look professional and build trust
with your clients.
</p>
@@ -237,12 +214,12 @@ export default function HomePage() {
</div>
<div className="flex items-start space-x-4">
<Clock className="mt-1 h-8 w-8 text-green-600 dark:text-green-400" />
<Clock className="mt-1 h-8 w-8 text-green-600" />
<div className="text-left">
<h3 className="mb-2 text-xl font-semibold dark:text-white">
<h3 className="text-foreground mb-2 text-xl font-semibold">
Save Time
</h3>
<p className="text-gray-600 dark:text-gray-300">
<p className="text-muted-foreground">
Automated calculations, templates, and client management
save you hours every month.
</p>
@@ -254,48 +231,44 @@ export default function HomePage() {
</section>
{/* CTA Section */}
<section className="bg-green-600 px-4 py-20 dark:bg-green-700">
<section className="bg-green-600 px-4 py-20">
<div className="container mx-auto max-w-2xl text-center">
<h2 className="mb-4 text-4xl font-bold text-white">
Ready to get started?
</h2>
<p className="mb-8 text-xl text-green-100 dark:text-green-200">
<p className="mb-8 text-xl text-green-100">
Join thousands of freelancers who trust beenvoice for their
invoicing needs.
</p>
<Link href="/auth/register">
<Button
size="lg"
variant="secondary"
className="px-8 py-6 text-lg dark:bg-white dark:text-green-700 dark:hover:bg-gray-100"
>
<Button size="lg" variant="secondary" className="px-8 py-6 text-lg">
Start Your Free Trial
<ArrowRight className="ml-2 h-5 w-5" />
</Button>
</Link>
<p className="mt-4 text-sm text-green-200 dark:text-green-300">
<p className="mt-4 text-sm text-green-200">
No credit card required • Cancel anytime
</p>
</div>
</section>
{/* Footer */}
<footer className="bg-gray-900 px-4 py-12 text-white dark:bg-black">
<footer className="bg-card text-card-foreground border-border border-t px-4 py-12">
<div className="container mx-auto text-center">
<Logo className="mx-auto mb-4" />
<p className="mb-4 text-gray-400 dark:text-gray-500">
<p className="text-muted-foreground mb-4">
Simple invoicing for freelancers and small businesses
</p>
<div className="flex justify-center space-x-6 text-sm text-gray-400 dark:text-gray-500">
<div className="text-muted-foreground flex justify-center space-x-6 text-sm">
<Link
href="/auth/signin"
className="hover:text-white dark:hover:text-gray-300"
className="hover:text-foreground transition-colors"
>
Sign In
</Link>
<Link
href="/auth/register"
className="hover:text-white dark:hover:text-gray-300"
className="hover:text-foreground transition-colors"
>
Register
</Link>