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

src/app/dashboard/invoices/page.tsx

@@ -1,47 +1,49 @@
 import Link from "next/link";
-
+import { Suspense } from "react";
 import { api, HydrateClient } from "~/trpc/server";
 import { Button } from "~/components/ui/button";
+import { PageHeader } from "~/components/page-header";
 import { Plus, Upload } from "lucide-react";
-import { InvoicesTable } from "./_components/invoices-table";
+import { InvoicesDataTable } from "./_components/invoices-data-table";
+import { DataTableSkeleton } from "~/components/ui/data-table";
+
+// Invoices Table Component
+async function InvoicesTable() {
+  const invoices = await api.invoices.getAll();
+
+  return <InvoicesDataTable invoices={invoices} />;
+}
 
 export default async function InvoicesPage() {
   return (
-    <div>
-      <div className="mb-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-        <div>
-          <h1 className="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-3xl font-bold text-transparent">
-            Invoices
-          </h1>
-          <p className="mt-1 text-lg text-gray-600">
-            Manage your invoices and payments.
-          </p>
-        </div>
-        <div className="flex gap-3">
-          <Button
-            asChild
-            variant="outline"
-            size="lg"
-            className="border-gray-200 bg-white/80 font-medium text-gray-700 shadow-lg hover:bg-gray-50 hover:shadow-xl"
-          >
-            <Link href="/dashboard/invoices/import">
-              <Upload className="mr-2 h-5 w-5" /> Import CSV
-            </Link>
-          </Button>
-          <Button
-            asChild
-            size="lg"
-            className="bg-gradient-to-r from-emerald-600 to-teal-600 font-medium text-white shadow-lg hover:from-emerald-700 hover:to-teal-700 hover:shadow-xl"
-          >
-            <Link href="/dashboard/invoices/new">
-              <Plus className="mr-2 h-5 w-5" /> Add Invoice
-            </Link>
-          </Button>
-        </div>
-      </div>
+    <>
+      <PageHeader
+        title="Invoices"
+        description="Manage your invoices and track payments"
+        variant="gradient"
+      >
+        <Button asChild variant="outline" className="shadow-sm">
+          <Link href="/dashboard/invoices/import">
+            <Upload className="mr-2 h-5 w-5" />
+            <span>Import CSV</span>
+          </Link>
+        </Button>
+        <Button
+          asChild
+          className="bg-gradient-to-r from-emerald-600 to-teal-600 shadow-md transition-all duration-200 hover:from-emerald-700 hover:to-teal-700 hover:shadow-lg"
+        >
+          <Link href="/dashboard/invoices/new">
+            <Plus className="mr-2 h-5 w-5" />
+            <span>Create Invoice</span>
+          </Link>
+        </Button>
+      </PageHeader>
+
       <HydrateClient>
-        <InvoicesTable />
+        <Suspense fallback={<DataTableSkeleton columns={7} rows={5} />}>
+          <InvoicesTable />
+        </Suspense>
       </HydrateClient>
-    </div>
+    </>
   );
 }