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

@@ -2,25 +2,29 @@ import { Navbar } from "~/components/Navbar";
 import { Sidebar } from "~/components/Sidebar";
 import { DashboardBreadcrumbs } from "~/components/dashboard-breadcrumbs";
 
-export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <>
       <Navbar />
       <Sidebar />
       {/* Mobile layout - no left margin */}
-      <main className="min-h-screen pt-24 md:hidden">
-        <div className="px-4 sm:px-6 pt-4 pb-6">
+      <main className="min-h-screen pt-20 md:hidden">
+        <div className="px-4 pt-4 pb-6 sm:px-6">
           <DashboardBreadcrumbs />
           {children}
         </div>
       </main>
       {/* Desktop layout - with sidebar margin */}
-      <main className="min-h-screen pt-24 hidden md:block ml-70">
-        <div className="px-8 pt-6 pb-6">
+      <main className="hidden min-h-screen pt-20 md:ml-[276px] md:block">
+        <div className="px-6 pt-6 pb-6">
           <DashboardBreadcrumbs />
           {children}
         </div>
       </main>
     </>
   );
-} 
+}