Files
tickte-system/src/pages/AdminPage.jsx
2026-05-25 06:41:35 +00:00

739 lines
28 KiB
JavaScript

import { useState, useEffect } from 'react'
import { useAdminConfig } from '../hooks/useAdminConfig'
import { useAuth } from '../context/AuthContext'
import { useCustomers } from '../hooks/useCustomers'
import { useEmployees } from '../hooks/useEmployees'
import { FaPlus, FaTrash, FaFloppyDisk, FaSpinner } from 'react-icons/fa6'
import { FaEdit } from 'react-icons/fa'
export default function AdminPage() {
const { user, isAdmin } = useAuth()
const { config, loading, error, updateConfig } = useAdminConfig()
const { customers, loading: customersLoading, createCustomer, updateCustomer, deleteCustomer, refresh: refreshCustomers } = useCustomers()
const { employees, loading: employeesLoading, createEmployee, updateEmployee, deleteEmployee, refresh: refreshEmployees } = useEmployees()
const [localConfig, setLocalConfig] = useState(() => {
// Initialisiere mit Default-Werten falls config noch nicht geladen
if (config && Object.keys(config).length > 0) {
return config
}
return {
ticketTypes: [],
systems: [],
responseLevels: [],
serviceTypes: [],
priorities: []
}
})
const [saving, setSaving] = useState(false)
const [saveMessage, setSaveMessage] = useState('')
const [editingCustomer, setEditingCustomer] = useState(null)
const [customerForm, setCustomerForm] = useState({ code: '', name: '', location: '', email: '', phone: '' })
const [editingEmployee, setEditingEmployee] = useState(null)
const [employeeForm, setEmployeeForm] = useState({ userId: '', displayName: '', email: '', shortcode: '' })
const [adminSection, setAdminSection] = useState('config')
// Update localConfig when config loads
useEffect(() => {
if (config && Object.keys(config).length > 0) {
setLocalConfig(config)
}
}, [config])
if (!isAdmin) {
return (
<div className="main-content">
<div className="card">
<div className="card-header">
<h2>Zugriff verweigert</h2>
</div>
<div className="card-body">
<p>Du hast keine Berechtigung, auf diese Seite zuzugreifen.</p>
</div>
</div>
</div>
)
}
const handleAddItem = (field) => {
setLocalConfig(prev => ({
...prev,
[field]: [...prev[field], field === 'priorities' ? { value: prev[field].length, label: 'New' } : 'New Item']
}))
}
const handleRemoveItem = (field, index) => {
setLocalConfig(prev => ({
...prev,
[field]: prev[field].filter((_, i) => i !== index)
}))
}
const handleUpdateItem = (field, index, value) => {
setLocalConfig(prev => {
const newArray = [...prev[field]]
if (field === 'priorities') {
newArray[index] = { ...newArray[index], ...value }
} else {
newArray[index] = value
}
return { ...prev, [field]: newArray }
})
}
const handleSave = async () => {
setSaving(true)
setSaveMessage('')
const result = await updateConfig(localConfig)
if (result.success) {
setSaveMessage('Konfiguration erfolgreich gespeichert!')
setTimeout(() => setSaveMessage(''), 3000)
} else {
setSaveMessage('Fehler beim Speichern: ' + (result.error || 'Unbekannter Fehler'))
}
setSaving(false)
}
if (loading && !config) {
return (
<div className="main-content text-center p-4">
<FaSpinner className="spinner" size={32} />
<p>Lade Konfiguration...</p>
</div>
)
}
return (
<div className="main-content">
<header className="text-center mb-2">
<h2>Admin Panel - Dropdown Konfiguration</h2>
</header>
{error && (
<div className="bg-red text-white p-2 mb-2" style={{ borderRadius: '4px' }}>
Fehler: {error}
</div>
)}
{saveMessage && (
<div className={`p-2 mb-2 ${saveMessage.includes('erfolgreich') ? 'bg-green text-white' : 'bg-red text-white'}`} style={{ borderRadius: '4px' }}>
{saveMessage}
</div>
)}
<div
className="text-center mb-2"
style={{
display: 'flex',
gap: '20px',
justifyContent: 'center',
flexWrap: 'wrap',
padding: '12px',
background: 'rgba(45, 55, 72, 0.4)',
borderRadius: '8px',
}}
>
{[
{ id: 'config', label: 'Konfiguration' },
{ id: 'customers', label: 'Kunden' },
{ id: 'employees', label: 'Mitarbeiter' },
].map((section) => (
<label
key={section.id}
style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer', fontWeight: adminSection === section.id ? 'bold' : 'normal' }}
>
<input
type="radio"
name="adminSection"
checked={adminSection === section.id}
onChange={() => setAdminSection(section.id)}
/>
{section.label}
</label>
))}
</div>
{adminSection === 'config' && (
<>
<div className="row">
{/* Ticket Types */}
<div className="col col-6">
<div className="card mb-2">
<div className="card-header">
<h3>Work Order Types</h3>
</div>
<div className="card-body">
{localConfig.ticketTypes?.map((type, index) => (
<div key={index} className="form-group" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
<input
type="text"
className="form-control"
value={type}
onChange={(e) => handleUpdateItem('ticketTypes', index, e.target.value)}
style={{ flex: 1 }}
/>
<button
className="btn btn-red"
onClick={() => handleRemoveItem('ticketTypes', index)}
>
<FaTrash />
</button>
</div>
))}
<button
className="btn btn-green"
onClick={() => handleAddItem('ticketTypes')}
style={{ width: '100%', marginTop: '8px' }}
>
<FaPlus /> Hinzufügen
</button>
</div>
</div>
</div>
{/* Systems */}
<div className="col col-6">
<div className="card mb-2">
<div className="card-header">
<h3>Affected Systems</h3>
</div>
<div className="card-body">
{localConfig.systems?.map((system, index) => (
<div key={index} className="form-group" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
<input
type="text"
className="form-control"
value={system}
onChange={(e) => handleUpdateItem('systems', index, e.target.value)}
style={{ flex: 1 }}
/>
<button
className="btn btn-red"
onClick={() => handleRemoveItem('systems', index)}
>
<FaTrash />
</button>
</div>
))}
<button
className="btn btn-green"
onClick={() => handleAddItem('systems')}
style={{ width: '100%', marginTop: '8px' }}
>
<FaPlus /> Hinzufügen
</button>
</div>
</div>
</div>
</div>
<div className="row">
{/* Response Levels */}
<div className="col col-6">
<div className="card mb-2">
<div className="card-header">
<h3>Response Levels</h3>
</div>
<div className="card-body">
{localConfig.responseLevels?.map((level, index) => (
<div key={index} className="form-group" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
<input
type="text"
className="form-control"
value={level}
onChange={(e) => handleUpdateItem('responseLevels', index, e.target.value)}
style={{ flex: 1 }}
/>
<button
className="btn btn-red"
onClick={() => handleRemoveItem('responseLevels', index)}
>
<FaTrash />
</button>
</div>
))}
<button
className="btn btn-green"
onClick={() => handleAddItem('responseLevels')}
style={{ width: '100%', marginTop: '8px' }}
>
<FaPlus /> Hinzufügen
</button>
</div>
</div>
</div>
{/* Service Types */}
<div className="col col-6">
<div className="card mb-2">
<div className="card-header">
<h3>Service Types</h3>
</div>
<div className="card-body">
{localConfig.serviceTypes?.map((type, index) => (
<div key={index} className="form-group" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
<input
type="text"
className="form-control"
value={type}
onChange={(e) => handleUpdateItem('serviceTypes', index, e.target.value)}
style={{ flex: 1 }}
/>
<button
className="btn btn-red"
onClick={() => handleRemoveItem('serviceTypes', index)}
>
<FaTrash />
</button>
</div>
))}
<button
className="btn btn-green"
onClick={() => handleAddItem('serviceTypes')}
style={{ width: '100%', marginTop: '8px' }}
>
<FaPlus /> Hinzufügen
</button>
</div>
</div>
</div>
</div>
{/* Priorities */}
<div className="card mb-2">
<div className="card-header">
<h3>Priorities</h3>
</div>
<div className="card-body">
{localConfig.priorities?.map((priority, index) => (
<div key={index} className="form-group" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
<input
type="number"
className="form-control"
value={priority.value}
onChange={(e) => handleUpdateItem('priorities', index, { ...priority, value: parseInt(e.target.value) })}
style={{ width: '100px' }}
placeholder="Value"
/>
<input
type="text"
className="form-control"
value={priority.label}
onChange={(e) => handleUpdateItem('priorities', index, { ...priority, label: e.target.value })}
style={{ flex: 1 }}
placeholder="Label"
/>
<button
className="btn btn-red"
onClick={() => handleRemoveItem('priorities', index)}
>
<FaTrash />
</button>
</div>
))}
<button
className="btn btn-green"
onClick={() => handleAddItem('priorities')}
style={{ width: '100%', marginTop: '8px' }}
>
<FaPlus /> Hinzufügen
</button>
</div>
</div>
<div className="text-center mt-2">
<button
className="btn btn-dark"
onClick={handleSave}
disabled={saving}
style={{ minWidth: '200px' }}
>
{saving ? (
<>
<FaSpinner className="spinner" /> Speichere...
</>
) : (
<>
<FaFloppyDisk /> Konfiguration speichern
</>
)}
</button>
</div>
</>
)}
{adminSection === 'customers' && (
<div className="card mb-2">
<div className="card-header">
<h3>Kunden</h3>
</div>
<div className="card-body">
{customersLoading ? (
<div className="text-center p-2">
<FaSpinner className="spinner" /> Lade Kunden...
</div>
) : (
<>
<table className="table" style={{ marginBottom: '16px' }}>
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Location</th>
<th>Email</th>
<th>Phone</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
{customers.map((customer) => (
<tr key={customer.$id}>
{editingCustomer === customer.$id ? (
<>
<td>
<input
type="text"
className="form-control"
value={customerForm.code}
onChange={(e) => setCustomerForm(prev => ({ ...prev, code: e.target.value }))}
style={{ width: '100px' }}
/>
</td>
<td>
<input
type="text"
className="form-control"
value={customerForm.name}
onChange={(e) => setCustomerForm(prev => ({ ...prev, name: e.target.value }))}
/>
</td>
<td>
<input
type="text"
className="form-control"
value={customerForm.location}
onChange={(e) => setCustomerForm(prev => ({ ...prev, location: e.target.value }))}
/>
</td>
<td>
<input
type="email"
className="form-control"
value={customerForm.email}
onChange={(e) => setCustomerForm(prev => ({ ...prev, email: e.target.value }))}
/>
</td>
<td>
<input
type="text"
className="form-control"
value={customerForm.phone}
onChange={(e) => setCustomerForm(prev => ({ ...prev, phone: e.target.value }))}
/>
</td>
<td>
<button
className="btn btn-green"
onClick={async () => {
const result = await updateCustomer(customer.$id, customerForm)
if (result.success) {
setEditingCustomer(null)
setCustomerForm({ code: '', name: '', location: '', email: '', phone: '' })
}
}}
>
Speichern
</button>
<button
className="btn"
onClick={() => {
setEditingCustomer(null)
setCustomerForm({ code: '', name: '', location: '', email: '', phone: '' })
}}
style={{ marginLeft: '4px' }}
>
Abbrechen
</button>
</td>
</>
) : (
<>
<td>{customer.code || '-'}</td>
<td>{customer.name || '-'}</td>
<td>{customer.location || '-'}</td>
<td>{customer.email || '-'}</td>
<td>{customer.phone || '-'}</td>
<td>
<button
className="btn"
onClick={() => {
setEditingCustomer(customer.$id)
setCustomerForm({
code: customer.code || '',
name: customer.name || '',
location: customer.location || '',
email: customer.email || '',
phone: customer.phone || ''
})
}}
>
<FaEdit />
</button>
<button
className="btn btn-red"
onClick={async () => {
if (confirm(`Möchtest du ${customer.name || customer.code} wirklich löschen?`)) {
await deleteCustomer(customer.$id)
}
}}
style={{ marginLeft: '4px' }}
>
<FaTrash />
</button>
</td>
</>
)}
</tr>
))}
</tbody>
</table>
<div className="card" style={{ background: '#f5f5f5', padding: '16px' }}>
<h4 style={{ marginTop: 0 }}>Neuen Kunden hinzufügen</h4>
<div className="row">
<div className="col col-3">
<div className="form-group">
<label className="form-label">Code</label>
<input
type="text"
className="form-control"
value={customerForm.code}
onChange={(e) => setCustomerForm(prev => ({ ...prev, code: e.target.value }))}
placeholder="C001"
/>
</div>
</div>
<div className="col col-3">
<div className="form-group">
<label className="form-label">Name</label>
<input
type="text"
className="form-control"
value={customerForm.name}
onChange={(e) => setCustomerForm(prev => ({ ...prev, name: e.target.value }))}
placeholder="Kundenname"
required
/>
</div>
</div>
<div className="col col-3">
<div className="form-group">
<label className="form-label">Location</label>
<input
type="text"
className="form-control"
value={customerForm.location}
onChange={(e) => setCustomerForm(prev => ({ ...prev, location: e.target.value }))}
placeholder="Stadt"
/>
</div>
</div>
<div className="col col-3">
<div className="form-group">
<label className="form-label">Email</label>
<input
type="email"
className="form-control"
value={customerForm.email}
onChange={(e) => setCustomerForm(prev => ({ ...prev, email: e.target.value }))}
placeholder="email@example.com"
/>
</div>
</div>
</div>
<div className="row">
<div className="col col-3">
<div className="form-group">
<label className="form-label">Phone</label>
<input
type="text"
className="form-control"
value={customerForm.phone}
onChange={(e) => setCustomerForm(prev => ({ ...prev, phone: e.target.value }))}
placeholder="030-123456"
/>
</div>
</div>
<div className="col col-9">
<div className="form-group" style={{ marginTop: '24px' }}>
<button
className="btn btn-green"
onClick={async () => {
if (!customerForm.name) {
alert('Bitte gib mindestens einen Namen ein.')
return
}
const result = await createCustomer(customerForm)
if (result.success) {
setCustomerForm({ code: '', name: '', location: '', email: '', phone: '' })
} else {
alert('Fehler beim Erstellen: ' + (result.error || 'Unbekannter Fehler'))
}
}}
>
<FaPlus /> Kunden hinzufügen
</button>
</div>
</div>
</div>
</div>
</>
)}
</div>
</div>
)}
{adminSection === 'employees' && (
<div className="card mb-2">
<div className="card-header">
<h3>Mitarbeiter & Kürzel</h3>
</div>
<div className="card-body">
{employeesLoading ? (
<div className="text-center p-2">
<FaSpinner className="spinner" /> Lade Mitarbeiter...
</div>
) : (
<>
{employees.length === 0 ? (
<div style={{ padding: '20px', textAlign: 'center', background: '#f5f5f5', borderRadius: '4px' }}>
<p style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: 'bold' }}>
Noch keine Mitarbeiter in der Liste
</p>
<p style={{ margin: 0, fontSize: '14px', color: '#666' }}>
Sobald sich Benutzer einloggen, werden sie automatisch hier angezeigt.
</p>
</div>
) : (
<table className="table" style={{ marginBottom: '16px' }}>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Kürzel</th>
<th>User ID</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
{employees.map((employee) => (
<tr key={employee.$id}>
{editingEmployee === employee.$id ? (
<>
<td>{employee.displayName || '-'}</td>
<td>{employee.email || '-'}</td>
<td>
<input
type="text"
className="form-control"
value={employeeForm.shortcode}
onChange={(e) => setEmployeeForm(prev => ({ ...prev, shortcode: e.target.value.toUpperCase() }))}
placeholder="KNSO"
style={{ width: '100px' }}
maxLength={10}
autoFocus
/>
</td>
<td>
<small style={{ color: '#666' }}>{employee.userId.substring(0, 12)}...</small>
</td>
<td>
<button
className="btn btn-green"
onClick={async () => {
const result = await updateEmployee(employee.$id, {
shortcode: employeeForm.shortcode
})
if (result.success) {
setEditingEmployee(null)
setEmployeeForm({ userId: '', displayName: '', email: '', shortcode: '' })
} else {
alert('Fehler: ' + (result.error || 'Unbekannter Fehler'))
}
}}
>
Speichern
</button>
<button
className="btn"
onClick={() => {
setEditingEmployee(null)
setEmployeeForm({ userId: '', displayName: '', email: '', shortcode: '' })
}}
style={{ marginLeft: '4px' }}
>
Abbrechen
</button>
</td>
</>
) : (
<>
<td>{employee.displayName || '-'}</td>
<td>{employee.email || '-'}</td>
<td>
<strong style={{ color: employee.shortcode ? '#007bff' : '#999' }}>
{employee.shortcode || '(kein Kürzel)'}
</strong>
</td>
<td>
<small style={{ color: '#666' }}>{employee.userId.substring(0, 12)}...</small>
</td>
<td>
<button
className="btn btn-blue"
onClick={() => {
setEditingEmployee(employee.$id)
setEmployeeForm({
userId: employee.userId,
displayName: employee.displayName || '',
email: employee.email || '',
shortcode: employee.shortcode || ''
})
}}
title="Kürzel bearbeiten"
>
<FaEdit /> Kürzel
</button>
<button
className="btn btn-red"
onClick={async () => {
if (confirm(`Möchtest du ${employee.displayName} wirklich aus der Mitarbeiter-Liste entfernen?`)) {
await deleteEmployee(employee.$id)
}
}}
style={{ marginLeft: '4px' }}
title="Aus Mitarbeiter-Liste entfernen"
>
<FaTrash />
</button>
</td>
</>
)}
</tr>
))}
</tbody>
</table>
)}
</>
)}
</div>
</div>
)}
</div>
)
}