Remco/Epicnabbo-Catalogus-Updated-Daily
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

revert fb8e77bb68

Browse Source 
revert style: clean up code with prettier and eslint
This commit is contained in:
Remco
2026-07-12 21:02:03 +02:00
parent 27de078f54
commit e85e4d74ea
378 changed files with 20710 additions and 22428 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/tickets/[id]/admin-ticket-detail.tsx
+99 -79
View File
@@ -1,63 +1,74 @@
"use client";
'use client'
import { ArrowLeft, Calendar, Globe, Loader2, Mail, Send, Shield, User } from "lucide-react";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { adminReplyTicket, assignTicket, updateTicketPriority, updateTicketStatus } from "@/actions/tickets";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { useServerAction } from "@/hooks/use-server-action";
import { TICKET_PRIORITIES, TICKET_STATUSES } from "@/lib/validators/ticket";
import { ArrowLeft, Calendar, Globe, Loader2, Mail, Send, Shield, User } from 'lucide-react'
import Link from 'next/link'
import { useEffect, useRef, useState } from 'react'
import {
adminReplyTicket,
assignTicket,
updateTicketPriority,
updateTicketStatus,
} from '@/actions/tickets'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { Textarea } from '@/components/ui/textarea'
import { useServerAction } from '@/hooks/use-server-action'
import { TICKET_PRIORITIES, TICKET_STATUSES } from '@/lib/validators/ticket'
interface TicketMessage {
id: number;
message: string;
isStaff: boolean;
createdAt: string;
user: { id: number; username: string; look: string; rank: number };
id: number
message: string
isStaff: boolean
createdAt: string
user: { id: number; username: string; look: string; rank: number }
}
interface TicketInfo {
id: number;
subject: string;
category: string;
priority: string;
status: string;
createdAt: string;
closedAt: string | null;
id: number
subject: string
category: string
priority: string
status: string
createdAt: string
closedAt: string | null
creator: {
id: number;
username: string;
look: string;
rank: number;
mail: string;
ipRegister: string;
accountCreated: number;
};
assignee: { id: number; username: string } | null;
id: number
username: string
look: string
rank: number
mail: string
ipRegister: string
accountCreated: number
}
assignee: { id: number; username: string } | null
}
interface StaffMember {
id: number;
username: string;
id: number
username: string
}
const STATUS_COLORS: Record<string, string> = {
open: "bg-[var(--admin-info-subtle)] text-[var(--admin-info)]",
in_progress: "bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]",
waiting: "bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]",
closed: "bg-muted text-muted-foreground",
};
open: 'bg-[var(--admin-info-subtle)] text-[var(--admin-info)]',
in_progress: 'bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]',
waiting: 'bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]',
closed: 'bg-muted text-muted-foreground',
}
const PRIORITY_COLORS: Record<string, string> = {
low: "text-muted-foreground",
normal: "text-[var(--admin-info)]",
high: "text-[var(--admin-warning)]",
urgent: "text-[var(--admin-error)]",
};
low: 'text-muted-foreground',
normal: 'text-[var(--admin-info)]',
high: 'text-[var(--admin-warning)]',
urgent: 'text-[var(--admin-error)]',
}
export function AdminTicketDetail({
ticket,
@@ -66,28 +77,28 @@ export function AdminTicketDetail({
currentUserId,
canEdit,
}: {
ticket: TicketInfo;
messages: TicketMessage[];
staffMembers: StaffMember[];
currentUserId: number;
canEdit: boolean;
ticket: TicketInfo
messages: TicketMessage[]
staffMembers: StaffMember[]
currentUserId: number
canEdit: boolean
}) {
const [messages] = useState(initialMessages);
const [reply, setReply] = useState("");
const { run, isPending } = useServerAction();
const messagesEndRef = useRef<HTMLDivElement>(null);
const [messages] = useState(initialMessages)
const [reply, setReply] = useState('')
const { run, isPending } = useServerAction()
const messagesEndRef = useRef<HTMLDivElement>(null)
// biome-ignore lint/correctness/useExhaustiveDependencies: explicitly chosen here, see surrounding code
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages]);
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
}, [messages])
function handleReply() {
if (!reply.trim() || isPending) return;
if (!reply.trim() || isPending) return
run(() => adminReplyTicket({ ticketId: ticket.id, message: reply.trim() }), {
successMessage: "Reply sent!",
onSuccess: () => setReply(""),
});
successMessage: 'Reply sent!',
onSuccess: () => setReply(''),
})
}
function handleStatusChange(status: string) {
@@ -100,14 +111,14 @@ export function AdminTicketDetail({
{
successMessage: `Status changed to ${status}`,
},
);
)
}
function handleAssign(assigneeId: string) {
const id = assigneeId === "unassign" ? null : Number(assigneeId);
const id = assigneeId === 'unassign' ? null : Number(assigneeId)
run(() => assignTicket({ ticketId: ticket.id, assigneeId: id }), {
successMessage: id ? "Ticket assigned" : "Ticket unassigned",
});
successMessage: id ? 'Ticket assigned' : 'Ticket unassigned',
})
}
function handlePriorityChange(priority: string) {
@@ -120,10 +131,10 @@ export function AdminTicketDetail({
{
successMessage: `Priority changed to ${priority}`,
},
);
)
}
const isClosed = ticket.status === "closed";
const isClosed = ticket.status === 'closed'
return (
<div className="space-y-6">
@@ -137,7 +148,9 @@ export function AdminTicketDetail({
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<span className="text-sm text-muted-foreground font-mono">#{ticket.id}</span>
<Badge className={STATUS_COLORS[ticket.status]}>{ticket.status.replace("_", " ")}</Badge>
<Badge className={STATUS_COLORS[ticket.status]}>
{ticket.status.replace('_', ' ')}
</Badge>
<Badge variant="outline" className={`capitalize ${PRIORITY_COLORS[ticket.priority]}`}>
{ticket.priority}
</Badge>
@@ -167,9 +180,11 @@ export function AdminTicketDetail({
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<span className={`text-xs font-semibold ${msg.isStaff ? "text-primary" : ""}`}>
<span
className={`text-xs font-semibold ${msg.isStaff ? 'text-primary' : ''}`}
>
{msg.user.username}
{msg.isStaff && " (Staff)"}
{msg.isStaff && ' (Staff)'}
</span>
<span className="text-[10px] text-muted-foreground">
{new Date(msg.createdAt).toLocaleString()}
@@ -177,7 +192,7 @@ export function AdminTicketDetail({
</div>
<div
className={`rounded-lg px-4 py-2.5 text-sm leading-relaxed ${
msg.isStaff ? "bg-primary/10 border border-primary/20" : "bg-muted"
msg.isStaff ? 'bg-primary/10 border border-primary/20' : 'bg-muted'
}`}
>
<p className="whitespace-pre-wrap break-words">{msg.message}</p>
@@ -200,9 +215,9 @@ export function AdminTicketDetail({
maxLength={5000}
className="resize-none"
onKeyDown={(e) => {
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
handleReply();
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
e.preventDefault()
handleReply()
}
}}
/>
@@ -212,7 +227,11 @@ export function AdminTicketDetail({
size="icon"
className="shrink-0 h-auto"
>
{isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
{isPending ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<Send className="h-4 w-4" />
)}
</Button>
</div>
<p className="text-[10px] text-muted-foreground mt-1">
@@ -223,7 +242,8 @@ export function AdminTicketDetail({
{isClosed && (
<div className="border-t p-4 text-center text-sm text-muted-foreground">
Ticket closed {ticket.closedAt ? `on ${new Date(ticket.closedAt).toLocaleDateString()}` : ""}
Ticket closed{' '}
{ticket.closedAt ? `on ${new Date(ticket.closedAt).toLocaleDateString()}` : ''}
</div>
)}
</Card>
@@ -247,7 +267,7 @@ export function AdminTicketDetail({
<SelectContent>
{TICKET_STATUSES.map((s) => (
<SelectItem key={s} value={s} className="text-xs capitalize">
{s.replace("_", " ")}
{s.replace('_', ' ')}
</SelectItem>
))}
</SelectContent>
@@ -273,7 +293,7 @@ export function AdminTicketDetail({
<div>
<span className="text-xs text-muted-foreground mb-1 block">Assign to</span>
<Select
value={ticket.assignee ? String(ticket.assignee.id) : "unassign"}
value={ticket.assignee ? String(ticket.assignee.id) : 'unassign'}
onValueChange={handleAssign}
>
<SelectTrigger className="h-8 text-xs">
@@ -297,7 +317,7 @@ export function AdminTicketDetail({
size="sm"
className="w-full"
onClick={() => {
handleAssign(String(currentUserId));
handleAssign(String(currentUserId))
}}
>
Assign to me
@@ -362,5 +382,5 @@ export function AdminTicketDetail({
</div>
</div>
</div>
);
)
}