feat: implement complete invoicing application with CSV import and PDF export

- Add comprehensive CSV import system with drag-and-drop upload and validation
- Create UniversalTable component with advanced filtering, searching, and batch actions
- Implement invoice management (view, edit, delete) with professional PDF export
- Add client management with full CRUD operations
- Set up authentication with NextAuth.js and email/password login
- Configure database schema with users, clients, invoices, and invoice_items tables
- Build responsive UI with shadcn/ui components and emerald branding
- Add type-safe API layer with tRPC and Zod validation
- Include proper error handling and user feedback with toast notifications
- Set up development environment with Bun, TypeScript, and Tailwind CSS

src/components/AddressAutocomplete.tsx

@@ -0,0 +1,69 @@
+"use client";
+import { useState, useRef } from "react";
+import { Input } from "~/components/ui/input";
+import { Card } from "~/components/ui/card";
+
+interface AddressAutocompleteProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSelect: (value: string) => void;
+  placeholder?: string;
+}
+
+export function AddressAutocomplete({ value, onChange, onSelect, placeholder }: AddressAutocompleteProps) {
+  const [suggestions, setSuggestions] = useState<any[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const fetchSuggestions = async (query: string) => {
+    if (!query) {
+      setSuggestions([]);
+      return;
+    }
+    const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}`);
+    const data = await res.json();
+    setSuggestions(data);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    onChange(val);
+    setShowSuggestions(true);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => fetchSuggestions(val), 300);
+  };
+
+  const handleSelect = (address: string) => {
+    onSelect(address);
+    setShowSuggestions(false);
+    setSuggestions([]);
+  };
+
+  return (
+    <div className="relative">
+      <Input
+        value={value}
+        onChange={handleInputChange}
+        placeholder={placeholder || "Start typing address..."}
+        autoComplete="off"
+        onFocus={() => value && setShowSuggestions(true)}
+        onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
+      />
+      {showSuggestions && suggestions.length > 0 && (
+        <Card className="absolute z-10 mt-1 w-full max-h-60 overflow-auto shadow-lg border bg-white">
+          <ul>
+            {suggestions.map((s, i) => (
+              <li
+                key={s.place_id}
+                className="px-4 py-2 cursor-pointer hover:bg-muted text-sm"
+                onMouseDown={() => handleSelect(s.display_name)}
+              >
+                {s.display_name}
+              </li>
+            ))}
+          </ul>
+        </Card>
+      )}
+    </div>
+  );
+}