diff --git a/wwwroot/poc-detail-drawer.html b/wwwroot/poc-detail-drawer.html
index b7d72fe..3ae375d 100644
--- a/wwwroot/poc-detail-drawer.html
+++ b/wwwroot/poc-detail-drawer.html
@@ -652,6 +652,10 @@
background: var(--color-text-secondary);
}
+ .tab-indicator.purple {
+ background: #8b5cf6;
+ }
+
/* Tab Content Container */
swp-journal-tab-content {
display: none;
@@ -752,6 +756,11 @@
background: color-mix(in srgb, var(--color-teal) 15%, var(--b-mix));
}
+ swp-journal-entry-type.analyse {
+ color: #7c3aed;
+ background: color-mix(in srgb, #8b5cf6 15%, var(--b-mix));
+ }
+
swp-journal-entry-date {
font-size: 12px;
color: var(--color-text-secondary);
@@ -1940,6 +1949,111 @@
outline: none;
border-color: var(--color-teal);
}
+
+ /* ==========================================
+ ANALYSE PANEL (extends add-note styles)
+ ========================================== */
+ swp-analyse-panel {
+ position: fixed;
+ top: 0;
+ right: 340px;
+ bottom: 0;
+ width: 440px;
+ background: var(--color-surface);
+ border-left: 1px solid var(--color-border);
+ box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+ transform: translateX(0);
+ visibility: hidden;
+ transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+ visibility 0ms 250ms;
+ display: flex;
+ flex-direction: column;
+ z-index: 980;
+ }
+
+ swp-analyse-panel.open {
+ transform: translateX(-100%);
+ visibility: visible;
+ transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+ visibility 0ms 0ms;
+ }
+
+ swp-analyse-panel input[type="text"] {
+ padding: 10px 12px;
+ font-size: 13px;
+ border: 1px solid var(--color-border);
+ border-radius: 6px;
+ background: var(--color-surface);
+ }
+
+ swp-analyse-panel input[type="text"]:focus {
+ outline: none;
+ border-color: #8b5cf6;
+ }
+
+ swp-analyse-panel select {
+ padding: 10px 12px;
+ font-size: 13px;
+ border: 1px solid var(--color-border);
+ border-radius: 6px;
+ background: var(--color-surface);
+ cursor: pointer;
+ }
+
+ swp-analyse-panel select:focus {
+ outline: none;
+ border-color: #8b5cf6;
+ }
+
+ swp-analyse-panel textarea {
+ width: 100%;
+ min-height: 80px;
+ padding: 12px;
+ font-family: inherit;
+ font-size: 13px;
+ border: 1px solid var(--color-border);
+ border-radius: 6px;
+ background: var(--color-surface);
+ resize: vertical;
+ line-height: 1.5;
+ }
+
+ swp-analyse-panel textarea:focus {
+ outline: none;
+ border-color: #8b5cf6;
+ }
+
+ /* Analyse tags */
+ swp-add-note-tag-option[data-tag="analyse"].selected {
+ background: color-mix(in srgb, #8b5cf6 15%, var(--b-mix));
+ border-color: #8b5cf6;
+ color: #7c3aed;
+ }
+ swp-add-note-tag-option[data-tag="hovedbund"].selected {
+ background: color-mix(in srgb, var(--b-color-amber) 15%, var(--b-mix));
+ border-color: var(--b-color-amber);
+ color: #b45309;
+ }
+ swp-add-note-tag-option[data-tag="analyse"].selected::before {
+ background: #8b5cf6;
+ border-color: #8b5cf6;
+ }
+ swp-add-note-tag-option[data-tag="hovedbund"].selected::before {
+ background: var(--b-color-amber);
+ border-color: var(--b-color-amber);
+ }
+
+ /* Journal tag for analyse */
+ swp-journal-tag.tag-analyse {
+ background: color-mix(in srgb, #8b5cf6 15%, var(--b-mix));
+ border-color: #8b5cf6;
+ color: #7c3aed;
+ }
+ swp-journal-tag.tag-hovedbund {
+ background: color-mix(in srgb, var(--b-color-amber) 15%, var(--b-mix));
+ border-color: var(--b-color-amber);
+ color: #b45309;
+ }
@@ -1998,7 +2112,7 @@
Noter
Farveformler
- Analyse
+ Analyse
@@ -2132,6 +2246,66 @@
+
+
+
+ Hår & hovedbund (analyse)
+ Struktureret analyse af hår og hovedbund. Kan blive til advarsel.
+ + Tilføj analyse
+
+
+
+
+
+
+ Analyse
+
+
+ (Udfyld felter...)
+
+ I dag
+
+
+ 
+ Alle
+
+
+
+
+
+
+
+ Analyse
+
+ Hovedbund
+ Sensitiv
+
+ 🗑
+
+
+ • Hovedbund: Let irriteret
+ • Hår: Medium · Bølget
+ • Porøsitet: Medium
+ • Kemisk beh.: Nej
+ Let rødme ved hårgrænsen. Anbefalet parfumefri shampoo.
+
+
+ 2. sep 2025 · Af: Nina
+
+
+
+ Alle
+
+
+ 
+ Advarsel
+
+
+
+
+
+
+
@@ -2294,6 +2468,130 @@
+
+
+
+ Shampoo & hovedbund-analyse
+ ✕
+
+
+
+ Hurtige valg + bemærkning. Kan blive til "sticky warning".
+
+
+
+
+ Hovedbund (tilstand)
+
+
+
+ Irritation
+
+
+
+
+
+
+
+ Hår (tykkelse)
+
+
+
+ Hår (struktur)
+
+
+
+
+
+
+
+ Porøsitet
+
+
+
+ Tidligere kemisk behandling?
+
+
+
+
+
+
+
+ Anvendt shampoo
+
+
+
+ Anbefalet hjemmepleje
+
+
+
+
+
+
+ Bemærkning
+
+
+
+
+
+
+ Gør til advarsel på kundekort?
+
+ Brug "Ja" ved fx allergi/sensitivitet.
+
+
+ Tags
+
+ Analyse
+ Hovedbund
+ Sensitiv
+ Allergi
+
+
+
+
+
+
+ Annuller
+ Gem analyse
+
+
+
@@ -2642,6 +2940,7 @@
document.getElementById('journalLink').classList.remove('panel-open');
closeAddNote();
closeFarveformel();
+ closeAnalyse();
}
function switchJournalTab(tabName) {
@@ -2652,9 +2951,11 @@
// Update tab content
document.getElementById('tabNoter').classList.toggle('active', tabName === 'noter');
document.getElementById('tabFarveformler').classList.toggle('active', tabName === 'farveformler');
+ document.getElementById('tabAnalyse').classList.toggle('active', tabName === 'analyse');
// Close any open panels
closeAddNote();
closeFarveformel();
+ closeAnalyse();
}
function openAddNote() {
@@ -2958,6 +3259,145 @@
originalCloseAddNote();
activePanel = null;
};
+
+ // ==========================================
+ // ANALYSE PANEL
+ // ==========================================
+
+ // Analyse form elements
+ const anHovedbund = document.getElementById('anHovedbund');
+ const anIrritation = document.getElementById('anIrritation');
+ const anHaarTykkelse = document.getElementById('anHaarTykkelse');
+ const anHaarStruktur = document.getElementById('anHaarStruktur');
+ const anPorositet = document.getElementById('anPorositet');
+ const anKemisk = document.getElementById('anKemisk');
+ const anShampoo = document.getElementById('anShampoo');
+ const anHjemmepleje = document.getElementById('anHjemmepleje');
+ const anBemaerkning = document.getElementById('anBemaerkning');
+ const anAdvarsel = document.getElementById('anAdvarsel');
+
+ // Analyse preview elements
+ const previewEntryAnalyse = document.getElementById('previewEntryAnalyse');
+ const previewTextAnalyse = document.getElementById('previewTextAnalyse');
+ const previewTagsAnalyse = document.getElementById('previewTagsAnalyse');
+
+ function openAnalyse() {
+ document.getElementById('analysePanel').classList.add('open');
+ activePanel = 'analyse';
+ showAnalysePreview();
+ }
+
+ function closeAnalyse() {
+ document.getElementById('analysePanel').classList.remove('open');
+ hideAnalysePreview();
+ resetAnalyseForm();
+ activePanel = null;
+ }
+
+ function showAnalysePreview() {
+ previewEntryAnalyse.classList.remove('hidden');
+ updateAnalysePreview();
+ updateAnalysePreviewTags();
+ }
+
+ function hideAnalysePreview() {
+ previewEntryAnalyse.classList.add('hidden');
+ }
+
+ function updateAnalysePreview() {
+ const lines = [];
+
+ if (anHovedbund.value) {
+ lines.push(`• Hovedbund: ${anHovedbund.value}`);
+ }
+ if (anIrritation.value) {
+ lines.push(`• Irritation: ${anIrritation.value}`);
+ }
+ if (anHaarTykkelse.value || anHaarStruktur.value) {
+ const haarParts = [];
+ if (anHaarTykkelse.value) haarParts.push(anHaarTykkelse.value);
+ if (anHaarStruktur.value) haarParts.push(anHaarStruktur.value);
+ lines.push(`• Hår: ${haarParts.join(' · ')}`);
+ }
+ if (anPorositet.value) {
+ lines.push(`• Porøsitet: ${anPorositet.value}`);
+ }
+ if (anKemisk.value) {
+ lines.push(`• Kemisk beh.: ${anKemisk.value}`);
+ }
+ if (anShampoo.value) {
+ lines.push(`• Shampoo: ${anShampoo.value}`);
+ }
+ if (anHjemmepleje.value) {
+ lines.push(`• Hjemmepleje: ${anHjemmepleje.value}`);
+ }
+ if (anBemaerkning.value) {
+ lines.push(`
${anBemaerkning.value}`);
+ }
+
+ previewTextAnalyse.innerHTML = lines.length > 0 ? lines.join('
') : '(Udfyld felter...)';
+ }
+
+ function updateAnalysePreviewTags() {
+ const analysePanelTags = document.querySelectorAll('#analysePanel swp-add-note-tag-option.selected');
+ previewTagsAnalyse.innerHTML = '';
+ analysePanelTags.forEach(tag => {
+ const tagEl = document.createElement('swp-journal-tag');
+ tagEl.textContent = tag.textContent;
+ tagEl.classList.add('tag-' + tag.dataset.tag);
+ previewTagsAnalyse.appendChild(tagEl);
+ });
+ }
+
+ function resetAnalyseForm() {
+ anHovedbund.value = '';
+ anIrritation.value = '';
+ anHaarTykkelse.value = '';
+ anHaarStruktur.value = '';
+ anPorositet.value = '';
+ anKemisk.value = '';
+ anShampoo.value = '';
+ anHjemmepleje.value = '';
+ anBemaerkning.value = '';
+ anAdvarsel.value = 'Nej';
+
+ // Reset tags - only "Analyse" selected by default
+ document.querySelectorAll('#analysePanel swp-add-note-tag-option').forEach(tag => {
+ if (tag.dataset.tag === 'analyse') {
+ tag.classList.add('selected');
+ } else {
+ tag.classList.remove('selected');
+ }
+ });
+ }
+
+ function saveAnalyse() {
+ // In a real app, this would save to backend
+ alert('Analyse gemt!');
+ closeAnalyse();
+ }
+
+ // Add event listeners for analyse form fields
+ [anHovedbund, anIrritation, anHaarTykkelse, anHaarStruktur, anPorositet, anKemisk, anShampoo, anHjemmepleje, anBemaerkning, anAdvarsel].forEach(el => {
+ el.addEventListener('input', () => {
+ if (activePanel === 'analyse') {
+ updateAnalysePreview();
+ }
+ });
+ el.addEventListener('change', () => {
+ if (activePanel === 'analyse') {
+ updateAnalysePreview();
+ }
+ });
+ });
+
+ // Add tag toggle listeners for analyse panel
+ document.querySelectorAll('#analysePanel swp-add-note-tag-option').forEach(tag => {
+ tag.onclick = () => {
+ tag.classList.toggle('selected');
+ updateAnalysePreviewTags();
+ };
+ });