From 2683f8aea42da78b6ebaf501000bf5f2496b54a1 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Tue, 11 Nov 2025 01:56:31 +0000
Subject: [PATCH] Create AdminStaffDirectory component

cgen-f49d676e62e74a80aebd5a207880a3fa
---
 .../components/admin/AdminStaffDirectory.tsx  | 154 ++++++++++++++++++
 1 file changed, 154 insertions(+)
 create mode 100644 client/components/admin/AdminStaffDirectory.tsx

diff --git a/client/components/admin/AdminStaffDirectory.tsx b/client/components/admin/AdminStaffDirectory.tsx
new file mode 100644
index 00000000..d97db827
--- /dev/null
+++ b/client/components/admin/AdminStaffDirectory.tsx
@@ -0,0 +1,154 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Mail, Phone, MapPin, Search } from "lucide-react";
+import { useState, useMemo } from "react";
+
+interface TeamMember {
+  id: string;
+  name: string;
+  position: string;
+  department: string;
+  email: string;
+  phone: string;
+  location: string;
+  role: "owner" | "admin" | "founder" | "staff" | "employee";
+  avatar?: string;
+}
+
+export default function AdminStaffDirectory() {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const teamMembers: TeamMember[] = [
+    {
+      id: "1",
+      name: "Alex Chen",
+      position: "CEO & Founder",
+      department: "Executive",
+      email: "alex@aethex.dev",
+      phone: "+1 (555) 123-4567",
+      location: "San Francisco, CA",
+      role: "owner",
+    },
+    {
+      id: "2",
+      name: "Jordan Martinez",
+      position: "CTO",
+      department: "Engineering",
+      email: "jordan@aethex.dev",
+      phone: "+1 (555) 234-5678",
+      location: "Austin, TX",
+      role: "admin",
+    },
+    {
+      id: "3",
+      name: "Sam Patel",
+      position: "Community Manager",
+      department: "Community",
+      email: "sam@aethex.dev",
+      phone: "+1 (555) 345-6789",
+      location: "Remote",
+      role: "staff",
+    },
+    {
+      id: "4",
+      name: "Taylor Kim",
+      position: "Operations Lead",
+      department: "Operations",
+      email: "taylor@aethex.dev",
+      phone: "+1 (555) 456-7890",
+      location: "New York, NY",
+      role: "staff",
+    },
+  ];
+
+  const filteredMembers = useMemo(() => {
+    return teamMembers.filter(
+      (member) =>
+        member.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        member.position.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        member.department.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [searchQuery]);
+
+  const getRoleBadgeColor = (role: TeamMember["role"]) => {
+    const colors: Record<TeamMember["role"], string> = {
+      owner: "bg-purple-100 text-purple-900 dark:bg-purple-900/30 dark:text-purple-200",
+      admin: "bg-blue-100 text-blue-900 dark:bg-blue-900/30 dark:text-blue-200",
+      founder: "bg-pink-100 text-pink-900 dark:bg-pink-900/30 dark:text-pink-200",
+      staff: "bg-green-100 text-green-900 dark:bg-green-900/30 dark:text-green-200",
+      employee: "bg-gray-100 text-gray-900 dark:bg-gray-900/30 dark:text-gray-200",
+    };
+    return colors[role];
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold mb-2">Team Directory</h2>
+        <p className="text-muted-foreground">
+          AeThex staff members and contractors
+        </p>
+      </div>
+
+      <div className="relative">
+        <Search className="absolute left-3 top-3 w-4 h-4 text-muted-foreground" />
+        <Input
+          placeholder="Search by name, position, or department..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="pl-10"
+        />
+      </div>
+
+      <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+        {filteredMembers.map((member) => (
+          <Card key={member.id} className="hover:shadow-lg transition">
+            <CardHeader>
+              <div className="flex items-start justify-between">
+                <div>
+                  <CardTitle className="text-lg">{member.name}</CardTitle>
+                  <CardDescription className="font-medium mt-1">
+                    {member.position}
+                  </CardDescription>
+                </div>
+                <Badge className={getRoleBadgeColor(member.role)}>
+                  {member.role}
+                </Badge>
+              </div>
+              <div className="text-sm text-muted-foreground mt-2">
+                {member.department}
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div className="flex items-center gap-3 text-sm">
+                <Mail className="w-4 h-4 text-blue-500" />
+                <a href={`mailto:${member.email}`} className="hover:underline break-all">
+                  {member.email}
+                </a>
+              </div>
+              <div className="flex items-center gap-3 text-sm">
+                <Phone className="w-4 h-4 text-green-500" />
+                <a href={`tel:${member.phone}`} className="hover:underline">
+                  {member.phone}
+                </a>
+              </div>
+              <div className="flex items-center gap-3 text-sm">
+                <MapPin className="w-4 h-4 text-red-500" />
+                <span>{member.location}</span>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {filteredMembers.length === 0 && (
+        <Card className="text-center py-8">
+          <p className="text-muted-foreground">
+            No team members match your search
+          </p>
+        </Card>
+      )}
+    </div>
+  );
+}