88 lines
3.6 KiB
TypeScript
88 lines
3.6 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(() => {
|
|
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>
|
|
)
|
|
}
|