583 lines
18 KiB
TypeScript
583 lines
18 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useRef } from 'react';
|
|
|
|
interface Member {
|
|
memberNumber: string;
|
|
hasVoted: boolean;
|
|
lastLogin?: string;
|
|
}
|
|
|
|
export default function MembersManager() {
|
|
const [members, setMembers] = useState<Member[]>([]);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [success, setSuccess] = useState<string | null>(null);
|
|
const [showAddForm, setShowAddForm] = useState(false);
|
|
const [showUploadForm, setShowUploadForm] = useState(false);
|
|
const [newMemberNumber, setNewMemberNumber] = useState('');
|
|
const [newPassword, setNewPassword] = useState('');
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [editingMember, setEditingMember] = useState<string | null>(null);
|
|
const [editPassword, setEditPassword] = useState('');
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
// Stats
|
|
const totalMembers = members.length;
|
|
const votedMembers = members.filter(m => m.hasVoted).length;
|
|
const notVotedMembers = totalMembers - votedMembers;
|
|
|
|
// Load members on component mount
|
|
useEffect(() => {
|
|
fetchMembers();
|
|
}, []);
|
|
|
|
// Fetch members from API
|
|
const fetchMembers = async () => {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const response = await fetch('/api/members');
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Fehler beim Abrufen der Mitglieder');
|
|
}
|
|
|
|
const data = await response.json();
|
|
setMembers(data.members || []);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
// Add a new member
|
|
const handleAddMember = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!newMemberNumber || !newPassword) {
|
|
setError('Mitgliedsnummer und Passwort sind erforderlich');
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
setError(null);
|
|
setSuccess(null);
|
|
|
|
try {
|
|
const response = await fetch('/api/members', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
action: 'add',
|
|
memberNumber: newMemberNumber,
|
|
password: newPassword
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Fehler beim Hinzufügen des Mitglieds');
|
|
}
|
|
|
|
setSuccess('Mitglied erfolgreich hinzugefügt');
|
|
setNewMemberNumber('');
|
|
setNewPassword('');
|
|
setShowAddForm(false);
|
|
|
|
// Refresh members list
|
|
fetchMembers();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
// Update a member
|
|
const handleUpdateMember = async (memberNumber: string) => {
|
|
if (!editPassword) {
|
|
setError('Passwort ist erforderlich');
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
setError(null);
|
|
setSuccess(null);
|
|
|
|
try {
|
|
const response = await fetch('/api/members', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
action: 'update',
|
|
memberNumber,
|
|
password: editPassword
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Fehler beim Aktualisieren des Mitglieds');
|
|
}
|
|
|
|
setSuccess('Passwort erfolgreich aktualisiert');
|
|
setEditPassword('');
|
|
setEditingMember(null);
|
|
|
|
// Refresh members list
|
|
fetchMembers();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
// Delete a member
|
|
const handleDeleteMember = async (memberNumber: string) => {
|
|
// Show confirmation dialog
|
|
if (!confirm(`Sind Sie sicher, dass Sie das Mitglied "${memberNumber}" löschen möchten?`)) {
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
setError(null);
|
|
setSuccess(null);
|
|
|
|
try {
|
|
const response = await fetch('/api/members', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
action: 'delete',
|
|
memberNumber
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Fehler beim Löschen des Mitglieds');
|
|
}
|
|
|
|
setSuccess('Mitglied erfolgreich gelöscht');
|
|
|
|
// Refresh members list
|
|
fetchMembers();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
// Delete all members
|
|
const handleDeleteAllMembers = async () => {
|
|
// Show confirmation dialog
|
|
if (!confirm('Sind Sie sicher, dass Sie ALLE Mitglieder löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.')) {
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
setError(null);
|
|
setSuccess(null);
|
|
|
|
try {
|
|
const response = await fetch('/api/members', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
action: 'deleteAll'
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Fehler beim Löschen aller Mitglieder');
|
|
}
|
|
|
|
setSuccess('Alle Mitglieder erfolgreich gelöscht');
|
|
|
|
// Refresh members list
|
|
fetchMembers();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
// Toggle voting status
|
|
const handleToggleVotingStatus = async (memberNumber: string, currentStatus: boolean) => {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
setSuccess(null);
|
|
|
|
try {
|
|
const response = await fetch('/api/members', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
action: 'update',
|
|
memberNumber,
|
|
hasVoted: !currentStatus
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Fehler beim Aktualisieren des Status');
|
|
}
|
|
|
|
setSuccess('Status erfolgreich aktualisiert');
|
|
|
|
// Refresh members list
|
|
fetchMembers();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
// Handle CSV upload
|
|
const handleUploadCSV = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!fileInputRef.current?.files?.length) {
|
|
setError('Bitte wählen Sie eine CSV-Datei aus');
|
|
return;
|
|
}
|
|
|
|
const file = fileInputRef.current.files[0];
|
|
|
|
if (!file.name.endsWith('.csv')) {
|
|
setError('Bitte wählen Sie eine CSV-Datei aus');
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
setError(null);
|
|
setSuccess(null);
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
const response = await fetch('/api/upload-members', {
|
|
method: 'POST',
|
|
body: formData,
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Fehler beim Hochladen der Datei');
|
|
}
|
|
|
|
setSuccess(`${data.added} Mitglieder importiert, ${data.skipped} übersprungen`);
|
|
setShowUploadForm(false);
|
|
|
|
// Reset file input
|
|
if (fileInputRef.current) {
|
|
fileInputRef.current.value = '';
|
|
}
|
|
|
|
// Refresh members list
|
|
fetchMembers();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
// Filter members by search term
|
|
const filteredMembers = members.filter(member =>
|
|
member.memberNumber.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<h2 className="text-xl font-bold text-[#0057a6] mb-4">Mitgliederverwaltung</h2>
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-3 gap-4 mb-6">
|
|
<div className="bg-[#e6f0fa] p-4 text-center">
|
|
<div className="text-2xl font-bold text-[#0057a6]">{totalMembers}</div>
|
|
<div className="text-sm text-[#0057a6]">Gesamt</div>
|
|
</div>
|
|
<div className="bg-[#e6f0fa] p-4 text-center">
|
|
<div className="text-2xl font-bold text-[#0057a6]">{votedMembers}</div>
|
|
<div className="text-sm text-[#0057a6]">Abgestimmt</div>
|
|
</div>
|
|
<div className="bg-[#e6f0fa] p-4 text-center">
|
|
<div className="text-2xl font-bold text-[#0057a6]">{notVotedMembers}</div>
|
|
<div className="text-sm text-[#0057a6]">Nicht abgestimmt</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex flex-wrap gap-2 mb-6">
|
|
<button
|
|
onClick={() => {
|
|
setShowAddForm(!showAddForm);
|
|
setShowUploadForm(false);
|
|
setError(null);
|
|
setSuccess(null);
|
|
}}
|
|
className="ssvc-button"
|
|
>
|
|
{showAddForm ? 'Abbrechen' : 'Mitglied hinzufügen'}
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => {
|
|
setShowUploadForm(!showUploadForm);
|
|
setShowAddForm(false);
|
|
setError(null);
|
|
setSuccess(null);
|
|
}}
|
|
className="ssvc-button"
|
|
>
|
|
{showUploadForm ? 'Abbrechen' : 'CSV importieren'}
|
|
</button>
|
|
|
|
<button
|
|
onClick={handleDeleteAllMembers}
|
|
className="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded"
|
|
>
|
|
Alle Mitglieder löschen
|
|
</button>
|
|
</div>
|
|
|
|
{/* Add Member Form */}
|
|
{showAddForm && (
|
|
<div className="bg-[#e6f0fa] p-4 mb-6">
|
|
<h3 className="font-medium text-[#0057a6] mb-3">Neues Mitglied hinzufügen</h3>
|
|
|
|
<form onSubmit={handleAddMember} className="space-y-3">
|
|
<div>
|
|
<label htmlFor="newMemberNumber" className="block text-sm font-medium text-gray-700 mb-1">
|
|
Mitgliedsnummer
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="newMemberNumber"
|
|
value={newMemberNumber}
|
|
onChange={(e) => setNewMemberNumber(e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:border-[#0057a6]"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="newPassword" className="block text-sm font-medium text-gray-700 mb-1">
|
|
Passwort
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="newPassword"
|
|
value={newPassword}
|
|
onChange={(e) => setNewPassword(e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:border-[#0057a6]"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
className="ssvc-button w-full"
|
|
>
|
|
{isLoading ? 'Wird hinzugefügt...' : 'Mitglied hinzufügen'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
)}
|
|
|
|
{/* Upload CSV Form */}
|
|
{showUploadForm && (
|
|
<div className="bg-[#e6f0fa] p-4 mb-6">
|
|
<h3 className="font-medium text-[#0057a6] mb-3">CSV-Datei importieren</h3>
|
|
|
|
<form onSubmit={handleUploadCSV} className="space-y-3">
|
|
<div>
|
|
<label htmlFor="csvFile" className="block text-sm font-medium text-gray-700 mb-1">
|
|
CSV-Datei auswählen
|
|
</label>
|
|
<input
|
|
type="file"
|
|
id="csvFile"
|
|
ref={fileInputRef}
|
|
accept=".csv"
|
|
className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:border-[#0057a6]"
|
|
required
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
Die CSV-Datei sollte zwei Spalten enthalten: Mitgliedsnummer und Passwort.
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
className="ssvc-button w-full"
|
|
>
|
|
{isLoading ? 'Wird hochgeladen...' : 'CSV importieren'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
)}
|
|
|
|
{/* Messages */}
|
|
{error && (
|
|
<div className="text-red-500 text-sm mb-4">{error}</div>
|
|
)}
|
|
|
|
{success && (
|
|
<div className="text-green-500 text-sm mb-4">{success}</div>
|
|
)}
|
|
|
|
{/* Search */}
|
|
<div className="mb-4">
|
|
<label htmlFor="search" className="block text-sm font-medium text-gray-700 mb-1">
|
|
Mitglieder suchen
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="search"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
placeholder="Mitgliedsnummer eingeben..."
|
|
className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:border-[#0057a6]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Members List */}
|
|
{isLoading && members.length === 0 ? (
|
|
<div className="text-center p-4">Lade Mitglieder...</div>
|
|
) : filteredMembers.length === 0 ? (
|
|
<div className="text-center p-4">
|
|
{searchTerm ? 'Keine Mitglieder gefunden' : 'Keine Mitglieder vorhanden'}
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full border-collapse">
|
|
<thead>
|
|
<tr className="bg-[#0057a6] text-white">
|
|
<th className="p-2 text-left">Mitgliedsnummer</th>
|
|
<th className="p-2 text-center">Status</th>
|
|
<th className="p-2 text-center">Letzte Anmeldung</th>
|
|
<th className="p-2 text-right">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filteredMembers.map((member) => (
|
|
<tr key={member.memberNumber} className="border-b border-gray-200 hover:bg-gray-50">
|
|
<td className="p-2">{member.memberNumber}</td>
|
|
<td className="p-2 text-center">
|
|
<span
|
|
className={`inline-block px-2 py-1 rounded text-xs ${member.hasVoted
|
|
? 'bg-green-100 text-green-800'
|
|
: 'bg-yellow-100 text-yellow-800'
|
|
}`}
|
|
>
|
|
{member.hasVoted ? 'Abgestimmt' : 'Nicht abgestimmt'}
|
|
</span>
|
|
</td>
|
|
<td className="p-2 text-center text-sm text-gray-600">
|
|
{member.lastLogin
|
|
? new Date(member.lastLogin).toLocaleString('de-DE', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})
|
|
: '-'}
|
|
</td>
|
|
<td className="p-2 text-right">
|
|
{editingMember === member.memberNumber ? (
|
|
<div className="flex items-center justify-end gap-2">
|
|
<input
|
|
type="text"
|
|
value={editPassword}
|
|
onChange={(e) => setEditPassword(e.target.value)}
|
|
placeholder="Neues Passwort"
|
|
className="px-2 py-1 border border-gray-300 text-sm w-32"
|
|
/>
|
|
<button
|
|
onClick={() => handleUpdateMember(member.memberNumber)}
|
|
className="text-[#0057a6] hover:underline text-sm"
|
|
>
|
|
Speichern
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setEditingMember(null);
|
|
setEditPassword('');
|
|
}}
|
|
className="text-gray-500 hover:underline text-sm"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-end gap-2">
|
|
<button
|
|
onClick={() => {
|
|
setEditingMember(member.memberNumber);
|
|
setEditPassword('');
|
|
setError(null);
|
|
setSuccess(null);
|
|
}}
|
|
className="text-[#0057a6] hover:underline text-sm"
|
|
title="Passwort ändern"
|
|
>
|
|
Bearbeiten
|
|
</button>
|
|
<button
|
|
onClick={() => handleToggleVotingStatus(member.memberNumber, member.hasVoted)}
|
|
className="text-orange-600 hover:underline text-sm"
|
|
title={member.hasVoted ? 'Als nicht abgestimmt markieren' : 'Als abgestimmt markieren'}
|
|
>
|
|
Status ändern
|
|
</button>
|
|
<button
|
|
onClick={() => handleDeleteMember(member.memberNumber)}
|
|
className="text-red-600 hover:underline text-sm"
|
|
title="Mitglied löschen"
|
|
>
|
|
Löschen
|
|
</button>
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|