🎉 initial commit
This commit is contained in:
@@ -3,6 +3,7 @@ import { createFileRoute, useRouter } from '@tanstack/react-router'
|
||||
|
||||
import { SiteFooter } from '#/components/site-footer'
|
||||
import { SiteHeader } from '#/components/site-header'
|
||||
import { formatDateTimeLocal } from '#/lib/datetime'
|
||||
import { createReservation, getTables } from '#/lib/reservations'
|
||||
|
||||
export const Route = createFileRoute('/')({
|
||||
@@ -23,11 +24,6 @@ const OPENING_HOURS = [
|
||||
{ day: 'Sonntag', hours: ['11:30 – 13:30', '17:00 – 22:00'] },
|
||||
]
|
||||
|
||||
function formatDateTimeLocal(date: Date) {
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`
|
||||
}
|
||||
|
||||
function FlameIcon() {
|
||||
return (
|
||||
<svg className="hero-flame" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
|
||||
@@ -0,0 +1,339 @@
|
||||
import { useState } from 'react'
|
||||
import { createFileRoute, Link, redirect, useRouter } from '@tanstack/react-router'
|
||||
|
||||
import { getCurrentStaffUser } from '#/lib/auth'
|
||||
import { authClient } from '#/lib/auth-client'
|
||||
import { formatDateTimeLocal } from '#/lib/datetime'
|
||||
import {
|
||||
createReservation,
|
||||
deleteReservation,
|
||||
getReservations,
|
||||
getTables,
|
||||
updateReservation,
|
||||
} from '#/lib/reservations'
|
||||
|
||||
export const Route = createFileRoute('/staff/')({
|
||||
component: StaffDashboard,
|
||||
beforeLoad: async () => {
|
||||
const staffUser = await getCurrentStaffUser()
|
||||
if (!staffUser) {
|
||||
throw redirect({ to: '/staff/login' })
|
||||
}
|
||||
return { staffUser }
|
||||
},
|
||||
loader: async ({ context }) => {
|
||||
const [reservations, tables] = await Promise.all([getReservations(), getTables()])
|
||||
return { staffUser: context.staffUser, reservations, tables }
|
||||
},
|
||||
})
|
||||
|
||||
const dateTimeFormatter = new Intl.DateTimeFormat('de-DE', {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
})
|
||||
|
||||
function isSameDay(a: Date, b: Date) {
|
||||
return (
|
||||
a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
|
||||
)
|
||||
}
|
||||
|
||||
type ReservationRow = Awaited<ReturnType<typeof getReservations>>[number]
|
||||
|
||||
type FormState = {
|
||||
tableId: number | string
|
||||
customerName: string
|
||||
customerEmail: string
|
||||
partySize: number
|
||||
reservationTime: string
|
||||
}
|
||||
|
||||
function emptyForm(defaultTableId: number | string): FormState {
|
||||
return {
|
||||
tableId: defaultTableId,
|
||||
customerName: '',
|
||||
customerEmail: '',
|
||||
partySize: 2,
|
||||
reservationTime: formatDateTimeLocal(new Date(Date.now() + 60 * 60 * 1000)),
|
||||
}
|
||||
}
|
||||
|
||||
function StaffDashboard() {
|
||||
const router = useRouter()
|
||||
const { staffUser, reservations, tables } = Route.useLoaderData()
|
||||
|
||||
const [editingId, setEditingId] = useState<number | null>(null)
|
||||
const [form, setForm] = useState<FormState>(() => emptyForm(tables[0]?.id ?? ''))
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [success, setSuccess] = useState<string | null>(null)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [deletingId, setDeletingId] = useState<number | null>(null)
|
||||
|
||||
const now = new Date()
|
||||
const todaysReservations = reservations.filter((r) => isSameDay(new Date(r.reservationTime), now))
|
||||
const guestsToday = todaysReservations.reduce((sum, r) => sum + r.partySize, 0)
|
||||
const upcoming = reservations.filter((r) => new Date(r.reservationTime).getTime() >= now.getTime())
|
||||
|
||||
function startEdit(reservation: ReservationRow) {
|
||||
setEditingId(reservation.id)
|
||||
setForm({
|
||||
tableId: reservation.tableId,
|
||||
customerName: reservation.customerName,
|
||||
customerEmail: reservation.customerEmail,
|
||||
partySize: reservation.partySize,
|
||||
reservationTime: formatDateTimeLocal(new Date(reservation.reservationTime)),
|
||||
})
|
||||
setError(null)
|
||||
setSuccess(null)
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
setEditingId(null)
|
||||
setForm(emptyForm(tables[0]?.id ?? ''))
|
||||
setError(null)
|
||||
}
|
||||
|
||||
async function handleSubmit(event: React.FormEvent) {
|
||||
event.preventDefault()
|
||||
setError(null)
|
||||
setSuccess(null)
|
||||
|
||||
if (!form.tableId) {
|
||||
setError('Bitte wählen Sie einen Tisch aus')
|
||||
return
|
||||
}
|
||||
|
||||
setIsSubmitting(true)
|
||||
try {
|
||||
const payload = {
|
||||
tableId: Number(form.tableId),
|
||||
customerName: form.customerName,
|
||||
customerEmail: form.customerEmail,
|
||||
partySize: Number(form.partySize),
|
||||
reservationTime: new Date(form.reservationTime).toISOString(),
|
||||
}
|
||||
|
||||
if (editingId) {
|
||||
await updateReservation({ data: { id: editingId, ...payload } })
|
||||
setSuccess('Reservierung wurde aktualisiert.')
|
||||
} else {
|
||||
await createReservation({ data: payload })
|
||||
setSuccess('Reservierung wurde angelegt.')
|
||||
}
|
||||
|
||||
setEditingId(null)
|
||||
setForm(emptyForm(tables[0]?.id ?? ''))
|
||||
await router.invalidate()
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Etwas ist schiefgelaufen')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(reservation: ReservationRow) {
|
||||
if (!window.confirm(`Reservierung von ${reservation.customerName} wirklich löschen?`)) {
|
||||
return
|
||||
}
|
||||
|
||||
setDeletingId(reservation.id)
|
||||
setError(null)
|
||||
setSuccess(null)
|
||||
|
||||
try {
|
||||
await deleteReservation({ data: { id: reservation.id } })
|
||||
if (editingId === reservation.id) {
|
||||
cancelEdit()
|
||||
}
|
||||
setSuccess('Reservierung wurde gelöscht.')
|
||||
await router.invalidate()
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Etwas ist schiefgelaufen')
|
||||
} finally {
|
||||
setDeletingId(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleLogout() {
|
||||
await authClient.signOut()
|
||||
await router.navigate({ to: '/staff/login' })
|
||||
await router.invalidate()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="staff-page">
|
||||
<header className="staff-topbar">
|
||||
<Link className="wordmark" to="/">
|
||||
Steakhaus <span>bei Mirko</span>
|
||||
</Link>
|
||||
<div className="staff-topbar-right">
|
||||
{staffUser.role === 'admin' && (
|
||||
<Link className="btn btn-secondary" to="/staff/team">
|
||||
Mitarbeiter
|
||||
</Link>
|
||||
)}
|
||||
<span>Angemeldet als {staffUser.name}</span>
|
||||
<button type="button" className="btn btn-secondary" onClick={handleLogout}>
|
||||
Abmelden
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="page staff-main">
|
||||
<h1 className="section-heading">Reservierungen</h1>
|
||||
|
||||
<div className="staff-stats">
|
||||
<div className="stat-card">
|
||||
<span className="stat-value">{reservations.length}</span>
|
||||
<span className="stat-label">Reservierungen gesamt</span>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<span className="stat-value">{todaysReservations.length}</span>
|
||||
<span className="stat-label">Heute</span>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<span className="stat-value">{guestsToday}</span>
|
||||
<span className="stat-label">Gäste heute</span>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<span className="stat-value">{upcoming.length}</span>
|
||||
<span className="stat-label">Anstehend</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="staff-form-section">
|
||||
<h2 className="section-heading staff-subheading">
|
||||
{editingId ? 'Reservierung bearbeiten' : 'Neue Reservierung'}
|
||||
</h2>
|
||||
|
||||
<form className="reservation-form" onSubmit={handleSubmit}>
|
||||
<label>
|
||||
Tisch
|
||||
<select
|
||||
value={form.tableId}
|
||||
onChange={(e) => setForm((f) => ({ ...f, tableId: e.target.value }))}
|
||||
required
|
||||
>
|
||||
<option value="" disabled>
|
||||
Tisch auswählen
|
||||
</option>
|
||||
{tables.map((table) => (
|
||||
<option key={table.id} value={table.id}>
|
||||
{table.name} ({table.seats} Plätze)
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<div className="form-row">
|
||||
<label>
|
||||
Name
|
||||
<input
|
||||
type="text"
|
||||
value={form.customerName}
|
||||
onChange={(e) => setForm((f) => ({ ...f, customerName: e.target.value }))}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
E-Mail
|
||||
<input
|
||||
type="email"
|
||||
value={form.customerEmail}
|
||||
onChange={(e) => setForm((f) => ({ ...f, customerEmail: e.target.value }))}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<label>
|
||||
Anzahl Personen
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={20}
|
||||
value={form.partySize}
|
||||
onChange={(e) => setForm((f) => ({ ...f, partySize: Number(e.target.value) }))}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Datum & Uhrzeit
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={form.reservationTime}
|
||||
onChange={(e) => setForm((f) => ({ ...f, reservationTime: e.target.value }))}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Wird gespeichert …' : editingId ? 'Speichern' : 'Anlegen'}
|
||||
</button>
|
||||
{editingId && (
|
||||
<button type="button" className="btn btn-secondary" onClick={cancelEdit}>
|
||||
Abbrechen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && <p className="message message-error">{error}</p>}
|
||||
{success && <p className="message message-success">{success}</p>}
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="staff-table-section">
|
||||
{reservations.length === 0 ? (
|
||||
<p className="empty-state">Noch keine Reservierungen vorhanden.</p>
|
||||
) : (
|
||||
<div className="table-scroll">
|
||||
<table className="reservations-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Datum & Uhrzeit</th>
|
||||
<th>Tisch</th>
|
||||
<th>Kunde</th>
|
||||
<th>Personen</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{reservations.map((reservation) => (
|
||||
<tr key={reservation.id} className={editingId === reservation.id ? 'is-editing' : undefined}>
|
||||
<td>{dateTimeFormatter.format(new Date(reservation.reservationTime))}</td>
|
||||
<td>{reservation.tableName}</td>
|
||||
<td>
|
||||
{reservation.customerName}
|
||||
<br />
|
||||
<span className="muted">{reservation.customerEmail}</span>
|
||||
</td>
|
||||
<td>{reservation.partySize}</td>
|
||||
<td className="table-actions">
|
||||
<button type="button" className="btn btn-secondary" onClick={() => startEdit(reservation)}>
|
||||
Bearbeiten
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
disabled={deletingId === reservation.id}
|
||||
onClick={() => handleDelete(reservation)}
|
||||
>
|
||||
{deletingId === reservation.id ? 'Löschen …' : 'Löschen'}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import { useState } from 'react'
|
||||
import { createFileRoute, redirect, useRouter } from '@tanstack/react-router'
|
||||
|
||||
import { getCurrentStaffUser } from '#/lib/auth'
|
||||
import { authClient } from '#/lib/auth-client'
|
||||
|
||||
export const Route = createFileRoute('/staff/login')({
|
||||
component: StaffLogin,
|
||||
beforeLoad: async () => {
|
||||
const staffUser = await getCurrentStaffUser()
|
||||
if (staffUser) {
|
||||
throw redirect({ to: '/staff' })
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
function StaffLogin() {
|
||||
const router = useRouter()
|
||||
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
async function handleSubmit(event: React.FormEvent) {
|
||||
event.preventDefault()
|
||||
setError(null)
|
||||
setIsSubmitting(true)
|
||||
|
||||
const { error: signInError } = await authClient.signIn.email({ email, password })
|
||||
|
||||
if (signInError) {
|
||||
setError(signInError.message ?? 'Etwas ist schiefgelaufen')
|
||||
setIsSubmitting(false)
|
||||
return
|
||||
}
|
||||
|
||||
await router.navigate({ to: '/staff' })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="staff-page staff-login-page">
|
||||
<form className="reservation-form staff-login-form" onSubmit={handleSubmit}>
|
||||
<div className="staff-login-heading">
|
||||
<span className="section-kicker">Mitarbeiterbereich</span>
|
||||
<h1 className="section-heading">Anmelden</h1>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
E-Mail
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
autoFocus
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Passwort
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Wird geprüft …' : 'Anmelden'}
|
||||
</button>
|
||||
|
||||
{error && <p className="message message-error">{error}</p>}
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,295 @@
|
||||
import { useState } from 'react'
|
||||
import { createFileRoute, Link, redirect, useRouter } from '@tanstack/react-router'
|
||||
|
||||
import { getCurrentStaffUser } from '#/lib/auth'
|
||||
import { authClient } from '#/lib/auth-client'
|
||||
import { listStaffMembers } from '#/lib/staff'
|
||||
|
||||
export const Route = createFileRoute('/staff/team')({
|
||||
component: StaffTeam,
|
||||
beforeLoad: async () => {
|
||||
const staffUser = await getCurrentStaffUser()
|
||||
if (!staffUser) {
|
||||
throw redirect({ to: '/staff/login' })
|
||||
}
|
||||
if (staffUser.role !== 'admin') {
|
||||
throw redirect({ to: '/staff' })
|
||||
}
|
||||
return { staffUser }
|
||||
},
|
||||
loader: async ({ context }) => {
|
||||
const members = await listStaffMembers()
|
||||
return { staffUser: context.staffUser, members }
|
||||
},
|
||||
})
|
||||
|
||||
type StaffMember = Awaited<ReturnType<typeof listStaffMembers>>[number]
|
||||
|
||||
type FormState = {
|
||||
name: string
|
||||
email: string
|
||||
password: string
|
||||
role: 'admin' | 'user'
|
||||
}
|
||||
|
||||
function emptyForm(): FormState {
|
||||
return { name: '', email: '', password: '', role: 'user' }
|
||||
}
|
||||
|
||||
function StaffTeam() {
|
||||
const router = useRouter()
|
||||
const { staffUser, members } = Route.useLoaderData()
|
||||
|
||||
const [form, setForm] = useState<FormState>(emptyForm)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [success, setSuccess] = useState<string | null>(null)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [busyId, setBusyId] = useState<string | null>(null)
|
||||
|
||||
async function handleCreate(event: React.FormEvent) {
|
||||
event.preventDefault()
|
||||
setError(null)
|
||||
setSuccess(null)
|
||||
setIsSubmitting(true)
|
||||
|
||||
const { error: createError } = await authClient.admin.createUser({
|
||||
name: form.name,
|
||||
email: form.email,
|
||||
password: form.password,
|
||||
role: form.role,
|
||||
})
|
||||
|
||||
if (createError) {
|
||||
setError(createError.message ?? 'Etwas ist schiefgelaufen')
|
||||
setIsSubmitting(false)
|
||||
return
|
||||
}
|
||||
|
||||
setSuccess('Mitarbeiter wurde angelegt.')
|
||||
setForm(emptyForm())
|
||||
setIsSubmitting(false)
|
||||
await router.invalidate()
|
||||
}
|
||||
|
||||
async function handleRemove(member: StaffMember) {
|
||||
if (!window.confirm(`Zugang für ${member.name} wirklich entfernen?`)) {
|
||||
return
|
||||
}
|
||||
|
||||
setBusyId(member.id)
|
||||
setError(null)
|
||||
setSuccess(null)
|
||||
|
||||
const { error: removeError } = await authClient.admin.removeUser({ userId: member.id })
|
||||
|
||||
if (removeError) {
|
||||
setError(removeError.message ?? 'Etwas ist schiefgelaufen')
|
||||
} else {
|
||||
setSuccess('Zugang wurde entfernt.')
|
||||
await router.invalidate()
|
||||
}
|
||||
|
||||
setBusyId(null)
|
||||
}
|
||||
|
||||
async function handleToggleRole(member: StaffMember) {
|
||||
const nextRole = member.role === 'admin' ? 'user' : 'admin'
|
||||
setBusyId(member.id)
|
||||
setError(null)
|
||||
setSuccess(null)
|
||||
|
||||
const { error: roleError } = await authClient.admin.setRole({ userId: member.id, role: nextRole })
|
||||
|
||||
if (roleError) {
|
||||
setError(roleError.message ?? 'Etwas ist schiefgelaufen')
|
||||
} else {
|
||||
setSuccess('Rolle wurde aktualisiert.')
|
||||
await router.invalidate()
|
||||
}
|
||||
|
||||
setBusyId(null)
|
||||
}
|
||||
|
||||
async function handleToggleBan(member: StaffMember) {
|
||||
setBusyId(member.id)
|
||||
setError(null)
|
||||
setSuccess(null)
|
||||
|
||||
const { error: banError } = member.banned
|
||||
? await authClient.admin.unbanUser({ userId: member.id })
|
||||
: await authClient.admin.banUser({ userId: member.id })
|
||||
|
||||
if (banError) {
|
||||
setError(banError.message ?? 'Etwas ist schiefgelaufen')
|
||||
} else {
|
||||
setSuccess(member.banned ? 'Zugang wurde reaktiviert.' : 'Zugang wurde gesperrt.')
|
||||
await router.invalidate()
|
||||
}
|
||||
|
||||
setBusyId(null)
|
||||
}
|
||||
|
||||
async function handleSetPassword(member: StaffMember) {
|
||||
const newPassword = window.prompt(`Neues Passwort für ${member.name} (mind. 8 Zeichen):`)
|
||||
|
||||
if (!newPassword) {
|
||||
return
|
||||
}
|
||||
|
||||
setBusyId(member.id)
|
||||
setError(null)
|
||||
setSuccess(null)
|
||||
|
||||
const { error: passwordError } = await authClient.admin.setUserPassword({
|
||||
userId: member.id,
|
||||
newPassword,
|
||||
})
|
||||
|
||||
if (passwordError) {
|
||||
setError(passwordError.message ?? 'Etwas ist schiefgelaufen')
|
||||
} else {
|
||||
setSuccess(`Passwort für ${member.name} wurde geändert.`)
|
||||
}
|
||||
|
||||
setBusyId(null)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="staff-page">
|
||||
<header className="staff-topbar">
|
||||
<Link className="wordmark" to="/">
|
||||
Steakhaus <span>bei Mirko</span>
|
||||
</Link>
|
||||
<div className="staff-topbar-right">
|
||||
<Link className="btn btn-secondary" to="/staff">
|
||||
Zu den Reservierungen
|
||||
</Link>
|
||||
<span>Angemeldet als {staffUser.name}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="page staff-main">
|
||||
<h1 className="section-heading">Mitarbeiter</h1>
|
||||
|
||||
<section className="staff-form-section">
|
||||
<h2 className="section-heading staff-subheading">Neuer Mitarbeiter</h2>
|
||||
|
||||
<form className="reservation-form" onSubmit={handleCreate}>
|
||||
<div className="form-row">
|
||||
<label>
|
||||
Name
|
||||
<input
|
||||
type="text"
|
||||
value={form.name}
|
||||
onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
E-Mail
|
||||
<input
|
||||
type="email"
|
||||
value={form.email}
|
||||
onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<label>
|
||||
Passwort
|
||||
<input
|
||||
type="password"
|
||||
value={form.password}
|
||||
onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))}
|
||||
minLength={8}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Rolle
|
||||
<select
|
||||
value={form.role}
|
||||
onChange={(e) => setForm((f) => ({ ...f, role: e.target.value as FormState['role'] }))}
|
||||
>
|
||||
<option value="user">Mitarbeiter</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Wird angelegt …' : 'Anlegen'}
|
||||
</button>
|
||||
|
||||
{error && <p className="message message-error">{error}</p>}
|
||||
{success && <p className="message message-success">{success}</p>}
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="staff-table-section">
|
||||
<div className="table-scroll">
|
||||
<table className="reservations-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>E-Mail</th>
|
||||
<th>Rolle</th>
|
||||
<th>Status</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{members.map((member) => (
|
||||
<tr key={member.id}>
|
||||
<td>{member.name}</td>
|
||||
<td>{member.email}</td>
|
||||
<td>{member.role === 'admin' ? 'Admin' : 'Mitarbeiter'}</td>
|
||||
<td>{member.banned ? 'Gesperrt' : 'Aktiv'}</td>
|
||||
<td className="table-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
disabled={busyId === member.id}
|
||||
onClick={() => handleToggleRole(member)}
|
||||
>
|
||||
{member.role === 'admin' ? 'Zu Mitarbeiter machen' : 'Zu Admin machen'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
disabled={busyId === member.id}
|
||||
onClick={() => handleSetPassword(member)}
|
||||
>
|
||||
Passwort setzen
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
disabled={busyId === member.id || member.id === staffUser.id}
|
||||
onClick={() => handleToggleBan(member)}
|
||||
>
|
||||
{member.banned ? 'Entsperren' : 'Sperren'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
disabled={busyId === member.id || member.id === staffUser.id}
|
||||
onClick={() => handleRemove(member)}
|
||||
>
|
||||
Entfernen
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user