From 9b9b8d39a889fdfb0575f1d941afc0c676a807ac Mon Sep 17 00:00:00 2001 From: Kenso Grimm Date: Sun, 8 Mar 2026 09:20:39 +0100 Subject: [PATCH] 31 von 45 = ca. 69 % 31 punkter der todo liste abgeabeitet --- package-lock.json | 80 ++ package.json | 3 + src/App.css | 1072 +--------------------- src/components/AdminPanel.jsx | 279 +++--- src/components/AssetDetail.jsx | 377 +++++--- src/components/ColumnFilter.jsx | 65 +- src/components/CommentPopup.jsx | 46 +- src/components/Dashboard.jsx | 46 +- src/components/DefektForm.jsx | 200 ++-- src/components/DefektTable.jsx | 200 ++-- src/components/DefektTrackApp.jsx | 66 +- src/components/FilialleiterDashboard.jsx | 191 ++-- src/components/FirmenleiterDashboard.jsx | 207 +++-- src/components/Header.jsx | 95 +- src/components/LagerstandortManager.jsx | 74 +- src/components/Login.jsx | 87 +- src/components/ProtectedRoute.jsx | 20 +- src/components/Toast.jsx | 10 - src/components/ui/badge.jsx | 49 + src/components/ui/card.jsx | 114 +++ src/components/ui/dialog.jsx | 155 ++++ src/components/ui/dropdown-menu.jsx | 252 +++++ src/components/ui/input.jsx | 23 + src/components/ui/label.jsx | 20 + src/components/ui/popover.jsx | 89 ++ src/components/ui/progress.jsx | 84 ++ src/components/ui/scroll-area.jsx | 46 + src/components/ui/select.jsx | 191 ++++ src/components/ui/separator.jsx | 22 + src/components/ui/skeleton.jsx | 15 + src/components/ui/sonner.jsx | 48 + src/components/ui/table.jsx | 123 +++ src/components/ui/textarea.jsx | 20 + src/components/ui/tooltip.jsx | 59 ++ src/hooks/useToast.js | 22 +- src/main.jsx | 2 + todos.md | 187 ++-- 37 files changed, 2757 insertions(+), 1882 deletions(-) delete mode 100644 src/components/Toast.jsx create mode 100644 src/components/ui/badge.jsx create mode 100644 src/components/ui/card.jsx create mode 100644 src/components/ui/dialog.jsx create mode 100644 src/components/ui/dropdown-menu.jsx create mode 100644 src/components/ui/input.jsx create mode 100644 src/components/ui/label.jsx create mode 100644 src/components/ui/popover.jsx create mode 100644 src/components/ui/progress.jsx create mode 100644 src/components/ui/scroll-area.jsx create mode 100644 src/components/ui/select.jsx create mode 100644 src/components/ui/separator.jsx create mode 100644 src/components/ui/skeleton.jsx create mode 100644 src/components/ui/sonner.jsx create mode 100644 src/components/ui/table.jsx create mode 100644 src/components/ui/textarea.jsx create mode 100644 src/components/ui/tooltip.jsx diff --git a/package-lock.json b/package-lock.json index 421ff4e..9a080eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,9 +16,12 @@ "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.577.0", + "next-themes": "^0.4.6", "react": "^19.0.0", "react-dom": "^19.0.0", + "react-router-dom": "^7.13.1", "shadcn": "^4.0.0", + "sonner": "^2.0.7", "tailwind-merge": "^3.5.0", "tailwindcss": "^4.0.14", "tw-animate-css": "^1.4.0" @@ -6163,6 +6166,16 @@ "node": ">= 0.6" } }, + "node_modules/next-themes": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz", + "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" + } + }, "node_modules/node-appwrite": { "version": "22.1.3", "resolved": "https://registry.npmjs.org/node-appwrite/-/node-appwrite-22.1.3.tgz", @@ -6915,6 +6928,57 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.13.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.1.tgz", + "integrity": "sha512-td+xP4X2/6BJvZoX6xw++A2DdEi++YypA69bJUV5oVvqf6/9/9nNlD70YO1e9d3MyamJEBQFEzk6mbfDYbqrSA==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.13.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.1.tgz", + "integrity": "sha512-UJnV3Rxc5TgUPJt2KJpo1Jpy0OKQr0AjgbZzBFjaPJcFOb2Y8jA5H3LT8HUJAiRLlWrEXWHbF1Z4SCZaQjWDHw==", + "license": "MIT", + "dependencies": { + "react-router": "7.13.1" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, + "node_modules/react-router/node_modules/cookie": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz", + "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==", + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, "node_modules/recast": { "version": "0.23.11", "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz", @@ -7278,6 +7342,12 @@ "url": "https://opencollective.com/express" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz", + "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==", + "license": "MIT" + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -7490,6 +7560,16 @@ "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==", "license": "MIT" }, + "node_modules/sonner": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz", + "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==", + "license": "MIT", + "peerDependencies": { + "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", + "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" + } + }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", diff --git a/package.json b/package.json index 83c6d04..f9fa307 100644 --- a/package.json +++ b/package.json @@ -19,9 +19,12 @@ "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.577.0", + "next-themes": "^0.4.6", "react": "^19.0.0", "react-dom": "^19.0.0", + "react-router-dom": "^7.13.1", "shadcn": "^4.0.0", + "sonner": "^2.0.7", "tailwind-merge": "^3.5.0", "tailwindcss": "^4.0.14", "tw-animate-css": "^1.4.0" diff --git a/src/App.css b/src/App.css index 136205c..d6a9481 100644 --- a/src/App.css +++ b/src/App.css @@ -5,1043 +5,49 @@ @custom-variant dark (&:is(.dark *)); -* { box-sizing: border-box; margin: 0; padding: 0; } -body { font-family: 'Segoe UI', 'Inter', Arial, sans-serif; background: #F4F6FA; color: #333; } - -/* HEADER */ -header { - background: #1A2B4A; - color: white; - padding: 0 24px; - display: flex; - align-items: center; - justify-content: space-between; - height: 60px; - box-shadow: 0 2px 8px rgba(0,0,0,0.2); -} -.logo { font-size: 22px; font-weight: 700; } -.logo span { color: #F57C00; } -.header-sub { font-size: 12px; color: #B0C4DE; margin-top: 2px; } - -/* DASHBOARD */ -.dashboard { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); - gap: 16px; - padding: 24px; - max-width: 1200px; - margin: 0 auto; -} -.stat-card { - background: white; - border-radius: 8px; - padding: 20px; - text-align: center; - box-shadow: 0 2px 8px rgba(0,0,0,0.07); - border-top: 4px solid #ccc; -} -.stat-card.red { border-color: #C62828; } -.stat-card.yellow { border-color: #F9A825; } -.stat-card.blue { border-color: #1565C0; } -.stat-card.gray { border-color: #607D8B; } -.stat-number { font-size: 40px; font-weight: 700; color: #1A2B4A; } -.stat-label { font-size: 12px; color: #888; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; } - -/* MAIN LAYOUT */ -.main { - max-width: 1200px; - margin: 0 auto; - padding: 0 24px 40px; - display: grid; - grid-template-columns: 340px 1fr; - gap: 24px; -} -@media(max-width: 900px) { .main { grid-template-columns: 1fr; } } - -/* FORM */ -.form-card { - background: white; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0,0,0,0.07); - overflow: hidden; -} -.form-header { - background: #1A2B4A; - color: white; - padding: 14px 20px; - font-weight: 600; - font-size: 15px; -} -.form-body { padding: 20px; } -.form-group { margin-bottom: 14px; } -.form-group label { - display: block; - font-size: 12px; - font-weight: 600; - color: #555; - margin-bottom: 5px; - text-transform: uppercase; - letter-spacing: 0.4px; -} -.form-group input, -.form-group select, -.form-group textarea { - width: 100%; - padding: 9px 12px; - border: 1px solid #ddd; - border-radius: 6px; - font-size: 13px; - color: #333; - transition: border 0.2s; - font-family: inherit; -} -.form-group input:focus, -.form-group select:focus, -.form-group textarea:focus { - outline: none; - border-color: #F57C00; -} -.form-group textarea { resize: vertical; min-height: 70px; } -.btn-submit { - width: 100%; - padding: 12px; - background: #F57C00; - color: white; - border: none; - border-radius: 6px; - font-size: 14px; - font-weight: 700; - cursor: pointer; - transition: background 0.2s; - margin-top: 6px; -} -.btn-submit:hover { background: #E65100; } - -/* TABLE AREA */ -.table-card { - background: white; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0,0,0,0.07); - overflow: hidden; -} - -/* TOOLBAR (replaces old header bar) */ -.table-toolbar { - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 16px; - border-bottom: 1px solid #eee; - background: #fafbfd; -} -.table-result-count { - font-size: 12px; - color: #888; - font-weight: 600; -} -.btn-print-small { - background: none; - border: 1px solid #ddd; - color: #555; - padding: 4px 12px; - border-radius: 5px; - font-size: 11px; - font-weight: 600; - cursor: pointer; - transition: all 0.2s; -} -.btn-print-small:hover { background: #F4F6FA; border-color: #bbb; } - -table { width: 100%; border-collapse: collapse; font-size: 13px; } -th { - background: #F4F6FA; - padding: 0; - text-align: left; - font-size: 11px; - color: #888; - text-transform: uppercase; - letter-spacing: 0.5px; - border-bottom: 2px solid #eee; -} - -/* COLUMN FILTER HEADERS */ -.col-filter-th { - position: relative; - padding: 0 !important; -} -.col-filter-btn { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 1px; - width: 100%; - padding: 8px 12px; - background: none; - border: none; - cursor: pointer; - font-size: 11px; - color: #888; - text-transform: uppercase; - letter-spacing: 0.5px; - font-weight: 600; - font-family: inherit; - text-align: left; - transition: background 0.15s; -} -.col-filter-btn:hover { background: #EDF0F5; } -.col-filter-btn.active { background: #E3EDFB; color: #1565C0; } -.col-filter-btn.has-filter { color: #F57C00; } -.col-filter-label { - display: flex; - align-items: center; - gap: 4px; -} -.col-filter-summary { - font-size: 9px; - color: #F57C00; - text-transform: none; - letter-spacing: 0; - font-weight: 700; - max-width: 100px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.col-filter-arrow { - font-size: 8px; - margin-left: 2px; - transition: transform 0.2s; - display: inline-block; -} -.col-filter-arrow.open { transform: rotate(180deg); } - -/* COLUMN FILTER POPUP */ -.col-filter-popup { - position: absolute; - top: 100%; - left: 0; - z-index: 100; - background: white; - border: 1px solid #ddd; - border-radius: 8px; - box-shadow: 0 4px 16px rgba(0,0,0,0.12); - min-width: 180px; - padding: 8px; - text-transform: none; - letter-spacing: 0; -} -.col-filter-input { - width: 100%; - padding: 8px 10px; - border: 1px solid #ddd; - border-radius: 6px; - font-size: 13px; - color: #333; - font-family: inherit; - outline: none; -} -.col-filter-input:focus { border-color: #F57C00; } - -.col-filter-options { - display: flex; - flex-direction: column; - gap: 2px; -} -.col-filter-option { - display: block; - width: 100%; - padding: 7px 10px; - background: none; - border: none; - border-radius: 5px; - font-size: 13px; - color: #333; - cursor: pointer; - text-align: left; - font-family: inherit; - transition: background 0.1s; -} -.col-filter-option:hover { background: #F4F6FA; } -.col-filter-option.selected { background: #E3F2FD; color: #1565C0; font-weight: 600; } -td { padding: 11px 12px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; } -tr:hover td { background: #fafbfd; } -tr.overdue td { background: #FFF3E0; } -tr.overdue td:first-child { border-left: 3px solid #F57C00; } - -.badge { - display: inline-block; - padding: 3px 10px; - border-radius: 20px; - font-size: 11px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} -.badge-offen { background: #FFEBEE; color: #C62828; } -.badge-bearbeitung { background: #FFF9C4; color: #F57F17; } -.badge-entsorgt { background: #ECEFF1; color: #607D8B; } - -.prio-badge { - display: inline-block; - width: 8px; - height: 8px; - border-radius: 50%; - margin-right: 5px; -} -.prio-kritisch { background: #C62828; } -.prio-hoch { background: #F57C00; } -.prio-mittel { background: #F9A825; } -.prio-niedrig { background: #43A047; } - -.btn-action { - padding: 4px 10px; - border-radius: 4px; - font-size: 11px; - cursor: pointer; - border: none; - font-weight: 600; - margin: 0 2px; - transition: opacity 0.15s; -} -.btn-action:hover { opacity: 0.8; } -.btn-status { background: #E3F2FD; color: #1565C0; } -.btn-delete { background: #FFEBEE; color: #C62828; } -.btn-info { background: #F3E5F5; color: #7B1FA2; } - -/* COMMENT POPUP */ -.comment-overlay { - position: fixed; - top: 0; left: 0; right: 0; bottom: 0; - background: rgba(0,0,0,0.5); - z-index: 999; -} -.comment-popup { - position: fixed; - top: 50%; left: 50%; - transform: translate(-50%, -50%); - background: white; - padding: 24px; - border-radius: 10px; - max-width: 500px; - width: 90%; - box-shadow: 0 8px 32px rgba(0,0,0,0.3); - z-index: 1000; -} -.comment-popup h3 { margin-bottom: 12px; color: #1A2B4A; font-size: 16px; } -.comment-popup .subject { - background: #FFF3E0; - color: #E65100; - padding: 8px 12px; - border-radius: 6px; - margin-bottom: 12px; - font-weight: 600; -} -.comment-popup .text { - background: #F5F5F5; - padding: 12px; - border-radius: 6px; - white-space: pre-wrap; - font-size: 13px; - max-height: 200px; - overflow-y: auto; -} -.comment-popup .close-btn { - margin-top: 16px; - width: 100%; - padding: 10px; - background: #1A2B4A; - color: white; - border: none; - border-radius: 6px; - cursor: pointer; - font-weight: 600; -} - -.empty-state { text-align: center; padding: 60px 20px; color: #aaa; } -.empty-state .emoji { font-size: 48px; margin-bottom: 12px; } -.empty-state p { font-size: 14px; } - -.age-warn { font-size: 10px; color: #F57C00; font-weight: 600; } - -/* TOAST */ -.toast { - position: fixed; - bottom: 24px; - right: 24px; - background: #2E7D32; - color: white; - padding: 12px 20px; - border-radius: 6px; - font-size: 13px; - font-weight: 600; - box-shadow: 0 4px 12px rgba(0,0,0,0.2); - transform: translateY(100px); - transition: transform 0.3s; - z-index: 999; -} -.toast.show { transform: translateY(0); } - -.header-buttons { display: flex; gap: 8px; align-items: center; } -.btn-header { - padding: 6px 12px; - border-radius: 5px; - font-size: 11px; - font-weight: 600; - cursor: pointer; - border: 1px solid rgba(255,255,255,0.3); - transition: all 0.2s; -} -.btn-export { background: #43A047; color: white; } -.btn-export:hover { background: #388E3C; } -.btn-import { background: #1976D2; color: white; } -.btn-import:hover { background: #1565C0; } -.btn-logout { background: #C62828; color: white; } -.btn-logout:hover { background: #B71C1C; } - -/* HEADER USER INFO */ -.header-user-info { - display: flex; - align-items: center; - gap: 6px; - font-size: 12px; - color: #B0C4DE; - margin-right: 8px; - white-space: nowrap; -} -.header-role-badge { - background: #F57C00; - color: white; - padding: 2px 8px; - border-radius: 10px; - font-size: 10px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.5px; -} -.header-location { - font-size: 11px; - color: #90CAF9; -} - -/* LOGIN PAGE */ -.login-page { - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; - background: #1A2B4A; - padding: 20px; -} -.login-card { - background: white; - border-radius: 12px; - box-shadow: 0 8px 32px rgba(0,0,0,0.3); - width: 100%; - max-width: 400px; - overflow: hidden; -} -.login-header { - background: #1A2B4A; - color: white; - padding: 32px 28px 24px; - text-align: center; -} -.login-header .logo { font-size: 28px; } -.login-subtitle { - font-size: 12px; - color: #B0C4DE; - margin-top: 6px; -} -.login-form { - padding: 28px; -} -.login-form .form-group { margin-bottom: 18px; } -.login-error { - background: #FFEBEE; - color: #C62828; - padding: 10px 14px; - border-radius: 6px; - font-size: 13px; - font-weight: 600; - margin-bottom: 14px; -} -.login-form .btn-submit { - font-size: 15px; - padding: 14px; -} -.login-form .btn-submit:disabled { - opacity: 0.6; - cursor: not-allowed; -} - -/* LAGERSTANDORT MANAGER */ -.lsm-add-row { - display: flex; - gap: 8px; - margin-bottom: 16px; -} -.lsm-input { - flex: 1; - padding: 8px 12px; - border: 1px solid #ddd; - border-radius: 6px; - font-size: 13px; - font-family: inherit; -} -.lsm-input:focus { outline: none; border-color: #F57C00; } -.lsm-btn-add { - padding: 8px 16px; - background: #F57C00; - color: white; - border: none; - border-radius: 6px; - font-size: 13px; - font-weight: 600; - cursor: pointer; -} -.lsm-btn-add:hover { background: #E65100; } -.lsm-btn-add:disabled { opacity: 0.5; cursor: not-allowed; } -.lsm-list { - max-height: 300px; - overflow-y: auto; - margin-bottom: 8px; -} -.lsm-item { - display: flex; - align-items: center; - justify-content: space-between; - padding: 8px 0; - border-bottom: 1px solid #f0f0f0; -} -.lsm-item.inactive .lsm-name { - color: #aaa; - text-decoration: line-through; -} -.lsm-name { font-size: 14px; font-weight: 500; } -.lsm-actions { display: flex; gap: 4px; } -.lsm-empty { color: #aaa; font-size: 13px; text-align: center; padding: 20px 0; } - -/* ASSET DETAIL PAGE */ -.asset-detail-page { - max-width: 900px; - margin: 0 auto; - padding: 24px; -} -.asset-detail-loading, -.asset-detail-not-found { - text-align: center; - padding: 60px 20px; - color: #666; -} -.asset-detail-not-found h2 { color: #333; margin-bottom: 12px; } -.asset-detail-not-found code { background: #f0f0f0; padding: 2px 6px; border-radius: 4px; font-size: 13px; } - -.btn-back { - background: none; - border: 1px solid #ccc; - border-radius: 6px; - padding: 8px 16px; - font-size: 13px; - font-weight: 600; - color: #555; - cursor: pointer; - transition: all 0.15s; -} -.btn-back:hover { border-color: #999; color: #222; } - -.asset-detail-header { - display: flex; - align-items: center; - gap: 16px; - margin-bottom: 24px; - flex-wrap: wrap; -} -.asset-detail-header h1 { - font-size: 22px; - font-weight: 700; - color: #1A2B4A; - flex: 1; -} -.asset-detail-meta { - display: flex; - align-items: center; - gap: 10px; -} -.prio-badge-lg { - display: inline-block; - padding: 4px 12px; - border-radius: 12px; - font-size: 12px; - font-weight: 700; - color: white; -} -.prio-badge-lg.prio-kritisch { background: #C62828; } -.prio-badge-lg.prio-hoch { background: #F57C00; } -.prio-badge-lg.prio-mittel { background: #F9A825; color: #333; } -.prio-badge-lg.prio-niedrig { background: #43A047; } - -.asset-detail-card { - background: white; - border-radius: 10px; - box-shadow: 0 2px 8px rgba(0,0,0,0.08); - padding: 24px; - margin-bottom: 24px; -} -.asset-detail-card-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20px; - padding-bottom: 12px; - border-bottom: 1px solid #eee; -} -.asset-detail-card-header h2 { - font-size: 16px; - font-weight: 700; - color: #1A2B4A; -} - -.btn-edit { - background: #1565C0; - color: white; - border: none; - border-radius: 6px; - padding: 8px 20px; - font-size: 13px; - font-weight: 600; - cursor: pointer; - transition: background 0.15s; -} -.btn-edit:hover { background: #0D47A1; } - -.edit-actions { display: flex; gap: 8px; } -.btn-save { - background: #43A047; - color: white; - border: none; - border-radius: 6px; - padding: 8px 20px; - font-size: 13px; - font-weight: 600; - cursor: pointer; -} -.btn-save:hover { background: #2E7D32; } -.btn-save:disabled { opacity: 0.6; cursor: not-allowed; } -.btn-cancel { - background: #eee; - color: #555; - border: none; - border-radius: 6px; - padding: 8px 20px; - font-size: 13px; - font-weight: 600; - cursor: pointer; -} -.btn-cancel:hover { background: #ddd; } - -.asset-props-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 0; -} -@media (max-width: 600px) { - .asset-props-grid { grid-template-columns: 1fr; } -} - -.prop-row { - display: flex; - flex-direction: column; - gap: 4px; - padding: 12px 0; - border-bottom: 1px solid #f5f5f5; - padding-right: 16px; -} -.prop-label { - font-size: 11px; - font-weight: 700; - text-transform: uppercase; - color: #888; - letter-spacing: 0.5px; -} -.prop-value { - font-size: 14px; - color: #333; - word-break: break-word; -} -.prop-value.mono { font-family: 'Courier New', monospace; } -.prop-input { - padding: 8px 12px; - border: 1px solid #ddd; - border-radius: 6px; - font-size: 13px; - font-family: inherit; - transition: border-color 0.15s; -} -.prop-input:focus { outline: none; border-color: #1565C0; box-shadow: 0 0 0 2px rgba(21,101,192,0.1); } -textarea.prop-input { resize: vertical; min-height: 60px; } - -.asset-info-footer { - display: flex; - flex-wrap: wrap; - gap: 16px; - margin-top: 20px; - padding-top: 16px; - border-top: 1px solid #eee; - font-size: 12px; - color: #888; -} -.asset-info-footer strong { color: #555; } - -/* AUDIT LOG CONSOLE */ -.asset-log-card { - background: white; - border-radius: 10px; - box-shadow: 0 2px 8px rgba(0,0,0,0.08); - padding: 24px; - margin-bottom: 40px; -} -.asset-log-card h2 { - font-size: 16px; - font-weight: 700; - color: #1A2B4A; - margin-bottom: 16px; -} -.log-console { - background: #1a1a2e; - border-radius: 8px; - padding: 16px; - max-height: 400px; - overflow-y: auto; - font-family: 'Courier New', 'Fira Code', monospace; - font-size: 12px; - line-height: 1.8; -} -.log-entry { - display: flex; - flex-wrap: wrap; - gap: 8px; - padding: 2px 0; -} -.log-time { - color: #666; - white-space: nowrap; -} -.log-user { - color: #64B5F6; - font-weight: 700; -} -.log-action { - font-weight: 700; - padding: 0 4px; - border-radius: 3px; -} -.log-details { - color: #ccc; -} -.log-system { color: #888; font-style: italic; } -.log-system .log-time { display: none; } - -.log-created .log-action { color: #81C784; background: rgba(129,199,132,0.15); } -.log-status .log-action { color: #FFB74D; background: rgba(255,183,77,0.15); } -.log-edit .log-action { color: #64B5F6; background: rgba(100,181,246,0.15); } - -/* BEARBEITEN-BUTTON in Tabelle */ -.btn-edit-link { - background: #1565C0; - color: white; - border: none; - border-radius: 4px; - padding: 4px 10px; - font-size: 11px; - font-weight: 600; - cursor: pointer; - transition: background 0.15s; -} -.btn-edit-link:hover { background: #0D47A1; } - -/* LOGO LOCATION */ -.logo-location { - color: #B0C4DE; - font-weight: 400; - font-size: 18px; -} - -/* HEADER NAV */ -.header-nav { - display: flex; - align-items: center; - gap: 6px; -} -.btn-nav { - background: rgba(255,255,255,0.12) !important; - border: 1px solid rgba(255,255,255,0.2) !important; -} -.btn-nav:hover { - background: rgba(255,255,255,0.22) !important; -} - -/* PANEL PAGES (Admin, Filialleiter, Firmenleiter) */ -.panel-page { - max-width: 1200px; - margin: 0 auto; - padding: 24px; -} -.panel-title-bar { - margin-bottom: 24px; -} -.panel-title-bar h1 { - font-size: 24px; - font-weight: 700; - color: #1A2B4A; -} -.panel-title-bar p { - font-size: 13px; - color: #888; - margin-top: 4px; -} - -.panel-stats { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); - gap: 16px; - margin-bottom: 24px; -} -.panel-stat-card { - background: white; - border-radius: 10px; - padding: 20px; - text-align: center; - box-shadow: 0 2px 8px rgba(0,0,0,0.07); -} -.panel-stat-card.small { padding: 14px; } -.panel-stat-number { - font-size: 36px; - font-weight: 700; - color: #1A2B4A; -} -.panel-stat-card.small .panel-stat-number { font-size: 28px; } -.panel-stat-label { - font-size: 12px; - color: #888; - margin-top: 4px; - text-transform: uppercase; - letter-spacing: 0.5px; -} -.panel-trend { - font-size: 12px; - margin-top: 8px; - font-weight: 600; -} -.trend-up { color: #C62828; } -.trend-down { color: #43A047; } -.trend-flat { color: #888; } - -.panel-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - gap: 24px; -} - -.panel-card { - background: white; - border-radius: 10px; - box-shadow: 0 2px 8px rgba(0,0,0,0.07); - padding: 24px; -} -.panel-card h2 { - font-size: 16px; - font-weight: 700; - color: #1A2B4A; - margin-bottom: 16px; - padding-bottom: 12px; - border-bottom: 1px solid #eee; -} -.panel-list { display: flex; flex-direction: column; gap: 0; } -.panel-list-item { - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 0; - border-bottom: 1px solid #f5f5f5; -} -.panel-list-item:last-child { border-bottom: none; } -.panel-list-item strong { font-size: 14px; color: #333; } -.panel-list-sub { font-size: 12px; color: #888; margin-left: 8px; } -.panel-empty { color: #aaa; font-size: 13px; text-align: center; padding: 20px 0; } - -.panel-badge { - font-size: 11px; - font-weight: 600; - padding: 3px 10px; - border-radius: 12px; -} -.panel-badge.active { background: #E8F5E9; color: #2E7D32; } -.panel-badge.inactive { background: #FAFAFA; color: #999; } - -.btn-panel-action { - background: #F57C00; - color: white; - border: none; - border-radius: 6px; - padding: 10px 20px; - font-size: 13px; - font-weight: 600; - cursor: pointer; - transition: background 0.15s; -} -.btn-panel-action:hover { background: #E65100; } - -/* FILIALLEITER COMPARISON */ -.panel-comparison { - background: white; - border-radius: 10px; - box-shadow: 0 2px 8px rgba(0,0,0,0.07); - padding: 24px; -} -.panel-comparison h2 { - font-size: 16px; - font-weight: 700; - color: #1A2B4A; - margin-bottom: 16px; -} -.comparison-bars { display: flex; flex-direction: column; gap: 12px; } -.comparison-row { display: flex; align-items: center; gap: 12px; } -.comparison-label { font-size: 13px; font-weight: 600; color: #555; width: 120px; flex-shrink: 0; } -.comparison-bar-bg { flex: 1; height: 24px; background: #f0f0f0; border-radius: 12px; overflow: hidden; } -.comparison-bar { height: 100%; border-radius: 12px; transition: width 0.5s; } -.comparison-bar.own { background: linear-gradient(90deg, #1565C0, #42A5F5); } -.comparison-bar.avg { background: linear-gradient(90deg, #888, #bbb); } -.comparison-value { font-size: 14px; font-weight: 700; color: #1A2B4A; width: 50px; text-align: right; } - -/* EMPLOYEE TABLE */ -.employee-table-wrap { overflow-x: auto; } -.employee-table { width: 100%; border-collapse: collapse; } -.employee-table th { - text-align: left; - font-size: 11px; - font-weight: 700; - color: #888; - text-transform: uppercase; - letter-spacing: 0.5px; - padding: 8px 12px; - border-bottom: 2px solid #eee; -} -.employee-table td { - padding: 10px 12px; - font-size: 13px; - border-bottom: 1px solid #f5f5f5; -} -.rate-bar-wrap { - display: flex; - align-items: center; - gap: 8px; -} -.rate-bar { - height: 8px; - background: linear-gradient(90deg, #43A047, #66BB6A); - border-radius: 4px; - min-width: 4px; - transition: width 0.3s; -} -.rate-text { font-size: 12px; font-weight: 700; color: #333; } - -/* FIRMENLEITER FILIALE CARDS */ -.filiale-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 16px; -} -.filiale-card { - background: #FAFAFA; - border: 1px solid #eee; - border-radius: 10px; - padding: 20px; - transition: box-shadow 0.15s; -} -.filiale-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); } -.filiale-card.inactive { opacity: 0.5; } -.filiale-card-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 8px; -} -.filiale-card-header h3 { font-size: 16px; font-weight: 700; color: #1A2B4A; } -.filiale-address { font-size: 12px; color: #888; margin-bottom: 12px; } -.filiale-stats-row { - display: flex; - gap: 16px; - padding-top: 12px; - border-top: 1px solid #eee; -} -.filiale-mini-stat { display: flex; flex-direction: column; align-items: center; } -.filiale-mini-num { font-size: 20px; font-weight: 700; color: #1A2B4A; } -.filiale-mini-label { font-size: 10px; color: #888; text-transform: uppercase; } - -/* ADMIN FILIALE MANAGEMENT */ -.filiale-add-form { - display: flex; - gap: 8px; - flex-wrap: wrap; - margin-bottom: 4px; -} -.filiale-input { - flex: 1; - min-width: 140px; - padding: 8px 12px; - border: 1px solid #ddd; - border-radius: 6px; - font-size: 13px; - font-family: inherit; -} -.filiale-input:focus { outline: none; border-color: #F57C00; } -.filiale-add-form .btn-panel-action { white-space: nowrap; } -.filiale-add-form .btn-panel-action:disabled { opacity: 0.5; cursor: not-allowed; } - -.filiale-admin-item { - padding: 12px 0; - border-bottom: 1px solid #f0f0f0; - display: flex; - flex-direction: column; - gap: 8px; -} -.filiale-admin-item:last-child { border-bottom: none; } -.filiale-admin-item.inactive { opacity: 0.55; } - -.filiale-admin-info { - display: flex; - align-items: center; - gap: 10px; - flex-wrap: wrap; -} -.filiale-admin-info strong { font-size: 14px; color: #333; } - -.filiale-admin-actions { - display: flex; - gap: 6px; - flex-wrap: wrap; -} - -.filiale-edit-row { - display: flex; - flex-direction: column; - gap: 8px; -} -.filiale-edit-btns { - display: flex; - gap: 6px; -} - -:root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.58 0.22 27); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.809 0.105 251.813); --chart-2: oklch(0.623 0.214 259.815); --chart-3: oklch(0.546 0.245 262.881); --chart-4: oklch(0.488 0.243 264.376); --chart-5: oklch(0.424 0.199 265.638); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } - -.dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.87 0.00 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.371 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.809 0.105 251.813); --chart-2: oklch(0.623 0.214 259.815); --chart-3: oklch(0.546 0.245 262.881); --chart-4: oklch(0.488 0.243 264.376); --chart-5: oklch(0.424 0.199 265.638); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } +:root { --background: oklch(0.98 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.35 0.05 255); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.65 0.17 55); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.58 0.22 27); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.35 0.05 255); --chart-1: oklch(0.809 0.105 251.813); --chart-2: oklch(0.623 0.214 259.815); --chart-3: oklch(0.546 0.245 262.881); --chart-4: oklch(0.488 0.243 264.376); --chart-5: oklch(0.424 0.199 265.638); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } @theme inline { --font-sans: 'Geist Variable', sans-serif; --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --color-foreground: var(--foreground); --color-background: var(--background); --radius-sm: calc(var(--radius) * 0.6); --radius-md: calc(var(--radius) * 0.8); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.4); --radius-2xl: calc(var(--radius) * 1.8); --radius-3xl: calc(var(--radius) * 2.2); --radius-4xl: calc(var(--radius) * 2.6); } @layer base { * { - @apply border-border outline-ring/50; } + @apply border-border outline-ring/50; + } body { - @apply bg-background text-foreground; } + @apply bg-background text-foreground; + } html { - @apply font-sans; } } \ No newline at end of file + @apply font-sans; + } + button:not(:disabled), + [role="button"]:not(:disabled) { + cursor: pointer; + } +} + +/* AUDIT LOG CONSOLE */ +.log-console { + background: #0f172a; + border-radius: 0.5rem; + padding: 1rem; + max-height: 400px; + overflow-y: auto; + font-family: 'Courier New', 'Fira Code', monospace; + font-size: 0.75rem; + line-height: 1.8; +} +.log-entry { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + padding: 2px 0; +} +.log-time { color: #64748b; white-space: nowrap; } +.log-user { color: #60a5fa; font-weight: 700; } +.log-action { font-weight: 700; padding: 0 4px; border-radius: 3px; } +.log-details { color: #cbd5e1; } +.log-system { color: #64748b; font-style: italic; } +.log-system .log-time { display: none; } +.log-created .log-action { color: #86efac; background: rgba(134,239,172,0.15); } +.log-status .log-action { color: #fbbf24; background: rgba(251,191,36,0.15); } +.log-edit .log-action { color: #60a5fa; background: rgba(96,165,250,0.15); } diff --git a/src/components/AdminPanel.jsx b/src/components/AdminPanel.jsx index 4aebb15..6f0bf9b 100644 --- a/src/components/AdminPanel.jsx +++ b/src/components/AdminPanel.jsx @@ -1,16 +1,20 @@ import { useState, useEffect, useCallback } from 'react'; -import { databases, DATABASE_ID } from '../lib/appwrite'; +import { databases, DATABASE_ID } from '@/lib/appwrite'; import { ID, Query } from 'appwrite'; import Header from './Header'; -import Toast from './Toast'; -import { useToast } from '../hooks/useToast'; -import { useAuth } from '../context/AuthContext'; +import { useToast } from '@/hooks/useToast'; +import { useAuth } from '@/context/AuthContext'; import LagerstandortManager from './LagerstandortManager'; -import { useLagerstandorte } from '../hooks/useLagerstandorte'; +import { useLagerstandorte } from '@/hooks/useLagerstandorte'; +import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { Separator } from '@/components/ui/separator'; export default function AdminPanel() { const { user, userMeta } = useAuth(); - const { toast, showToast } = useToast(); + const { showToast } = useToast(); const locationId = userMeta?.locationId || ''; const { lagerstandorte, addLagerstandort, toggleLagerstandort, deleteLagerstandort } = useLagerstandorte(locationId); @@ -115,141 +119,157 @@ export default function AdminPanel() { } } + const statItems = [ + { label: 'Benutzer', value: stats.users }, + { label: 'Filialen', value: stats.locations }, + { label: 'Assets gesamt', value: stats.assets }, + { label: 'Lagerstandorte', value: stats.lagerstandorte }, + ]; + return ( <>
-
-
-

