From 231a842620db05e500c72c6e6a02b476aca70d21 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 02:57:55 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/contacts.index.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/routes/contacts.index.tsx b/src/routes/contacts.index.tsx
index a41c055..11618fa 100644
--- a/src/routes/contacts.index.tsx
+++ b/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 (