design update

This commit is contained in:
2025-12-30 01:27:00 +01:00
parent 3f8fce3c02
commit 5717612db5
51 changed files with 959 additions and 793 deletions

View File

@@ -1,16 +1,15 @@
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'
import LetterGlitch from '../components/LetterGlitch'
export default function LoginPage() {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [name, setName] = useState('')
const [error, setError] = useState('')
const [loading, setLoading] = useState(false)
const [isRegistering, setIsRegistering] = useState(false)
const { login, register } = useAuth()
const { login } = useAuth()
const navigate = useNavigate()
const handleSubmit = async (e) => {
@@ -19,9 +18,7 @@ export default function LoginPage() {
setLoading(true)
try {
const result = isRegistering
? await register(email, password, name || email.split('@')[0])
: await login(email, password)
const result = await login(email, password)
if (result.success) {
navigate('/tickets')
@@ -31,12 +28,6 @@ export default function LoginPage() {
if (errorMessage.includes('Invalid credentials') || errorMessage.includes('401')) {
errorMessage = 'Ungültige Email oder Passwort. Bitte überprüfe deine Eingaben.'
} else if (errorMessage.includes('User already exists')) {
errorMessage = 'Ein Benutzer mit dieser Email existiert bereits. Bitte logge dich ein.'
setIsRegistering(false)
} else if (errorMessage.includes('User with the same email already exists')) {
errorMessage = 'Diese Email ist bereits registriert. Bitte logge dich ein.'
setIsRegistering(false)
} else if (errorMessage.includes('Email/Password') || errorMessage.includes('auth')) {
errorMessage = 'Email/Password Authentifizierung ist möglicherweise nicht aktiviert. Bitte überprüfe deine Appwrite-Konfiguration.'
}
@@ -52,95 +43,100 @@ export default function LoginPage() {
return (
<div style={{
position: 'relative',
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: '#f1f1f1'
width: '100%',
overflow: 'hidden'
}}>
<div className="card" style={{ width: '400px' }}>
<div className="card-header text-center">
<h2>Webklar WOMS 2.0</h2>
</div>
<div className="card-body">
<form onSubmit={handleSubmit}>
{error && (
<div className="bg-red text-white p-1 mb-2" style={{ borderRadius: '4px' }}>
{error}
</div>
)}
{isRegistering && (
{/* LetterGlitch Hintergrund */}
<div style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 0
}}>
<LetterGlitch
glitchSpeed={50}
centerVignette={true}
outerVignette={false}
smooth={true}
/>
</div>
{/* Login-Formular */}
<div style={{
position: 'relative',
zIndex: 1,
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<div style={{
width: '400px',
boxShadow: '0 10px 40px rgba(0,0,0,0.5)',
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
background: 'transparent',
border: '1px solid rgba(255, 255, 255, 0.2)',
borderRadius: '8px',
marginBottom: '16px'
}}>
<div style={{
padding: '12px 16px',
background: 'transparent',
color: '#fff',
fontWeight: 'bold',
borderBottom: '1px solid rgba(255, 255, 255, 0.2)',
textAlign: 'center'
}}>
<h2>Webklar WOMS 2.0</h2>
</div>
<div style={{ padding: '16px', color: '#e2e8f0' }}>
<form onSubmit={handleSubmit}>
{error && (
<div className="bg-red text-white p-1 mb-2" style={{ borderRadius: '4px' }}>
{error}
</div>
)}
<div className="form-group">
<label className="form-label">Name (optional)</label>
<label className="form-label">Email</label>
<input
type="text"
type="email"
className="form-control"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Dein Name"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
placeholder="deine@email.com"
/>
</div>
)}
<div className="form-group">
<label className="form-label">Email</label>
<input
type="email"
className="form-control"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
placeholder="deine@email.com"
/>
</div>
<div className="form-group">
<label className="form-label">Password</label>
<input
type="password"
className="form-control"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
placeholder="••••••••"
minLength={8}
/>
</div>
<div className="form-group">
<label className="form-label">Password</label>
<input
type="password"
className="form-control"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
placeholder="••••••••"
minLength={8}
/>
</div>
<button
type="submit"
className="btn btn-green"
style={{ width: '100%', marginBottom: '10px' }}
disabled={loading}
>
{loading
? (isRegistering ? 'Registrierung läuft...' : 'Login läuft...')
: (isRegistering ? 'Registrieren' : 'Login')
}
</button>
<button
type="button"
className="btn"
style={{
width: '100%',
background: 'transparent',
border: '1px solid #ccc',
color: '#333'
}}
onClick={() => {
setIsRegistering(!isRegistering)
setError('')
}}
disabled={loading}
>
{isRegistering
? 'Bereits registriert? Hier einloggen'
: 'Noch kein Account? Hier registrieren'
}
</button>
</form>
<button
type="submit"
className="btn btn-green"
style={{ width: '100%' }}
disabled={loading}
>
{loading ? 'Login läuft...' : 'Login'}
</button>
</form>
</div>
</div>
</div>
</div>

View File

@@ -21,6 +21,7 @@ export default function TicketsPage() {
const [showCreateModal, setShowCreateModal] = useState(false)
const [showOverviewModal, setShowOverviewModal] = useState(false)
const [showAdvancedFilters, setShowAdvancedFilters] = useState(false)
const handleFilterChange = (newFilters) => {
setFilters({ ...newFilters, limit })
@@ -55,55 +56,73 @@ export default function TicketsPage() {
return (
<div className="main-content">
{/* Sticky Header Container */}
<div style={{
background: 'rgba(45, 55, 72, 0.95)',
borderRadius: '12px',
border: '1px solid rgba(16, 185, 129, 0.2)',
padding: '24px',
marginBottom: '24px',
textAlign: 'center'
}}>
<h2 style={{
color: 'var(--dark-text)',
marginBottom: '12px',
fontSize: '28px',
fontWeight: 'bold'
}}>
Active Tickets Overview
</h2>
<p style={{ color: '#a0aec0', marginBottom: '8px' }}>
Work Order loading limit is set to <span style={{
fontSize: '24px',
color: 'var(--green-primary)',
fontWeight: 'bold'
}}>{limit}</span>.
Reduce value to increase reload speed.
</p>
<p style={{ color: '#718096', fontSize: '12px' }}>
Last page reload: {format(new Date(), 'dd.MM.yyyy, HH:mm:ss')}
</p>
</div>
{/* Unified Control Panel - All in One */}
<div style={{
background: 'rgba(45, 55, 72, 0.95)',
borderRadius: '12px',
border: '1px solid rgba(16, 185, 129, 0.2)',
overflow: 'hidden',
position: 'sticky',
top: 0,
zIndex: 100,
marginBottom: '24px'
}}>
{/* Extended Filters + Quick Selection - TOP */}
<div style={{
padding: '20px',
borderBottom: '1px solid rgba(16, 185, 129, 0.2)'
{/* Compact Control Panel */}
<div style={{
background: 'rgba(26, 32, 44, 0.4)',
backdropFilter: 'blur(25px) saturate(180%)',
WebkitBackdropFilter: 'blur(25px) saturate(180%)',
borderRadius: '12px',
border: '1px solid rgba(16, 185, 129, 0.3)',
overflow: 'hidden',
padding: '16px',
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4)',
marginBottom: '16px'
}}>
{/* Main Filter Row */}
{/* Title Row */}
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: '16px',
flexWrap: 'wrap',
gap: '12px'
}}>
<h2 style={{
color: 'var(--dark-text)',
fontSize: '24px',
fontWeight: 'bold',
margin: 0
}}>
Tickets
</h2>
<div style={{ display: 'flex', gap: '8px' }}>
<button
className="btn btn-dark"
onClick={() => setShowCreateModal(true)}
style={{ whiteSpace: 'nowrap' }}
>
CREATE NEW TICKET
</button>
<button
className="btn btn-dark"
onClick={() => setShowOverviewModal(true)}
style={{ whiteSpace: 'nowrap' }}
>
QUICK OVERVIEW
</button>
<button
className="btn btn-green"
onClick={() => setShowAdvancedFilters(!showAdvancedFilters)}
style={{ whiteSpace: 'nowrap' }}
>
{showAdvancedFilters ? '▲ Hide Filters' : '▼ Show Filters'}
</button>
</div>
</div>
{/* Main Search Bar */}
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
gap: '12px',
alignItems: 'center',
marginBottom: '16px'
alignItems: 'center'
}}>
<input
type="text"
@@ -113,46 +132,6 @@ export default function TicketsPage() {
value={filters.woid || ''}
onChange={(e) => setFilters({ ...filters, woid: e.target.value })}
/>
<input
type="text"
placeholder="Created Date"
className="form-control"
style={{ margin: 0 }}
value={filters.createdDate || ''}
onChange={(e) => setFilters({ ...filters, createdDate: e.target.value })}
/>
<select
className="form-control"
style={{ margin: 0 }}
value={filters.type?.[0] || ''}
onChange={(e) => setFilters({ ...filters, type: e.target.value ? [e.target.value] : [] })}
>
<option value="">Type / Location</option>
<option>Home Office</option>
<option>Holidays</option>
<option>Trip</option>
<option>Supportrequest</option>
<option>Change Request</option>
<option>Maintenance</option>
<option>Project</option>
<option>Procurement</option>
<option>Emergency Call</option>
</select>
<select
className="form-control"
style={{ margin: 0 }}
value={filters.system?.[0] || ''}
onChange={(e) => setFilters({ ...filters, system: e.target.value ? [e.target.value] : [] })}
>
<option value="">System</option>
<option>Client</option>
<option>Server</option>
<option>Network</option>
<option>EDI</option>
<option>TOS</option>
<option>Reports</option>
<option>n/a</option>
</select>
<input
type="text"
placeholder="Customer"
@@ -163,25 +142,12 @@ export default function TicketsPage() {
/>
<input
type="text"
placeholder="Topic / User"
placeholder="User"
className="form-control"
style={{ margin: 0 }}
value={filters.userTopic || ''}
onChange={(e) => setFilters({ ...filters, userTopic: e.target.value })}
/>
<select
className="form-control"
style={{ margin: 0 }}
value={filters.priority?.[0] ?? ''}
onChange={(e) => setFilters({ ...filters, priority: e.target.value ? [parseInt(e.target.value)] : [] })}
>
<option value="">Priority</option>
<option value="0">None</option>
<option value="1">Low</option>
<option value="2">Medium</option>
<option value="3">High</option>
<option value="4">Critical</option>
</select>
<button
className="btn btn-green"
onClick={handleApplyFilters}
@@ -191,89 +157,144 @@ export default function TicketsPage() {
</button>
</div>
{/* Quick Selection Buttons */}
<div style={{
display: 'flex',
gap: '8px',
justifyContent: 'center',
alignItems: 'center',
flexWrap: 'wrap',
paddingTop: '16px',
borderTop: '1px solid rgba(16, 185, 129, 0.1)'
}}>
<button
className="btn btn-green"
onClick={() => { setFilters(prev => ({ ...prev, type: ['Procurement'] })); handleApplyFilters(); }}
>
Procurements
</button>
<button
className="btn btn-green"
onClick={() => { setFilters(prev => ({ ...prev, priority: [4] })); handleApplyFilters(); }}
>
Criticals
</button>
<button
className="btn btn-green"
onClick={() => { setFilters(prev => ({ ...prev, priority: [3] })); handleApplyFilters(); }}
>
Highs
</button>
{/* Advanced Filters - Collapsible */}
{showAdvancedFilters && (
<div style={{
width: '1px',
height: '32px',
background: 'rgba(16, 185, 129, 0.3)',
margin: '0 8px'
}}></div>
<button
className="btn btn-green"
onClick={() => { setLimit(10); setFilters(prev => ({ ...prev, limit: 10 })) }}
>
10
</button>
<button
className="btn btn-green"
onClick={() => { setLimit(25); setFilters(prev => ({ ...prev, limit: 25 })) }}
>
25
</button>
</div>
</div>
marginTop: '16px',
paddingTop: '16px',
borderTop: '1px solid rgba(16, 185, 129, 0.2)'
}}>
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
gap: '12px',
alignItems: 'center',
marginBottom: '16px'
}}>
<input
type="text"
placeholder="Created Date"
className="form-control"
style={{ margin: 0 }}
value={filters.createdDate || ''}
onChange={(e) => setFilters({ ...filters, createdDate: e.target.value })}
/>
<select
className="form-control"
style={{ margin: 0 }}
value={filters.type?.[0] || ''}
onChange={(e) => setFilters({ ...filters, type: e.target.value ? [e.target.value] : [] })}
>
<option value="">Type / Location</option>
<option>Home Office</option>
<option>Holidays</option>
<option>Trip</option>
<option>Supportrequest</option>
<option>Change Request</option>
<option>Maintenance</option>
<option>Project</option>
<option>Procurement</option>
<option>Emergency Call</option>
</select>
<select
className="form-control"
style={{ margin: 0 }}
value={filters.system?.[0] || ''}
onChange={(e) => setFilters({ ...filters, system: e.target.value ? [e.target.value] : [] })}
>
<option value="">System</option>
<option>Client</option>
<option>Server</option>
<option>Network</option>
<option>EDI</option>
<option>TOS</option>
<option>Reports</option>
<option>n/a</option>
</select>
<select
className="form-control"
style={{ margin: 0 }}
value={filters.priority?.[0] ?? ''}
onChange={(e) => setFilters({ ...filters, priority: e.target.value ? [parseInt(e.target.value)] : [] })}
>
<option value="">Priority</option>
<option value="0">None</option>
<option value="1">Low</option>
<option value="2">Medium</option>
<option value="3">High</option>
<option value="4">Critical</option>
</select>
</div>
{/* Slider + Action Buttons - BOTTOM */}
<div style={{
padding: '20px',
display: 'flex',
gap: '16px',
alignItems: 'center',
flexWrap: 'wrap'
}}>
<div style={{ flex: '1', minWidth: '200px' }}>
<input
type="range"
min="5"
max="50"
value={limit}
className="slider"
onChange={handleLimitChange}
/>
</div>
<div style={{ display: 'flex', gap: '8px', flexWrap: 'nowrap' }}>
<button
className="btn btn-dark"
onClick={() => setShowCreateModal(true)}
style={{ whiteSpace: 'nowrap' }}
>
CREATE NEW TICKET
</button>
<button
className="btn btn-dark"
onClick={() => setShowOverviewModal(true)}
style={{ whiteSpace: 'nowrap' }}
>
QUICK OVERVIEW
</button>
</div>
{/* Quick Selection Buttons */}
<div style={{
display: 'flex',
gap: '8px',
justifyContent: 'center',
alignItems: 'center',
flexWrap: 'wrap',
marginBottom: '16px'
}}>
<button
className="btn btn-green"
onClick={() => { setFilters(prev => ({ ...prev, type: ['Procurement'] })); handleApplyFilters(); }}
>
Procurements
</button>
<button
className="btn btn-green"
onClick={() => { setFilters(prev => ({ ...prev, priority: [4] })); handleApplyFilters(); }}
>
Criticals
</button>
<button
className="btn btn-green"
onClick={() => { setFilters(prev => ({ ...prev, priority: [3] })); handleApplyFilters(); }}
>
Highs
</button>
<div style={{
width: '1px',
height: '32px',
background: 'rgba(16, 185, 129, 0.3)',
margin: '0 8px'
}}></div>
<button
className="btn btn-green"
onClick={() => { setLimit(10); setFilters(prev => ({ ...prev, limit: 10 })) }}
>
10
</button>
<button
className="btn btn-green"
onClick={() => { setLimit(25); setFilters(prev => ({ ...prev, limit: 25 })) }}
>
25
</button>
</div>
{/* Slider */}
<div style={{
display: 'flex',
gap: '16px',
alignItems: 'center'
}}>
<span style={{ color: 'var(--dark-text)', minWidth: '120px' }}>
Load Limit: {limit}
</span>
<div style={{ flex: '1' }}>
<input
type="range"
min="5"
max="50"
value={limit}
className="slider"
onChange={handleLimitChange}
/>
</div>
</div>
</div>
)}
</div>
</div>