diff --git a/wwwroot/poc-customer-detail.html b/wwwroot/poc-customer-detail.html index 20e1bf9..fce68e1 100644 --- a/wwwroot/poc-customer-detail.html +++ b/wwwroot/poc-customer-detail.html @@ -1281,6 +1281,559 @@ swp-attendance-segment.noshow { background: var(--color-red); } + + /* ========================================== + JOURNAL - NEW LAYOUT + ========================================== */ + + /* Journal Mini Tabs */ + swp-journal-mini-tabs { + display: flex; + gap: 8px; + margin-bottom: 20px; + } + + swp-journal-mini-tab { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 16px; + font-size: 13px; + font-weight: 500; + color: var(--color-text-secondary); + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: 8px; + cursor: pointer; + transition: all 150ms ease; + } + + swp-journal-mini-tab:hover { + border-color: var(--color-text-secondary); + } + + swp-journal-mini-tab.active { + border-color: var(--color-teal); + color: var(--color-teal); + background: color-mix(in srgb, var(--color-teal) 5%, white); + } + + swp-journal-mini-tab .tab-dot { + width: 8px; + height: 8px; + border-radius: 50%; + } + + swp-journal-mini-tab .tab-dot.blue { background: var(--color-blue); } + swp-journal-mini-tab .tab-dot.amber { background: var(--color-amber); } + swp-journal-mini-tab .tab-dot.purple { background: var(--color-purple); } + + swp-journal-mini-tab .tab-count { + font-size: 11px; + padding: 2px 6px; + background: var(--color-background); + border-radius: 10px; + color: var(--color-text-secondary); + } + + /* Journal Columns */ + swp-journal-columns { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + } + + swp-journal-column { + display: flex; + flex-direction: column; + } + + swp-journal-column-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 12px; + padding-bottom: 12px; + border-bottom: 1px solid var(--color-border); + } + + swp-journal-column-title { + display: flex; + align-items: center; + gap: 8px; + font-size: 13px; + font-weight: 600; + color: var(--color-text); + } + + swp-journal-column-title .col-dot { + width: 8px; + height: 8px; + border-radius: 50%; + } + + swp-journal-column-title .col-dot.amber { background: var(--color-amber); } + swp-journal-column-title .col-dot.purple { background: var(--color-purple); } + + swp-journal-column-add { + font-size: 12px; + color: var(--color-teal); + cursor: pointer; + } + + swp-journal-column-add:hover { + text-decoration: underline; + } + + /* Journal Entry - New Style */ + swp-journal-entry-new { + display: block; + padding: 14px; + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: 8px; + margin-bottom: 10px; + transition: border-color 150ms ease; + } + + swp-journal-entry-new:hover { + border-color: var(--color-text-secondary); + } + + swp-journal-entry-new:last-child { + margin-bottom: 0; + } + + swp-journal-entry-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 10px; + } + + swp-journal-entry-type-new { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 10px; + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.3px; + border-radius: 4px; + } + + swp-journal-entry-type-new.farveformel { + background: color-mix(in srgb, var(--color-amber) 15%, white); + color: #b8860b; + } + + swp-journal-entry-type-new.analyse { + background: color-mix(in srgb, var(--color-purple) 15%, white); + color: var(--color-purple); + } + + swp-journal-entry-type-new.note { + background: color-mix(in srgb, var(--color-blue) 15%, white); + color: var(--color-blue); + } + + swp-journal-entry-type-new.advarsel { + background: color-mix(in srgb, var(--color-red) 15%, white); + color: var(--color-red); + } + + swp-journal-entry-tags-new { + display: flex; + gap: 6px; + } + + swp-journal-tag-new { + display: inline-block; + padding: 3px 8px; + font-size: 10px; + font-weight: 500; + border-radius: 4px; + background: var(--color-background); + color: var(--color-text-secondary); + } + + swp-journal-tag-new.sensitiv { + background: color-mix(in srgb, var(--color-purple) 12%, white); + color: var(--color-purple); + } + + swp-journal-tag-new.allergi { + background: color-mix(in srgb, var(--color-red) 12%, white); + color: var(--color-red); + } + + swp-journal-entry-delete-new { + font-size: 14px; + color: var(--color-text-secondary); + cursor: pointer; + opacity: 0; + transition: opacity 150ms ease; + } + + swp-journal-entry-new:hover swp-journal-entry-delete-new { + opacity: 0.6; + } + + swp-journal-entry-delete-new:hover { + opacity: 1; + color: var(--color-red); + } + + swp-journal-entry-body { + font-size: 13px; + line-height: 1.6; + color: var(--color-text); + } + + swp-journal-entry-body .mono { + font-family: var(--font-mono); + font-size: 12px; + background: var(--color-background); + padding: 1px 4px; + border-radius: 3px; + } + + swp-journal-entry-body .label { + color: var(--color-text-secondary); + } + + swp-journal-entry-footer-new { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 12px; + padding-top: 10px; + border-top: 1px solid var(--color-border); + } + + swp-journal-entry-date-new { + font-size: 12px; + color: var(--color-text-secondary); + } + + swp-journal-entry-icons-new { + display: flex; + align-items: center; + gap: 12px; + } + + swp-journal-entry-icon { + display: inline-flex; + align-items: center; + gap: 4px; + font-size: 11px; + color: var(--color-text-secondary); + } + + swp-journal-entry-icon img { + width: 14px; + height: 14px; + opacity: 0.5; + } + + swp-journal-entry-icon.warning { + color: var(--color-amber); + } + + swp-journal-entry-icon.warning img { + opacity: 1; + } + + /* Noter Section (full width above columns) */ + swp-journal-noter-section { + display: block; + margin-bottom: 24px; + } + + swp-journal-noter-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 12px; + } + + /* Kundeprofil i Journal */ + swp-journal-profile { + display: block; + margin-top: 24px; + padding-top: 20px; + border-top: 1px solid var(--color-border); + } + + swp-journal-profile-header { + display: flex; + align-items: center; + gap: 8px; + font-size: 12px; + font-weight: 600; + color: var(--color-text-secondary); + margin-bottom: 12px; + cursor: pointer; + } + + swp-journal-profile-header .arrow { + transition: transform 150ms ease; + } + + swp-journal-profile-header.collapsed .arrow { + transform: rotate(-90deg); + } + + swp-journal-profile swp-profile-boxes { + transition: all 200ms ease; + } + + swp-journal-profile swp-profile-boxes.collapsed { + display: none; + } + + /* ========================================== + ACTIVITY / AUDIT LOG + ========================================== */ + + /* Activity Filters */ + swp-activity-filters { + display: flex; + gap: 8px; + margin-bottom: 20px; + flex-wrap: wrap; + } + + swp-activity-filter { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 6px 12px; + font-size: 12px; + font-weight: 500; + color: var(--color-text-secondary); + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: 20px; + cursor: pointer; + transition: all 150ms ease; + } + + swp-activity-filter:hover { + border-color: var(--color-text-secondary); + } + + swp-activity-filter.active { + background: var(--color-teal); + color: white; + border-color: var(--color-teal); + } + + swp-activity-filter .filter-icon { + font-size: 11px; + } + + /* Activity Timeline */ + swp-activity-timeline { + display: block; + position: relative; + } + + /* Date Group */ + swp-activity-date-group { + display: block; + margin-bottom: 24px; + } + + swp-activity-date-header { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 12px; + font-size: 12px; + font-weight: 600; + color: var(--color-text-secondary); + text-transform: uppercase; + letter-spacing: 0.5px; + } + + swp-activity-date-header::after { + content: ''; + flex: 1; + height: 1px; + background: var(--color-border); + } + + /* Activity Item */ + swp-activity-item { + display: flex; + gap: 12px; + padding: 12px 0; + border-bottom: 1px solid var(--color-border); + } + + swp-activity-item:last-child { + border-bottom: none; + } + + swp-activity-icon { + width: 32px; + height: 32px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + flex-shrink: 0; + } + + swp-activity-icon.system { + background: var(--color-background); + color: var(--color-text-secondary); + } + + swp-activity-icon.customer { + background: color-mix(in srgb, var(--color-blue) 15%, white); + color: var(--color-blue); + } + + swp-activity-icon.employee { + background: color-mix(in srgb, var(--color-teal) 15%, white); + color: var(--color-teal); + } + + swp-activity-icon.booking { + background: color-mix(in srgb, var(--color-purple) 15%, white); + color: var(--color-purple); + } + + swp-activity-icon.communication { + background: color-mix(in srgb, var(--color-amber) 15%, white); + color: #b8860b; + } + + swp-activity-icon.payment { + background: color-mix(in srgb, var(--color-green) 15%, white); + color: var(--color-green); + } + + swp-activity-icon.warning { + background: color-mix(in srgb, var(--color-red) 15%, white); + color: var(--color-red); + } + + swp-activity-content { + flex: 1; + min-width: 0; + } + + swp-activity-title { + display: block; + font-size: 13px; + color: var(--color-text); + margin-bottom: 2px; + } + + swp-activity-title strong { + font-weight: 600; + } + + swp-activity-title .highlight { + color: var(--color-teal); + font-weight: 500; + } + + swp-activity-title .old-value { + color: var(--color-text-secondary); + text-decoration: line-through; + } + + swp-activity-title .new-value { + color: var(--color-teal); + } + + swp-activity-meta { + display: flex; + align-items: center; + gap: 8px; + font-size: 11px; + color: var(--color-text-secondary); + } + + swp-activity-time { + font-family: var(--font-mono); + } + + swp-activity-actor { + display: inline-flex; + align-items: center; + gap: 4px; + } + + swp-activity-actor::before { + content: '·'; + } + + swp-activity-badge { + display: inline-block; + padding: 2px 6px; + font-size: 9px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.3px; + border-radius: 3px; + margin-left: 6px; + } + + swp-activity-badge.auto { + background: var(--color-background); + color: var(--color-text-secondary); + } + + swp-activity-badge.online { + background: color-mix(in srgb, var(--color-blue) 15%, white); + color: var(--color-blue); + } + + swp-activity-badge.manual { + background: color-mix(in srgb, var(--color-teal) 15%, white); + color: var(--color-teal); + } + + /* Activity Details (expandable) */ + swp-activity-details { + display: block; + margin-top: 8px; + padding: 10px 12px; + background: var(--color-background-alt); + border-radius: 6px; + font-size: 12px; + color: var(--color-text-secondary); + } + + swp-activity-details code { + font-family: var(--font-mono); + font-size: 11px; + background: var(--color-background); + padding: 1px 4px; + border-radius: 3px; + } + + /* Load More */ + swp-activity-load-more { + display: block; + text-align: center; + padding: 16px; + font-size: 13px; + color: var(--color-teal); + cursor: pointer; + border-top: 1px solid var(--color-border); + margin-top: 12px; + } + + swp-activity-load-more:hover { + text-decoration: underline; + }
@@ -1350,6 +1903,7 @@