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

@@ -1,31 +1,36 @@
 import { auth } from "~/server/auth";
-import { api, HydrateClient } from "~/trpc/server";
+import { HydrateClient } from "~/trpc/server";
 import {
   DashboardStats,
   DashboardCards,
   DashboardActivity,
 } from "./_components/dashboard-components";
+import { DashboardPageHeader } from "~/components/page-header";
+import { PageContent, PageSection } from "~/components/ui/page-layout";
 
 export default async function DashboardPage() {
   const session = await auth();
 
   return (
-    <div>
-      {/* Header */}
-      <div className="mb-8">
-        <h1 className="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-4xl font-bold text-transparent">
-          Welcome back, {session?.user?.name?.split(" ")[0] ?? "User"}!
-        </h1>
-        <p className="mt-2 text-lg text-gray-600 dark:text-gray-300">
-          Here&apos;s what&apos;s happening with your invoicing business
-        </p>
-      </div>
+    <PageContent>
+      <DashboardPageHeader
+        title={`Welcome back, ${session?.user?.name?.split(" ")[0] ?? "User"}!`}
+        description="Here's what's happening with your invoicing business"
+      />
 
       <HydrateClient>
-        <DashboardStats />
-        <DashboardCards />
-        <DashboardActivity />
+        <PageSection>
+          <DashboardStats />
+        </PageSection>
+
+        <PageSection>
+          <DashboardCards />
+        </PageSection>
+
+        <PageSection>
+          <DashboardActivity />
+        </PageSection>
       </HydrateClient>
-    </div>
+    </PageContent>
   );
 }