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/clients/page.tsx

@@ -1,35 +1,30 @@
 import Link from "next/link";
-
-import { api, HydrateClient } from "~/trpc/server";
+import { HydrateClient } from "~/trpc/server";
 import { Button } from "~/components/ui/button";
 import { Plus } from "lucide-react";
 import { ClientsTable } from "./_components/clients-table";
+import { PageHeader } from "~/components/page-header";
+import { PageContent, PageSection } from "~/components/ui/page-layout";
 
 export default async function ClientsPage() {
   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">
-            Clients
-          </h1>
-          <p className="mt-1 text-lg text-gray-600">
-            Manage your clients and their information.
-          </p>
-        </div>
-        <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"
-        >
+    <>
+      <PageHeader
+        title="Clients"
+        description="Manage your clients and their information."
+        variant="gradient"
+      >
+        <Button asChild variant="brand">
           <Link href="/dashboard/clients/new">
-            <Plus className="mr-2 h-5 w-5" /> Add Client
+            <Plus className="mr-2 h-5 w-5" />
+            <span>Add Client</span>
           </Link>
         </Button>
-      </div>
+      </PageHeader>
+
       <HydrateClient>
         <ClientsTable />
       </HydrateClient>
-    </div>
+    </>
   );
 }