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

docs/data-table-improvements.md

@@ -0,0 +1,154 @@
+# Data Table Improvements Summary
+
+## Overview
+
+The data table component has been significantly improved to address padding, scaling, and responsiveness issues. The tables now provide a cleaner, more compact appearance while maintaining excellent usability across all device sizes.
+
+## Key Improvements Made
+
+### 1. Tighter, More Consistent Padding
+
+**Before:**
+- Inconsistent padding across different table sections
+- Excessive vertical padding making tables feel loose
+- Cards had default py-6 padding that was too spacious
+
+**After:**
+- Table cells: `py-1.5` (mobile) / `py-2` (desktop) - reduced from `py-2.5` / `py-3`
+- Table headers: `h-9` (mobile) / `h-10` (desktop) - reduced from `h-10` / `h-12`
+- Filter/pagination cards: `py-2` with `px-3` horizontal padding
+- Table card: `p-0` to wrap content tightly
+
+### 2. Improved Responsive Column Handling
+
+**Before:**
+```tsx
+// Cells would hide but headers remained visible
+cell: ({ row }) => (
+  <span className="hidden md:inline">{row.original.phone}</span>
+),
+```
+
+**After:**
+```tsx
+// Both header and cell hide together
+cell: ({ row }) => row.original.phone || "—",
+meta: {
+  headerClassName: "hidden md:table-cell",
+  cellClassName: "hidden md:table-cell",
+},
+```
+
+### 3. Better Small Card Appearance
+
+- Filter card: Compact `py-2` padding with proper horizontal spacing
+- Pagination card: Matching `py-2` padding for consistency
+- Content aligned properly within smaller card boundaries
+- Removed excessive gaps between elements
+- Search box now has consistent padding without extra bottom spacing on mobile
+
+### 4. Responsive Font Sizing
+
+- Base text: `text-xs` on mobile, `text-sm` on desktop
+- Consistent scaling across all table elements
+- Better readability on small screens without wasting space
+
+## Visual Comparison
+
+### Table Density
+- **Before**: ~60px per row with excessive padding
+- **After**: ~40px per row with comfortable but efficient spacing
+
+### Card Heights
+- **Filter Card**: Reduced from ~80px to ~56px
+- **Pagination Card**: Reduced from ~72px to ~48px
+- **Table Card**: Now wraps content exactly with no extra space
+- **Pagination Layout**: Entry count and pagination controls now stay on the same line on mobile
+
+## Implementation Examples
+
+### Responsive Column Definition
+```tsx
+const columns: ColumnDef<DataType>[] = [
+  {
+    accessorKey: "name",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Name" />
+    ),
+    cell: ({ row }) => row.original.name,
+    // Always visible
+  },
+  {
+    accessorKey: "email",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Email" />
+    ),
+    cell: ({ row }) => row.original.email,
+    meta: {
+      // Hidden on mobile, visible on tablets and up
+      headerClassName: "hidden md:table-cell",
+      cellClassName: "hidden md:table-cell",
+    },
+  },
+  {
+    accessorKey: "createdAt",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Created" />
+    ),
+    cell: ({ row }) => formatDate(row.getValue("createdAt")),
+    meta: {
+      // Only visible on large screens
+      headerClassName: "hidden lg:table-cell",
+      cellClassName: "hidden lg:table-cell",
+    },
+  },
+];
+```
+
+### Page Header Actions
+Page headers now properly position action buttons to the right on all screen sizes:
+
+```tsx
+<PageHeader
+  title="Invoices"
+  description="Manage your invoices and track payments"
+  variant="gradient"
+>
+  <Button asChild variant="brand" size="lg">
+    <Link href="/dashboard/invoices/new">
+      <Plus className="mr-2 h-5 w-5" /> New Invoice
+    </Link>
+  </Button>
+</PageHeader>
+```
+
+### Breakpoint Reference
+- `sm`: 640px and up
+- `md`: 768px and up
+- `lg`: 1024px and up
+- `xl`: 1280px and up
+
+## Benefits
+
+1. **More Data Visible**: Tighter spacing allows more rows to be visible without scrolling
+2. **Professional Appearance**: Clean, compact design suitable for business applications
+3. **Better Mobile UX**: Properly hidden columns prevent layout breaking
+4. **Consistent Styling**: All table instances now follow the same spacing rules
+5. **Performance**: CSS-only solution with no JavaScript overhead
+6. **Improved Mobile Layout**: Pagination controls stay inline with entry count on mobile
+7. **Consistent Header Actions**: Action buttons properly positioned to the right
+
+## Migration Checklist
+
+- [x] Update column definitions to use `meta` properties
+- [x] Remove inline responsive classes from cell content
+- [x] Test on actual mobile devices
+- [x] Verify touch targets remain accessible (min 44x44px)
+- [x] Check that critical data remains visible on small screens
+
+## Best Practices Going Forward
+
+1. **Column Priority**: Always keep the most important 2-3 columns visible on mobile
+2. **Content Density**: Use the tighter spacing for data tables, looser spacing for content lists
+3. **Responsive Testing**: Test at 320px, 768px, and 1024px minimum
+4. **Accessibility**: Ensure interactive elements maintain proper touch targets despite tighter spacing