97 lines
4.2 KiB
TypeScript
97 lines
4.2 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo } from "react"
|
|
import { useAuth } from "@/lib/auth-context"
|
|
import { CreateTicketForm } from "@/components/tickets/create-ticket-form"
|
|
import { TicketTable } from "@/components/tickets/ticket-table"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Ticket, Clock, CheckCircle2, AlertCircle } from "lucide-react"
|
|
|
|
export function TeacherDashboard() {
|
|
const { user, tickets } = useAuth()
|
|
|
|
const myTickets = useMemo(() => {
|
|
// Filter by own email or ID. The backend returns all tickets for RAUMBETREUER?
|
|
// Wait, backend logic:
|
|
// If LEHRKRAFT (ROLE_TEACHER): /tickets returns all tickets created by this user.
|
|
// So `tickets` in context should already be "my tickets" if I am a teacher.
|
|
// But let's be safe and filter if the API returns more than expected or just use all.
|
|
// Actually, AuthContext fetches `/tickets`.
|
|
// TeacherController: `getTickets` -> `ticketService.getTickets(user)`.
|
|
// TicketService: if teacher, `ticketRepository.findByOwner(user)`.
|
|
// So yes, `tickets` contains only my tickets.
|
|
return tickets
|
|
}, [tickets])
|
|
|
|
const stats = useMemo(() => {
|
|
const open = myTickets.filter((t) => t.status === "OPEN").length
|
|
const inProgress = myTickets.filter((t) => t.status === "IN_PROGRESS").length
|
|
const done = myTickets.filter((t) => t.status === "CLOSED").length
|
|
return { open, inProgress, done, total: myTickets.length }
|
|
}, [myTickets])
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold tracking-tight">Lehrkraft Dashboard</h1>
|
|
<p className="text-muted-foreground mt-1">Erstellen und verfolgen Sie Ihre IT-Support-Tickets</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-4">
|
|
<Card className="border-border/60">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Tickets Gesamt</CardTitle>
|
|
<Ticket className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{stats.total}</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-border/60">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Offen</CardTitle>
|
|
<AlertCircle className="h-4 w-4 text-status-open-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold text-status-open-foreground">{stats.open}</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-border/60">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">In Bearbeitung</CardTitle>
|
|
<Clock className="h-4 w-4 text-status-progress-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold text-status-progress-foreground">{stats.inProgress}</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-border/60">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Erledigt</CardTitle>
|
|
<CheckCircle2 className="h-4 w-4 text-status-done-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold text-status-done-foreground">{stats.done}</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="grid gap-8 lg:grid-cols-3">
|
|
<div className="lg:col-span-1">
|
|
<CreateTicketForm />
|
|
</div>
|
|
<div className="lg:col-span-2">
|
|
<Card className="border-border/60">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">Meine Tickets</CardTitle>
|
|
<CardDescription>Übersicht Ihrer gemeldeten Probleme</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<TicketTable tickets={myTickets} />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|