@mostajs/aop-ui-html 0.1.0

package/README.md

@@ -0,0 +1,5 @@
+# @mostajs/aop-ui-html
+
+**Auteur** : Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0-or-later
+
+Vues **HTML server-rendered** (no-build) de veille d appels d offres : liste+facettes, fiche+analyse IA, dashboard, éditeur d alerte. Compose `@mostajs/aop-classify`. Stack `mosta-aop-stack`.

package/llms.txt

@@ -0,0 +1,6 @@
+# @mostajs/aop-ui-html — fiche LLM
+> Vues HTML server-rendered de veille AO (no-build) : liste, fiche, dashboard, éditeur d alerte.
+
+## EXPORTS
+aopStyles() · tenderBadge(t) · tenderCard(t,{href}) · tenderList({tenders,facets,filters,baseHref,detailHref}) · tenderDetail({tender,analysis,documents}) · veilleDashboard({total,byTemperature,byStatus}) · alertForm({alert,action})
+Compose @mostajs/aop-classify (couleurs/emoji température). Fragments échappés. Stack mosta-aop-stack.

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@mostajs/aop-ui-html",
+  "version": "0.1.0",
+  "description": "Vues HTML server-rendered de veille d'appels d'offres (liste, fiche, dashboard, alerte) — no-build, compose @mostajs/aop-classify.",
+  "author": "Dr Hamid MADANI <drmdh@msn.com>",
+  "license": "AGPL-3.0-or-later",
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "llms.txt"
+  ],
+  "dependencies": {
+    "@mostajs/aop-classify": "^0.1.0"
+  },
+  "devDependencies": {
+    "@mostajs/mjs-unit": "^0.3.0"
+  },
+  "scripts": {
+    "test": "node test-scripts/unit/aop-ui-html.test.mjs && node examples/run.mjs"
+  }
+}

package/src/index.js

