bb20461cc2
- kalender_warnung_prozent Setting: Admin kann Grün→Orange-Schwelle einstellen - Verfügbarkeits-API liefert Warnschwelle mit, BookingCalendar nutzt dynamischen Wert - Saison-Start/Ende als Date-Picker statt Textfeld im Admin-Dashboard Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
913 lines
40 KiB
TypeScript
913 lines
40 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useCallback, useMemo } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { createClient } from '@/lib/supabase/client';
|
|
import Header from '@/components/Header';
|
|
import { Buchung, Wasserzaehler, Setting } from '@/types';
|
|
import ConfirmationModal from '@/components/ConfirmationModal';
|
|
|
|
type Tab = 'pool' | 'wasserzaehler' | 'einstellungen';
|
|
|
|
export default function AdminDashboardPage() {
|
|
const router = useRouter();
|
|
const supabase = createClient();
|
|
|
|
const [loading, setLoading] = useState(true);
|
|
const [activeTab, setActiveTab] = useState<Tab>('pool');
|
|
const [buchungen, setBuchungen] = useState<Buchung[]>([]);
|
|
const [zaehler, setZaehler] = useState<Wasserzaehler[]>([]);
|
|
const [settings, setSettings] = useState<Setting[]>([]);
|
|
const [filterDate, setFilterDate] = useState('');
|
|
const [filterStatus, setFilterStatus] = useState('alle');
|
|
|
|
// Manual booking
|
|
const [showManualBooking, setShowManualBooking] = useState(false);
|
|
const [manualForm, setManualForm] = useState({
|
|
name: '', strasse: '', telefon: '', email: '',
|
|
wasserquelle: 'brunnen' as 'brunnen' | 'ortswasserleitung',
|
|
wassermenge_m3: '',
|
|
wunschdatum: '',
|
|
});
|
|
const [manualError, setManualError] = useState('');
|
|
const [showConfirmation, setShowConfirmation] = useState(false);
|
|
const [confirmMsg, setConfirmMsg] = useState('');
|
|
|
|
// Wasserzähler edit/delete
|
|
const [editZaehler, setEditZaehler] = useState<Wasserzaehler | null>(null);
|
|
const [editForm, setEditForm] = useState({
|
|
haushalt_name: '', adresse: '', kundennummer: '', zaehlernummer: '',
|
|
alter_stand: '', neuer_stand: '', ablesedatum: '',
|
|
});
|
|
const [editError, setEditError] = useState('');
|
|
const [editSaving, setEditSaving] = useState(false);
|
|
const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
supabase.auth.getUser().then(({ data: { user } }) => {
|
|
if (!user) {
|
|
router.push('/admin/login');
|
|
} else {
|
|
setLoading(false);
|
|
}
|
|
});
|
|
}, [supabase, router]);
|
|
|
|
const loadBuchungen = useCallback(async () => {
|
|
let query = supabase.from('buchungen').select('*').order('wunschdatum', { ascending: true });
|
|
if (filterDate) query = query.eq('wunschdatum', filterDate);
|
|
if (filterStatus !== 'alle') query = query.eq('status', filterStatus);
|
|
const { data, error } = await query;
|
|
if (error) console.error('loadBuchungen error:', error);
|
|
setBuchungen(data || []);
|
|
}, [supabase, filterDate, filterStatus]);
|
|
|
|
const loadZaehler = useCallback(async () => {
|
|
const { data } = await supabase.from('wasserzaehler').select('*').order('erstellt_am', { ascending: false });
|
|
setZaehler(data || []);
|
|
}, [supabase]);
|
|
|
|
const loadSettings = useCallback(async () => {
|
|
const { data } = await supabase.from('settings').select('*').order('key');
|
|
setSettings(data || []);
|
|
}, [supabase]);
|
|
|
|
useEffect(() => {
|
|
if (!loading) {
|
|
loadBuchungen();
|
|
loadZaehler();
|
|
loadSettings();
|
|
}
|
|
}, [loading, loadBuchungen, loadZaehler, loadSettings]);
|
|
|
|
const handleLogout = async () => {
|
|
await supabase.auth.signOut();
|
|
router.push('/admin/login');
|
|
};
|
|
|
|
const storniereBuchung = async (id: string) => {
|
|
await supabase.from('buchungen').update({ status: 'storniert' }).eq('id', id);
|
|
loadBuchungen();
|
|
};
|
|
|
|
const exportCSV = (data: Record<string, unknown>[], filename: string) => {
|
|
if (!data.length) return;
|
|
const headers = Object.keys(data[0]);
|
|
const csv = [
|
|
headers.join(';'),
|
|
...data.map(row => headers.map(h => `"${row[h] ?? ''}"`).join(';'))
|
|
].join('\n');
|
|
const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `${filename}_${new Date().toISOString().split('T')[0]}.csv`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
};
|
|
|
|
const handleManualBooking = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setManualError('');
|
|
|
|
if (!manualForm.name || !manualForm.strasse || !manualForm.telefon || !manualForm.wunschdatum) {
|
|
setManualError('Bitte alle Pflichtfelder ausfüllen.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await fetch('/api/pool', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
...manualForm,
|
|
wassermenge_m3: manualForm.wassermenge_m3 ? parseFloat(manualForm.wassermenge_m3) : null,
|
|
email: manualForm.email || 'telefon@gemeinde.at',
|
|
}),
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok) {
|
|
setManualError(data.error || 'Fehler beim Speichern.');
|
|
return;
|
|
}
|
|
setShowManualBooking(false);
|
|
setManualForm({
|
|
name: '', strasse: '', telefon: '', email: '',
|
|
wasserquelle: 'brunnen', wassermenge_m3: '', wunschdatum: '',
|
|
});
|
|
setConfirmMsg('Manuelle Buchung erfolgreich eingetragen!');
|
|
setShowConfirmation(true);
|
|
loadBuchungen();
|
|
} catch {
|
|
setManualError('Verbindungsfehler.');
|
|
}
|
|
};
|
|
|
|
const updateSetting = async (key: string, value: string) => {
|
|
await supabase.from('settings').update({ value, aktualisiert_am: new Date().toISOString() }).eq('key', key);
|
|
loadSettings();
|
|
};
|
|
|
|
const openEditZaehler = (z: Wasserzaehler) => {
|
|
setEditZaehler(z);
|
|
setEditForm({
|
|
haushalt_name: z.haushalt_name || '',
|
|
adresse: z.adresse || '',
|
|
kundennummer: z.kundennummer || '',
|
|
zaehlernummer: z.zaehlernummer || '',
|
|
alter_stand: z.alter_stand != null ? String(z.alter_stand) : '',
|
|
neuer_stand: z.neuer_stand != null ? String(z.neuer_stand) : '',
|
|
ablesedatum: z.ablesedatum || '',
|
|
});
|
|
setEditError('');
|
|
};
|
|
|
|
const handleEditSave = async () => {
|
|
if (!editZaehler) return;
|
|
setEditError('');
|
|
setEditSaving(true);
|
|
|
|
const alterStand = editForm.alter_stand ? parseFloat(editForm.alter_stand) : null;
|
|
const neuerStand = editForm.neuer_stand ? parseFloat(editForm.neuer_stand) : null;
|
|
const verbrauch = neuerStand != null && alterStand != null ? neuerStand - alterStand : null;
|
|
|
|
const { error } = await supabase.from('wasserzaehler').update({
|
|
haushalt_name: editForm.haushalt_name,
|
|
adresse: editForm.adresse,
|
|
kundennummer: editForm.kundennummer,
|
|
zaehlernummer: editForm.zaehlernummer,
|
|
alter_stand: alterStand,
|
|
neuer_stand: neuerStand,
|
|
verbrauch,
|
|
ablesedatum: editForm.ablesedatum || null,
|
|
}).eq('id', editZaehler.id);
|
|
|
|
setEditSaving(false);
|
|
if (error) {
|
|
setEditError(`Fehler: ${error.message}`);
|
|
return;
|
|
}
|
|
setEditZaehler(null);
|
|
setConfirmMsg('Wasserzähler wurde erfolgreich aktualisiert.');
|
|
setShowConfirmation(true);
|
|
loadZaehler();
|
|
};
|
|
|
|
const handleDeleteZaehler = async (id: string) => {
|
|
const { error } = await supabase.from('wasserzaehler').delete().eq('id', id);
|
|
setDeleteConfirm(null);
|
|
if (error) {
|
|
setConfirmMsg(`Fehler beim Löschen: ${error.message}`);
|
|
setShowConfirmation(true);
|
|
return;
|
|
}
|
|
setEditZaehler(null);
|
|
setConfirmMsg('Wasserzähler wurde gelöscht.');
|
|
setShowConfirmation(true);
|
|
loadZaehler();
|
|
};
|
|
|
|
// Today stats
|
|
const todayStr = new Date().toISOString().split('T')[0];
|
|
const todayStats = useMemo(() => {
|
|
const todayBuchungen = buchungen.filter(b => b.wunschdatum === todayStr && b.status === 'aktiv');
|
|
const todayM3 = todayBuchungen.reduce((sum, b) => sum + (b.wassermenge_m3 || 0), 0);
|
|
const totalAktiv = buchungen.filter(b => b.status === 'aktiv').length;
|
|
return { today: todayBuchungen.length, m3: todayM3, total: totalAktiv };
|
|
}, [buchungen, todayStr]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-bg">
|
|
<Header />
|
|
<main className="flex-1 max-w-6xl mx-auto px-4 py-6 w-full">
|
|
<div className="grid grid-cols-3 gap-4 mb-6">
|
|
{[1, 2, 3].map(i => <div key={i} className="skeleton h-24 rounded-2xl" />)}
|
|
</div>
|
|
<div className="skeleton h-64 rounded-2xl" />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const filteredBuchungen = buchungen;
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-bg">
|
|
<Header />
|
|
|
|
{/* Admin Bar */}
|
|
<div className="bg-white border-b border-border">
|
|
<div className="max-w-6xl mx-auto px-4 py-2.5 flex items-center justify-between">
|
|
<span className="text-[11px] bg-primary/8 text-primary px-2 py-0.5 rounded-md font-semibold uppercase tracking-wider">
|
|
Admin
|
|
</span>
|
|
<div className="flex items-center gap-3">
|
|
<a
|
|
href="/bedienungsanleitung.html"
|
|
target="_blank"
|
|
rel="noopener"
|
|
className="text-xs text-text-muted hover:text-accent transition-colors font-medium"
|
|
>
|
|
Hilfe
|
|
</a>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="text-xs text-text-muted hover:text-danger transition-colors font-medium"
|
|
>
|
|
Abmelden
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Today Stats */}
|
|
<div className="bg-white border-b border-border">
|
|
<div className="max-w-6xl mx-auto px-4 py-4">
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<div className="bg-accent/5 rounded-xl p-3 text-center">
|
|
<div className="text-2xl font-bold text-accent">{todayStats.today}</div>
|
|
<div className="text-[11px] text-text-muted font-medium mt-0.5">Heute</div>
|
|
</div>
|
|
<div className="bg-success/5 rounded-xl p-3 text-center">
|
|
<div className="text-2xl font-bold text-success">{todayStats.m3}</div>
|
|
<div className="text-[11px] text-text-muted font-medium mt-0.5">m³ heute</div>
|
|
</div>
|
|
<div className="bg-primary/5 rounded-xl p-3 text-center">
|
|
<div className="text-2xl font-bold text-primary">{todayStats.total}</div>
|
|
<div className="text-[11px] text-text-muted font-medium mt-0.5">Gesamt aktiv</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="bg-white border-b border-border">
|
|
<div className="max-w-6xl mx-auto px-4 flex gap-0">
|
|
{([
|
|
['pool', 'Pool-Buchungen'],
|
|
['wasserzaehler', 'Wasserzähler'],
|
|
['einstellungen', 'Einstellungen'],
|
|
] as [Tab, string][]).map(([key, label]) => (
|
|
<button
|
|
key={key}
|
|
onClick={() => setActiveTab(key)}
|
|
className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
|
|
activeTab === key
|
|
? 'border-accent text-accent'
|
|
: 'border-transparent text-text-muted hover:text-text'
|
|
}`}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<main className="flex-1 max-w-6xl mx-auto px-4 py-5 w-full">
|
|
{/* Pool Tab */}
|
|
{activeTab === 'pool' && (
|
|
<div className="space-y-4">
|
|
{/* Actions */}
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<button
|
|
onClick={() => setShowManualBooking(true)}
|
|
className="bg-accent text-white px-4 py-2.5 rounded-xl text-sm font-semibold hover:bg-accent-light active:scale-[0.98] transition-all flex items-center gap-2"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
Manuell eintragen
|
|
</button>
|
|
<div className="flex-1" />
|
|
<input
|
|
type="date"
|
|
value={filterDate}
|
|
onChange={(e) => setFilterDate(e.target.value)}
|
|
className="border border-border rounded-xl px-3 py-2.5 text-sm"
|
|
aria-label="Nach Datum filtern"
|
|
/>
|
|
<select
|
|
value={filterStatus}
|
|
onChange={(e) => setFilterStatus(e.target.value)}
|
|
className="border border-border rounded-xl px-3 py-2.5 text-sm"
|
|
aria-label="Nach Status filtern"
|
|
>
|
|
<option value="alle">Alle Status</option>
|
|
<option value="aktiv">Aktiv</option>
|
|
<option value="storniert">Storniert</option>
|
|
<option value="erledigt">Erledigt</option>
|
|
</select>
|
|
{filterDate && (
|
|
<button
|
|
onClick={() => setFilterDate('')}
|
|
className="text-xs text-text-muted hover:text-danger font-medium"
|
|
>
|
|
Zurücksetzen
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => exportCSV(filteredBuchungen as unknown as Record<string, unknown>[], 'pool_buchungen')}
|
|
className="border border-border rounded-xl px-3 py-2.5 text-sm font-medium hover:bg-bg transition-colors"
|
|
aria-label="CSV exportieren"
|
|
>
|
|
CSV Export
|
|
</button>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<div className="bg-white rounded-2xl border border-border overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-bg/80 text-text-muted text-[11px] uppercase tracking-wider">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left font-semibold">Datum</th>
|
|
<th className="px-4 py-3 text-left font-semibold">Name</th>
|
|
<th className="px-4 py-3 text-left font-semibold">Straße</th>
|
|
<th className="px-4 py-3 text-left font-semibold">Telefon</th>
|
|
<th className="px-4 py-3 text-left font-semibold">E-Mail</th>
|
|
<th className="px-4 py-3 text-left font-semibold">Quelle</th>
|
|
<th className="px-4 py-3 text-left font-semibold">m³</th>
|
|
<th className="px-4 py-3 text-left font-semibold">Status</th>
|
|
<th className="px-4 py-3 text-left font-semibold">Aktion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border/50">
|
|
{filteredBuchungen.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={9} className="px-4 py-12 text-center text-text-muted">
|
|
Keine Buchungen gefunden.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
filteredBuchungen.map((b) => (
|
|
<tr key={b.id} className="hover:bg-bg/30 transition-colors">
|
|
<td className="px-4 py-3 font-medium whitespace-nowrap">
|
|
{new Date(b.wunschdatum + 'T00:00:00').toLocaleDateString('de-AT')}
|
|
</td>
|
|
<td className="px-4 py-3 font-medium">{b.name}</td>
|
|
<td className="px-4 py-3 text-text-muted">{b.strasse}</td>
|
|
<td className="px-4 py-3 whitespace-nowrap">
|
|
<a
|
|
href={`tel:${b.telefon}`}
|
|
className="text-accent hover:underline font-medium"
|
|
aria-label={`${b.name} anrufen`}
|
|
>
|
|
{b.telefon}
|
|
</a>
|
|
</td>
|
|
<td className="px-4 py-3 text-text-muted">{b.email}</td>
|
|
<td className="px-4 py-3 text-text-muted">
|
|
{b.wasserquelle === 'brunnen' ? 'Brunnen' : 'Leitung'}
|
|
</td>
|
|
<td className="px-4 py-3">{b.wassermenge_m3 || '-'}</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`inline-flex px-2.5 py-0.5 rounded-full text-[11px] font-semibold ${
|
|
b.status === 'aktiv'
|
|
? 'bg-success/10 text-success'
|
|
: b.status === 'storniert'
|
|
? 'bg-danger/10 text-danger'
|
|
: 'bg-text-muted/10 text-text-muted'
|
|
}`}>
|
|
{b.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
{b.status === 'aktiv' && (
|
|
<button
|
|
onClick={() => storniereBuchung(b.id)}
|
|
className="text-danger text-xs font-medium hover:underline"
|
|
>
|
|
Stornieren
|
|
</button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div className="text-xs text-text-muted">
|
|
{filteredBuchungen.length} Buchung(en)
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Wasserzähler Tab */}
|
|
{activeTab === 'wasserzaehler' && (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between gap-2 flex-wrap">
|
|
<div>
|
|
<h3 className="text-lg font-bold text-primary">Wasserzähler</h3>
|
|
{zaehler.length > 0 && (
|
|
<p className="text-[11px] text-text-muted">
|
|
Letzter Import: {new Date(
|
|
Math.max(...zaehler.map(z => new Date(z.erstellt_am).getTime()))
|
|
).toLocaleDateString('de-AT', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-2 flex-wrap">
|
|
<button
|
|
onClick={() => router.push('/admin/zaehler-import')}
|
|
className="bg-accent text-white px-3 py-2.5 rounded-xl text-sm font-semibold hover:bg-accent-light active:scale-[0.98] transition-all flex items-center gap-1.5"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
|
</svg>
|
|
Stammdaten importieren
|
|
</button>
|
|
<button
|
|
onClick={() => router.push('/admin/serienbrief')}
|
|
className="border border-border bg-white px-3 py-2.5 rounded-xl text-sm font-semibold hover:bg-bg active:scale-[0.98] transition-all flex items-center gap-1.5"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
Serienbrief
|
|
</button>
|
|
<button
|
|
onClick={() => router.push('/admin/qrcodes')}
|
|
className="border border-border bg-white px-3 py-2.5 rounded-xl text-sm font-semibold hover:bg-bg active:scale-[0.98] transition-all flex items-center gap-1.5"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
|
|
</svg>
|
|
QR-Codes
|
|
</button>
|
|
<button
|
|
onClick={() => exportCSV(zaehler as unknown as Record<string, unknown>[], 'wasserzaehler')}
|
|
className="border border-border rounded-xl px-3 py-2.5 text-sm font-medium hover:bg-bg transition-colors"
|
|
>
|
|
CSV Export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="bg-white rounded-2xl border border-border overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-bg/80 text-text-muted text-[11px] uppercase tracking-wider">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left font-semibold">Kundennr.</th>
|
|
<th className="px-4 py-3 text-left font-semibold">Haushalt</th>
|
|
<th className="px-4 py-3 text-left font-semibold">Adresse</th>
|
|
<th className="px-4 py-3 text-left font-semibold">Zählernr.</th>
|
|
<th className="px-4 py-3 text-right font-semibold">Alter Stand</th>
|
|
<th className="px-4 py-3 text-right font-semibold">Neuer Stand</th>
|
|
<th className="px-4 py-3 text-right font-semibold">Verbrauch</th>
|
|
<th className="px-4 py-3 text-left font-semibold">Ablesedatum</th>
|
|
<th className="px-4 py-3 text-left font-semibold">Token</th>
|
|
<th className="px-4 py-3 text-left font-semibold">Aktion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border/50">
|
|
{zaehler.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={10} className="px-4 py-12 text-center text-text-muted">
|
|
Keine Wasserzähler gefunden.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
zaehler.map((z) => (
|
|
<tr key={z.id} className="hover:bg-bg/30 transition-colors">
|
|
<td className="px-4 py-3 font-mono text-xs font-semibold">{z.kundennummer}</td>
|
|
<td className="px-4 py-3 font-medium">{z.haushalt_name}</td>
|
|
<td className="px-4 py-3 text-text-muted">{z.adresse}</td>
|
|
<td className="px-4 py-3 font-mono text-xs">{z.zaehlernummer}</td>
|
|
<td className="px-4 py-3 text-right">{z.alter_stand} m³</td>
|
|
<td className="px-4 py-3 text-right font-medium">
|
|
{z.neuer_stand !== null ? `${z.neuer_stand} m³` : '-'}
|
|
</td>
|
|
<td className="px-4 py-3 text-right">
|
|
{z.verbrauch !== null ? (
|
|
<span className="font-semibold text-accent">{z.verbrauch} m³</span>
|
|
) : '-'}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
{z.ablesedatum
|
|
? new Date(z.ablesedatum).toLocaleDateString('de-AT')
|
|
: '-'}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<code className="text-xs bg-bg px-1.5 py-0.5 rounded select-all">
|
|
{z.access_token.slice(0, 8)}...
|
|
</code>
|
|
</td>
|
|
<td className="px-4 py-3 whitespace-nowrap">
|
|
<button
|
|
onClick={() => openEditZaehler(z)}
|
|
className="text-accent text-xs font-medium hover:underline mr-2"
|
|
>
|
|
Bearbeiten
|
|
</button>
|
|
<button
|
|
onClick={() => setDeleteConfirm(z.id)}
|
|
className="text-danger text-xs font-medium hover:underline"
|
|
>
|
|
Löschen
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Einstellungen Tab */}
|
|
{activeTab === 'einstellungen' && (
|
|
<div className="space-y-5 max-w-xl">
|
|
<h3 className="text-lg font-bold text-primary">Einstellungen</h3>
|
|
<div className="bg-white rounded-2xl border border-border divide-y divide-border/50">
|
|
{settings.map((s) => {
|
|
const isDate = s.key === 'saison_start' || s.key === 'saison_ende';
|
|
return (
|
|
<div key={s.key} className="p-4 flex items-center gap-4">
|
|
<div className="flex-1">
|
|
<div className="font-medium text-sm">{s.beschreibung || s.key}</div>
|
|
<div className="text-[11px] text-text-muted font-mono">{s.key}</div>
|
|
</div>
|
|
<input
|
|
type={isDate ? 'date' : 'text'}
|
|
defaultValue={s.value}
|
|
onBlur={(e) => {
|
|
if (e.target.value !== s.value) {
|
|
updateSetting(s.key, e.target.value);
|
|
}
|
|
}}
|
|
className="border border-border rounded-xl px-3 py-2.5 text-sm w-48 text-right"
|
|
aria-label={s.beschreibung || s.key}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<p className="text-xs text-text-muted">
|
|
Änderungen werden beim Verlassen des Feldes gespeichert.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</main>
|
|
|
|
{/* Manual Booking Modal */}
|
|
{showManualBooking && (
|
|
<div className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-end sm:items-center justify-center z-50 p-0 sm:p-4 animate-fade-in">
|
|
<div className="bg-white rounded-t-2xl sm:rounded-2xl shadow-2xl max-w-lg w-full p-6 pb-8 max-h-[90vh] overflow-y-auto animate-slide-up">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-lg font-bold text-primary">
|
|
Manuell eintragen
|
|
</h3>
|
|
<button
|
|
onClick={() => setShowManualBooking(false)}
|
|
className="w-8 h-8 rounded-full flex items-center justify-center hover:bg-bg transition-colors text-text-muted"
|
|
aria-label="Schließen"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<p className="text-sm text-text-muted mb-4">
|
|
Für telefonische Anmeldungen.
|
|
</p>
|
|
<form onSubmit={handleManualBooking} className="space-y-3">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1">Name *</label>
|
|
<input
|
|
type="text"
|
|
value={manualForm.name}
|
|
onChange={(e) => setManualForm(f => ({ ...f, name: e.target.value }))}
|
|
required
|
|
className="w-full border border-border rounded-xl px-3 py-2.5 text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1">Straße *</label>
|
|
<input
|
|
type="text"
|
|
value={manualForm.strasse}
|
|
onChange={(e) => setManualForm(f => ({ ...f, strasse: e.target.value }))}
|
|
required
|
|
className="w-full border border-border rounded-xl px-3 py-2.5 text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1">Telefon *</label>
|
|
<input
|
|
type="tel"
|
|
inputMode="tel"
|
|
value={manualForm.telefon}
|
|
onChange={(e) => setManualForm(f => ({ ...f, telefon: e.target.value }))}
|
|
required
|
|
className="w-full border border-border rounded-xl px-3 py-2.5 text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1">E-Mail</label>
|
|
<input
|
|
type="email"
|
|
inputMode="email"
|
|
value={manualForm.email}
|
|
onChange={(e) => setManualForm(f => ({ ...f, email: e.target.value }))}
|
|
className="w-full border border-border rounded-xl px-3 py-2.5 text-sm"
|
|
placeholder="optional"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1">Wunschtermin *</label>
|
|
<input
|
|
type="date"
|
|
value={manualForm.wunschdatum}
|
|
onChange={(e) => setManualForm(f => ({ ...f, wunschdatum: e.target.value }))}
|
|
required
|
|
className="w-full border border-border rounded-xl px-3 py-2.5 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => setManualForm(f => ({ ...f, wasserquelle: 'brunnen' }))}
|
|
className={`py-2.5 rounded-xl border-2 text-sm font-medium transition-all ${
|
|
manualForm.wasserquelle === 'brunnen'
|
|
? 'border-accent bg-accent/5 text-accent'
|
|
: 'border-border text-text-muted'
|
|
}`}
|
|
>
|
|
Brunnen
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setManualForm(f => ({ ...f, wasserquelle: 'ortswasserleitung' }))}
|
|
className={`py-2.5 rounded-xl border-2 text-sm font-medium transition-all ${
|
|
manualForm.wasserquelle === 'ortswasserleitung'
|
|
? 'border-accent bg-accent/5 text-accent'
|
|
: 'border-border text-text-muted'
|
|
}`}
|
|
>
|
|
Leitung
|
|
</button>
|
|
</div>
|
|
|
|
{manualForm.wasserquelle === 'ortswasserleitung' && (
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1">Wassermenge (m³)</label>
|
|
<input
|
|
type="number"
|
|
inputMode="decimal"
|
|
value={manualForm.wassermenge_m3}
|
|
onChange={(e) => setManualForm(f => ({ ...f, wassermenge_m3: e.target.value }))}
|
|
min="5"
|
|
step="0.5"
|
|
className="w-full border border-border rounded-xl px-3 py-2.5 text-sm"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{manualError && (
|
|
<div className="p-2.5 bg-danger/5 border border-danger/20 rounded-xl text-danger text-sm">
|
|
{manualError}
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-accent text-white py-3 rounded-xl font-semibold hover:bg-accent-light active:scale-[0.98] transition-all"
|
|
>
|
|
Eintragen
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Wasserzähler Edit Modal */}
|
|
{editZaehler && (
|
|
<div className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-end sm:items-center justify-center z-50 p-0 sm:p-4 animate-fade-in">
|
|
<div className="bg-white rounded-t-2xl sm:rounded-2xl shadow-2xl max-w-lg w-full p-6 pb-8 max-h-[90vh] overflow-y-auto animate-slide-up">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-lg font-bold text-primary">
|
|
Wasserzähler bearbeiten
|
|
</h3>
|
|
<button
|
|
onClick={() => setEditZaehler(null)}
|
|
className="w-8 h-8 rounded-full flex items-center justify-center hover:bg-bg transition-colors text-text-muted"
|
|
aria-label="Schließen"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Readonly fields */}
|
|
<div className="mb-4 p-3 bg-bg/50 rounded-xl space-y-1">
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-text-muted">Access Token</span>
|
|
<code className="font-mono select-all">{editZaehler.access_token}</code>
|
|
</div>
|
|
{editForm.neuer_stand && editForm.alter_stand && (
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-text-muted">Verbrauch (berechnet)</span>
|
|
<span className="font-semibold text-accent">
|
|
{(parseFloat(editForm.neuer_stand) - parseFloat(editForm.alter_stand)).toFixed(1)} m³
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1">Haushalt Name</label>
|
|
<input
|
|
type="text"
|
|
value={editForm.haushalt_name}
|
|
onChange={(e) => setEditForm(f => ({ ...f, haushalt_name: e.target.value }))}
|
|
className="w-full border border-border rounded-xl px-3 py-2.5 text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1">Adresse</label>
|
|
<input
|
|
type="text"
|
|
value={editForm.adresse}
|
|
onChange={(e) => setEditForm(f => ({ ...f, adresse: e.target.value }))}
|
|
className="w-full border border-border rounded-xl px-3 py-2.5 text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1">Kundennummer</label>
|
|
<input
|
|
type="text"
|
|
value={editForm.kundennummer}
|
|
onChange={(e) => setEditForm(f => ({ ...f, kundennummer: e.target.value }))}
|
|
className="w-full border border-border rounded-xl px-3 py-2.5 text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1">Zählernummer</label>
|
|
<input
|
|
type="text"
|
|
value={editForm.zaehlernummer}
|
|
onChange={(e) => setEditForm(f => ({ ...f, zaehlernummer: e.target.value }))}
|
|
className="w-full border border-border rounded-xl px-3 py-2.5 text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1">Alter Stand (m³)</label>
|
|
<input
|
|
type="number"
|
|
inputMode="decimal"
|
|
step="0.01"
|
|
value={editForm.alter_stand}
|
|
onChange={(e) => setEditForm(f => ({ ...f, alter_stand: e.target.value }))}
|
|
className="w-full border border-border rounded-xl px-3 py-2.5 text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1">Neuer Stand (m³)</label>
|
|
<input
|
|
type="number"
|
|
inputMode="decimal"
|
|
step="0.01"
|
|
value={editForm.neuer_stand}
|
|
onChange={(e) => setEditForm(f => ({ ...f, neuer_stand: e.target.value }))}
|
|
className="w-full border border-border rounded-xl px-3 py-2.5 text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1">Ablesedatum</label>
|
|
<input
|
|
type="date"
|
|
value={editForm.ablesedatum}
|
|
onChange={(e) => setEditForm(f => ({ ...f, ablesedatum: e.target.value }))}
|
|
className="w-full border border-border rounded-xl px-3 py-2.5 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
{editError && (
|
|
<div className="p-2.5 bg-danger/5 border border-danger/20 rounded-xl text-danger text-sm">
|
|
{editError}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex gap-2 pt-1">
|
|
<button
|
|
onClick={() => setEditZaehler(null)}
|
|
className="flex-1 border border-border py-3 rounded-xl font-semibold text-sm hover:bg-bg transition-colors"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
onClick={handleEditSave}
|
|
disabled={editSaving}
|
|
className="flex-1 bg-accent text-white py-3 rounded-xl font-semibold text-sm hover:bg-accent-light active:scale-[0.98] transition-all disabled:opacity-50"
|
|
>
|
|
{editSaving ? 'Speichern...' : 'Speichern'}
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setDeleteConfirm(editZaehler.id)}
|
|
className="w-full py-2.5 rounded-xl text-sm font-medium text-danger hover:bg-danger/5 transition-colors"
|
|
>
|
|
Eintrag löschen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Delete Confirmation */}
|
|
{deleteConfirm && (
|
|
<div className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-[60] p-4 animate-fade-in">
|
|
<div className="bg-white rounded-2xl shadow-2xl max-w-sm w-full p-6 animate-slide-up text-center">
|
|
<div className="w-12 h-12 rounded-full bg-danger/10 flex items-center justify-center mx-auto mb-3">
|
|
<svg className="w-6 h-6 text-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-lg font-bold text-primary mb-1">Wirklich löschen?</h3>
|
|
<p className="text-sm text-text-muted mb-5">
|
|
Der Wasserzähler-Eintrag wird unwiderruflich gelöscht.
|
|
</p>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => setDeleteConfirm(null)}
|
|
className="flex-1 border border-border py-3 rounded-xl font-semibold text-sm hover:bg-bg transition-colors"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
onClick={() => handleDeleteZaehler(deleteConfirm)}
|
|
className="flex-1 bg-danger text-white py-3 rounded-xl font-semibold text-sm hover:bg-danger/90 active:scale-[0.98] transition-all"
|
|
>
|
|
Löschen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{showConfirmation && (
|
|
<ConfirmationModal
|
|
title="Erfolgreich!"
|
|
message={confirmMsg}
|
|
onClose={() => setShowConfirmation(false)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|