v0.0.1: eerste versie van de Van Emous CRM

Flask + SQLite, in de Van Emous-huisstijl (tokens uit het design system, GSAP-effecten
volgens de motion-regels, uit bij prefers-reduced-motion).

- Leads en contactpersonen: status, toewijzen, verwachte waarde, omzetten naar klant,
  tijdlijn, bestanden, taken/opvolging
- Relaties (zoals accounts in EspoCRM): klantbundels (huishouden/familie) en partners met
  type (leverancier, aannemer, ...); leveranciers van producten worden automatisch partners
- API voor formulieren (POST /api/leads) met dubbele-leaddetectie, bestanden en
  configurator-ontwerpen (house-design JSON)
- Import van CSV/JSON (leads, relaties, producten) met kolomkoppeling; configurator-formaat
- Producten met SKU als vaste sleutel, mutatiehistorie, POST /api/products, CSV-export;
  offerteregels houden hun eigen prijs
- Offertes met btw per tarief en afdrukversie (PDF via de browser)
- Inbox via IMAP/SMTP, gekoppeld aan contacten
- Gebruikers (beheerder/medewerker) en klantportaal (offertes accepteren, bestanden, berichten)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

templates/quote_print.html

@@ -0,0 +1,129 @@
+<!doctype html>
+<html lang="nl">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Offerte {{ qt.number }}{% if c %} · {{ c.name }}{% endif %}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Kantumruy+Pro:wght@500;600&family=Mukta:wght@400;600&display=swap" rel="stylesheet">
+  <style>
+    @page { size: A4; margin: 16mm 15mm; }
+    * { box-sizing: border-box; }
+    body { margin: 0; font-family: "Mukta", system-ui, sans-serif; color: #212121; font-size: 14px; line-height: 1.55; background: #f0f1ec; font-variant-numeric: lining-nums tabular-nums; }
+    .bar { position: sticky; top: 0; z-index: 1; background: #fff; border-bottom: 1px solid rgba(0,0,0,.08); padding: 12px 16px; display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
+    .bar a { color: #b95913; font-weight: 600; text-decoration: none; }
+    .btn { font: 600 15px/1 "Mukta", sans-serif; padding: 12px 22px; border-radius: 50px; border: 1px solid #b95913; background: #b95913; color: #fff; cursor: pointer; }
+    .btn.ghost { background: #fff; color: #b95913; border-color: rgba(185,89,19,.35); }
+    .page { background: #fff; max-width: 210mm; margin: 24px auto; padding: 16mm 15mm; border-radius: 20px; }
+    header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
+    header img { width: 210px; max-width: 45%; }
+    .company { text-align: right; color: #5c6670; font-size: 13px; }
+    .company strong { color: #212121; }
+    .meta { display: flex; justify-content: space-between; gap: 24px; margin: 40px 0 28px; }
+    .label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #5c6670; }
+    .kv td { padding: 1px 0 1px 16px; }
+    .kv td:first-child { padding-left: 0; }
+    h1 { font-family: "Kantumruy Pro", sans-serif; font-weight: 500; font-size: 26px; line-height: 1.15; margin: 0 0 12px; }
+    h1::before { content: ""; display: block; width: 3rem; height: 3px; background: #b95913; margin-bottom: 14px; }
+    .intro, .notes { white-space: pre-line; }
+    table.lines { width: 100%; border-collapse: collapse; margin: 24px 0 8px; }
+    .lines th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #5c6670; padding: 8px; border-bottom: 1px solid rgba(0,0,0,.15); }
+    .lines td { padding: 10px 8px; border-bottom: 1px solid rgba(0,0,0,.08); vertical-align: top; }
+    .lines tr { break-inside: avoid; }
+    .desc { white-space: pre-line; }
+    .desc::first-line { font-weight: 600; }
+    .num { text-align: right; white-space: nowrap; }
+    .totals { margin-left: auto; width: 300px; border-collapse: collapse; }
+    .totals td { padding: 4px 8px; }
+    .totals .grand td { font-family: "Kantumruy Pro", sans-serif; font-weight: 600; font-size: 18px; border-top: 2px solid #212121; padding-top: 8px; }
+    .notes { margin-top: 32px; }
+    .sign { margin-top: 40px; display: flex; gap: 48px; }
+    .sign div { flex: 1; border-top: 1px solid rgba(0,0,0,.3); padding-top: 6px; color: #5c6670; font-size: 12px; }
+    footer { margin-top: 40px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08); color: #5c6670; font-size: 12px; text-align: center; }
+    @media print {
+      body { background: #fff; }
+      .bar { display: none; }
+      .page { margin: 0; padding: 0; max-width: none; border-radius: 0; }
+    }
+    @media (max-width: 640px) {
+      .page { padding: 20px 16px; margin: 0; border-radius: 0; }
+      header, .meta { flex-direction: column; }
+      .company { text-align: left; }
+      .totals { width: 100%; }
+    }
+  </style>
+</head>
+<body>
+<div class="bar">
+  {% if portal %}
+    <a href="{{ url_for('portal_home') }}">← Terug naar het portaal</a>
+    {% if qt.status == 'verzonden' %}
+      <form method="post" action="{{ url_for('portal_quote_answer', qid=qt.id, choice='accept') }}" onsubmit="return confirm('Wilt u deze offerte accepteren?')"><button class="btn">Offerte accepteren</button></form>
+      <form method="post" action="{{ url_for('portal_quote_answer', qid=qt.id, choice='decline') }}"><button class="btn ghost">Afwijzen</button></form>
+    {% endif %}
+  {% else %}
+    <a href="{{ url_for('quote_edit', qid=qt.id) }}">← Terug naar bewerken</a>
+  {% endif %}
+  <button class="btn {{ 'ghost' if portal and qt.status == 'verzonden' }}" onclick="window.print()">Afdrukken / opslaan als PDF</button>
+</div>
+
+<div class="page">
+  <header>
+    <img src="{{ url_for('static', filename='logo.svg') }}" alt="{{ s.company_name }}">
+    <div class="company">
+      <strong>{{ s.company_name }}</strong><br>
+      {{ [s.company_address, s.company_postcode_city, s.company_phone, s.company_email, s.company_website]|select|join('<br>'|safe) }}
+    </div>
+  </header>
+
+  <div class="meta">
+    <div>
+      <div class="label">Offerte voor</div>
+      {% if c %}
+        <strong>{{ c.name }}</strong><br>
+        {{ [c.relation_name if c.relation_kind == 'klant' and c.relation_name != c.name, c.company, c.address, (c.postcode ~ ' ' ~ c.city)|trim]|select|join('<br>'|safe) }}
+      {% else %}—{% endif %}
+    </div>
+    <table class="kv">
+      <tr><td class="label">Offertenummer</td><td>{{ qt.number }}</td></tr>
+      <tr><td class="label">Datum</td><td>{{ qt.date|dt('%d-%m-%Y') }}</td></tr>
+      {% if qt.valid_until %}<tr><td class="label">Geldig tot</td><td>{{ qt.valid_until|dt('%d-%m-%Y') }}</td></tr>{% endif %}
+    </table>
+  </div>
+
+  <h1>Offerte{% if qt.title %}: {{ qt.title }}{% endif %}</h1>
+  {% if qt.intro %}<div class="intro">{{ qt.intro }}</div>{% endif %}
+
+  <table class="lines">
+    <thead><tr><th>Omschrijving</th><th class="num">Aantal</th><th class="num">Prijs</th><th class="num">Btw</th><th class="num">Totaal</th></tr></thead>
+    <tbody>
+    {% for l in lines %}
+      <tr>
+        <td class="desc">{{ l.description }}</td>
+        <td class="num">{{ l.qty|nr }} {{ l.unit }}</td>
+        <td class="num">{{ l.price|euro }}</td>
+        <td class="num">{{ l.vat|nr }}%</td>
+        <td class="num">{{ (l.qty * l.price)|euro }}</td>
+      </tr>
+    {% endfor %}
+    </tbody>
+  </table>
+
+  <table class="totals">
+    <tr><td>Subtotaal excl. btw</td><td class="num">{{ t.subtotal|euro }}</td></tr>
+    {% for rate, amount in t.vat %}<tr><td>Btw {{ rate|nr }}%</td><td class="num">{{ amount|euro }}</td></tr>{% endfor %}
+    <tr class="grand"><td>Totaal</td><td class="num">{{ t.total|euro }}</td></tr>
+  </table>
+
+  {% if qt.notes %}<div class="notes"><div class="label">Opmerkingen en voorwaarden</div>{{ qt.notes }}</div>{% endif %}
+
+  <div class="sign"><div>Datum en handtekening opdrachtgever</div><div>Namens {{ s.company_name }}</div></div>
+
+  <footer>
+    {% if s.quote_footer %}<div style="white-space:pre-line;margin-bottom:6px">{{ s.quote_footer }}</div>{% endif %}
+    {{ [('KvK ' ~ s.company_kvk) if s.company_kvk, ('Btw ' ~ s.company_btw) if s.company_btw, ('IBAN ' ~ s.company_iban) if s.company_iban]|select|join(' · ') }}
+  </footer>
+</div>
+</body>
+</html>