Admin Panel

-

System-Übersicht und Verwaltung

+
+
+

Admin Panel

+

System-Übersicht und Verwaltung

-
-
-
{stats.users}
-
Benutzer
-
-
-
{stats.locations}
-
Filialen
-
-
-
{stats.assets}
-
Assets gesamt
-
-
-
{stats.lagerstandorte}
-
Lagerstandorte
-
+
+ {statItems.map((item) => ( + + +
{item.value}
+

{item.label}

+ + + ))}
-
-
-

Filialen verwalten

+
+ {/* Filialen */} + + + Filialen verwalten + + +
+ setNewFiliale((f) => ({ ...f, name: e.target.value }))} + placeholder="Filialname (z.B. Kaiserslautern)" + /> + setNewFiliale((f) => ({ ...f, address: e.target.value }))} + placeholder="Adresse (optional)" + /> + +
-
- setNewFiliale((f) => ({ ...f, name: e.target.value }))} - placeholder="Filialname (z.B. Kaiserslautern)" - /> - setNewFiliale((f) => ({ ...f, address: e.target.value }))} - placeholder="Adresse (optional)" - /> - -
+ -
- {locations.length === 0 &&

Keine Filialen vorhanden

} - {locations.map((loc) => ( -
- {editingId === loc.$id ? ( -
- setEditForm((f) => ({ ...f, name: e.target.value }))} - placeholder="Filialname" - /> - setEditForm((f) => ({ ...f, address: e.target.value }))} - placeholder="Adresse" - /> -
- - +
+ {locations.length === 0 && ( +

Keine Filialen vorhanden

+ )} + {locations.map((loc) => ( +
+ {editingId === loc.$id ? ( +
+ setEditForm((f) => ({ ...f, name: e.target.value }))} + placeholder="Filialname" + className="flex-1" + /> + setEditForm((f) => ({ ...f, address: e.target.value }))} + placeholder="Adresse" + className="flex-1" + /> +
+ + +
-
- ) : ( - <> -
- {loc.name} - {loc.address && {loc.address}} - - {loc.isActive ? 'Aktiv' : 'Inaktiv'} - -
-
- - - -
- - )} -
- ))} -
-
- -
-

Benutzer

-
- {usersList.length === 0 &&

Keine Benutzer vorhanden

} - {usersList.map((u) => { - const loc = locations.find((l) => l.$id === u.locationId); - return ( -
-
- {u.userName || u.userId} - {u.role} -
- {loc?.name || '–'} + ) : ( + <> +
+ {loc.name} + {loc.address && {loc.address}} + + {loc.isActive ? 'Aktiv' : 'Inaktiv'} + +
+
+ + + +
+ + )}
- ); - })} -
-
+ ))} +
+ + -
-

