ct/bmc_hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
daf2f29471
bmc_hub/mine_3_anbefalinger.html

325 lines
16 KiB
HTML
Raw Normal View History

feat: improve billing, sag, orders, and email workflows
2026-03-23 20:35:15 +01:00
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mine 3 anbefalinger – Sag Kommentarer</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<style>
:root {
--accent: #0f4c75;
--bg-card: #ffffff;
--bg-page: #f4f6f8;
}
body { background: var(--bg-page); font-size: 0.875rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.container { max-width: 860px; }
h2.proposal-title {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent);
font-weight: 700;
border-bottom: 2px solid var(--accent);
padding-bottom: 4px;
margin-bottom: 6px;
}
.proposal-desc { font-size: 0.78rem; color: #666; margin-bottom: 12px; }
/* =====================================================
MIN ANBEFALING #1: Linear / Notion Thread
- Lille initial-cirkel + navn + tid på én linje
- Tekst nedenunder med indent (ingen boks)
- Absolut mindst mulig vertikalt spild
===================================================== */
.ln-thread { background: var(--bg-card); border: 1px solid #e2e6ea; border-radius: 6px; overflow: hidden; }
.ln-msg { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; }
.ln-msg:last-child { border-bottom: none; }
.ln-msg.system-msg { background: #f8fbff; }
.ln-head { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.ln-avatar {
width: 22px; height: 22px; border-radius: 50%;
background: var(--accent); color: white;
font-size: 0.65rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ln-avatar.sys { background: #6c757d; }
.ln-name { font-weight: 600; font-size: 0.82rem; color: #222; }
.ln-time { font-size: 0.72rem; color: #aaa; margin-left: auto; }
.ln-body { margin-left: 29px; color: #333; line-height: 1.45; }
/* Input */
.ln-input { border-top: 1px solid #e2e6ea; background: #fafafa; padding: 8px 12px; }
.ln-input textarea { resize: none; font-size: 0.875rem; border-radius: 4px; }
/* =====================================================
MIN ANBEFALING #2: Jira Activity Log
- INGEN avatarer. Bare tekst-rækker med tynd venstre-border.
- Tekniker = blå accent, System = grå, Kunde = default
- Ekstrem informationsdensitet
===================================================== */
.jira-log { background: var(--bg-card); border: 1px solid #ddd; border-radius: 4px; }
.jira-row { display: flex; gap: 0; border-bottom: 1px solid #f2f2f2; }
.jira-row:last-child { border-bottom: none; }
.jira-stripe { width: 3px; flex-shrink: 0; background: #dee2e6; }
.jira-stripe.tech { background: var(--accent); }
.jira-stripe.sys { background: #adb5bd; }
.jira-inner { padding: 5px 10px; flex-grow: 1; }
.jira-meta { font-size: 0.72rem; color: #888; line-height: 1.2; }
.jira-meta strong { color: #333; }
.jira-text { color: #222; line-height: 1.4; margin-top: 1px; }
/* Input */
.jira-input { border-top: 1px solid #ddd; background: #fafafa; padding: 8px; }
.jira-input textarea { resize: none; font-size: 0.875rem; }
/* =====================================================
MIN ANBEFALING #3: Flat Inbox (Zendesk/Freshdesk)
- Kunde-beskeder i lysere boks venstre
- Tekniker-svar højre-aligned i lysere boks
- Zero chrome: ingen card-headers, ingen colours
- Eneste differentieringsmarkør: alignment + subtil bg
===================================================== */
.inbox-feed { background: var(--bg-card); border: 1px solid #e2e6ea; border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ib-msg { max-width: 78%; }
.ib-msg.left { align-self: flex-start; }
.ib-msg.right { align-self: flex-end; }
.ib-bubble {
padding: 6px 10px;
border-radius: 6px;
line-height: 1.45;
color: #222;
}
.ib-msg.left .ib-bubble { background: #f0f4f7; border: 1px solid #dde4ed; }
.ib-msg.right .ib-bubble { background: #e8f0f7; border: 1px solid #c5d8ea; }
.ib-msg.sys .ib-bubble { background: #f4f4f4; border: 1px solid #ddd; font-style: italic; color: #666; font-size: 0.8rem; text-align: center; }
.ib-meta { font-size: 0.7rem; color: #999; margin-top: 2px; padding: 0 2px; }
.ib-msg.right .ib-meta { text-align: right; }
.inbox-input { border-top: 1px solid #e2e6ea; background: #fafafa; padding: 8px 12px; border-radius: 0 0 6px 6px; }
.inbox-input textarea { resize: none; font-size: 0.875rem; }
</style>
</head>
<body>
<div class="container mt-4 pb-5">
<div class="mb-4">
<h1 style="font-size:1.2rem; color: var(--accent); font-weight:700;">Mine 3 anbefalinger til sag-kommentarer</h1>
<p class="text-muted" style="font-size:0.82rem;">Alle 3 er baseret på den faktiske Jinja-struktur i <code>detail.html</code> og er klar til at erstatte det eksisterende kort-layout direkte.</p>
</div>
<!-- =============================================
FORSLAG 1: LINEAR / NOTION THREAD
============================================= -->
<h2 class="proposal-title">Anbefaling 1 — Thread (Linear/Notion style) ⭐ min favorit</h2>
<p class="proposal-desc">Lille initial-cirkel + navn + tid på én linje. Tekst nedenunder med kun et fast indent. Ingen bokse, ingen farvegte headers. Virker kompakt men er stadig behagelig at læse.</p>
<div class="ln-thread">
<!-- Kommentar 1: kunde -->
<div class="ln-msg">
<div class="ln-head">
<div class="ln-avatar">JJ</div>
<span class="ln-name">Jens Jensen</span>
<span class="ln-time">21/03-2026 10:00</span>
</div>
<div class="ln-body">Vi har et problem med vores to printere på kontoret — de melder offline på printserveren siden fredag.</div>
</div>
<!-- Kommentar 2: tekniker -->
<div class="ln-msg">
<div class="ln-head">
<div class="ln-avatar">CT</div>
<span class="ln-name">Christian Thomas</span>
<span class="ln-time">21/03-2026 10:15</span>
</div>
<div class="ln-body">Jeg kan se at port 4 &amp; 5 på switchen var nede kort i nat. Har I prøvet at genstarte printerne så de fanger ny DHCP-adresse?</div>
</div>
<!-- Kommentar 3: system -->
<div class="ln-msg system-msg">
<div class="ln-head">
<div class="ln-avatar sys"><i class="bi bi-gear" style="font-size:0.6rem;"></i></div>
<span class="ln-name" style="color:#6c757d;">System</span>
<span class="ln-time">21/03-2026 10:20</span>
</div>
<div class="ln-body" style="color:#666; font-style:italic;">Status ændret fra <strong>Åben</strong> til <strong>Under behandling</strong></div>
</div>
<!-- Kommentar 4: kunde -->
<div class="ln-msg">
<div class="ln-head">
<div class="ln-avatar">JJ</div>
<span class="ln-name">Jens Jensen</span>
<span class="ln-time">21/03-2026 10:35</span>
</div>
<div class="ln-body">HP'en virker stadig ikke - den anden fik vi op at køre.</div>
</div>
<!-- Input -->
<div class="ln-input">
<div class="input-group input-group-sm">
<textarea class="form-control" rows="2" placeholder="Skriv en kommentar..."></textarea>
<button class="btn btn-primary"><i class="bi bi-send"></i></button>
</div>
</div>
</div>
<!-- Jinja kode hint -->
<details class="mt-2 mb-4">
<summary class="text-muted small" style="cursor:pointer;">Vis Jinja-kode til at erstatte det nuværende</summary>
<pre class="bg-light border rounded p-2 small mt-2" style="overflow-x:auto;">&lt;div class="ln-thread"&gt;
{% for comment in comments %}
&lt;div class="ln-msg {% if comment.er_system_besked %}system-msg{% endif %}"&gt;
&lt;div class="ln-head"&gt;
&lt;div class="ln-avatar {% if comment.er_system_besked %}sys{% endif %}"&gt;
{% if comment.er_system_besked %}&lt;i class="bi bi-gear"&gt;&lt;/i&gt;
{% else %}{{ comment.forfatter[:2]|upper }}{% endif %}
&lt;/div&gt;
&lt;span class="ln-name"&gt;{{ comment.forfatter }}&lt;/span&gt;
&lt;span class="ln-time"&gt;{{ comment.created_at.strftime('%d/%m-%Y %H:%M') }}&lt;/span&gt;
&lt;/div&gt;
&lt;div class="ln-body"&gt;{{ comment.indhold|replace('\n','&lt;br&gt;')|safe }}&lt;/div&gt;
&lt;/div&gt;
{% endfor %}
&lt;div class="ln-input"&gt;...form...&lt;/div&gt;
&lt;/div&gt;</pre>
</details>
<!-- =============================================
FORSLAG 2: JIRA ACTIVITY LOG
============================================= -->
<h2 class="proposal-title">Anbefaling 2 — Activity Log (Jira style)</h2>
<p class="proposal-desc">Ingen avatarer. Kun tekst-rækker. En 3px venstre-streg i blå viser hvem der er tekniker vs. hvid/grå for alle andre. Højeste mulige informationsdensitet — ligner en IT-log.</p>
<div class="jira-log">
<div class="jira-row">
<div class="jira-stripe"></div>
<div class="jira-inner">
<div class="jira-meta"><strong>Jens Jensen</strong> · 21/03-2026 kl. 10:00</div>
<div class="jira-text">Vi har et problem med vores to printere på kontoret — de melder offline på printserveren siden fredag.</div>
</div>
</div>
<div class="jira-row">
<div class="jira-stripe tech"></div>
<div class="jira-inner">
<div class="jira-meta"><strong>Christian Thomas</strong> <span class="badge bg-primary" style="font-size:0.62rem;">BMC</span> · 21/03-2026 kl. 10:15</div>
<div class="jira-text">Jeg kan se at port 4 &amp; 5 på switchen var nede kort i nat. Har I prøvet at genstarte printerne?</div>
</div>
</div>
<div class="jira-row">
<div class="jira-stripe sys"></div>
<div class="jira-inner">
<div class="jira-meta"><strong>System</strong> · 21/03-2026 kl. 10:20</div>
<div class="jira-text" style="font-style:italic; color:#666;">Status ændret: Åben → Under behandling</div>
</div>
</div>
<div class="jira-row">
<div class="jira-stripe"></div>
<div class="jira-inner">
<div class="jira-meta"><strong>Jens Jensen</strong> · 21/03-2026 kl. 10:35</div>
<div class="jira-text">HP'en virker stadig ikke — den anden fick vi op at køre.</div>
</div>
</div>
<div class="jira-input">
<div class="input-group input-group-sm">
<textarea class="form-control" rows="2" placeholder="Skriv en kommentar..."></textarea>
<button class="btn btn-primary"><i class="bi bi-send"></i></button>
</div>
</div>
</div>
<details class="mt-2 mb-4">
<summary class="text-muted small" style="cursor:pointer;">Vis Jinja-kode til at erstatte det nuværende</summary>
<pre class="bg-light border rounded p-2 small mt-2" style="overflow-x:auto;">&lt;div class="jira-log"&gt;
{% for comment in comments %}
&lt;div class="jira-row"&gt;
&lt;div class="jira-stripe {% if comment.er_system_besked %}sys
{%- elif comment.er_intern %}tech{% endif %}"&gt;&lt;/div&gt;
&lt;div class="jira-inner"&gt;
&lt;div class="jira-meta"&gt;
&lt;strong&gt;{{ comment.forfatter }}&lt;/strong&gt;
{% if comment.er_intern %}&lt;span class="badge bg-primary"&gt;BMC&lt;/span&gt;{% endif %}
· {{ comment.created_at.strftime('%d/%m-%Y %H:%M') }}
&lt;/div&gt;
&lt;div class="jira-text"&gt;{{ comment.indhold|replace('\n','&lt;br&gt;')|safe }}&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
{% endfor %}
&lt;/div&gt;</pre>
</details>
<!-- =============================================
FORSLAG 3: FLAT INBOX
============================================= -->
<h2 class="proposal-title">Anbefaling 3 — Flat Inbox (Zendesk/Freshdesk style)</h2>
<p class="proposal-desc">Kunde-beskeder til venstre. BMC/tekniker-svar til højre. Ingen farvegte headers, ingen bobler — bare flad alignment og subtil baggrundsforskel. Klart at forstå hvem der sagde hvad.</p>
<div class="inbox-feed">
<!-- Kunde (venstre) -->
<div class="ib-msg left">
<div class="ib-bubble">Vi har et problem med vores to printere på kontoret — de melder offline på printserveren siden fredag.</div>
<div class="ib-meta">Jens Jensen · 21/03-2026 10:00</div>
</div>
<!-- Tekniker (højre) -->
<div class="ib-msg right">
<div class="ib-bubble">Jeg kan se at port 4 &amp; 5 på switchen var nede kort i nat. Har I prøvet at genstarte printerne så de fanger ny DHCP-adresse?</div>
<div class="ib-meta">Christian Thomas · 21/03-2026 10:15</div>
</div>
<!-- System (centreret) -->
<div class="ib-msg sys" style="align-self:center; max-width:90%;">
<div class="ib-bubble">Status ændret: Åben → Under behandling</div>
<div class="ib-meta" style="text-align:center;">System · 21/03-2026 10:20</div>
</div>
<!-- Kunde (venstre) -->
<div class="ib-msg left">
<div class="ib-bubble">HP'en virker stadig ikke — den anden fick vi op at køre.</div>
<div class="ib-meta">Jens Jensen · 21/03-2026 10:35</div>
</div>
</div>
<div class="inbox-input mt-1">
<div class="input-group input-group-sm">
<textarea class="form-control" rows="2" placeholder="Skriv en kommentar..."></textarea>
<button class="btn btn-primary"><i class="bi bi-send"></i></button>
</div>
</div>
<details class="mt-2 mb-4">
<summary class="text-muted small" style="cursor:pointer;">Vis Jinja-kode til at erstatte det nuværende</summary>
<pre class="bg-light border rounded p-2 small mt-2" style="overflow-x:auto;">&lt;div class="inbox-feed"&gt;
{% for comment in comments %}
{% if comment.er_system_besked %}
&lt;div class="ib-msg sys" style="align-self:center;max-width:90%"&gt;
{% elif comment.er_intern %}
&lt;div class="ib-msg right"&gt;
{% else %}
&lt;div class="ib-msg left"&gt;
{% endif %}
&lt;div class="ib-bubble"&gt;{{ comment.indhold|replace('\n','&lt;br&gt;')|safe }}&lt;/div&gt;
&lt;div class="ib-meta"&gt;{{ comment.forfatter }} · {{ comment.created_at.strftime('%d/%m-%Y %H:%M') }}&lt;/div&gt;
&lt;/div&gt;
{% endfor %}
&lt;/div&gt;</pre>
</details>
<div class="alert alert-info mt-4" style="font-size:0.82rem;">
<strong>Hvornår vil jeg bruge hvilken?</strong><br>
<b>1 (Thread):</b> Bedst når der er blandede deltagere (intern + kunde + system). Nemmest at tilpasse.<br>
<b>2 (Log):</b> Bedst hvis I primært bruger systemet internt — minder om et driftslog og er meget kompakt.<br>
<b>3 (Inbox):</b> Bedst hvis I har et tydeligt skel mellem "kundekorrespondance" og "intern teknikerbesked".
</div>
</div>
</body>
</html>
Reference in New Issue Copy Permalink