Simple Managment webapp [LLM]

2025-12-03 17:20:50 +01:00
parent b521f74951
commit e7f613b5dc
76 changed files with 20009 additions and 1 deletions
--- a/webapp/src/styles.scss
+++ b/webapp/src/styles.scss
@@ -0,0 +1,136 @@
+@import "ng-zorro-antd/ng-zorro-antd.min.css";
+
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+// Global utilities
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.mb-0 { margin-bottom: 0; }
+.mb-8 { margin-bottom: 8px; }
+.mb-16 { margin-bottom: 16px; }
+.mb-24 { margin-bottom: 24px; }
+
+.mt-0 { margin-top: 0; }
+.mt-8 { margin-top: 8px; }
+.mt-16 { margin-top: 16px; }
+.mt-24 { margin-top: 24px; }
+
+.mr-8 { margin-right: 8px; }
+.mr-16 { margin-right: 16px; }
+
+.ml-8 { margin-left: 8px; }
+.ml-16 { margin-left: 16px; }
+
+.p-16 { padding: 16px; }
+.p-24 { padding: 24px; }
+
+.w-100 { width: 100%; }
+
+// Monospace for IDs and keys
+.mono {
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace;
+  font-size: 13px;
+}
+
+// Card styling
+.content-card {
+  margin-bottom: 16px;
+}
+
+// Page content wrapper
+.page-content {
+  padding: 24px;
+  background: #fff;
+  min-height: calc(100vh - 64px);
+}
+
+// Filter bar
+.filter-bar {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+  align-items: center;
+}
+
+// Clickable row
+.clickable-row {
+  cursor: pointer;
+
+  &:hover {
+    background-color: #fafafa;
+  }
+}
+
+// Status colors
+.status-confirmed {
+  color: #52c41a;
+}
+
+.status-pending {
+  color: #faad14;
+}
+
+.status-inactive {
+  color: #999;
+}
+
+// Priority colors
+.priority-high {
+  color: #f5222d;
+}
+
+.priority-normal {
+  color: #1890ff;
+}
+
+.priority-low {
+  color: #999;
+}
+
+// Empty state wrapper
+.empty-wrapper {
+  padding: 48px 0;
+}
+
+// Action buttons group
+.action-buttons {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+// Detail page header
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+// QR code display
+.qr-code-container {
+  display: flex;
+  justify-content: center;
+  padding: 24px;
+
+  img {
+    max-width: 256px;
+    width: 100%;
+    height: auto;
+  }
+}