Lagerstandorte

- -
- {lagerstandorte.map((l) => ( -
- {l.name} - - {l.isActive ? 'Aktiv' : 'Inaktiv'} - -
- ))} -
-
+ {/* Benutzer */} + + + Benutzer + + +
+ {usersList.length === 0 && ( +

Keine Benutzer vorhanden

+ )} + {usersList.map((u) => { + const loc = locations.find((l) => l.$id === u.locationId); + return ( +
+
+ {u.userName || u.userId} + {u.role} +
+ {loc?.name || '–'} +
+ ); + })} +
+ + + + {/* Lagerstandorte */} + + + Lagerstandorte + + + +
+ {lagerstandorte.map((l) => ( +
+ {l.name} + + {l.isActive ? 'Aktiv' : 'Inaktiv'} + +
+ ))} +
+ +
@@ -262,7 +282,6 @@ export default function AdminPanel() { onClose={() => setShowLsManager(false)} /> )} - ); } diff --git a/src/components/AssetDetail.jsx b/src/components/AssetDetail.jsx index 06b4bca..d0da64b 100644 --- a/src/components/AssetDetail.jsx +++ b/src/components/AssetDetail.jsx @@ -1,14 +1,28 @@ import { useState, useEffect, useCallback } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; -import { databases, DATABASE_ID } from '../lib/appwrite'; -import { useAuth } from '../context/AuthContext'; -import { useAuditLog } from '../hooks/useAuditLog'; -import { useLagerstandorte } from '../hooks/useLagerstandorte'; -import { useColleagues } from '../hooks/useColleagues'; -import { getDaysOld, isOverdue } from '../hooks/useAssets'; +import { databases, DATABASE_ID } from '@/lib/appwrite'; +import { useAuth } from '@/context/AuthContext'; +import { useAuditLog } from '@/hooks/useAuditLog'; +import { useLagerstandorte } from '@/hooks/useLagerstandorte'; +import { useColleagues } from '@/hooks/useColleagues'; +import { getDaysOld, isOverdue } from '@/hooks/useAssets'; +import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Textarea } from '@/components/ui/textarea'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { Skeleton } from '@/components/ui/skeleton'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { ArrowLeft, Pencil, Save, X } from 'lucide-react'; const STATUS_LABEL = { offen: 'Offen', in_bearbeitung: 'In Bearbeitung', entsorgt: 'Entsorgt' }; -const STATUS_MAP = { offen: 'offen', in_bearbeitung: 'bearbeitung', entsorgt: 'entsorgt' }; const PRIO_LABELS = { kritisch: 'Kritisch', hoch: 'Hoch', mittel: 'Mittel', niedrig: 'Niedrig' }; const PRIO_OPTIONS = ['kritisch', 'hoch', 'mittel', 'niedrig']; const STATUS_OPTIONS = ['offen', 'in_bearbeitung', 'entsorgt']; @@ -20,6 +34,19 @@ function formatTimestamp(ts) { + ' ' + d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' }); } +function StatusBadge({ status }) { + if (status === 'offen') return {STATUS_LABEL[status]}; + if (status === 'in_bearbeitung') return {STATUS_LABEL[status]}; + return {STATUS_LABEL[status]}; +} + +function PrioBadge({ prio }) { + if (prio === 'kritisch') return {PRIO_LABELS[prio]}; + if (prio === 'hoch') return {PRIO_LABELS[prio]}; + if (prio === 'mittel') return {PRIO_LABELS[prio]}; + return {PRIO_LABELS[prio]}; +} + export default function AssetDetail() { const { id } = useParams(); const navigate = useNavigate(); @@ -141,22 +168,47 @@ export default function AssetDetail() { } } + function resetForm() { + setEditing(false); + setForm({ + erlNummer: asset.erlNummer || '', + seriennummer: asset.seriennummer || '', + artikelNr: asset.artikelNr || '', + bezeichnung: asset.bezeichnung || '', + defekt: asset.defekt || '', + lagerstandortId: asset.lagerstandortId || '', + zustaendig: asset.zustaendig || '', + status: asset.status || 'offen', + prio: asset.prio || 'mittel', + kommentar: asset.kommentar || '', + }); + } + if (loading) { return ( -
-
Lade Asset…
+
+ + +
); } if (!asset) { return ( -
-
-

Asset nicht gefunden

-

Das Asset mit der ID {id} existiert nicht.

- -
+
+ + +

Asset nicht gefunden

+

+ Das Asset mit der ID {id} existiert nicht. +

+ + +
); } @@ -165,154 +217,193 @@ export default function AssetDetail() { const overdue = isOverdue(asset); return ( -
-
- -

- Asset: {asset.erlNummer || '–'} +
+ {/* Back button */} + + + {/* Header area */} +
+

+ Asset: {asset.erlNummer || '–'}

-
- {STATUS_LABEL[asset.status]} - {PRIO_LABELS[asset.prio]} - {overdue && Überfällig ({days} Tage)} -
+ + + {overdue && ( + + Überfällig ({days} Tage) + + )}
-
-
-

Eigenschaften

- {!editing ? ( - - ) : ( -
- - + {/* Properties card */} + + + Eigenschaften +
+ {!editing ? ( + + ) : ( + <> + + + + )} +
+ + +
+ setForm(f => ({ ...f, erlNummer: v }))} /> + setForm(f => ({ ...f, artikelNr: v }))} /> + setForm(f => ({ ...f, bezeichnung: v }))} /> + setForm(f => ({ ...f, seriennummer: v }))} mono /> + setForm(f => ({ ...f, defekt: v }))} textarea className="sm:col-span-2" /> + + {/* Lagerstandort */} +
+ + {editing ? ( + + ) : ( +

{activeLagerstandorte.find(l => l.$id === asset.lagerstandortId)?.name || '–'}

+ )}
- )} -
-
- setForm(f => ({ ...f, erlNummer: v }))} /> - setForm(f => ({ ...f, artikelNr: v }))} /> - setForm(f => ({ ...f, bezeichnung: v }))} /> - setForm(f => ({ ...f, seriennummer: v }))} mono /> - setForm(f => ({ ...f, defekt: v }))} textarea /> -
- Lagerstandort - {editing ? ( - - ) : ( - {activeLagerstandorte.find(l => l.$id === asset.lagerstandortId)?.name || '–'} - )} -
-
- Zuständig - {editing ? ( - - ) : ( - {asset.zustaendig || '–'} - )} -
-
- Status - {editing ? ( - - ) : ( - {STATUS_LABEL[asset.status]} - )} -
-
- Priorität - {editing ? ( - - ) : ( - {PRIO_LABELS[asset.prio]} - )} -
- setForm(f => ({ ...f, kommentar: v }))} textarea /> -
+ {/* Zuständig */} +
+ + {editing ? ( + + ) : ( +

{asset.zustaendig || '–'}

+ )} +
-
+ {/* Status */} +
+ + {editing ? ( + + ) : ( + + )} +
+ + {/* Priorität */} +
+ + {editing ? ( + + ) : ( + + )} +
+ + setForm(f => ({ ...f, kommentar: v }))} textarea className="sm:col-span-2" /> +
+ + Erstellt am: {formatTimestamp(asset.$createdAt)} - Erstellt von: {asset.createdBy || '–'} - Zuletzt bearbeitet von: {asset.lastEditedBy || '–'} + Erstellt von: {asset.createdBy || '–'} + Zuletzt bearbeitet von: {asset.lastEditedBy || '–'} Alter: {days === 0 ? 'Heute' : days === 1 ? '1 Tag' : `${days} Tage`} -
-
+ + -
-

