Add business nickname support across app and API

src/components/data/data-table.tsx

@@ -98,6 +98,7 @@ export function DataTable<TData, TValue>({
     React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [globalFilter, setGlobalFilter] = React.useState("");
+  const [searchInput, setSearchInput] = React.useState("");
 
   // Mobile detection hook
   const [isMobile, setIsMobile] = React.useState(false);
@@ -171,6 +172,19 @@ export function DataTable<TData, TValue>({
     table.setPageSize(isMobile ? 5 : pageSize);
   }, [isMobile, pageSize, table]);
 
+  // Debounce search input updates to the table's global filter
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      setGlobalFilter(searchInput);
+    }, 300);
+    return () => clearTimeout(timeout);
+  }, [searchInput]);
+
+  // Keep search input in sync when globalFilter is changed externally (e.g., "Clear filters")
+  React.useEffect(() => {
+    setSearchInput(globalFilter ?? "");
+  }, [globalFilter]);
+
   const pageSizeOptions = [5, 10, 20, 30, 50, 100];
 
   // Handle row click
@@ -223,8 +237,8 @@ export function DataTable<TData, TValue>({
                   <Search className="text-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
                   <Input
                     placeholder={searchPlaceholder}
-                    value={globalFilter ?? ""}
-                    onChange={(event) => setGlobalFilter(event.target.value)}
+                    value={searchInput ?? ""}
+                    onChange={(event) => setSearchInput(event.target.value)}
                     className="h-9 w-full pr-3 pl-9"
                   />
                 </div>

src/components/data/invoice-view.tsx

@@ -188,7 +188,7 @@ export function InvoiceView({ invoiceId }: InvoiceViewProps) {
               <div className="flex items-start justify-between">
                 <div className="space-y-4">
                   <div className="flex items-center gap-3">
-                    <div className="bg-primary/10  p-2">
+                    <div className="bg-primary/10 p-2">
                       <FileText className="text-primary h-6 w-6" />
                     </div>
                     <div>
@@ -239,7 +239,7 @@ export function InvoiceView({ invoiceId }: InvoiceViewProps) {
                   >
                     {isExportingPDF ? (
                       <>
-                        <div className="mr-2 h-4 w-4 animate-spin  border-2 border-white border-t-transparent" />
+                        <div className="mr-2 h-4 w-4 animate-spin border-2 border-white border-t-transparent" />
                         Generating PDF...
                       </>
                     ) : (
@@ -326,7 +326,7 @@ export function InvoiceView({ invoiceId }: InvoiceViewProps) {
               </CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="border-border overflow-hidden  border">
+              <div className="border-border overflow-hidden border">
                 <table className="w-full">
                   <thead className="bg-muted">
                     <tr>
@@ -479,7 +479,7 @@ export function InvoiceView({ invoiceId }: InvoiceViewProps) {
           </Card>
 
           {/* Danger Zone */}
-          <Card className="bg-card border-border border border-destructive/20">
+          <Card className="bg-card border-destructive/20 border">
             <CardHeader>
               <CardTitle className="text-destructive">Danger Zone</CardTitle>
             </CardHeader>