@@ -0,0 +1,80 @@
+// @mostajs/aop-ui-html — vues HTML server-rendered de veille AO (no-build, fragments).
+// COMPOSE @mostajs/aop-classify (couleurs/emoji). Pour apps no-build. @author Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0
+import { temperatureColor, temperatureEmoji } from '@mostajs/aop-classify';
+
+const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+const money = (v, cur = 'EUR') => (v == null ? '—' : `${Number(v).toLocaleString('fr-FR')} ${cur}`);
+const day = (d) => (d ? String(d).slice(0, 10) : '—');
+
+export function aopStyles() {
+  return `<style>
+  .aop-badge{display:inline-block;padding:2px 8px;border-radius:10px;color:#fff;font-size:12px;font-weight:600}
+  .aop-card{border:1px solid #e5e7eb;border-radius:10px;padding:12px 14px;margin:8px 0}
+  .aop-card h3{margin:0 0 4px} .aop-meta{font-size:12px;color:#6b7280}
+  .aop-facets{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0} .aop-facets a{font-size:12px;text-decoration:none;border:1px solid #ddd;border-radius:8px;padding:3px 8px;color:#374151}
+  .aop-kpi{display:inline-block;min-width:90px;text-align:center;border:1px solid #e5e7eb;border-radius:10px;padding:10px;margin:4px}
+  .aop-kpi b{display:block;font-size:22px}
+  </style>`;
+}
+
+/** Badge de température (emoji + couleur). */
+export function tenderBadge(tender = {}) {
+  const t = tender.classification?.temperature || 'cold';
+  return `<span class="aop-badge" style="background:${temperatureColor(t)}">${temperatureEmoji(t)} ${esc(t)}</span>`;
+}
+
+/** Une carte AO dans la liste. */
+export function tenderCard(tender = {}, { href = '#' } = {}) {
+  const c = tender.classification || {};
+  return `<div class="aop-card">
+    <h3><a href="${esc(href)}">${esc(tender.title)}</a> ${tenderBadge(tender)}</h3>
+    <p class="aop-meta">${esc(tender.organization?.name || '')} · échéance <strong>${day(tender.dates?.deadline)}</strong> · ${money(tender.financial?.estimatedValue, tender.financial?.currency)} · score ${c.score ?? '—'}</p>
+  </div>`;
+}
+
+/** Liste filtrable + facettes (issues de aop-search). */
+export function tenderList({ tenders = [], facets = null, filters = {}, baseHref = '?', detailHref = (t) => `?id=${t.id}` } = {}) {
+  const facet = (key, obj) => Object.entries(obj || {}).map(([k, n]) => `<a href="${esc(baseHref)}&${key}=${esc(k)}">${esc(k)} (${n})</a>`).join('');
+  const f = facets ? `<div class="aop-facets">${facet('temperature', facets.temperature)}${facet('status', facets.status)}${facet('type', facets.type)}</div>` : '';
+  return `${aopStyles()}<section><h1>📋 Appels d'offres (${tenders.length})</h1>
+    <form method="get" action="${esc(baseHref)}" class="aop-no-print"><input name="q" value="${esc(filters.q || '')}" placeholder="Rechercher…"><button>🔎</button></form>
+    ${f}${tenders.map((t) => tenderCard(t, { href: detailHref(t) })).join('') || '<p class="aop-meta">Aucun résultat.</p>'}</section>`;
+}
+
+/** Fiche détaillée + analyse IA (aop-scoring-ai) + documents. */
+export function tenderDetail({ tender = {}, analysis = null, documents = [] } = {}) {
+  const ai = analysis ? `<section><h2>🤖 Analyse</h2>
+    <p><strong>${esc(analysis.goNoGo || '')}</strong> · score ${analysis.score ?? '—'}</p>
+    <p>${esc(analysis.summary || '')}</p>
+    ${(analysis.recommendations || []).length ? `<ul>${analysis.recommendations.map((r) => `<li>${esc(r)}</li>`).join('')}</ul>` : ''}</section>` : '';
+  const docs = documents.length ? `<section><h2>📁 Documents</h2><ul>${documents.map((d) => `<li>${esc(d.title)} <span class="aop-meta">(${esc(d.type)})</span></li>`).join('')}</ul></section>` : '';
+  return `${aopStyles()}<section><h1>${esc(tender.title)} ${tenderBadge(tender)}</h1>
+    <p class="aop-meta">${esc(tender.organization?.name || '')} · ${esc(tender.procedure || '')} · échéance <strong>${day(tender.dates?.deadline)}</strong> · ${money(tender.financial?.estimatedValue, tender.financial?.currency)}</p>
+    <p>${esc(tender.description || '')}</p>
+    ${(tender.cpvCodes || []).length ? `<p class="aop-meta">CPV : ${tender.cpvCodes.map(esc).join(', ')}</p>` : ''}</section>${ai}${docs}`;
+}
+
+/** Tableau de bord veille (répartition par température). */
+export function veilleDashboard({ total = 0, byTemperature = {}, byStatus = {} } = {}) {
+  const kpi = (label, n, color) => `<div class="aop-kpi" style="border-color:${color || '#e5e7eb'}"><b style="color:${color || '#111'}">${n}</b>${esc(label)}</div>`;
+  return `${aopStyles()}<section><h1>📊 Veille — tableau de bord</h1>
+    <div>${kpi('Total', total)} ${['hot', 'warm', 'cold', 'frozen'].map((t) => kpi(`${temperatureEmoji(t)} ${t}`, byTemperature[t] || 0, temperatureColor(t))).join(' ')}</div>
+    <p class="aop-meta">Actifs : ${byStatus.active || 0} · expirés : ${byStatus.expired || 0} · attribués : ${byStatus.awarded || 0}</p></section>`;
+}
+
+/** Éditeur d'alerte (critères de veille). */
+export function alertForm({ alert = {}, action = '/alerts/save' } = {}) {
+  const c = alert.criteria || {};
+  return `${aopStyles()}<section><h1>🔔 Alerte de veille</h1>
+    <form method="post" action="${esc(action)}" style="display:flex;flex-direction:column;gap:8px;max-width:480px">
+      <label>Nom <input name="name" value="${esc(alert.name || '')}" required></label>
+      <label>Mots-clés (séparés par ,) <input name="keywords" value="${esc((c.keywords || []).join(', '))}"></label>
+      <label>Exclure <input name="excludeKeywords" value="${esc((c.excludeKeywords || []).join(', '))}"></label>
+      <label>Codes CPV <input name="cpvCodes" value="${esc((c.cpvCodes || []).join(', '))}"></label>
+      <label>Budget min <input name="budgetMin" type="number" value="${esc(c.budget?.min ?? '')}"></label>
+      <label>Budget max <input name="budgetMax" type="number" value="${esc(c.budget?.max ?? '')}"></label>
+      <label>Fréquence <select name="frequency">${['immediate', 'daily', 'weekly', 'monthly'].map((f) => `<option${alert.notifications?.frequency === f ? ' selected' : ''}>${f}</option>`).join('')}</select></label>
+      <button>💾 Enregistrer l'alerte</button>
+    </form></section>`;
+}
+export default { aopStyles, tenderBadge, tenderCard, tenderList, tenderDetail, veilleDashboard, alertForm };