Changes

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

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">