Add Dispatch Admin Panel UI #32
This commit is contained in:
nocnico
277
apps/dispatch/app/_components/navbar/AdminPanel.tsx
Normal file
277
apps/dispatch/app/_components/navbar/AdminPanel.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
import {
|
||||
ArrowLeftRight,
|
||||
Eye,
|
||||
LockKeyhole,
|
||||
Plane,
|
||||
RedoDot,
|
||||
Shield,
|
||||
ShieldAlert,
|
||||
User,
|
||||
UserCheck,
|
||||
Workflow,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useRef } from "react";
|
||||
|
||||
export default function AdminPanel() {
|
||||
const path = usePathname();
|
||||
const modalRef = useRef<HTMLDialogElement>(null);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
className="btn btn-soft btn-primary btn-sm flex items-center gap-2"
|
||||
onSubmit={() => false}
|
||||
onClick={() => {
|
||||
modalRef.current?.showModal();
|
||||
}}
|
||||
>
|
||||
<Shield size={18} /> Admin Panel
|
||||
</button>
|
||||
<dialog ref={modalRef} className="modal">
|
||||
<div className="modal-box w-11/12 max-w-7xl">
|
||||
<form method="dialog">
|
||||
<button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
|
||||
</form>
|
||||
<h3 className="font-bold text-lg flex items-center gap-2">
|
||||
<Shield size={22} /> Admin Panel
|
||||
</h3>
|
||||
<div className="flex gap-2 mt-4 w-full">
|
||||
<div className="card bg-base-300 shadow-md w-full h-96 overflow-y-auto">
|
||||
<div className="card-body">
|
||||
<div className="card-title flex items-center gap-2">
|
||||
<UserCheck size={20} /> Verbundene Clients
|
||||
</div>
|
||||
<table className="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>VAR #</th>
|
||||
<th>Name</th>
|
||||
<th>Station</th>
|
||||
<th>Voice</th>
|
||||
<th>Dispatch</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>VAR0124</td>
|
||||
<td>Max Mustermann</td>
|
||||
<td>Christoph 31</td>
|
||||
<td className="text-error">
|
||||
<span>Nicht verbunden</span>
|
||||
</td>
|
||||
<td className="text-success">
|
||||
<span>Verbunden</span>
|
||||
</td>
|
||||
<td className="flex gap-2">
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-warning btn-soft tooltip tooltip-bottom tooltip-warning"
|
||||
data-tip="Kick"
|
||||
>
|
||||
<RedoDot size={15} />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-error btn-soft tooltip tooltip-bottom tooltip-error"
|
||||
data-tip="Ban"
|
||||
>
|
||||
<LockKeyhole size={15} />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-info btn-soft tooltip tooltip-bottom tooltip-info"
|
||||
data-tip="Profil"
|
||||
>
|
||||
<User size={15} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>VAR0124</td>
|
||||
<td>Max Mustermann</td>
|
||||
<td>Christoph 31</td>
|
||||
<td className="text-error">
|
||||
<span>Nicht verbunden</span>
|
||||
</td>
|
||||
<td className="text-success">
|
||||
<span>Verbunden</span>
|
||||
</td>
|
||||
<td className="flex gap-2">
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-warning btn-soft tooltip tooltip-bottom tooltip-warning"
|
||||
data-tip="Kick"
|
||||
>
|
||||
<RedoDot size={15} />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-error btn-soft tooltip tooltip-bottom tooltip-error"
|
||||
data-tip="Ban"
|
||||
>
|
||||
<LockKeyhole size={15} />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-info btn-soft tooltip tooltip-bottom tooltip-info"
|
||||
data-tip="Profil"
|
||||
>
|
||||
<User size={15} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>VAR0124</td>
|
||||
<td>Max Mustermann</td>
|
||||
<td>Christoph 31</td>
|
||||
<td className="text-error">
|
||||
<span>Nicht verbunden</span>
|
||||
</td>
|
||||
<td className="text-success">
|
||||
<span>Verbunden</span>
|
||||
</td>
|
||||
<td className="flex gap-2">
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-warning btn-soft tooltip tooltip-bottom tooltip-warning"
|
||||
data-tip="Kick"
|
||||
>
|
||||
<RedoDot size={15} />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-error btn-soft tooltip tooltip-bottom tooltip-error"
|
||||
data-tip="Ban"
|
||||
>
|
||||
<LockKeyhole size={15} />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-info btn-soft tooltip tooltip-bottom tooltip-info"
|
||||
data-tip="Profil"
|
||||
>
|
||||
<User size={15} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>VAR0124</td>
|
||||
<td>Max Mustermann</td>
|
||||
<td>Christoph 31</td>
|
||||
<td className="text-error">
|
||||
<span>Nicht verbunden</span>
|
||||
</td>
|
||||
<td className="text-success">
|
||||
<span>Verbunden</span>
|
||||
</td>
|
||||
<td className="flex gap-2">
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-warning btn-soft tooltip tooltip-bottom tooltip-warning"
|
||||
data-tip="Kick"
|
||||
>
|
||||
<RedoDot size={15} />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-error btn-soft tooltip tooltip-bottom tooltip-error"
|
||||
data-tip="Ban"
|
||||
>
|
||||
<LockKeyhole size={15} />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-info btn-soft tooltip tooltip-bottom tooltip-info"
|
||||
data-tip="Profil"
|
||||
>
|
||||
<User size={15} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>VAR0124</td>
|
||||
<td>Max Mustermann</td>
|
||||
<td>Christoph 31</td>
|
||||
<td className="text-error">
|
||||
<span>Nicht verbunden</span>
|
||||
</td>
|
||||
<td className="text-success">
|
||||
<span>Verbunden</span>
|
||||
</td>
|
||||
<td className="flex gap-2">
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-warning btn-soft tooltip tooltip-bottom tooltip-warning"
|
||||
data-tip="Kick"
|
||||
>
|
||||
<RedoDot size={15} />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-error btn-soft tooltip tooltip-bottom tooltip-error"
|
||||
data-tip="Ban"
|
||||
>
|
||||
<LockKeyhole size={15} />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-info btn-soft tooltip tooltip-bottom tooltip-info"
|
||||
data-tip="Profil"
|
||||
>
|
||||
<User size={15} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>VAR0124</td>
|
||||
<td>Max Mustermann</td>
|
||||
<td>Christoph 31</td>
|
||||
<td className="text-error">
|
||||
<span>Nicht verbunden</span>
|
||||
</td>
|
||||
<td className="text-success">
|
||||
<span>Verbunden</span>
|
||||
</td>
|
||||
<td className="flex gap-2">
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-warning btn-soft tooltip tooltip-bottom tooltip-warning"
|
||||
data-tip="Kick"
|
||||
>
|
||||
<RedoDot size={15} />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-error btn-soft tooltip tooltip-bottom tooltip-error"
|
||||
data-tip="Ban"
|
||||
>
|
||||
<LockKeyhole size={15} />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-xs btn-square btn-info btn-soft tooltip tooltip-bottom tooltip-info"
|
||||
data-tip="Profil"
|
||||
>
|
||||
<User size={15} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card bg-base-300 shadow-md w-full mt-4 max-h-48 overflow-y-auto">
|
||||
<div className="card-body">
|
||||
<div className="card-title flex items-center gap-2">
|
||||
<ShieldAlert size={20} /> Allgemeine Befehle
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center justify-left gap-2">
|
||||
<button className="btn btn-soft btn-error mt-2">Kick Everybody</button>
|
||||
<button className="btn btn-soft btn-warning mt-2">
|
||||
Wartungsmodus einschalten
|
||||
</button>
|
||||
<button className="btn btn-soft btn-info mt-2">Delete All Missions</button>
|
||||
</div>
|
||||
|
||||
<button className="btn btn-outline btn-info mt-2 flex items-center gap-2">
|
||||
<Eye size={22} />
|
||||
Als Observer verbinden
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" className="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user