From d43b8864d95594c21f637c444dc2356e38df8f19 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 03:54:31 +0000
Subject: [PATCH] Changes

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

diff --git a/src/routes/contacts.index.tsx b/src/routes/contacts.index.tsx
index 456bf98..d0bc23f 100644
--- a/src/routes/contacts.index.tsx
+++ b/src/routes/contacts.index.tsx
@@ -174,14 +174,25 @@ 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>
+      <div className="mb-4 flex flex-wrap gap-1.5">
+        <Button
+          size="sm"
+          variant={typeFilter === "all" ? "default" : "outline"}
+          onClick={() => setTypeFilter("all")}
+        >
+          All ({typeCounts.all ?? 0})
+        </Button>
+        {CONTACT_TYPES.map((t) => (
+          <Button
+            key={t.value}
+            size="sm"
+            variant={typeFilter === t.value ? "default" : "outline"}
+            onClick={() => setTypeFilter(t.value)}
+          >
+            {t.label} ({typeCounts[t.value] ?? 0})
+          </Button>
+        ))}
+      </div>
 
       <Card>
         <CardContent className="p-0">