- {EDITORS.map(editor => (
+ onChange('')}
+ >
+ (Unassigned)
+
+ {employees.map(employee => (
onChange(editor.id)}
+ onClick={() => onChange(employee.userId)}
>
- {editor.name}
+ {employee.displayName}{employee.shortcode ? ` (${employee.shortcode})` : ''}
))}
diff --git a/src/components/ModernSidebar.css b/src/components/ModernSidebar.css
new file mode 100644
index 0000000..62a64be
--- /dev/null
+++ b/src/components/ModernSidebar.css
@@ -0,0 +1,138 @@
+/* Modern Sidebar Styles */
+
+.modern-sidebar-desktop {
+ height: 100vh;
+ padding: 1rem;
+ display: none;
+ flex-direction: column;
+ background: var(--sidebar-bg, #f5f5f5);
+ border-right: 1px solid var(--border-color, #e0e0e0);
+ flex-shrink: 0;
+ overflow: hidden;
+ transition: width 0.3s ease;
+}
+
+@media (min-width: 768px) {
+ .modern-sidebar-desktop {
+ display: flex;
+ }
+}
+
+/* Mobile Sidebar */
+.modern-sidebar-mobile-header {
+ height: 60px;
+ padding: 1rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background: var(--sidebar-bg, #f5f5f5);
+ border-bottom: 1px solid var(--border-color, #e0e0e0);
+ width: 100%;
+}
+
+@media (min-width: 768px) {
+ .modern-sidebar-mobile-header {
+ display: none;
+ }
+}
+
+.modern-sidebar-mobile-toggle {
+ display: flex;
+ justify-content: flex-end;
+ width: 100%;
+ cursor: pointer;
+ color: var(--text-color, #333);
+}
+
+.modern-sidebar-mobile-toggle svg {
+ width: 24px;
+ height: 24px;
+}
+
+.modern-sidebar-mobile-menu {
+ position: fixed;
+ height: 100vh;
+ width: 100%;
+ inset: 0;
+ background: var(--sidebar-bg, #fff);
+ padding: 2.5rem;
+ z-index: 100;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.modern-sidebar-mobile-close {
+ position: absolute;
+ right: 2.5rem;
+ top: 2.5rem;
+ z-index: 50;
+ cursor: pointer;
+ color: var(--text-color, #333);
+}
+
+.modern-sidebar-mobile-close svg {
+ width: 24px;
+ height: 24px;
+}
+
+/* Sidebar Link */
+.modern-sidebar-link {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 0.5rem;
+ padding: 0.75rem 0.5rem;
+ color: var(--text-color, #333);
+ text-decoration: none;
+ border-radius: 6px;
+ transition: all 0.15s ease;
+}
+
+.modern-sidebar-link:hover {
+ background: var(--hover-bg, rgba(0, 0, 0, 0.05));
+ transform: translateX(2px);
+}
+
+.modern-sidebar-link-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+}
+
+.modern-sidebar-link-icon svg {
+ width: 20px;
+ height: 20px;
+}
+
+.modern-sidebar-link-label {
+ font-size: 0.875rem;
+ white-space: pre;
+ margin: 0;
+ padding: 0;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+ .modern-sidebar-desktop,
+ .modern-sidebar-mobile-header,
+ .modern-sidebar-mobile-menu {
+ background: var(--dark-sidebar-bg, #1a1a1a);
+ border-color: var(--dark-border-color, #333);
+ }
+
+ .modern-sidebar-link {
+ color: var(--dark-text-color, #e0e0e0);
+ }
+
+ .modern-sidebar-link:hover {
+ background: var(--dark-hover-bg, rgba(255, 255, 255, 0.1));
+ }
+
+ .modern-sidebar-mobile-toggle,
+ .modern-sidebar-mobile-close {
+ color: var(--dark-text-color, #e0e0e0);
+ }
+}
+
diff --git a/src/components/ModernSidebar.jsx b/src/components/ModernSidebar.jsx
new file mode 100644
index 0000000..7317360
--- /dev/null
+++ b/src/components/ModernSidebar.jsx
@@ -0,0 +1,116 @@
+import { useState, createContext, useContext } from 'react'
+import { motion, AnimatePresence } from 'motion/react'
+import { IconMenu2, IconX } from '@tabler/icons-react'
+import { cn } from '../lib/utils'
+import './ModernSidebar.css'
+
+const SidebarContext = createContext(undefined)
+
+export const useSidebar = () => {
+ const context = useContext(SidebarContext)
+ if (!context) {
+ throw new Error('useSidebar must be used within a SidebarProvider')
+ }
+ return context
+}
+
+export const SidebarProvider = ({ children, open: openProp, setOpen: setOpenProp, animate = true }) => {
+ const [openState, setOpenState] = useState(false)
+ const open = openProp !== undefined ? openProp : openState
+ const setOpen = setOpenProp !== undefined ? setOpenProp : setOpenState
+
+ return (
+
+ {children}
+
+ )
+}
+
+export const Sidebar = ({ children, open, setOpen, animate }) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export const SidebarBody = ({ className, children, ...props }) => {
+ return (
+ <>
+
{children}
+
{children}
+
+ )
+}
+
+export const DesktopSidebar = ({ className, children, ...props }) => {
+ const { open, setOpen, animate } = useSidebar()
+
+ return (
+
setOpen(true)}
+ onMouseLeave={() => setOpen(false)}
+ {...props}
+ >
+ {children}
+
+ )
+}
+
+export const MobileSidebar = ({ className, children }) => {
+ const { open, setOpen } = useSidebar()
+
+ return (
+ <>
+
+
+ setOpen(!open)} />
+
+
+ {open && (
+
+ setOpen(!open)}>
+
+
+ {children}
+
+ )}
+
+
+
+ )
+}
+
+export const SidebarLink = ({ link, className, ...props }) => {
+ const { open, animate } = useSidebar()
+
+ return (
+
+ {link.icon}
+
+ {link.label}
+
+
+ )
+}
+
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 67bc83b..582c72e 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,49 +1,174 @@
+import { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'
-import { FaUser } from 'react-icons/fa'
+import { motion } from 'motion/react'
+import {
+ IconTicket,
+ IconDeviceDesktop,
+ IconChartBar,
+ IconCalendar,
+ IconFolders,
+ IconFileText,
+ IconBook,
+ IconSettings,
+ IconLogout
+} from '@tabler/icons-react'
+import { Sidebar, SidebarBody, SidebarLink } from './ModernSidebar'
export default function Navbar() {
- const { user, logout } = useAuth()
+ const { user, logout, isAdmin } = useAuth()
const navigate = useNavigate()
+ const [open, setOpen] = useState(false)
const handleLogout = async () => {
await logout()
navigate('/login')
}
- return (
-
+ // Admin link nur wenn isAdmin
+ if (isAdmin) {
+ links.push({
+ label: 'Admin',
+ href: '/admin',
+ icon:
,
+ })
+ }
+
+ return (
+
+
+
+
+
+ {links.map((link, idx) => (
+
+ ))}
+
+
+ {user ? (
+ <>
+
+ {(user.name || user.email).charAt(0).toUpperCase()}
+
+ ,
+ }}
+ />
+
+
+ ) : (
+ ,
+ }}
+ />
+ )}
+
+
+
+ )
+}
+
+const Logo = () => {
+ return (
+ setShowCreateWorksheet(false)}
+ workorder={ticket}
+ onCreate={handleCreateWorksheet}
+ />
|
diff --git a/src/components/WorksheetList.jsx b/src/components/WorksheetList.jsx
new file mode 100644
index 0000000..de1d875
--- /dev/null
+++ b/src/components/WorksheetList.jsx
@@ -0,0 +1,189 @@
+import { FaClock, FaUser, FaExchangeAlt, FaComment } from 'react-icons/fa'
+
+export default function WorksheetList({ worksheets, totalTime, loading }) {
+ if (loading) {
+ return (
+
+ )
+ }
+
+ if (!worksheets || worksheets.length === 0) {
+ return (
+
+
+ Noch keine Worksheets vorhanden. Erstelle das erste Worksheet für dieses Ticket.
+
+ )
+ }
+
+ const formatTime = (minutes) => {
+ if (!minutes || minutes === 0) return '-'
+ const hours = Math.floor(minutes / 60)
+ const mins = minutes % 60
+ return hours > 0 ? `${hours}h ${mins}min` : `${mins}min`
+ }
+
+ const formatDateTime = (date, time) => {
+ if (!time) return date
+ const hours = time.substring(0, 2)
+ const mins = time.substring(2, 4)
+ return `${date} ${hours}:${mins}`
+ }
+
+ return (
+
+ {/* Gesamtzeit-Header */}
+
+
+
+
+
+ Gesamtarbeitszeit
+ {formatTime(totalTime)}
+
+
+
+
+ {worksheets.filter(ws => !ws.isComment).length} Worksheet(s)
+
+
+
+
+
+ {/* Worksheet-Einträge */}
+
+ {worksheets.map((ws, index) => (
+
+
{
+ e.currentTarget.style.transform = 'translateY(-2px)'
+ e.currentTarget.style.boxShadow = '0 8px 16px rgba(0,0,0,0.1)'
+ }} onMouseLeave={(e) => {
+ e.currentTarget.style.transform = 'translateY(0)'
+ e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)'
+ }}>
+
+
+ WSID {ws.wsid}
+ {ws.isComment && (
+
+ Kommentar
+
+ )}
+
+
+ {formatDateTime(ws.startDate, ws.startTime)}
+
+
+
+
+ {/* Mitarbeiter & Zeit */}
+
+
+
+
+ {ws.employeeName}
+ {ws.employeeShort && (
+ {ws.employeeShort}
+ )}
+
+
+
+ {!ws.isComment && (
+
+
+ {formatTime(ws.totalTime)}
+
+ )}
+
+
+
+ {/* Service Type */}
+
+ {ws.serviceType}
+
+
+ {/* Status-Änderung */}
+ {ws.oldStatus !== ws.newStatus && (
+
+
+ Status:{' '}
+ {ws.oldStatus}
+ →
+ {ws.newStatus}
+
+ )}
+
+ {/* Response Level-Änderung */}
+ {ws.oldResponseLevel && ws.newResponseLevel && ws.oldResponseLevel !== ws.newResponseLevel && (
+
+ Response Level:{' '}
+ {ws.oldResponseLevel}
+ →
+ {ws.newResponseLevel}
+
+ )}
+
+ {/* Details */}
+
+
+ {ws.details}
+
+
+
+
+
+ ))}
+
+
+
+
+
+ {/* Gesamtübersicht */}
+
+
+
+
+
+ Gesamtübersicht
+
+
+
+ Worksheets:
+ {worksheets.length}
+
+
+ Arbeitszeit:
+ {formatTime(totalMinutes)}
+
+
+ Kommentare:
+ {worksheets.filter(ws => ws.isComment).length}
+
+
+ Ø pro Worksheet:
+
+ {formatTime(Math.round(totalMinutes / (worksheets.filter(ws => !ws.isComment).length || 1)))}
+
+
+
+
+
+
+
+ {/* Nach Mitarbeiter */}
+
+
+
+
+
+ Nach Mitarbeiter
+
+
+ {Object.values(byEmployee).map((emp, idx) => (
+
+
+
+ {emp.name}
+ {emp.short && (
+ {emp.short}
+ )}
+
+
+
{formatTime(emp.time)}
+
{emp.count} WS
+
+
+
+ ))}
+
+
+
+
+
+ {/* Service Type Verteilung */}
+
+
+
+
+
+ Service Types
+
+
+ {Object.entries(byServiceType).map(([type, count], idx) => (
+
+ {type}
+ {count}
+
+ ))}
+
+
+
+
+
+
+ {/* Status-Historie */}
+ {statusHistory.length > 0 && (
+
+
+
+
+ Status-Historie
+
+
+
+
+
+ | Datum |
+ Zeit |
+ Von |
+ |
+ Nach |
+ Mitarbeiter |
+
+
+
+ {statusHistory.reverse().map((change, idx) => (
+
+ | {change.date} |
+ {formatTimeShort(change.time)} |
+
+ {change.from}
+ |
+ → |
+
+ {change.to}
+ |
+ {change.employee} |
+
+ ))}
+
+
+
+
+
+ )}
+
+
+
+
Zugriff verweigert
+
+
+
Du hast keine Berechtigung, auf diese Seite zuzugreifen.
+
+
+
+
+
Lade Konfiguration...
+
+
+ Admin Panel - Dropdown Konfiguration
+
+
+ {error && (
+
+ Fehler: {error}
+
+ )}
+
+ {saveMessage && (
+
+ {saveMessage}
+
+ )}
+
+
+ {/* Ticket Types */}
+
+
+
+
Work Order Types
+
+
+ {localConfig.ticketTypes?.map((type, index) => (
+
+ handleUpdateItem('ticketTypes', index, e.target.value)}
+ style={{ flex: 1 }}
+ />
+
+
+ ))}
+
+
+
+
+
+ {/* Systems */}
+
+
+
+
Affected Systems
+
+
+ {localConfig.systems?.map((system, index) => (
+
+ handleUpdateItem('systems', index, e.target.value)}
+ style={{ flex: 1 }}
+ />
+
+
+ ))}
+
+
+
+
+
+
+
+ {/* Response Levels */}
+
+
+
+
Response Levels
+
+
+ {localConfig.responseLevels?.map((level, index) => (
+
+ handleUpdateItem('responseLevels', index, e.target.value)}
+ style={{ flex: 1 }}
+ />
+
+
+ ))}
+
+
+
+
+
+ {/* Service Types */}
+
+
+
+
Service Types
+
+
+ {localConfig.serviceTypes?.map((type, index) => (
+
+ handleUpdateItem('serviceTypes', index, e.target.value)}
+ style={{ flex: 1 }}
+ />
+
+
+ ))}
+
+
+
+
+
+
+ {/* Priorities */}
+
+
+ {/* Customers */}
+
+
+
Customers
+
+
+ {customersLoading ? (
+
+ Lade Kunden...
+
+ ) : (
+ <>
+
+
+
+ | Code |
+ Name |
+ Location |
+ Email |
+ Phone |
+ Aktionen |
+
+
+
+ {customers.map((customer) => (
+
+ {editingCustomer === customer.$id ? (
+ <>
+ |
+ setCustomerForm(prev => ({ ...prev, code: e.target.value }))}
+ style={{ width: '100px' }}
+ />
+ |
+
+ setCustomerForm(prev => ({ ...prev, name: e.target.value }))}
+ />
+ |
+
+ setCustomerForm(prev => ({ ...prev, location: e.target.value }))}
+ />
+ |
+
+ setCustomerForm(prev => ({ ...prev, email: e.target.value }))}
+ />
+ |
+
+ setCustomerForm(prev => ({ ...prev, phone: e.target.value }))}
+ />
+ |
+
+
+
+ |
+
+ ) : (
+ <>
+ {customer.code || '-'} |
+ {customer.name || '-'} |
+ {customer.location || '-'} |
+ {customer.email || '-'} |
+ {customer.phone || '-'} |
+
+
+
+ |
+
+ )}
+
+ ))}
+
+
+
+
+
Neuen Kunden hinzufügen
+
+
+
+
+ setCustomerForm(prev => ({ ...prev, code: e.target.value }))}
+ placeholder="C001"
+ />
+
+
+
+
+
+ setCustomerForm(prev => ({ ...prev, name: e.target.value }))}
+ placeholder="Kundenname"
+ required
+ />
+
+
+
+
+
+ setCustomerForm(prev => ({ ...prev, location: e.target.value }))}
+ placeholder="Stadt"
+ />
+
+
+
+
+
+ setCustomerForm(prev => ({ ...prev, email: e.target.value }))}
+ placeholder="email@example.com"
+ />
+
+
+
+
+
+
+
+ setCustomerForm(prev => ({ ...prev, phone: e.target.value }))}
+ placeholder="030-123456"
+ />
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ {/* Employees */}
+
+
+
Mitarbeiter & Kürzel
+
+
+ {employeesLoading ? (
+
+ Lade Mitarbeiter...
+
+ ) : (
+ <>
+ {employees.length === 0 ? (
+
+
+ Noch keine Mitarbeiter in der Liste
+
+
+ Sobald sich Benutzer einloggen, werden sie automatisch hier angezeigt.
+
+
+ ) : (
+
+
+
+ | Name |
+ Email |
+ Kürzel |
+ User ID |
+ Aktionen |
+
+
+
+ {employees.map((employee) => (
+
+ {editingEmployee === employee.$id ? (
+ <>
+ | {employee.displayName || '-'} |
+ {employee.email || '-'} |
+
+ setEmployeeForm(prev => ({ ...prev, shortcode: e.target.value.toUpperCase() }))}
+ placeholder="KNSO"
+ style={{ width: '100px' }}
+ maxLength={10}
+ autoFocus
+ />
+ |
+
+ {employee.userId.substring(0, 12)}...
+ |
+
+
+
+ |
+
+ ) : (
+ <>
+ {employee.displayName || '-'} |
+ {employee.email || '-'} |
+
+
+ {employee.shortcode || '(kein Kürzel)'}
+
+ |
+
+ {employee.userId.substring(0, 12)}...
+ |
+
+
+
+ |
+
+ )}
+
+ ))}
+
+
+ )}
+
+ )}
+
+
+
+
+
+
+
-
NetWEB Systems WOMS 2.0
+ Webklar WOMS 2.0
)}
+ {isRegistering && (
+
+
+ setName(e.target.value)}
+ placeholder="Dein Name"
+ />
+
+ )}
+
setEmail(e.target.value)}
required
+ placeholder="deine@email.com"
/>
@@ -66,16 +103,42 @@ export default function LoginPage() {
value={password}
onChange={(e) => setPassword(e.target.value)}
required
+ placeholder="••••••••"
+ minLength={8}
/>
+
+
diff --git a/src/pages/TicketsPage.jsx b/src/pages/TicketsPage.jsx
index a3a860b..6ee250f 100644
--- a/src/pages/TicketsPage.jsx
+++ b/src/pages/TicketsPage.jsx
@@ -2,8 +2,8 @@ import { useState } from 'react'
import { format } from 'date-fns'
import { FaAngleDown, FaSpinner } from 'react-icons/fa6'
import { useWorkorders } from '../hooks/useWorkorders'
+import { useCustomers } from '../hooks/useCustomers'
import TicketRow from '../components/TicketRow'
-import TicketFilters from '../components/TicketFilters'
import CreateTicketModal from '../components/CreateTicketModal'
import QuickOverviewModal from '../components/QuickOverviewModal'
@@ -17,6 +17,7 @@ export default function TicketsPage() {
})
const { workorders, loading, error, refresh, updateWorkorder, createWorkorder } = useWorkorders(filters)
+ const { customers } = useCustomers()
const [showCreateModal, setShowCreateModal] = useState(false)
const [showOverviewModal, setShowOverviewModal] = useState(false)
@@ -54,104 +55,230 @@ export default function TicketsPage() {
return (
-
- Active Tickets Overview
-
+
+
+ Active Tickets Overview
+
+
+ Work Order loading limit is set to {limit}.
+ Reduce value to increase reload speed.
+
+
+ Last page reload: {format(new Date(), 'dd.MM.yyyy, HH:mm:ss')}
+
+
-
- Work Order loading limit is set to {limit}.
- Reduce value to increase reload speed.
-
-
- Last page reload: {format(new Date(), 'dd.MM.yyyy, HH:mm:ss')}
-
+ {/* Unified Control Panel - All in One */}
+
+ {/* Extended Filters + Quick Selection - TOP */}
+
+ {/* Main Filter Row */}
+
+ setFilters({ ...filters, woid: e.target.value })}
+ />
+ setFilters({ ...filters, createdDate: e.target.value })}
+ />
+
+
+ setFilters({ ...filters, customer: e.target.value })}
+ />
+ setFilters({ ...filters, userTopic: e.target.value })}
+ />
+
+
+
-
+ {/* Quick Selection Buttons */}
+
+
+
+
+
+
+
+
+
+
+ {/* Slider + Action Buttons - BOTTOM */}
+
+
+
+
+
+
+
+
+
+
{workorders.length > 0 && workorders.length >= limit && (
-
+
)}
-
- Summary: Listed a total of {workorders.length} Workorders.
-
EOL =)
-
+
+
+ Summary: Listed a total of {workorders.length} Workorders.
+
EOL =)
+
+