diff --git a/.workbench/image.png b/.workbench/image.png index b84e12f..cbecbe4 100644 Binary files a/.workbench/image.png and b/.workbench/image.png differ diff --git a/wwwroot/css/dashboard.css b/wwwroot/css/dashboard.css new file mode 100644 index 0000000..81b78bf --- /dev/null +++ b/wwwroot/css/dashboard.css @@ -0,0 +1,869 @@ +/* ========================================== + DASHBOARD STYLES + ========================================== */ + +/* ========================================== + FONT FACE (Poppins) + ========================================== */ +@font-face { + font-family: 'Poppins'; + src: url('../fonts/Poppins-Regular.woff') format('woff'); + font-weight: 400; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Poppins'; + src: url('../fonts/Poppins-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Poppins'; + src: url('../fonts/Poppins-SemiBold.woff') format('woff'); + font-weight: 600; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Poppins'; + src: url('../fonts/Poppins-Bold.woff') format('woff'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +/* ========================================== + CSS VARIABLES + ========================================== */ +:root { + --color-surface: #fff; + --color-background: #f5f5f5; + --color-background-hover: #f0f0f0; + --color-background-alt: #fafafa; + --color-border: #e0e0e0; + --color-text: #333; + --color-text-secondary: #666; + --color-teal: #00897b; + --color-blue: #1976d2; + --color-red: #e53935; + --color-amber: #f59e0b; + --color-purple: #8b5cf6; + --color-green: #43a047; + --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + --font-mono: 'JetBrains Mono', monospace; +} + +/* Dark mode */ +@media (prefers-color-scheme: dark) { + :root:not(.light-mode) { + --color-surface: #1e1e1e; + --color-background: #121212; + --color-background-hover: #2a2a2a; + --color-background-alt: #1a1a1a; + --color-border: #333; + --color-text: #e0e0e0; + --color-text-secondary: #999; + --color-teal: #26a69a; + --color-blue: #42a5f5; + --color-red: #ef5350; + --color-amber: #ffb74d; + --color-purple: #a78bfa; + --color-green: #66bb6a; + } +} + +:root.dark-mode { + --color-surface: #1e1e1e; + --color-background: #121212; + --color-background-hover: #2a2a2a; + --color-background-alt: #1a1a1a; + --color-border: #333; + --color-text: #e0e0e0; + --color-text-secondary: #999; + --color-teal: #26a69a; + --color-blue: #42a5f5; + --color-red: #ef5350; + --color-amber: #ffb74d; + --color-purple: #a78bfa; + --color-green: #66bb6a; +} + +/* ========================================== + RESET & BASE + ========================================== */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: var(--font-family); + font-size: 14px; + color: var(--color-text); + background: var(--color-background); + line-height: 1.5; +} + +/* ========================================== + LAYOUT + ========================================== */ +swp-page-container { + display: block; + max-width: 1400px; + margin: 0 auto; + padding: 24px; +} + +swp-dashboard-grid { + display: grid; + grid-template-columns: 1fr 380px; + gap: 24px; +} + +swp-main-column { + display: flex; + flex-direction: column; + gap: 20px; +} + +swp-side-column { + display: flex; + flex-direction: column; + gap: 20px; +} + +/* ========================================== + BUTTONS + ========================================== */ +swp-btn { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 18px; + font-size: 13px; + font-weight: 500; + font-family: var(--font-family); + border-radius: 6px; + cursor: pointer; + transition: all 150ms ease; + border: none; +} + +swp-btn i { + font-size: 18px; +} + +swp-btn.primary { + background: var(--color-teal); + color: white; +} + +swp-btn.primary:hover { + background: #00796b; +} + +swp-btn.secondary { + background: var(--color-surface); + border: 1px solid var(--color-border); + color: var(--color-text); +} + +swp-btn.secondary:hover { + background: var(--color-background-hover); +} + +/* ========================================== + CARDS + ========================================== */ +swp-card { + display: block; + background: var(--color-surface); + border-radius: 8px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 20px; +} + +swp-card-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; +} + +swp-card-title { + display: flex; + align-items: center; + gap: 8px; + font-size: 14px; + font-weight: 600; + color: var(--color-text); +} + +swp-card-title i { + font-size: 20px; + color: var(--color-teal); +} + +swp-card-action { + font-size: 12px; + color: var(--color-teal); + cursor: pointer; + text-decoration: none; +} + +swp-card-action:hover { + text-decoration: underline; +} + +swp-section-label { + display: block; + font-size: 11px; + font-weight: 600; + color: var(--color-text-secondary); + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: 12px; +} + +/* ========================================== + STATS BAR + ========================================== */ +swp-stats-bar { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + margin-bottom: 24px; +} + +swp-stat-card { + display: flex; + flex-direction: column; + gap: 4px; + padding: 16px 20px; + background: var(--color-surface); + border-radius: 8px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); +} + +swp-stat-card swp-stat-value { + font-size: 28px; + font-weight: 700; + font-family: var(--font-mono); + color: var(--color-text); +} + +swp-stat-card swp-stat-label { + font-size: 12px; + color: var(--color-text-secondary); +} + +swp-stat-card swp-stat-trend { + display: flex; + align-items: center; + gap: 4px; + font-size: 11px; + margin-top: 4px; +} + +swp-stat-card swp-stat-trend.up { + color: var(--color-green); +} + +swp-stat-card swp-stat-trend.down { + color: var(--color-red); +} + +swp-stat-card.highlight swp-stat-value { + color: var(--color-teal); +} + +swp-stat-card.success swp-stat-value { + color: var(--color-green); +} + +swp-stat-card.warning swp-stat-value { + color: var(--color-amber); +} + +/* ========================================== + AI INSIGHT + ========================================== */ +swp-ai-insight { + display: block; + padding: 16px; + background: linear-gradient(135deg, color-mix(in srgb, var(--color-purple) 8%, transparent), color-mix(in srgb, var(--color-teal) 8%, transparent)); + border: 1px solid color-mix(in srgb, var(--color-purple) 20%, transparent); + border-radius: 8px; +} + +swp-ai-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 10px; +} + +swp-ai-header i { + font-size: 20px; + color: var(--color-purple); +} + +swp-ai-header span { + font-size: 12px; + font-weight: 600; + color: var(--color-purple); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +swp-ai-text { + display: block; + font-size: 14px; + line-height: 1.6; + color: var(--color-text); +} + +swp-ai-text strong { + color: var(--color-purple); +} + +/* ========================================== + OCCUPANCY BAR + ========================================== */ +swp-occupancy-bar { + display: block; + margin-top: 16px; +} + +swp-occupancy-header { + display: flex; + justify-content: space-between; + align-items: baseline; + margin-bottom: 8px; +} + +swp-occupancy-label { + font-size: 13px; + color: var(--color-text-secondary); +} + +swp-occupancy-value { + font-size: 14px; + font-weight: 600; + font-family: var(--font-mono); + color: var(--color-text); +} + +swp-occupancy-track { + height: 8px; + background: var(--color-border); + border-radius: 4px; + overflow: hidden; +} + +swp-occupancy-fill { + display: block; + height: 100%; + background: var(--color-teal); + border-radius: 4px; + transition: width 500ms ease; +} + +swp-occupancy-fill.high { + background: var(--color-green); +} + +swp-occupancy-fill.medium { + background: var(--color-amber); +} + +swp-occupancy-fill.low { + background: var(--color-red); +} + +/* ========================================== + TIMELINE / BOOKINGS + ========================================== */ +swp-booking-list { + display: flex; + flex-direction: column; + gap: 8px; +} + +swp-booking-item { + display: flex; + align-items: center; + gap: 12px; + padding: 12px; + background: var(--color-background-alt); + border-radius: 6px; + cursor: pointer; + transition: background 150ms ease; +} + +swp-booking-item:hover { + background: var(--color-background-hover); +} + +swp-booking-time { + display: flex; + flex-direction: column; + align-items: center; + min-width: 50px; +} + +swp-booking-time swp-time-start { + font-size: 14px; + font-weight: 600; + font-family: var(--font-mono); + color: var(--color-text); +} + +swp-booking-time swp-time-end { + font-size: 11px; + color: var(--color-text-secondary); + font-family: var(--font-mono); +} + +swp-booking-indicator { + width: 4px; + height: 40px; + border-radius: 2px; + flex-shrink: 0; +} + +swp-booking-indicator.teal { background: var(--color-teal); } +swp-booking-indicator.blue { background: var(--color-blue); } +swp-booking-indicator.purple { background: var(--color-purple); } +swp-booking-indicator.amber { background: var(--color-amber); } +swp-booking-indicator.green { background: var(--color-green); } + +swp-booking-details { + flex: 1; + min-width: 0; +} + +swp-booking-service { + font-size: 14px; + font-weight: 500; + color: var(--color-text); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +swp-booking-customer { + font-size: 12px; + color: var(--color-text-secondary); +} + +swp-booking-employee { + display: flex; + align-items: center; + gap: 6px; +} + +swp-booking-employee swp-avatar-small { + width: 24px; + height: 24px; + border-radius: 50%; + background: var(--color-teal); + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: 600; +} + +swp-booking-employee span { + font-size: 12px; + color: var(--color-text-secondary); +} + +swp-booking-status { + padding: 4px 8px; + border-radius: 4px; + font-size: 11px; + font-weight: 500; +} + +swp-booking-status.confirmed { + background: color-mix(in srgb, var(--color-green) 15%, transparent); + color: var(--color-green); +} + +swp-booking-status.pending { + background: color-mix(in srgb, var(--color-amber) 15%, transparent); + color: var(--color-amber); +} + +swp-booking-status.inprogress { + background: color-mix(in srgb, var(--color-blue) 15%, transparent); + color: var(--color-blue); +} + +swp-booking-status.completed { + background: var(--color-background-hover); + color: var(--color-text-secondary); +} + +swp-booking-item.completed { + opacity: 0.6; +} + +swp-booking-item.completed swp-booking-indicator { + background: var(--color-border); +} + +/* ========================================== + ATTENTION LIST + ========================================== */ +swp-attention-list { + display: flex; + flex-direction: column; + gap: 8px; +} + +swp-attention-item { + display: flex; + align-items: flex-start; + gap: 12px; + padding: 12px; + background: var(--color-background-alt); + border-radius: 6px; + border-left: 3px solid var(--color-border); +} + +swp-attention-item.urgent { + border-left-color: var(--color-red); + background: color-mix(in srgb, var(--color-red) 5%, var(--color-background-alt)); +} + +swp-attention-item.warning { + border-left-color: var(--color-amber); + background: color-mix(in srgb, var(--color-amber) 5%, var(--color-background-alt)); +} + +swp-attention-item.info { + border-left-color: var(--color-blue); +} + +swp-attention-icon { + width: 32px; + height: 32px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +swp-attention-item.urgent swp-attention-icon { + background: color-mix(in srgb, var(--color-red) 15%, transparent); + color: var(--color-red); +} + +swp-attention-item.warning swp-attention-icon { + background: color-mix(in srgb, var(--color-amber) 15%, transparent); + color: var(--color-amber); +} + +swp-attention-item.info swp-attention-icon { + background: color-mix(in srgb, var(--color-blue) 15%, transparent); + color: var(--color-blue); +} + +swp-attention-icon i { + font-size: 16px; +} + +swp-attention-content { + flex: 1; +} + +swp-attention-title { + font-size: 13px; + font-weight: 500; + color: var(--color-text); + margin-bottom: 2px; +} + +swp-attention-desc { + font-size: 12px; + color: var(--color-text-secondary); +} + +swp-attention-action { + font-size: 12px; + color: var(--color-teal); + cursor: pointer; + white-space: nowrap; +} + +swp-attention-action:hover { + text-decoration: underline; +} + +/* ========================================== + EMPLOYEE STATUS + ========================================== */ +swp-employee-list { + display: flex; + flex-direction: column; + gap: 8px; +} + +swp-employee-status-item { + display: flex; + align-items: center; + gap: 12px; + padding: 10px 12px; + background: var(--color-background-alt); + border-radius: 6px; +} + +swp-employee-avatar { + width: 36px; + height: 36px; + border-radius: 50%; + background: var(--color-teal); + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 13px; + font-weight: 600; + flex-shrink: 0; +} + +swp-employee-info { + flex: 1; + min-width: 0; +} + +swp-employee-name { + font-size: 14px; + font-weight: 500; + color: var(--color-text); +} + +swp-employee-current { + font-size: 12px; + color: var(--color-text-secondary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +swp-employee-status-badge { + padding: 4px 10px; + border-radius: 12px; + font-size: 11px; + font-weight: 500; +} + +swp-employee-status-badge.busy { + background: color-mix(in srgb, var(--color-teal) 15%, transparent); + color: var(--color-teal); +} + +swp-employee-status-badge.available { + background: color-mix(in srgb, var(--color-green) 15%, transparent); + color: var(--color-green); +} + +swp-employee-status-badge.away { + background: color-mix(in srgb, var(--color-amber) 15%, transparent); + color: var(--color-amber); +} + +swp-employee-status-badge.off { + background: var(--color-background-hover); + color: var(--color-text-secondary); +} + +/* ========================================== + QUICK STATS MINI + ========================================== */ +swp-quick-stats { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 12px; +} + +swp-quick-stat { + display: flex; + flex-direction: column; + gap: 2px; + padding: 12px; + background: var(--color-background-alt); + border-radius: 6px; +} + +swp-quick-stat swp-stat-value { + font-size: 20px; + font-weight: 600; + font-family: var(--font-mono); + color: var(--color-text); +} + +swp-quick-stat swp-stat-label { + font-size: 11px; + color: var(--color-text-secondary); +} + +/* ========================================== + NOTIFICATIONS + ========================================== */ +swp-notification-list { + display: flex; + flex-direction: column; + gap: 8px; +} + +swp-notification-item { + display: flex; + align-items: flex-start; + gap: 10px; + padding: 10px 12px; + background: var(--color-background-alt); + border-radius: 6px; + cursor: pointer; + transition: background 150ms ease; +} + +swp-notification-item:hover { + background: var(--color-background-hover); +} + +swp-notification-item.unread { + background: color-mix(in srgb, var(--color-teal) 5%, var(--color-background-alt)); +} + +swp-notification-icon { + width: 28px; + height: 28px; + border-radius: 50%; + background: var(--color-background-hover); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + color: var(--color-text-secondary); +} + +swp-notification-icon i { + font-size: 14px; +} + +swp-notification-content { + flex: 1; + min-width: 0; +} + +swp-notification-text { + font-size: 13px; + color: var(--color-text); + line-height: 1.4; +} + +swp-notification-text strong { + font-weight: 600; +} + +swp-notification-time { + font-size: 11px; + color: var(--color-text-secondary); + margin-top: 2px; +} + +swp-notification-item.unread swp-notification-icon { + background: color-mix(in srgb, var(--color-teal) 15%, transparent); + color: var(--color-teal); +} + +/* ========================================== + TIME INDICATOR + ========================================== */ +swp-current-time { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + background: color-mix(in srgb, var(--color-teal) 10%, transparent); + border-radius: 6px; + margin-bottom: 12px; +} + +swp-current-time i { + font-size: 16px; + color: var(--color-teal); +} + +swp-current-time span { + font-size: 13px; + color: var(--color-teal); + font-weight: 500; +} + +swp-current-time swp-time { + font-family: var(--font-mono); + font-weight: 600; +} + +/* ========================================== + PAGE HEADER (for content modules) + ========================================== */ +swp-page-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 24px; +} + +swp-page-header swp-page-title { + font-size: 18px; + font-weight: 600; + color: var(--color-text); +} + +swp-page-header swp-page-actions { + display: flex; + align-items: center; + gap: 12px; +} + +swp-date-display { + display: flex; + align-items: center; + gap: 8px; + font-size: 14px; + color: var(--color-text-secondary); +} + +swp-date-display i { + font-size: 18px; +} + +/* ========================================== + RESPONSIVE + ========================================== */ +@media (max-width: 1100px) { + swp-dashboard-grid { + grid-template-columns: 1fr; + } + + swp-stats-bar { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 600px) { + swp-stats-bar { + grid-template-columns: 1fr; + } +} diff --git a/wwwroot/css/indstillinger.css b/wwwroot/css/indstillinger.css new file mode 100644 index 0000000..31bec2a --- /dev/null +++ b/wwwroot/css/indstillinger.css @@ -0,0 +1,576 @@ +/* ========================================== + INDSTILLINGER (SETTINGS) STYLES + ========================================== */ + +/* ========================================== + PAGE LAYOUT + ========================================== */ +swp-page-container { + display: block; + max-width: 900px; + margin: 0 auto; + padding: 24px; +} + +swp-page-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 32px; +} + +swp-page-title { + display: flex; + flex-direction: column; + gap: 4px; +} + +swp-page-title h1 { + font-size: 22px; + font-weight: 600; + color: var(--color-text); + margin: 0; +} + +swp-page-title p { + font-size: 13px; + color: var(--color-text-secondary); + margin: 0; +} + +/* ========================================== + SETTINGS SECTIONS + ========================================== */ +swp-settings-section { + display: block; + background: var(--color-surface); + border-radius: 8px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); + margin-bottom: 24px; +} + +swp-section-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 24px; + border-bottom: 1px solid var(--color-border); +} + +swp-section-title { + display: flex; + align-items: center; + gap: 12px; +} + +swp-section-title i { + font-size: 22px; + color: var(--color-teal); +} + +swp-section-title h2 { + font-size: 16px; + font-weight: 600; + color: var(--color-text); + margin: 0; +} + +swp-section-content { + display: block; + padding: 24px; +} + +swp-section-footer { + display: flex; + justify-content: flex-end; + padding: 16px 24px; + border-top: 1px solid var(--color-border); + background: var(--color-background-alt); + border-radius: 0 0 8px 8px; +} + +/* ========================================== + FORM ELEMENTS + ========================================== */ +swp-form-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; +} + +swp-form-grid.single-column { + grid-template-columns: 1fr; +} + +swp-form-row { + display: flex; + flex-direction: column; + gap: 6px; +} + +swp-form-row.full-width { + grid-column: 1 / -1; +} + +swp-form-label { + display: block; + font-size: 13px; + font-weight: 500; + color: var(--color-text); +} + +swp-form-label span.optional { + font-weight: 400; + color: var(--color-text-secondary); + margin-left: 4px; +} + +swp-form-input { + display: block; + width: 100%; + padding: 10px 14px; + font-size: 14px; + font-family: var(--font-family); + color: var(--color-text); + background: var(--color-background); + border: 1px solid var(--color-border); + border-radius: 6px; + transition: all 150ms ease; +} + +swp-form-input:focus { + outline: none; + border-color: var(--color-teal); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 15%, transparent); +} + +swp-form-input::placeholder { + color: var(--color-text-secondary); +} + +swp-form-input[type="time"] { + padding: 8px 14px; +} + +swp-form-textarea { + display: block; + width: 100%; + padding: 10px 14px; + font-size: 14px; + font-family: var(--font-family); + color: var(--color-text); + background: var(--color-background); + border: 1px solid var(--color-border); + border-radius: 6px; + resize: vertical; + min-height: 80px; + transition: all 150ms ease; +} + +swp-form-textarea:focus { + outline: none; + border-color: var(--color-teal); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 15%, transparent); +} + +swp-form-select { + display: block; + width: 100%; + padding: 10px 14px; + font-size: 14px; + font-family: var(--font-family); + color: var(--color-text); + background: var(--color-background); + border: 1px solid var(--color-border); + border-radius: 6px; + cursor: pointer; + transition: all 150ms ease; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='%23666' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 48 88h160a8 8 0 0 1 5.66 13.66z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 12px center; + padding-right: 40px; +} + +swp-form-select:focus { + outline: none; + border-color: var(--color-teal); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 15%, transparent); +} + +swp-form-hint { + display: block; + font-size: 12px; + color: var(--color-text-secondary); + margin-top: 4px; +} + +/* ========================================== + TOGGLE SWITCH + ========================================== */ +swp-toggle-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 0; + border-bottom: 1px solid var(--color-border); +} + +swp-toggle-row:last-child { + border-bottom: none; +} + +swp-toggle-info { + display: flex; + flex-direction: column; + gap: 2px; +} + +swp-toggle-label { + font-size: 14px; + font-weight: 500; + color: var(--color-text); +} + +swp-toggle-desc { + font-size: 12px; + color: var(--color-text-secondary); +} + +swp-toggle { + position: relative; + width: 44px; + height: 24px; + background: var(--color-border); + border-radius: 12px; + cursor: pointer; + transition: background 200ms ease; + flex-shrink: 0; +} + +swp-toggle.active { + background: var(--color-teal); +} + +swp-toggle-knob { + position: absolute; + top: 2px; + left: 2px; + width: 20px; + height: 20px; + background: white; + border-radius: 50%; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + transition: transform 200ms ease; +} + +swp-toggle.active swp-toggle-knob { + transform: translateX(20px); +} + +/* ========================================== + OPENING HOURS TABLE + ========================================== */ +swp-hours-table { + display: flex; + flex-direction: column; + gap: 0; +} + +swp-hours-row { + display: grid; + grid-template-columns: 100px 80px 1fr 1fr auto; + gap: 16px; + align-items: center; + padding: 12px 0; + border-bottom: 1px solid var(--color-border); +} + +swp-hours-row:last-child { + border-bottom: none; +} + +swp-hours-day { + font-size: 14px; + font-weight: 500; + color: var(--color-text); +} + +swp-hours-status { + display: flex; + align-items: center; + gap: 8px; +} + +swp-hours-badge { + display: inline-flex; + align-items: center; + padding: 4px 10px; + font-size: 12px; + font-weight: 500; + border-radius: 4px; + background: color-mix(in srgb, var(--color-green) 15%, transparent); + color: var(--color-green); +} + +swp-hours-badge.closed { + background: var(--color-background); + color: var(--color-text-secondary); +} + +swp-hours-time { + display: flex; + align-items: center; + gap: 8px; +} + +swp-hours-time span { + font-size: 13px; + color: var(--color-text-secondary); +} + +swp-hours-time swp-form-input { + width: 100px; + padding: 8px 12px; + font-size: 13px; + text-align: center; +} + +swp-hours-actions { + display: flex; + align-items: center; + gap: 8px; +} + +/* ========================================== + LOGO UPLOAD + ========================================== */ +swp-logo-upload { + display: flex; + align-items: center; + gap: 20px; +} + +swp-logo-preview { + width: 80px; + height: 80px; + background: var(--color-background); + border: 2px dashed var(--color-border); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +swp-logo-preview.has-logo { + border-style: solid; +} + +swp-logo-preview img { + max-width: 100%; + max-height: 100%; + object-fit: contain; +} + +swp-logo-preview i { + font-size: 32px; + color: var(--color-text-secondary); + opacity: 0.5; +} + +swp-logo-actions { + display: flex; + flex-direction: column; + gap: 8px; +} + +swp-logo-actions swp-btn { + justify-content: center; +} + +/* ========================================== + URL FIELD WITH COPY + ========================================== */ +swp-url-field { + display: flex; + align-items: stretch; + border: 1px solid var(--color-border); + border-radius: 6px; + overflow: hidden; + background: var(--color-background); +} + +swp-url-field swp-form-input { + border: none; + border-radius: 0; + background: transparent; +} + +swp-url-field swp-form-input:focus { + box-shadow: none; +} + +swp-url-copy { + display: flex; + align-items: center; + justify-content: center; + padding: 0 14px; + background: var(--color-surface); + border-left: 1px solid var(--color-border); + cursor: pointer; + transition: all 150ms ease; + color: var(--color-text-secondary); +} + +swp-url-copy:hover { + background: var(--color-background-hover); + color: var(--color-teal); +} + +swp-url-copy i { + font-size: 18px; +} + +/* ========================================== + BUTTONS + ========================================== */ +swp-btn { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 18px; + font-size: 13px; + font-weight: 500; + font-family: var(--font-family); + border-radius: 6px; + cursor: pointer; + transition: all 150ms ease; + border: none; +} + +swp-btn i { + font-size: 18px; +} + +swp-btn.primary { + background: var(--color-teal); + color: white; +} + +swp-btn.primary:hover { + background: #00796b; +} + +swp-btn.secondary { + background: var(--color-surface); + border: 1px solid var(--color-border); + color: var(--color-text); +} + +swp-btn.secondary:hover { + background: var(--color-background-hover); +} + +swp-btn.small { + padding: 6px 12px; + font-size: 12px; +} + +swp-btn.small i { + font-size: 16px; +} + +swp-btn.danger { + background: transparent; + border: 1px solid var(--color-border); + color: var(--color-text-secondary); +} + +swp-btn.danger:hover { + background: color-mix(in srgb, var(--color-red) 10%, transparent); + border-color: var(--color-red); + color: var(--color-red); +} + +/* ========================================== + ICON BUTTON + ========================================== */ +swp-icon-btn { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border: none; + background: transparent; + border-radius: 6px; + cursor: pointer; + color: var(--color-text-secondary); + transition: all 150ms ease; +} + +swp-icon-btn:hover { + background: var(--color-background-hover); + color: var(--color-text); +} + +swp-icon-btn i { + font-size: 18px; +} + +/* ========================================== + INFO BOX + ========================================== */ +swp-info-box { + display: flex; + align-items: flex-start; + gap: 12px; + padding: 14px 16px; + background: color-mix(in srgb, var(--color-blue) 8%, transparent); + border: 1px solid color-mix(in srgb, var(--color-blue) 20%, transparent); + border-radius: 6px; + margin-bottom: 20px; +} + +swp-info-box i { + font-size: 20px; + color: var(--color-blue); + flex-shrink: 0; + margin-top: 1px; +} + +swp-info-box p { + font-size: 13px; + color: var(--color-text); + margin: 0; + line-height: 1.5; +} + +/* ========================================== + RESPONSIVE + ========================================== */ +@media (max-width: 768px) { + swp-page-container { + padding: 16px; + } + + swp-form-grid { + grid-template-columns: 1fr; + } + + swp-hours-row { + grid-template-columns: 1fr; + gap: 12px; + } + + swp-hours-time { + flex-wrap: wrap; + } + + swp-section-header { + flex-direction: column; + align-items: flex-start; + gap: 12px; + } +} diff --git a/wwwroot/css/konto.css b/wwwroot/css/konto.css new file mode 100644 index 0000000..69fd7d7 --- /dev/null +++ b/wwwroot/css/konto.css @@ -0,0 +1,684 @@ +/* ========================================== + KONTO & ABONNEMENT STYLES + ========================================== */ + +/* ========================================== + PAGE LAYOUT + ========================================== */ +swp-page-container { + display: block; + max-width: 1200px; + margin: 0 auto; + padding: 24px; +} + +swp-page-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 24px; +} + +swp-page-title { + display: flex; + flex-direction: column; + gap: 4px; +} + +swp-page-title h1 { + font-size: 22px; + font-weight: 600; + color: var(--color-text); + margin: 0; +} + +swp-page-title p { + font-size: 13px; + color: var(--color-text-secondary); + margin: 0; +} + +/* ========================================== + SECTIONS + ========================================== */ +swp-section { + display: block; + margin-bottom: 32px; +} + +swp-section-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; +} + +swp-section-title { + display: flex; + align-items: center; + gap: 10px; + font-size: 16px; + font-weight: 600; + color: var(--color-text); +} + +swp-section-title i { + font-size: 22px; + color: var(--color-teal); +} + +/* ========================================== + PLAN CARDS + ========================================== */ +swp-plan-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; +} + +swp-plan-card { + display: flex; + flex-direction: column; + background: var(--color-surface); + border: 2px solid var(--color-border); + border-radius: 12px; + padding: 24px; + transition: all 200ms ease; +} + +swp-plan-card.current { + border-color: var(--color-teal); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 15%, transparent); +} + +swp-plan-card.enterprise { + background: linear-gradient(135deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-purple) 5%, var(--color-surface)) 100%); + border-color: var(--color-purple); +} + +swp-plan-badge { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 10px; + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + border-radius: 20px; + width: fit-content; + margin-bottom: 12px; +} + +swp-plan-badge.current { + background: color-mix(in srgb, var(--color-teal) 15%, transparent); + color: var(--color-teal); +} + +swp-plan-badge.popular { + background: color-mix(in srgb, var(--color-amber) 15%, transparent); + color: var(--color-amber); +} + +swp-plan-name { + font-size: 20px; + font-weight: 700; + color: var(--color-text); + margin-bottom: 4px; +} + +swp-plan-users { + font-size: 13px; + color: var(--color-text-secondary); + margin-bottom: 16px; +} + +swp-plan-price { + display: flex; + align-items: baseline; + gap: 4px; + margin-bottom: 20px; +} + +swp-plan-price-amount { + font-size: 36px; + font-weight: 700; + color: var(--color-text); +} + +swp-plan-price-period { + font-size: 14px; + color: var(--color-text-secondary); +} + +swp-plan-features { + display: flex; + flex-direction: column; + gap: 10px; + flex: 1; + margin-bottom: 20px; +} + +swp-plan-feature { + display: flex; + align-items: center; + gap: 10px; + font-size: 13px; + color: var(--color-text); +} + +swp-plan-feature i { + font-size: 18px; + color: var(--color-green); +} + +swp-plan-action { + margin-top: auto; +} + +swp-plan-action swp-btn { + width: 100%; + justify-content: center; +} + +swp-plan-card.current swp-btn.secondary { + background: var(--color-background-alt); + color: var(--color-text-secondary); + cursor: default; +} + +/* ========================================== + USERS TABLE + ========================================== */ +swp-users-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; +} + +swp-users-count { + display: flex; + align-items: center; + gap: 8px; + font-size: 14px; + color: var(--color-text-secondary); +} + +swp-users-count strong { + color: var(--color-text); + font-weight: 600; +} + +swp-users-progress { + width: 100px; + height: 6px; + background: var(--color-border); + border-radius: 3px; + overflow: hidden; +} + +swp-users-progress-bar { + height: 100%; + background: var(--color-teal); + border-radius: 3px; + transition: width 300ms ease; +} + +swp-users-progress-bar.warning { + background: var(--color-amber); +} + +swp-users-progress-bar.full { + background: var(--color-red); +} + +swp-table-card { + display: block; + background: var(--color-surface); + border-radius: 8px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); + overflow: hidden; +} + +swp-table { + display: table; + width: 100%; + border-collapse: collapse; +} + +swp-table-header { + display: table-header-group; + background: var(--color-background-alt); +} + +swp-table-body { + display: table-row-group; +} + +swp-table-row { + display: table-row; + transition: background 150ms ease; +} + +swp-table-body swp-table-row:hover { + background: var(--color-background-hover); +} + +swp-table-cell { + display: table-cell; + padding: 14px 16px; + font-size: 13px; + color: var(--color-text); + border-bottom: 1px solid var(--color-border); + vertical-align: middle; +} + +swp-table-header swp-table-cell { + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + color: var(--color-text-secondary); + border-bottom: 1px solid var(--color-border); +} + +swp-table-cell:first-child { + padding-left: 20px; +} + +swp-table-cell:last-child { + padding-right: 20px; +} + +/* User row specific */ +swp-user-info { + display: flex; + align-items: center; + gap: 12px; +} + +swp-user-avatar { + width: 36px; + height: 36px; + border-radius: 50%; + background: var(--color-teal); + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 13px; + font-weight: 600; + flex-shrink: 0; +} + +swp-user-avatar.purple { background: var(--color-purple); } +swp-user-avatar.blue { background: var(--color-blue); } +swp-user-avatar.amber { background: var(--color-amber); } + +swp-user-details { + display: flex; + flex-direction: column; + gap: 2px; +} + +swp-user-name { + font-weight: 500; + color: var(--color-text); +} + +swp-user-email { + font-size: 12px; + color: var(--color-text-secondary); +} + +swp-role-badge { + display: inline-flex; + align-items: center; + padding: 4px 10px; + font-size: 12px; + font-weight: 500; + border-radius: 4px; + background: var(--color-background); + color: var(--color-text-secondary); +} + +swp-role-badge.admin { + background: color-mix(in srgb, var(--color-purple) 15%, transparent); + color: var(--color-purple); +} + +swp-role-badge.owner { + background: color-mix(in srgb, var(--color-teal) 15%, transparent); + color: var(--color-teal); +} + +swp-status-badge { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 10px; + font-size: 12px; + font-weight: 500; + border-radius: 4px; +} + +swp-status-badge.active { + background: color-mix(in srgb, var(--color-green) 15%, transparent); + color: var(--color-green); +} + +swp-status-badge.invited { + background: color-mix(in srgb, var(--color-amber) 15%, transparent); + color: var(--color-amber); +} + +swp-status-badge.inactive { + background: var(--color-background); + color: var(--color-text-secondary); +} + +swp-status-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: currentColor; +} + +swp-table-actions { + display: flex; + align-items: center; + gap: 8px; +} + +swp-icon-btn { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border: none; + background: transparent; + border-radius: 6px; + cursor: pointer; + color: var(--color-text-secondary); + transition: all 150ms ease; +} + +swp-icon-btn:hover { + background: var(--color-background-hover); + color: var(--color-text); +} + +swp-icon-btn.danger:hover { + background: color-mix(in srgb, var(--color-red) 15%, transparent); + color: var(--color-red); +} + +swp-icon-btn i { + font-size: 18px; +} + +/* ========================================== + BILLING GRID + ========================================== */ +swp-billing-grid { + display: grid; + grid-template-columns: 380px 1fr; + gap: 24px; +} + +/* ========================================== + PAYMENT CARD + ========================================== */ +swp-payment-card { + display: flex; + flex-direction: column; + gap: 20px; + background: var(--color-surface); + border-radius: 8px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 24px; +} + +swp-payment-method { + display: flex; + align-items: center; + gap: 16px; + padding: 16px; + background: var(--color-background-alt); + border-radius: 8px; +} + +swp-payment-icon { + width: 48px; + height: 32px; + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; +} + +swp-payment-icon i { + font-size: 24px; + color: var(--color-blue); +} + +swp-payment-info { + flex: 1; +} + +swp-payment-type { + font-size: 14px; + font-weight: 600; + color: var(--color-text); + margin-bottom: 2px; +} + +swp-payment-number { + font-size: 13px; + color: var(--color-text-secondary); + font-family: var(--font-mono); +} + +swp-payment-detail { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 0; + border-bottom: 1px solid var(--color-border); +} + +swp-payment-detail:last-of-type { + border-bottom: none; +} + +swp-payment-label { + font-size: 13px; + color: var(--color-text-secondary); +} + +swp-payment-value { + font-size: 14px; + font-weight: 500; + color: var(--color-text); +} + +swp-payment-value.highlight { + color: var(--color-teal); +} + +/* ========================================== + INVOICES + ========================================== */ +swp-invoices-card { + display: block; + background: var(--color-surface); + border-radius: 8px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); +} + +swp-invoices-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 20px; + border-bottom: 1px solid var(--color-border); +} + +swp-invoices-title { + font-size: 14px; + font-weight: 600; + color: var(--color-text); +} + +swp-invoice-status { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 10px; + font-size: 12px; + font-weight: 500; + border-radius: 4px; +} + +swp-invoice-status.paid { + background: color-mix(in srgb, var(--color-green) 15%, transparent); + color: var(--color-green); +} + +swp-invoice-status.pending { + background: color-mix(in srgb, var(--color-amber) 15%, transparent); + color: var(--color-amber); +} + +swp-invoice-status.overdue { + background: color-mix(in srgb, var(--color-red) 15%, transparent); + color: var(--color-red); +} + +swp-download-btn { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 6px 12px; + font-size: 12px; + font-weight: 500; + color: var(--color-teal); + background: transparent; + border: 1px solid var(--color-teal); + border-radius: 4px; + cursor: pointer; + transition: all 150ms ease; +} + +swp-download-btn:hover { + background: color-mix(in srgb, var(--color-teal) 10%, transparent); +} + +swp-download-btn i { + font-size: 14px; +} + +/* ========================================== + BUTTONS + ========================================== */ +swp-btn { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 18px; + font-size: 13px; + font-weight: 500; + font-family: var(--font-family); + border-radius: 6px; + cursor: pointer; + transition: all 150ms ease; + border: none; +} + +swp-btn i { + font-size: 18px; +} + +swp-btn.primary { + background: var(--color-teal); + color: white; +} + +swp-btn.primary:hover { + background: #00796b; +} + +swp-btn.secondary { + background: var(--color-surface); + border: 1px solid var(--color-border); + color: var(--color-text); +} + +swp-btn.secondary:hover { + background: var(--color-background-hover); +} + +swp-btn.outline { + background: transparent; + border: 1px solid var(--color-teal); + color: var(--color-teal); +} + +swp-btn.outline:hover { + background: color-mix(in srgb, var(--color-teal) 10%, transparent); +} + +/* ========================================== + EMPTY STATE + ========================================== */ +swp-empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 48px 24px; + text-align: center; +} + +swp-empty-state i { + font-size: 48px; + color: var(--color-text-secondary); + margin-bottom: 16px; + opacity: 0.5; +} + +swp-empty-state p { + font-size: 14px; + color: var(--color-text-secondary); +} + +/* ========================================== + RESPONSIVE + ========================================== */ +@media (max-width: 1024px) { + swp-plan-grid { + grid-template-columns: 1fr; + } + + swp-billing-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 768px) { + swp-page-container { + padding: 16px; + } + + swp-table-card { + overflow-x: auto; + } + + swp-table { + min-width: 600px; + } +} diff --git a/wwwroot/poc-dashboard copy.html b/wwwroot/poc-dashboard copy.html new file mode 100644 index 0000000..5f93f61 --- /dev/null +++ b/wwwroot/poc-dashboard copy.html @@ -0,0 +1,1385 @@ + + + + + + Dashboard - Salon OS + + + + + + + + + Dashboard + + + + + Mandag, 30. december 2024 + + + + Ny booking + + + + + + + + + 12 + Bookinger i dag + + + 4 gennemført, 2 i gang + + + + 8.450 kr + Forventet omsætning + + + +12% vs. gennemsnit + + + + 78% + Belægningsgrad + + + God kapacitet + + + + 3 + Kræver opmærksomhed + + + + + + + + + + + + AI Analyse + + + Godt i gang! 4 af 12 bookinger er gennemført. 2 er i gang nu, og 6 venter. + Forventet omsætning: 8.450 kr – allerede realiseret 2.150 kr. + Tip: Ida Rasmussen (11:30) har ikke bekræftet – overvej at sende en påmindelse. + + + + + + + + + + Dagens bookinger + + Se alle + + + + + Nu: 10:45 + + + + + + + 08:00 + 08:30 + + + + Herreklip + Thomas Berg + + + MH + Maria + + Gennemført + + + + + 08:30 + 09:00 + + + + Dameklip + Katrine Holm + + + AS + Anna + + Gennemført + + + + + 09:00 + 09:30 + + + + Skægtrimning + Mikkel Skov + + + PK + Peter + + Gennemført + + + + + 09:00 + 10:30 + + + + Dameklip + Farve + Sofie Nielsen + + + AS + Anna + + Gennemført + + + + + + 10:30 + 11:00 + + + + Herreklip + Jonas Petersen + + + MH + Maria + + I gang + + + + + 10:00 + 11:00 + + + + Føn + Styling + Rikke Dam + + + LJ + Louise + + I gang + + + + + + 11:00 + 12:00 + + + + Balayage + Emma Christensen + + + AS + Anna + + Bekræftet + + + + + 11:30 + 12:00 + + + + Dameklip + Ida Rasmussen + + + MH + Maria + + Afventer + + + + + 13:00 + 14:00 + + + + Farve + Føn + Louise Andersen + + + AS + Anna + + Bekræftet + + + + + 14:00 + 14:30 + + + + Herreklip + Anders Møller + + + PK + Peter + + Bekræftet + + + + + 15:30 + 16:30 + + + + Extensions + Julie Lund + + + LJ + Louise + + Bekræftet + + + + + + + + + + Opmærksomheder + + + + + + + + + + Aflyst booking + Mette Hansen aflyste kl. 15:00 – tid nu ledig + + Fyld tid + + + + + + + + Ubekræftet booking + Ida Rasmussen har ikke bekræftet kl. 11:30 + + Send påmindelse + + + + + + + + Gavekort udløber snart + GC-D2R4-6TY9 udløber om 3 uger (200 DKK) + + Se gavekort + + + + + + + + + + + + + Notifikationer + + Marker alle som læst + + + + + + + + + + Ny booking fra Emma Christensen til Balayage + + For 15 min. siden + + + + + + + + + + Ny anmeldelse – 5 stjerner fra Sofie Nielsen + + For 1 time siden + + + + + + + + + + Aflysning – Mette Hansen aflyste kl. 15:00 + + For 2 timer siden + + + + + + + + + + Bekræftet – Louise Andersen bekræftede kl. 13:00 + + I går kl. 18:30 + + + + + + + + + + + Denne uge + + + + + + 47 + Bookinger + + + 38.200 kr + Omsætning + + + 8 + Nye kunder + + + 72% + Gns. belægning + + + + + + + + + + Medarbejdere + + + + + + AS + + Anna Sørensen + Ledig til kl. 11:00 (Balayage) + + Ledig + + + + MH + + Maria Hansen + Herreklip med Jonas + + Optaget + + + + LJ + + Louise Jensen + Føn + Styling med Rikke + + Optaget + + + + PK + + Peter Kristensen + Ledig til kl. 14:00 + + Ledig + + + + + + + + + + diff --git a/wwwroot/poc-dashboard.html b/wwwroot/poc-dashboard.html index e0132bd..dda530a 100644 --- a/wwwroot/poc-dashboard.html +++ b/wwwroot/poc-dashboard.html @@ -6,891 +6,13 @@ Dashboard - Salon OS - + - - - - Dashboard - - + + + Dashboard + Mandag, 30. december 2024 @@ -899,18 +21,18 @@ Ny booking - - + + - 4 / 12 - Bookinger gennemført + 12 + Bookinger i dag - 8 tilbage i dag + 4 gennemført, 2 i gang diff --git a/wwwroot/poc-indstillinger.html b/wwwroot/poc-indstillinger.html new file mode 100644 index 0000000..7252e03 --- /dev/null +++ b/wwwroot/poc-indstillinger.html @@ -0,0 +1,2319 @@ + + + + + + Indstillinger - Salon Beauty + + + + + + + + + + Indstillinger + + + + + Gem alle ændringer + + + + + + + + + Virksomhed + + + + Åbningstider + + + + Kalender + + + + Online Booking + + + + Faktura & Kvittering + + + + Påmindelser + + + + + + + + + + Grundlæggende oplysninger + + + + + + Virksomhedsnavn + Salon Beauty + + + CVR-nummer + 12345678 + + + Adresse + Hovedgaden 123 + + + Postnummer + 2100 + + + By + København Ø + + + Telefon + 70 20 30 40 + + + Email + info@salonbeauty.dk + + + Website (valgfri) + https://salonbeauty.dk + + + + + + + + + + + + + Åbningstider + + + + + + Mandag + + Ja + Nej + + + + til + + + + + Tirsdag + + Ja + Nej + + + + til + + + + + Onsdag + + Ja + Nej + + + + til + + + + + Torsdag + + Ja + Nej + + + + til + + + + + Fredag + + Ja + Nej + + + + til + + + + + Lørdag + + Ja + Nej + + + + til + + + + + Søndag + + Ja + Nej + + Lukket + + + + + + + + + + + + + Kalenderindstillinger + + + + + + Standard visning + + + + + + Første dag i ugen + + + + + + Tidsinterval + + + + + + Vis weekender + + Ja + Nej + + + + Arbejdstid fra + + + + + + Arbejdstid til + + + + + + + + + + + + + +

Din booking-side er tilgængelig for kunder. Del linket på din hjemmeside, sociale medier eller i din email-signatur.

+ + + + + + + Booking URL + + + + + + + + + + + + + + + + + Booking-indstillinger + + + + + + Aktivér online booking + Tillad kunder at booke tider online + + + Ja + Nej + + + + + Tillad online aflysning + Kunder kan selv aflyse deres booking + + + Ja + Nej + + + + + + + + Book frem i tiden + + + + + + Minimum tid før booking + + + + + + Aflysningsfrist + + + + + + + + + + + + + +

Kvittering printes efter betaling i butikken. Faktura sendes til kunder der betaler senere.

+ + + + + + + Virksomhedsoplysninger + + + + + + Firmanavn (juridisk) + Salon Beauty ApS + + + CVR-nummer + 12345678 + + + Adresse + Hovedgaden 123, 2100 København Ø + + + + + + + + + + Bankoplysninger (kun faktura) + + + + + + Registreringsnr. + 1234 + + + Kontonummer + 12345678 + + + IBAN (valgfri) + DK00 0000 0000 0000 00 + + + MobilePay (valgfri) + 12345678 + + + Betalingsbetingelser + + + + + + + + + + + + + Vis på print + + + + + Vis CVR-nummer + + Ja + Nej + + + + Vis telefonnummer + + Ja + Nej + + + + Vis website + + Ja + Nej + + + + Vis logo + + Ja + Nej + + + + + + + + + + Tekster + + + + + + Header-tekst + Tak for dit besøg! + + +
+ Footer-tekst + Åbningstider: Man-Fre 9-18, Lør 10-14 +Vi glæder os til at se dig igen! +
+
+ Faktura-tekst + Ved betaling bedes fakturanummer angivet. +Tak for din handel! +
+ + + + + + + + + + + + + Email + + + + + + + + Ja + Nej + + + Bekræftelse + Sendes når en aftale er booket + + + Rediger + + + + + + Ja + Nej + + + Påmindelse + Sendes inden aftalen + + + Rediger + + + + + + Ja + Nej + + + Aflysning + Sendes når en aftale er aflyst + + + Rediger + + + + + + Ja + Nej + + + Flytning + Sendes når en aftale er flyttet + + + Rediger + + + + Email-påmindelser er gratis. + + + + + + + + + SMS + + + + + + + + Ja + Nej + + + + Bekræftelse online + (0,49 kr.) + + Sendes ved online booking + + + Rediger + + + + + + Ja + Nej + + + + Bekræftelse manuelt + (0,49 kr.) + + Ved oprettelse i kalender + + + Rediger + + + + + + Ja + Nej + + + + Påmindelse + (Premium) + + Sendes inden aftalen + + + Rediger + + + + + + + + Påmindelse sendes + + + + + + Sendes mellem + + + – + + + + + + + + + + + + + + +

Bekræftelse

+ SMS · Sendes ved booking + + + + + + + + + Besked + Hej {kunde_navn}! + +Din tid er bekræftet: +{behandling} +{dato} kl. {tid} + +Hos {medarbejder} +{firma_navn}, {firma_adresse} + +Vil du ændre din tid? {booking_link} + + + + Indsæt variabel + + kunde_navn + behandling + dato + tid + medarbejder + firma_navn + firma_adresse + firma_tlf + booking_link + + + + + Forhåndsvisning + + Hej Anna Jensen!

+ Din tid er bekræftet:
+ Dameklip + Føn
+ Torsdag d. 2. januar kl. 14:30

+ Hos Maria
+ Salon Beauty, Hovedgaden 123

+ Vil du ændre din tid? book.plantempus.dk/x7k2 + + + 312 tegn + 2 SMS (0,98 kr.) + + + + + + Annuller + + + Gem besked + + + + + + + + + +

Bekræftelse

+ Email · Sendes når en aftale er booket + + + + + + + + + + + + + Email emne + Din tid hos Salon Beauty er bekræftet + + + + Overskrift + Tid bekræftet! + + + + Velkomst + Hej {kunde_navn}, + + + + Brødtekst + Vi glæder os til at se dig! Her er detaljerne for din aftale. + + + + Knap tekst + Se eller ændr din tid + + + + Primær farve + + + #00897b + + + + + + Variabler + + kunde_navn + behandling + dato + tid + medarbejder + + + + + + + + + SB +

Tid bekræftet!

+

Salon Beauty

+ + + + Hej Anna, + + Vi glæder os til at se dig! Her er detaljerne for din aftale. + + + + + Dameklip + Føn + + + + Torsdag d. 2. januar 2025 + + + + Kl. 14:30 – 15:15 + + + + Hos Maria + + + + Hovedgaden 123, 2100 København Ø + + + + + Se eller ændr din tid + + + + + Salon Beauty +

Hovedgaden 123, 2100 København Ø

+

Tlf: 70 20 30 40 · info@salonbeauty.dk

+

+ Afmeld emails +

+ + + + + + + + Annuller + + + Gem skabelon + + + + + + + + diff --git a/wwwroot/poc-konto.html b/wwwroot/poc-konto.html new file mode 100644 index 0000000..35442d1 --- /dev/null +++ b/wwwroot/poc-konto.html @@ -0,0 +1,635 @@ + + + + + + Abonnement & Konto - Salon OS + + + + + + + + + + + + +

Abonnement & Konto

+

Administrer dit abonnement, brugere og betalingsinfo

+ + + + + + + + + Dit abonnement + + + + + + + Basis + 1-3 brugere + + 299 + kr/md + + + + + Op til 3 brugere + + + + Online booking + + + + Kalender & aftalestyring + + + + Kundekartotek + + + + SMS-påmindelser + + + + Skift til Basis + + + + + + + + Nuværende plan + + Pro + 4-8 brugere + + 599 + kr/md + + + + + Op til 8 brugere + + + + Alt fra Basis + + + + Lagerstyring + + + + Avancerede rapporter + + + + Gavekort & klippekort + + + + Prioriteret support + + + + Nuværende plan + + + + + + + + Til større saloner + + Enterprise + 8+ brugere + + Kontakt os + + + + + Ubegrænset antal brugere + + + + Alt fra Pro + + + + Flere lokationer + + + + Tilpasset integration + + + + Dedikeret kontaktperson + + + + SLA & uptime garanti + + + + Kontakt salg + + + + + + + + + + + Brugere + + + + + + 5 af 8 brugere + + + + + + + Inviter bruger + + + + + + + + Bruger + Rolle + Status + Sidst aktiv + + + + + + + + + MJ + + Maria Jensen + maria@salonbeauty.dk + + + + + Ejer + + + + + Aktiv + + + I dag, 14:32 + + + + + + + + + + + + + + AS + + Anna Sørensen + anna@salonbeauty.dk + + + + + Admin + + + + + Aktiv + + + I dag, 12:15 + + + + + + + + + + + + + + + + + LP + + Louise Pedersen + louise@salonbeauty.dk + + + + + Medarbejder + + + + + Aktiv + + + I går, 17:45 + + + + + + + + + + + + + + + + + KN + + Katrine Nielsen + katrine@salonbeauty.dk + + + + + Medarbejder + + + + + Aktiv + + + 27. dec, 09:30 + + + + + + + + + + + + + + + + + SH + + Sofie Hansen + sofie@salonbeauty.dk + + + + + Medarbejder + + + + + Invitation sendt + + + - + + + + + + + + + + + + + + + + + + + + + + Betaling & Fakturaer + + + + + + + + + + + + Visa + **** **** **** 4582 + + + + Skift + + + + + Betalingsfrekvens + Månedlig + + + + Næste betaling + 1. januar 2026 + + + + Beløb + 599,00 kr + + + + Kortudløb + 08/2027 + + + + + Skift til årlig betaling (spar 15%) + + + + + + + Faktura-historik + + + + + + Dato + Fakturanr. + Beløb + Status + + + + + + 1. dec 2025 + INV-2025-0012 + 599,00 kr + + + + + + + PDF + + + + + + 1. nov 2025 + INV-2025-0011 + 599,00 kr + + + + + + + PDF + + + + + + 1. okt 2025 + INV-2025-0010 + 599,00 kr + + + + + + + PDF + + + + + + 1. sep 2025 + INV-2025-0009 + 599,00 kr + + + + + + + PDF + + + + + + 1. aug 2025 + INV-2025-0008 + 599,00 kr + + + + + + + PDF + + + + + + + + + + + + + diff --git a/wwwroot/poc-layout copy.html b/wwwroot/poc-layout copy.html new file mode 100644 index 0000000..a24a9a2 --- /dev/null +++ b/wwwroot/poc-layout copy.html @@ -0,0 +1,2509 @@ + + + + + + Salon OS + + + + + + + + + + + Salon OS + + + + + + + + + Dashboard + + + Dashboard + + + + Kalender + + + + Kasse + + + + + + Data + + + Produkter & Lager + + + + Leverandører + + + + Kunder + + + + Medarbejdere + + + + + + Analyse + + + Statistik & Rapporter + + + + + + System + + + Indstillinger + + + + Abonnement & Konto + + + + + + + + Lås skærm + + + + + + + + + + ⌘K + + + + + + + 3 + + + + + + + MJ + + Maria Jensen + Administrator + + + + + + + + + + Dashboard + + Vælg et menupunkt i venstre side for at navigere til den ønskede sektion. +

+ Prøv f.eks. Produkter & Lager eller Leverandører. + + + + + + + + + + Min profil + + + + + + + + MJ + Maria Jensen + Administrator + maria@salon.dk + + + + Konto + + + Rediger profil + + + + + Skift adgangskode + + + + + Notifikationer + 3 ulæste + + + + Mine opgaver + 2 i dag + + + + + Udseende + + + + + + + + + + + + Support + + + Hjælp & Support + + + + + Om Salon OS + v2.1.0 + + + + + + + + Log ud + + + + + + + + Notifikationer + + Marker alle læst + + + + + + + + + + + + + + Ny booking + Maria Hansen har booket klipning kl. 14:00 + For 5 min siden + + + + + + + + + + Kunde feedback + 5 stjerner fra Jonas Petersen + For 15 min siden + + + + + + + + + + Misset opkald + +45 12 34 56 78 + For 1 time siden + + + + + + + + + + Ny mail + Fra: leverandoer@produkt.dk - Ordrebekræftelse + For 2 timer siden + + + + + + + + + + Ny besked i chat + Kunde: "Hej, kan jeg ændre min tid?" + For 3 timer siden + + + + + + + + + + Påmindelse + Bestil varer fra Wella inden fredag + I går + + + + + + + + + + + + Mine opgaver + + + + + + + + + + + + + I dag + 3 + + + + + + + + Ring til leverandør om ordre + + + + 10:00 + + + + + + + + + + Bestil shampoo fra Wella + + + + + + + + Opdater prisliste for 2025 + + + + Høj + + + + + + + + + + + + Denne uge + 2 + + + + + + + + Rengør og vedligehold udstyr + + + + Onsdag + + + + + + + + + + Medarbejdersamtale med Jonas + + + + Fredag + + + + 14:00 + + + + + + + + + + + + + + + + + + + Ny opgave + + + + + + Opgave + + + + + + + Dato + + + + Tid + + + + + + + Prioritet + + + + + + Synlighed + + + + Kun mig + + + + Alle + + + + + + + Noter + + + + + + Annuller + Gem opgave + + + + + + + + + + Skærm låst + Indtast PIN for at fortsætte + + Låst kl. 14:32 + + + + + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + + 0 + + + + + + Indtast 4 cifre for at låse op + + + + + + + + + diff --git a/wwwroot/poc-layout.html b/wwwroot/poc-layout.html index a24a9a2..362e29b 100644 --- a/wwwroot/poc-layout.html +++ b/wwwroot/poc-layout.html @@ -6,6 +6,7 @@ Salon OS +