Änderungsprotokoll

-
- {loadingLogs &&
[System] Logs werden geladen…
} - {!loadingLogs && logs.length === 0 && ( -
[System] Keine Einträge vorhanden.
- )} - {logs.map((log) => { - const ts = formatTimestamp(log.$createdAt); - const actionClass = log.action === 'erstellt' ? 'log-created' - : log.action === 'status_geaendert' ? 'log-status' - : 'log-edit'; + {/* Audit log card */} + + + Änderungsprotokoll + + +
+ {loadingLogs &&
[System] Logs werden geladen…
} + {!loadingLogs && logs.length === 0 && ( +
[System] Keine Einträge vorhanden.
+ )} + {logs.map((log) => { + const ts = formatTimestamp(log.$createdAt); + const actionClass = log.action === 'erstellt' ? 'log-created' + : log.action === 'status_geaendert' ? 'log-status' + : 'log-edit'; - return ( -
- [{ts}] - {log.userName} - {log.action.toUpperCase()} - {log.details && {log.details}} -
- ); - })} -
-
+ return ( +
+ [{ts}] + {log.userName} + {log.action.toUpperCase()} + {log.details && {log.details}} +
+ ); + })} +
+ +
); } -function PropertyRow({ label, value, editing, onChange, mono, textarea }) { +function PropertyField({ label, value, editing, onChange, mono, textarea, className = '' }) { return ( -
- {label} +
+ {editing ? ( textarea ? ( -