sysops
76 lines
4.4 KiB
HTML
76 lines
4.4 KiB
HTML
{% extends "base.html" %}
|
|
{% block extra_head %}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
|
<link rel="stylesheet" href="/static/css/analytics.css?v=1" />
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div class="analytics-shell" x-data="analyticsHub()" x-init="init()">
|
|
<header class="page-header">
|
|
<div>
|
|
<h1>Analytics Command Center <span class="live-badge" x-text="liveLabel">Live</span></h1>
|
|
<p class="subtitle">Volledige database analyse · filter · charts · realtime</p>
|
|
<small class="muted" x-text="'Laatst: '+updatedAt"></small>
|
|
</div>
|
|
<div class="retail-actions">
|
|
<button class="btn btn-sm btn-pulse" @click="refresh()" :disabled="loading">↻ Ververs</button>
|
|
<a class="btn btn-sm" href="/">Herman →</a>
|
|
<a class="btn btn-sm btn-pulse-green" href="/retail">Retail 360 →</a>
|
|
</div>
|
|
</header>
|
|
|
|
<aside class="analytics-filters panel">
|
|
<h3>Filters</h3>
|
|
<label>Keten<select x-model="f.chain" @change="refresh()"><option value="">Alle</option>
|
|
<template x-for="c in meta.chains||[]" :key="c.chain"><option :value="c.chain" x-text="c.chain"></option></template>
|
|
</select></label>
|
|
<label>Provincie<select x-model="f.province" @change="refresh()"><option value="">Alle</option>
|
|
<template x-for="p in meta.provinces||[]" :key="p.province"><option :value="p.province" x-text="p.province"></option></template>
|
|
</select></label>
|
|
<label>Deal stage<select x-model="f.stage" @change="refresh()"><option value="">Alle</option>
|
|
<template x-for="s in meta.deal_stages||[]" :key="s.stage"><option :value="s.stage" x-text="s.stage"></option></template>
|
|
</select></label>
|
|
<label>Agent<select x-model="f.agent" @change="refresh()"><option value="">Alle</option>
|
|
<template x-for="a in meta.agents||[]" :key="a.agent_name"><option :value="a.agent_name" x-text="a.agent_name"></option></template>
|
|
</select></label>
|
|
<label>Periode (dagen)<input type="number" min="7" max="365" x-model.number="f.days" @change="refresh()"></label>
|
|
<button class="btn btn-sm btn-block" @click="resetFilters()">Reset</button>
|
|
</aside>
|
|
|
|
<div class="analytics-main">
|
|
<div class="kpi-row analytics-kpis" id="analytics-kpis"></div>
|
|
|
|
<div class="analytics-charts">
|
|
<div class="panel chart-panel"><h4>Pipeline per stage</h4><canvas id="chart-deals"></canvas></div>
|
|
<div class="panel chart-panel"><h4>Klanten per stage</h4><canvas id="chart-clients"></canvas></div>
|
|
<div class="panel chart-panel"><h4>Supermarkten per keten</h4><canvas id="chart-chains"></canvas></div>
|
|
<div class="panel chart-panel"><h4>Provincie verdeling</h4><canvas id="chart-provinces"></canvas></div>
|
|
<div class="panel chart-panel"><h4>CRM partnerships</h4><canvas id="chart-partnerships"></canvas></div>
|
|
<div class="panel chart-panel"><h4>Agent activiteit</h4><canvas id="chart-agents"></canvas></div>
|
|
<div class="panel chart-panel"><h4>Events timeline</h4><canvas id="chart-timeline"></canvas></div>
|
|
<div class="panel chart-panel"><h4>RSS per categorie</h4><canvas id="chart-rss"></canvas></div>
|
|
<div class="panel chart-panel"><h4>Groothandels provincie</h4><canvas id="chart-wholesale"></canvas></div>
|
|
<div class="panel chart-panel"><h4>NAS sentiment</h4><canvas id="chart-sentiment"></canvas></div>
|
|
<div class="panel chart-panel"><h4>Top woorden NAS</h4><canvas id="chart-words"></canvas></div>
|
|
<div class="panel chart-panel"><h4>Halal kansen top 10</h4><canvas id="chart-opportunities"></canvas></div>
|
|
<div class="panel chart-panel"><h4>Actieve promo folders</h4><canvas id="chart-promo"></canvas></div>
|
|
<div class="panel chart-panel"><h4>Milestones status</h4><canvas id="chart-milestones"></canvas></div>
|
|
</div>
|
|
|
|
<div class="grid-2">
|
|
<section class="panel"><h2>Recente deals</h2>
|
|
<table class="data-table"><thead><tr><th>Titel</th><th>Stage</th><th>Waarde</th></tr></thead>
|
|
<tbody id="analytics-deals-table"></tbody></table>
|
|
</section>
|
|
<section class="panel"><h2>Agent events</h2>
|
|
<table class="data-table"><thead><tr><th>Agent</th><th>Event</th><th>Tijd</th></tr></thead>
|
|
<tbody id="analytics-events-table"></tbody></table>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block scripts %}
|
|
<script>window.ANALYTICS_INITIAL = {{ initial_data | tojson }};</script>
|
|
<script src="/static/js/analytics.js?v=2"></script>
|
|
{% endblock %}
|