Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/routes/contacts.index.tsx

@@ -192,6 +192,15 @@ function ContactsIndex() {
         </CardContent>
       </Card>
 
+      <Tabs value={category} onValueChange={(v) => setCategory(v as Category)} className="mb-4">
+        <TabsList>
+          <TabsTrigger value="all">All ({categoryCounts.all})</TabsTrigger>
+          <TabsTrigger value="companies">Companies ({categoryCounts.companies})</TabsTrigger>
+          <TabsTrigger value="people">People ({categoryCounts.people})</TabsTrigger>
+          <TabsTrigger value="lawyers">Lawyers ({categoryCounts.lawyers})</TabsTrigger>
+        </TabsList>
+      </Tabs>
+
       <Card>
         <CardContent className="p-0">
           {loading ? (
@@ -201,8 +210,14 @@ function ContactsIndex() {
               {rows.length === 0 ? "No contacts yet." : view === "archived" ? "No archived contacts." : "No contacts match your filters."}
             </p>
           ) : (
-            <ul className="divide-y">
-              {filtered.map((c) => {
+            <div className="divide-y">
+              {grouped.map(([letter, items]) => (
+                <div key={letter}>
+                  <div className="px-4 py-1.5 bg-muted/50 text-xs font-semibold text-muted-foreground sticky top-0">
+                    {letter}
+                  </div>
+                  <ul className="divide-y">
+                    {items.map((c) => {
                 const typeLabel = CONTACT_TYPES.find((t) => t.value === c.contact_type)?.label ?? c.contact_type;
                 const canEdit = isAdmin || c.created_by === user?.id;
                 return (