dev

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

@@ -33,23 +33,13 @@ import { UserOptionalDefaults, UserOptionalDefaultsSchema } from "@repo/db/zod";
 import { useRouter } from "next/navigation";
 import { PaginatedTable, PaginatedTableRef } from "_components/PaginatedTable";
 import { cn } from "../../../../../../helper/cn";
-import {
-	ChartBarBigIcon,
-	Check,
-	Eye,
-	LockKeyhole,
-	PlaneIcon,
-	RedoDot,
-	Timer,
-	X,
-} from "lucide-react";
+import { ChartBarBigIcon, Check, Eye, PlaneIcon, Timer, X } from "lucide-react";
 import Link from "next/link";
 import { ColumnDef } from "@tanstack/react-table";
 import { Error } from "_components/Error";
 import { useSession } from "next-auth/react";
 import { setStandardName } from "../../../../../../helper/discord";
-import { de } from "date-fns/locale";
-import { formatDistance } from "date-fns";
+import { penaltyColumns } from "(app)/admin/penalty/page";
 
 interface ProfileFormProps {
 	user: User;
@@ -328,74 +318,7 @@ export const UserPenalties = ({ user }: { user: User }) => {
 				filter={{
 					userId: user.id,
 				}}
-				columns={
-					[
-						{
-							accessorKey: "type",
-							header: "Typ",
-
-							cell: ({ row }) => {
-								switch (row.getValue("type") as PenaltyType) {
-									case "KICK":
-										return (
-											<div className="text-warning flex gap-3">
-												<RedoDot />
-												Kick
-											</div>
-										);
-									case "TIME_BAN": {
-										const length = formatDistance(
-											new Date(row.original.timestamp),
-											new Date(row.original.until || Date.now()),
-											{ locale: de },
-										);
-										return (
-											<div className="text-warning flex gap-3">
-												<Timer />
-												Zeit Sperre ({length})
-											</div>
-										);
-									}
-									case "BAN":
-										return (
-											<div className="text-error flex gap-3">
-												<LockKeyhole /> Bann
-											</div>
-										);
-								}
-							},
-						},
-						{
-							accessorKey: "CreatedUser",
-							header: "Bestraft durch",
-							cell: ({ row }) => {
-								const user = row.getValue("CreatedUser") as User;
-								return `${user.firstname} ${user.lastname} (${user.publicId})`;
-							},
-						},
-						{
-							accessorKey: "timestamp",
-							header: "Time",
-							cell: ({ row }) => new Date(row.getValue("timestamp")).toLocaleString(),
-						},
-						{
-							accessorKey: "actions",
-							header: "Actions",
-							cell: ({ row }) => {
-								const report = row.original.Report;
-								if (!report[0]) return null;
-								return (
-									<Link href={`/admin/report/${report[0].id}`}>
-										<button className="btn btn-sm btn-outline btn-info flex items-center gap-2">
-											<Eye className="w-4 h-4" />
-											Report Anzeigen
-										</button>
-									</Link>
-								);
-							},
-						},
-					] as ColumnDef<Penalty & { Report: Report[] }>[]
-				}
+				columns={penaltyColumns}
 			/>
 		</div>
 	);
@@ -500,7 +423,7 @@ export const AdminForm = ({
 				<LightningBoltIcon className="w-5 h-5" /> Administration
 			</h2>
 			<div className="text-left">
-				<div className="card-actions pt-6">
+				<div className="card-actions pt-6 flex flex-wrap gap-2">
 					<Button
 						onClick={async () => {
 							const { password } = await resetPassword(user.id);
@@ -512,10 +435,11 @@ export const AdminForm = ({
 										background: "var(--color-base-100)",
 										color: "var(--color-base-content)",
 									},
+									duration: 10000,
 								},
 							);
 						}}
-						className="btn-sm btn-wide btn-outline btn-success"
+						className="btn-sm flex-1 min-w-[250px] btn-outline btn-success"
 					>
 						<LockOpen1Icon /> Passwort zurücksetzen
 					</Button>
@@ -532,7 +456,7 @@ export const AdminForm = ({
 								router.refresh();
 							}}
 							role="submit"
-							className="btn-sm btn-wide btn-outline btn-error"
+							className="btn-sm flex-1 min-w-[250px] btn-outline btn-error"
 						>
 							<HobbyKnifeIcon /> HUB zugang sperren
 						</Button>
@@ -550,13 +474,16 @@ export const AdminForm = ({
 								router.refresh();
 							}}
 							role="submit"
-							className="btn-sm btn-wide btn-outline btn-warning"
+							className="btn-sm flex-1 min-w-[250px] btn-outline btn-warning"
 						>
 							<HobbyKnifeIcon /> HUB zugang entsperren
 						</Button>
 					)}
 					{discordAccount && (
-						<div className="tooltip flex-1" data-tip={`Name: ${discordAccount.username}`}>
+						<div
+							className="tooltip flex-1 min-w-[250px]"
+							data-tip={`Name: ${discordAccount.username}`}
+						>
 							<Button
 								onClick={async () => {
 									await setStandardName({