Hocks Mieterportal: 5 Module (Dashboard, Mietkonto, Schadensmeldungen, Dokumente, Nachrichten), Docker-Setup, eigenes Branding
This commit is contained in:
@@ -0,0 +1,253 @@
|
||||
import { useMemo, useState } from 'react'
|
||||
import { Plus, Wrench, CalendarDays, MapPin } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { useStore, DEMO_TENANT, DEMO_UNIT_ID } from '../store/store'
|
||||
import type { TicketPriority, TicketStatus } from '../types'
|
||||
|
||||
const statusStyle: Record<TicketStatus, string> = {
|
||||
offen: 'bg-amber-100 text-amber-800',
|
||||
'in Bearbeitung': 'bg-blue-100 text-blue-800',
|
||||
erledigt: 'bg-emerald-100 text-emerald-800',
|
||||
}
|
||||
|
||||
const prioStyle: Record<TicketPriority, string> = {
|
||||
hoch: 'bg-red-100 text-red-700',
|
||||
mittel: 'bg-amber-100 text-amber-700',
|
||||
niedrig: 'bg-slate-100 text-slate-600',
|
||||
}
|
||||
|
||||
const categories = [
|
||||
'Sanitär',
|
||||
'Elektrik',
|
||||
'Heizung',
|
||||
'Fenster / Rollladen',
|
||||
'Balkon / Außenanlage',
|
||||
'Schlüssel',
|
||||
'Sonstiges',
|
||||
]
|
||||
|
||||
function NewTicketDialog() {
|
||||
const { dispatch, role } = useStore()
|
||||
const [open, setOpen] = useState(false)
|
||||
const [title, setTitle] = useState('')
|
||||
const [category, setCategory] = useState('Sanitär')
|
||||
const [priority, setPriority] = useState<TicketPriority>('mittel')
|
||||
const [description, setDescription] = useState('')
|
||||
|
||||
const submit = () => {
|
||||
if (!title.trim()) return
|
||||
dispatch({
|
||||
type: 'addTicket',
|
||||
ticket: {
|
||||
id: `t-${Date.now()}`,
|
||||
unitId: role === 'tenant' ? DEMO_UNIT_ID : 'hs-1',
|
||||
tenant: role === 'tenant' ? DEMO_TENANT : 'Hocks Verwaltung (intern)',
|
||||
title: title.trim(),
|
||||
description: description.trim() || '–',
|
||||
category,
|
||||
priority,
|
||||
status: 'offen',
|
||||
createdAt: new Date().toLocaleDateString('de-DE'),
|
||||
},
|
||||
})
|
||||
setTitle('')
|
||||
setDescription('')
|
||||
setOpen(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="gap-2">
|
||||
<Plus className="h-4 w-4" /> Neue Schadensmeldung
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Schaden oder Störung melden</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="t-title">Kurzbeschreibung</Label>
|
||||
<Input
|
||||
id="t-title"
|
||||
placeholder="z. B. Wasserhahn tropft"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Kategorie</Label>
|
||||
<Select value={category} onValueChange={setCategory}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{categories.map((c) => (
|
||||
<SelectItem key={c} value={c}>{c}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Dringlichkeit</Label>
|
||||
<Select value={priority} onValueChange={(v) => setPriority(v as TicketPriority)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="niedrig">Niedrig</SelectItem>
|
||||
<SelectItem value="mittel">Mittel</SelectItem>
|
||||
<SelectItem value="hoch">Hoch</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="t-desc">Beschreibung</Label>
|
||||
<Textarea
|
||||
id="t-desc"
|
||||
rows={4}
|
||||
placeholder="Was ist passiert? Seit wann? ..."
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setOpen(false)}>Abbrechen</Button>
|
||||
<Button onClick={submit} disabled={!title.trim()}>Meldung absenden</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Tickets() {
|
||||
const { tickets, units, role, dispatch } = useStore()
|
||||
const [filter, setFilter] = useState<'alle' | TicketStatus>('alle')
|
||||
|
||||
const visible = useMemo(
|
||||
() =>
|
||||
(role === 'tenant'
|
||||
? tickets.filter((t) => t.unitId === DEMO_UNIT_ID)
|
||||
: tickets
|
||||
).filter((t) => filter === 'alle' || t.status === filter),
|
||||
[tickets, role, filter],
|
||||
)
|
||||
|
||||
const counts = {
|
||||
offen: tickets.filter((t) => t.status === 'offen').length,
|
||||
'in Bearbeitung': tickets.filter((t) => t.status === 'in Bearbeitung').length,
|
||||
erledigt: tickets.filter((t) => t.status === 'erledigt').length,
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-wrap items-end justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Schadensmeldungen</h1>
|
||||
<p className="text-sm text-slate-500">
|
||||
{role === 'tenant'
|
||||
? 'Meldungen für Ihre Wohnung – vom Eingang bis zur Erledigung'
|
||||
: 'Alle Meldungen des Bestands – Priorisierung und Statuspflege'}
|
||||
</p>
|
||||
</div>
|
||||
<NewTicketDialog />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
{(['offen', 'in Bearbeitung', 'erledigt'] as const).map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
onClick={() => setFilter(filter === s ? 'alle' : s)}
|
||||
className={`rounded-2xl border p-5 text-left shadow-sm transition ${
|
||||
filter === s ? 'border-teal-500 ring-2 ring-teal-200' : 'bg-white hover:border-slate-300'
|
||||
}`}
|
||||
>
|
||||
<div className="text-sm text-slate-500">{s}</div>
|
||||
<div className="mt-1 text-2xl font-bold">{counts[s]}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{visible.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed bg-white p-10 text-center text-sm text-slate-500">
|
||||
<Wrench className="mx-auto mb-3 h-8 w-8 text-slate-300" />
|
||||
Keine Meldungen für diesen Filter.
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{visible.map((t) => {
|
||||
const unit = units.find((u) => u.id === t.unitId)
|
||||
return (
|
||||
<div key={t.id} className="rounded-2xl border bg-white p-5 shadow-sm">
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="font-semibold">{t.title}</div>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-500">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<MapPin className="h-3.5 w-3.5" />
|
||||
{unit ? `${unit.building}, Whg. ${unit.number}` : t.unitId}
|
||||
{role === 'admin' && ` · ${t.tenant}`}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<CalendarDays className="h-3.5 w-3.5" /> {t.createdAt}
|
||||
</span>
|
||||
<span>Kategorie: {t.category}</span>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-slate-600">{t.description}</p>
|
||||
</div>
|
||||
<div className="flex shrink-0 flex-col items-end gap-2">
|
||||
<Badge className={prioStyle[t.priority]} variant="secondary">
|
||||
{t.priority}
|
||||
</Badge>
|
||||
{role === 'admin' ? (
|
||||
<Select
|
||||
value={t.status}
|
||||
onValueChange={(v) =>
|
||||
dispatch({ type: 'setTicketStatus', id: t.id, status: v as TicketStatus })
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8 w-40">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="offen">offen</SelectItem>
|
||||
<SelectItem value="in Bearbeitung">in Bearbeitung</SelectItem>
|
||||
<SelectItem value="erledigt">erledigt</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : (
|
||||
<Badge className={statusStyle[t.status]} variant="secondary">{t.status}</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user