Create Discord Management admin component
cgen-df0d81d8fe084790bbc3ad2f339764aa
This commit is contained in:
Builder.io
parent
2ef9b59fe9
commit
1cfe2ee740
1 changed files with 318 additions and 0 deletions
318
client/components/admin/AdminDiscordManagement.tsx
Normal file
318
client/components/admin/AdminDiscordManagement.tsx
Normal file
|
|
@ -0,0 +1,318 @@
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "../ui/card";
|
||||||
|
import { Button } from "../ui/button";
|
||||||
|
import { Badge } from "../ui/badge";
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
} from "../ui/alert-dialog";
|
||||||
|
|
||||||
|
interface RoleMapping {
|
||||||
|
id: string;
|
||||||
|
arm: string;
|
||||||
|
user_type?: string;
|
||||||
|
discord_role: string;
|
||||||
|
server_id?: string;
|
||||||
|
created_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ARMS = [
|
||||||
|
{ value: "labs", label: "Labs", color: "bg-yellow-500/20" },
|
||||||
|
{ value: "gameforge", label: "GameForge", color: "bg-green-500/20" },
|
||||||
|
{ value: "corp", label: "Corp", color: "bg-blue-500/20" },
|
||||||
|
{ value: "foundation", label: "Foundation", color: "bg-red-500/20" },
|
||||||
|
{ value: "devlink", label: "Dev-Link", color: "bg-cyan-500/20" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export function AdminDiscordManagement() {
|
||||||
|
const [mappings, setMappings] = useState<RoleMapping[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [newMapping, setNewMapping] = useState({
|
||||||
|
arm: "labs",
|
||||||
|
discord_role: "",
|
||||||
|
server_id: "",
|
||||||
|
});
|
||||||
|
const [editingId, setEditingId] = useState<string | null>(null);
|
||||||
|
const [deleteId, setDeleteId] = useState<string | null>(null);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [success, setSuccess] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchMappings();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const fetchMappings = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const response = await fetch("/api/discord/role-mappings");
|
||||||
|
if (!response.ok) throw new Error("Failed to fetch mappings");
|
||||||
|
const data = await response.json();
|
||||||
|
setMappings(data);
|
||||||
|
setError(null);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Error fetching mappings:", err);
|
||||||
|
setError("Failed to load role mappings");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreateMapping = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!newMapping.discord_role) {
|
||||||
|
setError("Discord role is required");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch("/api/discord/role-mappings", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify(newMapping),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) throw new Error("Failed to create mapping");
|
||||||
|
const data = await response.json();
|
||||||
|
setMappings([...mappings, data]);
|
||||||
|
setNewMapping({ arm: "labs", discord_role: "", server_id: "" });
|
||||||
|
setSuccess("Role mapping created successfully!");
|
||||||
|
setTimeout(() => setSuccess(null), 3000);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Error creating mapping:", err);
|
||||||
|
setError("Failed to create role mapping");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteMapping = async (id: string) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/discord/role-mappings?id=${id}`, {
|
||||||
|
method: "DELETE",
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) throw new Error("Failed to delete mapping");
|
||||||
|
setMappings(mappings.filter((m) => m.id !== id));
|
||||||
|
setSuccess("Role mapping deleted successfully!");
|
||||||
|
setTimeout(() => setSuccess(null), 3000);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Error deleting mapping:", err);
|
||||||
|
setError("Failed to delete role mapping");
|
||||||
|
} finally {
|
||||||
|
setDeleteId(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getArmLabel = (armValue: string) => {
|
||||||
|
return ARMS.find((a) => a.value === armValue)?.label || armValue;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Bot Status */}
|
||||||
|
<Card className="border-purple-500/30 bg-purple-950/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Discord Bot Status</CardTitle>
|
||||||
|
<CardDescription>Real-time bot configuration</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<div className="bg-gradient-to-br from-green-500/10 to-green-600/5 p-4 rounded-lg border border-green-500/20">
|
||||||
|
<p className="text-sm text-green-300">Bot Status</p>
|
||||||
|
<p className="text-lg font-bold text-green-400 mt-1">Online</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gradient-to-br from-blue-500/10 to-blue-600/5 p-4 rounded-lg border border-blue-500/20">
|
||||||
|
<p className="text-sm text-blue-300">Linked Accounts</p>
|
||||||
|
<p className="text-lg font-bold text-blue-400 mt-1">
|
||||||
|
{mappings.length > 0 ? "Active" : "0"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gradient-to-br from-purple-500/10 to-purple-600/5 p-4 rounded-lg border border-purple-500/20">
|
||||||
|
<p className="text-sm text-purple-300">Role Mappings</p>
|
||||||
|
<p className="text-lg font-bold text-purple-400 mt-1">
|
||||||
|
{mappings.length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gradient-to-br from-pink-500/10 to-pink-600/5 p-4 rounded-lg border border-pink-500/20">
|
||||||
|
<p className="text-sm text-pink-300">Servers</p>
|
||||||
|
<p className="text-lg font-bold text-pink-400 mt-1">6</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Role Mappings */}
|
||||||
|
<Card className="border-purple-500/30 bg-purple-950/20">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Discord Role Mappings</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Configure which Discord roles are assigned for each arm
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
{error && (
|
||||||
|
<div className="p-3 bg-red-500/10 border border-red-500/30 rounded text-red-300 text-sm">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{success && (
|
||||||
|
<div className="p-3 bg-green-500/10 border border-green-500/30 rounded text-green-300 text-sm">
|
||||||
|
{success}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Add New Mapping Form */}
|
||||||
|
<div className="bg-gradient-to-br from-purple-900/20 to-blue-900/20 p-4 rounded-lg border border-purple-500/20">
|
||||||
|
<h4 className="font-semibold mb-4">Add New Role Mapping</h4>
|
||||||
|
<form onSubmit={handleCreateMapping} className="space-y-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||||
|
<div>
|
||||||
|
<label className="text-sm text-gray-300">Arm</label>
|
||||||
|
<select
|
||||||
|
value={newMapping.arm}
|
||||||
|
onChange={(e) =>
|
||||||
|
setNewMapping({ ...newMapping, arm: e.target.value })
|
||||||
|
}
|
||||||
|
className="w-full mt-1 bg-gray-800 border border-purple-500/30 rounded px-3 py-2 text-white focus:outline-none focus:border-purple-500"
|
||||||
|
>
|
||||||
|
{ARMS.map((arm) => (
|
||||||
|
<option key={arm.value} value={arm.value}>
|
||||||
|
{arm.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-sm text-gray-300">
|
||||||
|
Discord Role Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="e.g., Labs Member"
|
||||||
|
value={newMapping.discord_role}
|
||||||
|
onChange={(e) =>
|
||||||
|
setNewMapping({
|
||||||
|
...newMapping,
|
||||||
|
discord_role: e.target.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
className="w-full mt-1 bg-gray-800 border border-purple-500/30 rounded px-3 py-2 text-white focus:outline-none focus:border-purple-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-sm text-gray-300">
|
||||||
|
Server ID (optional)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Discord Server ID"
|
||||||
|
value={newMapping.server_id}
|
||||||
|
onChange={(e) =>
|
||||||
|
setNewMapping({ ...newMapping, server_id: e.target.value })
|
||||||
|
}
|
||||||
|
className="w-full mt-1 bg-gray-800 border border-purple-500/30 rounded px-3 py-2 text-white focus:outline-none focus:border-purple-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button type="submit" className="w-full bg-purple-600 hover:bg-purple-700">
|
||||||
|
Add Mapping
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mappings Table */}
|
||||||
|
{loading ? (
|
||||||
|
<div className="text-center py-8 text-gray-400">
|
||||||
|
Loading mappings...
|
||||||
|
</div>
|
||||||
|
) : mappings.length === 0 ? (
|
||||||
|
<div className="text-center py-8 text-gray-400">
|
||||||
|
No role mappings configured yet. Add one above!
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead className="border-b border-purple-500/30">
|
||||||
|
<tr>
|
||||||
|
<th className="text-left py-2 px-3 text-purple-300">Arm</th>
|
||||||
|
<th className="text-left py-2 px-3 text-purple-300">
|
||||||
|
Discord Role
|
||||||
|
</th>
|
||||||
|
<th className="text-left py-2 px-3 text-purple-300">
|
||||||
|
Server ID
|
||||||
|
</th>
|
||||||
|
<th className="text-left py-2 px-3 text-purple-300">
|
||||||
|
Actions
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{mappings.map((mapping) => (
|
||||||
|
<tr
|
||||||
|
key={mapping.id}
|
||||||
|
className="border-b border-purple-500/10 hover:bg-purple-500/5"
|
||||||
|
>
|
||||||
|
<td className="py-3 px-3">
|
||||||
|
<Badge variant="outline">
|
||||||
|
{getArmLabel(mapping.arm)}
|
||||||
|
</Badge>
|
||||||
|
</td>
|
||||||
|
<td className="py-3 px-3 text-gray-300">
|
||||||
|
{mapping.discord_role}
|
||||||
|
</td>
|
||||||
|
<td className="py-3 px-3 text-gray-400 text-xs">
|
||||||
|
{mapping.server_id || "Global"}
|
||||||
|
</td>
|
||||||
|
<td className="py-3 px-3">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="text-red-400 hover:text-red-300 hover:bg-red-500/10"
|
||||||
|
onClick={() => setDeleteId(mapping.id)}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Delete Confirmation */}
|
||||||
|
<AlertDialog open={!!deleteId} onOpenChange={(open) => !open && setDeleteId(null)}>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Delete Role Mapping?</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
This role mapping will be permanently deleted. Users will no longer
|
||||||
|
receive this role when setting this arm.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
onClick={() => deleteId && handleDeleteMapping(deleteId)}
|
||||||
|
className="bg-red-600 hover:bg-red-700"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue