123 lines
3.2 KiB
TypeScript
123 lines
3.2 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import { Check, Eye, X } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { getReports, handleMarkAsResolved } from "./actions";
|
|
|
|
export default function ReportPage() {
|
|
const [reports, setReports] = useState<
|
|
{
|
|
id: number;
|
|
timestamp: string;
|
|
erledigt: boolean;
|
|
sender: {
|
|
id: string;
|
|
firstname: string;
|
|
lastname: string;
|
|
publicId: string;
|
|
};
|
|
reported: {
|
|
id: string;
|
|
firstname: string;
|
|
lastname: string;
|
|
publicId: string;
|
|
};
|
|
}[]
|
|
>([]);
|
|
|
|
useEffect(() => {
|
|
const fetchReports = async () => {
|
|
const reps = await getReports();
|
|
const transformedReports = reps.map((report) => ({
|
|
id: report.id,
|
|
timestamp: report.timestamp.toISOString(),
|
|
erledigt: report.erledigt,
|
|
sender: {
|
|
id: report.sender.id,
|
|
firstname: report.sender.firstname,
|
|
lastname: report.sender.lastname,
|
|
publicId: report.sender.publicId,
|
|
},
|
|
reported: {
|
|
id: report.reported.id,
|
|
firstname: report.reported.firstname,
|
|
lastname: report.reported.lastname,
|
|
publicId: report.reported.publicId,
|
|
},
|
|
}));
|
|
setReports(transformedReports);
|
|
};
|
|
fetchReports();
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Eye className="w-5 h-5" />{" "}
|
|
<span className="text-lg font-bold">Reports</span>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="table table-zebra w-full">
|
|
<thead>
|
|
<tr>
|
|
<th>Erledigt</th>
|
|
<th>Sender</th>
|
|
<th>Reported</th>
|
|
<th>Time</th>
|
|
<th>ID</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{reports.map((report) => (
|
|
<tr key={report.id}>
|
|
<td className="text-center">
|
|
{report.erledigt ? (
|
|
<Check className="text-green-500 w-5 h-5" />
|
|
) : (
|
|
<X className="text-red-500 w-5 h-5" />
|
|
)}
|
|
</td>
|
|
<td>{`${report.sender.firstname} ${report.sender.lastname} (${report.sender.publicId})`}</td>
|
|
<td>{`${report.reported.firstname} ${report.reported.lastname} (${report.reported.publicId})`}</td>
|
|
<td>{new Date(report.timestamp).toLocaleString()}</td>
|
|
<td>{report.id}</td>
|
|
<td>
|
|
<div className="flex gap-2">
|
|
<Link href={`/admin/report/${report.id}`}>
|
|
<button className="btn btn-sm btn-outline btn-info flex items-center gap-2">
|
|
<Eye className="w-4 h-4" /> Anzeigen
|
|
</button>
|
|
</Link>
|
|
{!report.erledigt && (
|
|
<button
|
|
className="btn btn-sm btn-outline btn-success flex items-center gap-2"
|
|
onClick={async () => {
|
|
const result = await handleMarkAsResolved(report.id);
|
|
if (result.success) {
|
|
setReports((prevReports) =>
|
|
prevReports.map((r) =>
|
|
r.id === report.id
|
|
? { ...r, erledigt: true }
|
|
: r,
|
|
),
|
|
);
|
|
} else {
|
|
alert("Error: " + result.error);
|
|
}
|
|
}}
|
|
>
|
|
<Check className="w-4 h-4" /> Erledigen
|
|
</button>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|