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

cgen-a77cb9598e9746dfa17a04731344f6ba
---
 client/components/admin/AdminStaffAdmin.tsx | 301 ++++++++++++++++++++
 1 file changed, 301 insertions(+)
 create mode 100644 client/components/admin/AdminStaffAdmin.tsx

diff --git a/client/components/admin/AdminStaffAdmin.tsx b/client/components/admin/AdminStaffAdmin.tsx
new file mode 100644
index 00000000..f24570e1
--- /dev/null
+++ b/client/components/admin/AdminStaffAdmin.tsx
@@ -0,0 +1,301 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Users, Shield, Settings, Key, FileText, Wrench } from "lucide-react";
+import { useState } from "react";
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  status: "active" | "inactive" | "suspended";
+  joinDate: string;
+}
+
+export default function AdminStaffAdmin() {
+  const [adminTab, setAdminTab] = useState("users");
+
+  const users: User[] = [
+    {
+      id: "1",
+      name: "Alex Chen",
+      email: "alex@aethex.dev",
+      role: "Owner",
+      status: "active",
+      joinDate: "2023-01-01",
+    },
+    {
+      id: "2",
+      name: "Jordan Martinez",
+      email: "jordan@aethex.dev",
+      role: "Admin",
+      status: "active",
+      joinDate: "2023-02-15",
+    },
+    {
+      id: "3",
+      name: "Sam Patel",
+      email: "sam@aethex.dev",
+      role: "Staff",
+      status: "active",
+      joinDate: "2023-06-01",
+    },
+  ];
+
+  const permissions = [
+    { feature: "User Management", owner: true, admin: true, staff: false },
+    { feature: "Content Moderation", owner: true, admin: true, staff: true },
+    { feature: "Analytics", owner: true, admin: true, staff: true },
+    { feature: "System Settings", owner: true, admin: false, staff: false },
+    { feature: "API Keys", owner: true, admin: true, staff: false },
+    { feature: "Audit Logs", owner: true, admin: true, staff: false },
+  ];
+
+  const getStatusColor = (status: string) => {
+    const colors: Record<string, string> = {
+      active: "bg-green-100 text-green-900 dark:bg-green-900/30 dark:text-green-200",
+      inactive:
+        "bg-gray-100 text-gray-900 dark:bg-gray-900/30 dark:text-gray-200",
+      suspended:
+        "bg-red-100 text-red-900 dark:bg-red-900/30 dark:text-red-200",
+    };
+    return colors[status] || colors.inactive;
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold mb-2">Admin Management</h2>
+        <p className="text-muted-foreground">
+          User management, permissions, settings, and system tools
+        </p>
+      </div>
+
+      <Tabs value={adminTab} onValueChange={setAdminTab} className="space-y-4">
+        <TabsList className="grid w-full grid-cols-3 lg:grid-cols-6">
+          <TabsTrigger value="users" className="flex items-center gap-2">
+            <Users className="w-4 h-4" />
+            <span className="hidden sm:inline">Users</span>
+          </TabsTrigger>
+          <TabsTrigger value="permissions" className="flex items-center gap-2">
+            <Shield className="w-4 h-4" />
+            <span className="hidden sm:inline">Permissions</span>
+          </TabsTrigger>
+          <TabsTrigger value="settings" className="flex items-center gap-2">
+            <Settings className="w-4 h-4" />
+            <span className="hidden sm:inline">Settings</span>
+          </TabsTrigger>
+          <TabsTrigger value="api-keys" className="flex items-center gap-2">
+            <Key className="w-4 h-4" />
+            <span className="hidden sm:inline">API Keys</span>
+          </TabsTrigger>
+          <TabsTrigger value="audit" className="flex items-center gap-2">
+            <FileText className="w-4 h-4" />
+            <span className="hidden sm:inline">Audit</span>
+          </TabsTrigger>
+          <TabsTrigger value="maintenance" className="flex items-center gap-2">
+            <Wrench className="w-4 h-4" />
+            <span className="hidden sm:inline">Maintenance</span>
+          </TabsTrigger>
+        </TabsList>
+
+        {/* Users Tab */}
+        <TabsContent value="users" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>User Management</CardTitle>
+              <CardDescription>Manage staff accounts and access</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                {users.map((user) => (
+                  <div
+                    key={user.id}
+                    className="p-4 border border-border/40 rounded-lg bg-background/40 flex items-start justify-between"
+                  >
+                    <div className="flex-1">
+                      <p className="font-medium">{user.name}</p>
+                      <p className="text-sm text-muted-foreground">{user.email}</p>
+                      <div className="flex gap-2 mt-2">
+                        <Badge variant="outline">{user.role}</Badge>
+                        <Badge className={getStatusColor(user.status)}>
+                          {user.status}
+                        </Badge>
+                      </div>
+                    </div>
+                    <div className="text-sm text-muted-foreground">
+                      Joined {user.joinDate}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* Permissions Tab */}
+        <TabsContent value="permissions" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Role Permissions</CardTitle>
+              <CardDescription>Define what each role can access</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b">
+                      <th className="text-left p-2 font-semibold">Feature</th>
+                      <th className="text-center p-2 font-semibold">Owner</th>
+                      <th className="text-center p-2 font-semibold">Admin</th>
+                      <th className="text-center p-2 font-semibold">Staff</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {permissions.map((perm) => (
+                      <tr key={perm.feature} className="border-b hover:bg-slate-50 dark:hover:bg-slate-900/50">
+                        <td className="p-2 font-medium">{perm.feature}</td>
+                        <td className="text-center p-2">
+                          {perm.owner ? (
+                            <Badge className="bg-green-100 text-green-900 dark:bg-green-900/30">
+                              ✓
+                            </Badge>
+                          ) : (
+                            <span className="text-muted-foreground">—</span>
+                          )}
+                        </td>
+                        <td className="text-center p-2">
+                          {perm.admin ? (
+                            <Badge className="bg-green-100 text-green-900 dark:bg-green-900/30">
+                              ✓
+                            </Badge>
+                          ) : (
+                            <span className="text-muted-foreground">—</span>
+                          )}
+                        </td>
+                        <td className="text-center p-2">
+                          {perm.staff ? (
+                            <Badge className="bg-green-100 text-green-900 dark:bg-green-900/30">
+                              ✓
+                            </Badge>
+                          ) : (
+                            <span className="text-muted-foreground">—</span>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* Settings Tab */}
+        <TabsContent value="settings" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>System Settings</CardTitle>
+              <CardDescription>Configure global system parameters</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="p-3 border border-border/40 rounded-lg bg-background/40">
+                <label className="block font-medium mb-2">Session Timeout</label>
+                <select className="w-full border border-input rounded p-2 bg-background">
+                  <option>12 hours</option>
+                  <option selected>24 hours</option>
+                  <option>48 hours</option>
+                  <option>7 days</option>
+                </select>
+              </div>
+              <div className="p-3 border border-border/40 rounded-lg bg-background/40">
+                <label className="block font-medium mb-2">
+                  Require 2FA for Staff
+                </label>
+                <input type="checkbox" defaultChecked /> Enabled
+              </div>
+              <div className="p-3 border border-border/40 rounded-lg bg-background/40">
+                <label className="block font-medium mb-2">
+                  Audit Logging
+                </label>
+                <input type="checkbox" defaultChecked /> Enabled
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* API Keys Tab */}
+        <TabsContent value="api-keys" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>API Keys Management</CardTitle>
+              <CardDescription>Generate and revoke API keys</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Button className="mb-4">Generate New Key</Button>
+              <p className="text-sm text-muted-foreground">
+                No active API keys. Generate one to get started.
+              </p>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* Audit Tab */}
+        <TabsContent value="audit" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Audit Log</CardTitle>
+              <CardDescription>Track all administrative actions</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-2 text-sm">
+                <div className="p-2 border-l-2 border-blue-500 pl-3">
+                  <p className="font-medium">User Permissions Updated</p>
+                  <p className="text-xs text-muted-foreground">
+                    Jordan Martinez role changed to Admin • 2 hours ago
+                  </p>
+                </div>
+                <div className="p-2 border-l-2 border-green-500 pl-3">
+                  <p className="font-medium">System Settings Modified</p>
+                  <p className="text-xs text-muted-foreground">
+                    Session timeout changed to 24 hours • 1 day ago
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* Maintenance Tab */}
+        <TabsContent value="maintenance" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>System Maintenance</CardTitle>
+              <CardDescription>Administrative tools and utilities</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <Button variant="outline" className="w-full">
+                Clear Cache
+              </Button>
+              <Button variant="outline" className="w-full">
+                Sync Database
+              </Button>
+              <Button variant="outline" className="w-full">
+                Generate Report
+              </Button>
+              <Button
+                variant="destructive"
+                className="w-full mt-4"
+                disabled
+              >
+                Emergency Shutdown (Disabled)
+              </Button>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}