mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-06-28 14:44:15 +00:00
feat: punishment page
This commit is contained in:
parent
780e147f32
commit
aef188f7c8
12 changed files with 401 additions and 29 deletions
94
src/components/admin/punishment-deletion-dialog.tsx
Normal file
94
src/components/admin/punishment-deletion-dialog.tsx
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
import { Icon } from "@iconify/react";
|
||||
import SubmitButton from "../submit-button";
|
||||
|
||||
interface Props {
|
||||
punishmentId: number;
|
||||
}
|
||||
|
||||
export default function PunishmentDeletionDialog({ punishmentId }: Props) {
|
||||
const router = useRouter();
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const response = await fetch(`/api/admin/punish?id=${punishmentId}`, { method: "DELETE" });
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
setError(data.error);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
router.refresh();
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
setIsVisible(false);
|
||||
setTimeout(() => {
|
||||
setIsOpen(false);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
// slight delay to trigger animation
|
||||
setTimeout(() => setIsVisible(true), 10);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={() => setIsOpen(true)} className="text-red-500 cursor-pointer hover:text-red-600 text-lg">
|
||||
<Icon icon="material-symbols:close-rounded" />
|
||||
</button>
|
||||
|
||||
{isOpen &&
|
||||
createPortal(
|
||||
<div className="fixed inset-0 w-full h-[calc(100%-var(--header-height))] top-[var(--header-height)] flex items-center justify-center z-40">
|
||||
<div
|
||||
onClick={close}
|
||||
className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
|
||||
isVisible ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
|
||||
isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h2 className="text-xl font-bold">Punishment Deletion</h2>
|
||||
<button onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
|
||||
<Icon icon="material-symbols:close-rounded" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-zinc-500">Are you sure? This will delete the user‘s punishment and they will be able to come back.</p>
|
||||
|
||||
{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
|
||||
|
||||
<div className="flex justify-end gap-2 mt-4">
|
||||
<button onClick={close} className="pill button">
|
||||
Cancel
|
||||
</button>
|
||||
<SubmitButton onClick={handleSubmit} />
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
53
src/components/admin/return-to-island.tsx
Normal file
53
src/components/admin/return-to-island.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
interface Props {
|
||||
hasExpired: boolean;
|
||||
}
|
||||
|
||||
export default function ReturnToIsland({ hasExpired }: Props) {
|
||||
const [isChecked, setIsChecked] = useState(false);
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
const handleClick = async () => {
|
||||
const response = await fetch("/api/return", { method: "DELETE" });
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
setError(data.error);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
redirect("/");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-center items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="agreement"
|
||||
disabled={hasExpired}
|
||||
checked={isChecked}
|
||||
onChange={(e) => setIsChecked(e.target.checked)}
|
||||
className={`checkbox ${hasExpired && "text-zinc-600 !bg-zinc-100 !border-zinc-300"}`}
|
||||
/>
|
||||
<label htmlFor="agreement" className={`${hasExpired && "text-zinc-500"}`}>
|
||||
I Agree
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<hr className="border-zinc-300 mt-3 mb-4" />
|
||||
|
||||
{error && <span className="text-red-400 font-bold mb-2.5">Error: {error}</span>}
|
||||
<button disabled={!isChecked} onClick={handleClick} className="pill button gap-2 w-fit self-center">
|
||||
<Icon icon="ic:round-home" fontSize={24} />
|
||||
Travel Back
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -6,9 +6,10 @@ import Image from "next/image";
|
|||
import { useState } from "react";
|
||||
|
||||
import { Icon } from "@iconify/react";
|
||||
import { PunishmentType } from "@prisma/client";
|
||||
import { Prisma, PunishmentType } from "@prisma/client";
|
||||
|
||||
import SubmitButton from "../submit-button";
|
||||
import PunishmentDeletionDialog from "./punishment-deletion-dialog";
|
||||
|
||||
interface ApiResponse {
|
||||
success: boolean;
|
||||
|
|
@ -16,21 +17,11 @@ interface ApiResponse {
|
|||
username: string;
|
||||
image: string;
|
||||
createdAt: string;
|
||||
punishments: {
|
||||
id: number;
|
||||
userId: number;
|
||||
type: string;
|
||||
|
||||
notes: string;
|
||||
reasons: string[];
|
||||
violatingMiis: {
|
||||
miiId: number;
|
||||
reason: string;
|
||||
}[];
|
||||
|
||||
expiresAt: string | null;
|
||||
createdAt: string;
|
||||
}[];
|
||||
punishments: Prisma.PunishmentGetPayload<{
|
||||
include: {
|
||||
violatingMiis: true;
|
||||
};
|
||||
}>[];
|
||||
}
|
||||
|
||||
interface MiiList {
|
||||
|
|
@ -172,19 +163,30 @@ export default function Punishments() {
|
|||
>
|
||||
{punishment.type}
|
||||
</span>
|
||||
<span className="text-sm text-zinc-600">
|
||||
{new Date(punishment.createdAt).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })}
|
||||
</span>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-zinc-600">
|
||||
{new Date(punishment.createdAt).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })}
|
||||
</span>
|
||||
<PunishmentDeletionDialog punishmentId={punishment.id} />
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-600">
|
||||
<strong>Notes:</strong> {punishment.notes}
|
||||
</p>
|
||||
<p className="text-sm text-zinc-600">
|
||||
<strong>Expires:</strong>{" "}
|
||||
{punishment.expiresAt
|
||||
? new Date(punishment.expiresAt).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })
|
||||
: "Never"}
|
||||
</p>
|
||||
{punishment.type !== "WARNING" && (
|
||||
<p className="text-sm text-zinc-600">
|
||||
<strong>Expires:</strong>{" "}
|
||||
{punishment.expiresAt
|
||||
? new Date(punishment.expiresAt).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })
|
||||
: "Never"}
|
||||
</p>
|
||||
)}
|
||||
{punishment.type !== "PERM_EXILE" && (
|
||||
<p className="text-sm text-zinc-600">
|
||||
<strong>Returned:</strong> {JSON.stringify(punishment.returned)}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-sm text-zinc-600">
|
||||
<strong>Reasons:</strong>
|
||||
</p>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue