sysops
243 lines
13 KiB
HTML
243 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=5" />
|
|
<meta name="theme-color" content="#0a0e14" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="apple-mobile-web-app-title" content="Foodlinkk" />
|
|
<title>{% block title %}{{ page_title }} · Cucina{% endblock %}</title>
|
|
<link rel="manifest" href="/static/manifest.json?v=2" />
|
|
<link rel="icon" href="/static/icons/app-icon.svg" type="image/svg+xml" />
|
|
<link rel="apple-touch-icon" href="/static/icons/app-icon.svg" />
|
|
<link rel="stylesheet" href="/static/css/palantir-theme.css" />
|
|
<link rel="stylesheet" href="/static/css/pulse-theme.css" />
|
|
<link rel="stylesheet" href="/static/css/topnav-neo.css?v=4" />
|
|
<link rel="stylesheet" href="/static/css/vertical-tabs.css?v=3" />
|
|
<link rel="stylesheet" href="/static/css/mobile.css?v=2" />
|
|
<link rel="stylesheet" href="/static/css/herman-dashboard.css?v=13" />
|
|
<script defer src="/static/js/alpine.min.js?v=1"></script>
|
|
<script defer src="/static/js/htmx.min.js?v=1"></script>
|
|
{% block extra_head %}{% endblock %}
|
|
</head>
|
|
<body x-data="appShell()" x-init="initApp()" :class="{ 'nav-open': navOpen, 'drawer-open': drawerOpen, 'persona-ceo': persona === 'ceo', 'persona-cto': persona === 'cto' }">
|
|
<div class="app-shell">
|
|
<aside class="app-sidebar" @click="if($event.target.closest('a')) navOpen=false">
|
|
<div class="app-sidebar-brand">
|
|
<p class="brand-title">Cucina · Foodlinkk</p>
|
|
<p class="brand-name" x-text="persona === 'ceo' ? 'CEO Dashboard' : 'CTO Dashboard'">CEO Dashboard</p>
|
|
</div>
|
|
|
|
<div class="persona-switch" role="tablist" aria-label="Dashboard modus">
|
|
<button type="button" role="tab" class="persona-btn persona-btn-ceo"
|
|
:class="{ active: persona === 'ceo' }" @click="setPersona('ceo')"
|
|
:aria-selected="persona === 'ceo'" data-i18n="nav.persona_ceo">CEO · Business</button>
|
|
<button type="button" role="tab" class="persona-btn persona-btn-cto"
|
|
:class="{ active: persona === 'cto' }" @click="setPersona('cto')"
|
|
:aria-selected="persona === 'cto'" data-i18n="nav.persona_cto">CTO · Tech</button>
|
|
</div>
|
|
|
|
<!-- ═══ CEO · BUSINESS ═══ -->
|
|
<template x-if="persona === 'ceo'">
|
|
<div class="persona-nav">
|
|
<div class="app-sidebar-group">
|
|
<a href="/" class="nav-pill nav-pill-herman {% if request.url.path == '/' %}active{% endif %}" data-i18n="nav.ceo_home">CEO Overzicht</a>
|
|
</div>
|
|
|
|
<div class="app-sidebar-group">
|
|
<div class="app-sidebar-label" data-i18n="nav.crm">CRM</div>
|
|
<a href="/clients" class="nav-pill nav-pill-clients {% if request.url.path.startswith('/clients') %}active{% endif %}" data-i18n="nav.clients">Klanten</a>
|
|
<a href="/deals" class="nav-pill nav-pill-deals {% if request.url.path.startswith('/deals') %}active{% endif %}" data-i18n="nav.deals">Deals</a>
|
|
<a href="/products" class="nav-pill nav-pill-products {% if request.url.path.startswith('/products') %}active{% endif %}" data-i18n="nav.products">Producten</a>
|
|
<a href="/suppliers" class="nav-pill nav-pill-suppliers {% if request.url.path.startswith('/suppliers') %}active{% endif %}" data-i18n="nav.suppliers">Leveranciers</a>
|
|
</div>
|
|
|
|
<div class="app-sidebar-group">
|
|
<div class="app-sidebar-label" data-i18n="nav.intel">Intel</div>
|
|
<a href="/beurs" class="nav-pill nav-pill-beurs {% if request.url.path.startswith('/beurs') %}active{% endif %}" data-i18n="nav.beurs">Beurs Live</a>
|
|
<a href="/retail" class="nav-pill nav-pill-retail {% if request.url.path.startswith('/retail') %}active{% endif %}" data-i18n="nav.retail">Retail</a>
|
|
<a href="/documents" class="nav-pill nav-pill-documents {% if request.url.path.startswith('/documents') %}active{% endif %}" data-i18n="nav.documents">Documenten</a>
|
|
<a href="/projects" class="nav-pill nav-pill-documents {% if request.url.path.startswith('/projects') %}active{% endif %}" data-i18n="nav.projects">Projecten</a>
|
|
</div>
|
|
|
|
<div class="app-sidebar-group">
|
|
<div class="app-sidebar-label" data-i18n="nav.hermes">Hermes</div>
|
|
<a href="/hermes" class="nav-pill nav-pill-telegram {% if request.url.path.startswith('/hermes') %}active{% endif %}" data-i18n="nav.telegram">Telegram</a>
|
|
</div>
|
|
|
|
<div class="app-sidebar-group">
|
|
<div class="app-sidebar-label" data-i18n="nav.business">Business</div>
|
|
<a href="/marketing" class="nav-pill nav-pill-marketing {% if request.url.path.startswith('/marketing') %}active{% endif %}" data-i18n="nav.marketing">Marketing</a>
|
|
<a href="/herman" class="nav-pill nav-pill-chat {% if request.url.path.startswith('/herman') %}active{% endif %}" data-i18n="nav.chat">Chat</a>
|
|
<a href="/packaging" class="nav-pill nav-pill-studio {% if request.url.path.startswith('/packaging') %}active{% endif %}" data-i18n="nav.packaging">Packaging</a>
|
|
<a href="/reports" class="nav-pill nav-pill-reports {% if request.url.path.startswith('/reports') %}active{% endif %}" data-i18n="nav.reports">Rapporten</a>
|
|
<a href="/analytics" class="nav-pill nav-pill-analytics {% if request.url.path.startswith('/analytics') %}active{% endif %}" data-i18n="nav.analytics">Analytics</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- ═══ CTO · TECH ═══ -->
|
|
<template x-if="persona === 'cto'">
|
|
<div class="persona-nav">
|
|
<div class="app-sidebar-group">
|
|
<a href="/cto" class="nav-pill nav-pill-ops {% if request.url.path == '/cto' %}active{% endif %}" data-i18n="nav.cto_home">CTO Overzicht</a>
|
|
</div>
|
|
|
|
<div class="app-sidebar-group">
|
|
<div class="app-sidebar-label" data-i18n="nav.platform">Platform</div>
|
|
<a href="/ops" class="nav-pill nav-pill-ops {% if request.url.path.startswith('/ops') %}active{% endif %}" data-i18n="nav.ops">IT Ops</a>
|
|
<a href="/agents" class="nav-pill nav-pill-agents {% if request.url.path.startswith('/agents') %}active{% endif %}" data-i18n="nav.agents">Agents</a>
|
|
<a href="/browser" class="nav-pill nav-pill-browser {% if request.url.path.startswith('/browser') or request.url.path.startswith('/monitor') %}active{% endif %}" data-i18n="nav.browser">Browser</a>
|
|
<a href="/studio" class="nav-pill nav-pill-studio {% if request.url.path.startswith('/studio') %}active{% endif %}" data-i18n="nav.studio">Studio</a>
|
|
<a href="/voice" class="nav-pill nav-pill-voice {% if request.url.path.startswith('/voice') %}active{% endif %}" data-i18n="nav.voice">Voice</a>
|
|
</div>
|
|
|
|
<div class="app-sidebar-group">
|
|
<div class="app-sidebar-label" data-i18n="nav.devops">DevOps</div>
|
|
<a href="/settings" class="nav-pill nav-pill-settings {% if request.url.path.startswith('/settings') %}active{% endif %}" data-i18n="nav.settings">Instellingen</a>
|
|
<a href="http://10.4.7.18:3001/aissa/foodlinkk-command-center" target="_blank" rel="noopener" class="nav-pill nav-pill-settings" data-i18n="nav.gitea">Gitea</a>
|
|
<a href="http://10.4.7.18:8700/docs" target="_blank" rel="noopener" class="nav-pill nav-pill-settings" data-i18n="nav.tools_api">Tools API</a>
|
|
<a href="http://10.4.7.18:3002" target="_blank" rel="noopener" class="nav-pill nav-pill-analytics" data-i18n="nav.grafana">Grafana</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</aside>
|
|
|
|
<div class="mobile-nav-overlay" x-show="navOpen" @click="navOpen=false" x-cloak></div>
|
|
|
|
<div class="app-main">
|
|
<header class="app-topbar">
|
|
<button type="button" class="mobile-menu-btn" @click="navOpen = !navOpen" aria-label="Menu openen">☰</button>
|
|
<span class="page-tip">
|
|
<span class="persona-badge" :class="persona === 'ceo' ? 'persona-badge-ceo' : 'persona-badge-cto'" x-text="persona === 'ceo' ? 'CEO' : 'CTO'"></span>
|
|
Cucina · Foodlinkk
|
|
</span>
|
|
<select class="form-input" style="width:auto;min-width:110px;padding:0.2rem 0.5rem;font-size:0.72rem;margin:0 0.5rem"
|
|
x-model="locale" @change="setLocale(locale)" :title="$t ? $t('common.language') : 'Taal'">
|
|
<option value="nl">NL</option>
|
|
<option value="en">EN</option>
|
|
</select>
|
|
<div class="app-clock"><strong x-text="clockDate">—</strong> · <span x-text="clockTime">—</span></div>
|
|
</header>
|
|
<main class="main-topnav">{% block content %}{% endblock %}</main>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pwa-install-bar" x-show="showInstall" x-cloak>
|
|
<p>📱 Installeer Foodlinkk als app op je telefoon</p>
|
|
<button type="button" class="btn btn-sm btn-pulse-green" @click="installPwa()">Installeren</button>
|
|
<button type="button" class="btn btn-sm" @click="showInstall=false">Later</button>
|
|
</div>
|
|
|
|
<script src="/static/js/i18n.js?v=4"></script>
|
|
<script src="/static/js/cockpit.js?v=2"></script>
|
|
<script src="/static/js/viz-engine.js?v=3"></script>
|
|
<script src="/static/js/global-viz.js?v=1"></script>
|
|
<script src="/static/js/live-pulse.js?v=2"></script>
|
|
<script>
|
|
window.FoodlinkkPersona = (function () {
|
|
var CTO_PREFIXES = ['/cto', '/ops', '/agents', '/browser', '/monitor', '/studio', '/voice', '/settings'];
|
|
function isCtoPath(path) {
|
|
return CTO_PREFIXES.some(function (p) { return path === p || path.indexOf(p + '/') === 0; });
|
|
}
|
|
function detect(path) {
|
|
var stored = localStorage.getItem('foodlinkk-persona');
|
|
if (stored === 'ceo' || stored === 'cto') return stored;
|
|
return isCtoPath(path) ? 'cto' : 'ceo';
|
|
}
|
|
return { isCtoPath: isCtoPath, detect: detect };
|
|
})();
|
|
|
|
function appShell() {
|
|
return {
|
|
locale: 'nl',
|
|
persona: 'ceo',
|
|
drawerOpen: false,
|
|
navOpen: false,
|
|
showInstall: false,
|
|
_deferredPrompt: null,
|
|
clockDate: '—',
|
|
clockTime: '—',
|
|
_offset: 0,
|
|
async initApp() {
|
|
this.persona = window.FoodlinkkPersona.detect(location.pathname);
|
|
if (window.I18n) await window.I18n.init();
|
|
this.locale = window.I18n ? window.I18n.locale() : 'nl';
|
|
this.initClock();
|
|
this.initPwa();
|
|
},
|
|
setPersona(p) {
|
|
if (p === this.persona) return;
|
|
this.persona = p;
|
|
localStorage.setItem('foodlinkk-persona', p);
|
|
var path = location.pathname;
|
|
var onCto = window.FoodlinkkPersona.isCtoPath(path);
|
|
if (p === 'ceo' && onCto) { location.href = '/'; return; }
|
|
if (p === 'cto' && !onCto) { location.href = '/cto'; return; }
|
|
},
|
|
async setLocale(loc) {
|
|
if (window.I18n) await window.I18n.setLocale(loc);
|
|
this.locale = loc;
|
|
},
|
|
async initClock() {
|
|
try {
|
|
const r = await fetch('/api/server-time').then(x => x.json());
|
|
this._offset = new Date(r.utc).getTime() - Date.now();
|
|
} catch (e) { this._offset = 0; }
|
|
const tick = () => {
|
|
const d = new Date(Date.now() + this._offset);
|
|
this.clockDate = d.toLocaleDateString('nl-NL', { timeZone: 'Europe/Amsterdam', weekday: 'short', day: 'numeric', month: 'short' });
|
|
this.clockTime = d.toLocaleTimeString('nl-NL', { timeZone: 'Europe/Amsterdam', hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
|
};
|
|
tick();
|
|
setInterval(tick, 1000);
|
|
},
|
|
initPwa() {
|
|
if (window.matchMedia('(display-mode: standalone)').matches) return;
|
|
if (/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)) {
|
|
this.showInstall = !localStorage.getItem('pwa-dismiss');
|
|
}
|
|
window.addEventListener('beforeinstallprompt', (e) => {
|
|
e.preventDefault();
|
|
this._deferredPrompt = e;
|
|
this.showInstall = true;
|
|
});
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('/static/sw.js?v=1').catch(function () {});
|
|
}
|
|
},
|
|
async installPwa() {
|
|
if (this._deferredPrompt) {
|
|
this._deferredPrompt.prompt();
|
|
await this._deferredPrompt.userChoice;
|
|
this._deferredPrompt = null;
|
|
this.showInstall = false;
|
|
return;
|
|
}
|
|
if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
|
|
alert('Tik op Deel ↗ en kies «Zet op beginscherm» om Foodlinkk als app te installeren.');
|
|
} else {
|
|
alert('Tik op ⋮ menu → «Toevoegen aan startscherm» of «Installeren».');
|
|
}
|
|
this.showInstall = false;
|
|
localStorage.setItem('pwa-dismiss', '1');
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
<script>
|
|
window.addEventListener('load', function () {
|
|
setTimeout(function () {
|
|
if (window.Alpine) return;
|
|
document.querySelectorAll('[x-cloak]').forEach(function (el) { el.removeAttribute('x-cloak'); });
|
|
document.body.classList.add('alpine-missing');
|
|
console.error('Alpine.js niet geladen — interactieve UI beperkt. Hard refresh (Ctrl+Shift+R).');
|
|
}, 2500);
|
|
});
|
|
</script>
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|