fixes #132

apps/hub/app/(app)/admin/user/[id]/_components/forms.tsx

@@ -6,6 +6,7 @@ import {
 	ConnectedAircraft,
 	ConnectedDispatcher,
 	DiscordAccount,
+	Penalty,
 	PERMISSION,
 	Station,
 	User,
@@ -46,6 +47,7 @@ import {
 	ShieldUser,
 	Timer,
 	Trash2,
+	TriangleAlert,
 	Users,
 } from "lucide-react";
 import Link from "next/link";
@@ -255,6 +257,7 @@ export const ProfileForm: React.FC<ProfileFormProps> = ({ user }: ProfileFormPro
 
 export const ConnectionHistory: React.FC<{ user: User }> = ({ user }: { user: User }) => {
 	const dispoTableRef = useRef<PaginatedTableRef>(null);
+	const pilotTableRef = useRef<PaginatedTableRef>(null);
 	return (
 		<div className="card-body flex-row flex-wrap">
 			<div className="flex-1">
@@ -302,7 +305,7 @@ export const ConnectionHistory: React.FC<{ user: User }> = ({ user }: { user: Us
 								cell: ({ row }) => {
 									return (
 										<div>
-											<button
+											<Button
 												className="btn btn-sm btn-error"
 												onClick={async () => {
 													await deleteDispoHistory(row.original.id);
@@ -310,7 +313,7 @@ export const ConnectionHistory: React.FC<{ user: User }> = ({ user }: { user: Us
 												}}
 											>
 												löschen
-											</button>
+											</Button>
 										</div>
 									);
 								},
@@ -324,7 +327,7 @@ export const ConnectionHistory: React.FC<{ user: User }> = ({ user }: { user: Us
 					<PlaneIcon className="h-5 w-5" /> Pilot-Verbindungs Historie
 				</h2>
 				<PaginatedTable
-					ref={dispoTableRef}
+					ref={pilotTableRef}
 					filter={{
 						userId: user.id,
 					}}
@@ -375,15 +378,15 @@ export const ConnectionHistory: React.FC<{ user: User }> = ({ user }: { user: Us
 								cell: ({ row }) => {
 									return (
 										<div>
-											<button
+											<Button
 												className="btn btn-sm btn-error"
 												onClick={async () => {
 													await deletePilotHistory(row.original.id);
-													dispoTableRef.current?.refresh();
+													pilotTableRef.current?.refresh();
 												}}
 											>
 												löschen
-											</button>
+											</Button>
 										</div>
 									);
 								},
@@ -408,6 +411,7 @@ export const UserPenalties = ({ user }: { user: User }) => {
 				</span>
 				<div className="flex gap-2">
 					<PenaltyDropdown
+						showBtnName
 						btnName="Zeitstrafe hinzufügen"
 						Icon={<Timer size={15} />}
 						onClick={async ({ reason, until }) => {
@@ -437,6 +441,7 @@ export const UserPenalties = ({ user }: { user: User }) => {
 					/>
 					{session.data?.user.permissions.includes("ADMIN_USER_ADVANCED") && (
 						<PenaltyDropdown
+							showBtnName
 							btnName="Bannen"
 							Icon={<LockKeyhole size={15} />}
 							onClick={async ({ reason }) => {
@@ -528,6 +533,12 @@ interface AdminFormProps {
 		open: number;
 		total60Days: number;
 	};
+	openBans: (Penalty & {
+		CreatedUser: User | null;
+	})[];
+	openTimebans: (Penalty & {
+		CreatedUser: User | null;
+	})[];
 }
 
 export const AdminForm = ({
@@ -536,6 +547,8 @@ export const AdminForm = ({
 	pilotTime,
 	reports,
 	discordAccount,
+	openBans,
+	openTimebans,
 }: AdminFormProps) => {
 	const router = useRouter();
 	const { data: session } = useSession();
@@ -627,6 +640,33 @@ export const AdminForm = ({
 					)}
 				</div>
 			</div>
+			{(!!openBans.length || !!openTimebans.length) && (
+				<div role="alert" className="alert alert-warning alert-outline flex flex-col">
+					<div className="flex items-center gap-2">
+						<TriangleAlert />
+						{openBans.map((ban) => (
+							<div key={ban.id}>
+								<h3 className="text-lg font-semibold">Permanent ausgeschlossen</h3>
+								{ban.reason} (von {ban.CreatedUser?.firstname} {ban.CreatedUser?.lastname} -{" "}
+								{ban.CreatedUser?.publicId})
+							</div>
+						))}
+						{openTimebans.map((timeban) => (
+							<div key={timeban.id}>
+								<h3 className="text-lg font-semibold">
+									Zeitstrafe bis{" "}
+									{timeban.until ? new Date(timeban.until).toLocaleString("de-DE") : "unbekannt"}
+								</h3>
+								{timeban.reason} ({timeban.CreatedUser?.firstname} {timeban.CreatedUser?.lastname} -{" "}
+								{timeban.CreatedUser?.publicId})
+							</div>
+						))}
+					</div>
+					<p className="text-sm text-gray-400">
+						Achtung! Die Strafe(n) sind aktiv, die Rechte des Nutzers müssen nicht angepasst werden!
+					</p>
+				</div>
+			)}
 			<h2 className="card-title">
 				<ChartBarBigIcon className="h-5 w-5" /> Aktivität
 			</h2>

packages/shared-components/components/PenaltyDropdown.tsx

@@ -9,12 +9,14 @@ export const PenaltyDropdown = ({
 	btnTip,
 	btnName,
 	Icon,
+	showBtnName = false,
 }: {
 	onClick: (data: { reason: string; until: Date | null }) => void;
 	showDatePicker?: boolean;
 	btnClassName?: string;
 	btnName: string;
 	btnTip?: string;
+	showBtnName?: boolean;
 	Icon: ReactNode;
 }) => {
 	const [open, setOpen] = useState(false);
@@ -25,25 +27,29 @@ export const PenaltyDropdown = ({
 			<div tabIndex={0} role="button"></div>
 			<div className="indicator">
 				<button
-					className={cn("btn btn-xs btn-square btn-soft cursor-pointer", btnClassName)}
+					className={cn(
+						"btn btn-xs btn-soft cursor-pointer",
+						!showBtnName && "btn-square",
+						btnClassName,
+					)}
 					onClick={() => setOpen(!open)}
 				>
-					{Icon}
+					{Icon} {showBtnName && <span className="hidden md:inline-block">{btnName}</span>}
 				</button>
 			</div>
 			{open && (
 				<div
-					className="dropdown-content bg-base-100 rounded-box z-1 p-4 shadow-sm space-y-4 shadow-md"
+					className="dropdown-content bg-base-100 rounded-box z-1 space-y-4 p-4 shadow-md shadow-sm"
 					style={{ minWidth: "500px", right: "40px" }}
 				>
 					<button
-						className="absolute top-2 right-2 btn btn-xs btn-circle btn-ghost"
+						className="btn btn-xs btn-circle btn-ghost absolute right-2 top-2"
 						onClick={() => setOpen(false)}
 						type="button"
 					>
 						<span className="text-xl leading-none">&times;</span>
 					</button>
-					<h2 className="text-xl font-bold text-center">{btnName}</h2>
+					<h2 className="text-center text-xl font-bold">{btnName}</h2>
 					<textarea
 						value={reason}
 						onChange={(e) => setReason(e.target.value)}
@@ -53,7 +59,7 @@ export const PenaltyDropdown = ({
 					/>
 					{showDatePicker && (
 						<select
-							className="select w-full select-bordered"
+							className="select select-bordered w-full"
 							value={until}
 							onChange={(e) => setUntil(e.target.value)}
 						>
@@ -74,7 +80,7 @@ export const PenaltyDropdown = ({
 						</select>
 					)}
 					<button
-						className={cn("btn w-full btn-square btn-soft tooltip tooltip-bottom", btnClassName)}
+						className={cn("btn btn-square btn-soft tooltip tooltip-bottom w-full", btnClassName)}
 						data-tip={btnTip}
 						onClick={() => {
 							let untilDate: Date | null = null;