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/businesses/_components/businesses-table.tsx

@@ -1,15 +1,19 @@
 "use client";
 
 import { api } from "~/trpc/react";
-import { UniversalTable } from "~/components/ui/universal-table";
-import { TableSkeleton } from "~/components/ui/skeleton";
+import { DataTableSkeleton } from "~/components/ui/data-table";
+import { BusinessesDataTable } from "./businesses-data-table";
 
 export function BusinessesTable() {
-  const { isLoading } = api.businesses.getAll.useQuery();
+  const { data: businesses, isLoading } = api.businesses.getAll.useQuery();
 
   if (isLoading) {
-    return <TableSkeleton rows={8} />;
+    return <DataTableSkeleton columns={6} rows={8} />;
   }
 
-  return <UniversalTable resource="businesses" />;
-} 
+  if (!businesses) {
+    return null;
+  }
+
+  return <BusinessesDataTable businesses={businesses} />;
+}