Create AdminStaffAdmin component
cgen-a77cb9598e9746dfa17a04731344f6ba
This commit is contained in:
Builder.io
parent
cc82becc85
commit
d99e28ed88
1 changed files with 301 additions and 0 deletions
301
client/components/admin/AdminStaffAdmin.tsx
Normal file
301
client/components/admin/AdminStaffAdmin.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue