345 lines
16 KiB
HTML
345 lines
16 KiB
HTML
|
{% extends "base.html" %}
|
|||
|
|
{% block extra_head %}
|
|||
|
|
<link rel="stylesheet" href="/static/css/clients-crm.css?v=1" />
|
|||
|
|
<link rel="stylesheet" href="/static/css/projects-hub.css?v=1" />
|
|||
|
|
{% endblock %}
|
|||
|
|
{% block content %}
|
|||
|
|
<div class="clients-shell" x-data="projectsHub()" x-init="init()">
|
|||
|
|
<header class="page-header herman-hero">
|
|||
|
|
<div>
|
|||
|
|
<h1>Projecten <span class="live-badge">Food Business</span></h1>
|
|||
|
|
<p class="hero-sub">Gestructureerd per klant · NAS-mappen · foto's · documenten · packaging</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="retail-actions">
|
|||
|
|
<button class="btn btn-sm btn-pulse" @click="loadAll()" :disabled="busy">↻ Verversen</button>
|
|||
|
|
<a class="btn btn-sm" href="/documents">Documenten →</a>
|
|||
|
|
<a class="btn btn-sm" href="/packaging">Packaging →</a>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div class="clients-kpi-row" style="grid-template-columns:repeat(4,1fr)">
|
|||
|
|
<div class="clients-kpi"><span>Totaal projecten</span><strong x-text="stats.total||0"></strong></div>
|
|||
|
|
<div class="clients-kpi"><span>Met klant</span><strong x-text="stats.with_client||0"></strong></div>
|
|||
|
|
<div class="clients-kpi"><span>NAS mappen</span><strong x-text="stats.with_nas||0"></strong></div>
|
|||
|
|
<div class="clients-kpi"><span>Assets gekoppeld</span><strong x-text="stats.assets||0"></strong></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="clients-tabs">
|
|||
|
|
<button class="clients-tab" :class="{active: tab==='list'}" @click="tab='list'">📋 Overzicht</button>
|
|||
|
|
<button class="clients-tab" :class="{active: tab==='create'}" @click="tab='create'">➕ Nieuw project</button>
|
|||
|
|
<button class="clients-tab" :class="{active: tab==='byclient'}" @click="tab='byclient'">👥 Per klant</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div x-show="tab==='create'" x-cloak>
|
|||
|
|
<section class="panel store-edit-panel">
|
|||
|
|
<h2 style="margin-top:0">Nieuw food-business project</h2>
|
|||
|
|
<p class="page-tip">Kies een type — per klant wordt automatisch een aparte NAS-map aangemaakt (niet alles op één hoop).</p>
|
|||
|
|
<div class="project-type-grid">
|
|||
|
|
<template x-for="t in types" :key="t.id">
|
|||
|
|
<div class="project-type-card" :class="{selected: form.project_type===t.id}" @click="form.project_type=t.id">
|
|||
|
|
<span class="icon" x-text="t.icon"></span>
|
|||
|
|
<span class="label" x-text="t.label_nl"></span>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
<div class="clients-form-grid">
|
|||
|
|
<label class="full"><span class="filter-label">Projectnaam *</span>
|
|||
|
|
<input class="form-input" x-model="form.name" placeholder="bv. Jumbo listing halal maaltijden Q3" /></label>
|
|||
|
|
<label><span class="filter-label">Klant *</span>
|
|||
|
|
<select class="form-input" x-model="form.client_id">
|
|||
|
|
<option value="">— Selecteer klant —</option>
|
|||
|
|
<template x-for="c in clients" :key="c.id"><option :value="c.id" x-text="c.name"></option></template>
|
|||
|
|
</select></label>
|
|||
|
|
<label><span class="filter-label">Prioriteit</span>
|
|||
|
|
<select class="form-input" x-model="form.priority">
|
|||
|
|
<option value="low">Laag</option><option value="normal">Normaal</option>
|
|||
|
|
<option value="high">Hoog</option><option value="urgent">Urgent</option>
|
|||
|
|
</select></label>
|
|||
|
|
<label class="full"><span class="filter-label">Beschrijving</span>
|
|||
|
|
<textarea class="form-input" rows="3" x-model="form.description" placeholder="Doel, deliverables, deadline…"></textarea></label>
|
|||
|
|
</div>
|
|||
|
|
<button class="btn btn-primary" @click="create()" :disabled="!form.name.trim()">Project + NAS-map aanmaken</button>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div x-show="tab==='list'" x-cloak>
|
|||
|
|
<div class="clients-toolbar">
|
|||
|
|
<input type="search" placeholder="Zoek project…" x-model="filterQ" @input="applyFilter()" />
|
|||
|
|
<select x-model="filterType" @change="applyFilter()">
|
|||
|
|
<option value="">Alle types</option>
|
|||
|
|
<template x-for="t in types" :key="'f'+t.id"><option :value="t.id" x-text="t.label_nl"></option></template>
|
|||
|
|
</select>
|
|||
|
|
<select x-model="filterClient" @change="applyFilter()">
|
|||
|
|
<option value="">Alle klanten</option>
|
|||
|
|
<template x-for="c in clients" :key="'fc'+c.id"><option :value="c.id" x-text="c.name"></option></template>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<table class="data-table">
|
|||
|
|
<thead><tr>
|
|||
|
|
<th>Naam</th><th>Type</th><th>Klant</th><th>Assets</th><th>NAS</th><th>Status</th><th></th>
|
|||
|
|
</tr></thead>
|
|||
|
|
<tbody>
|
|||
|
|
<template x-for="p in filtered" :key="p.id">
|
|||
|
|
<tr class="clickable-row" @click="open(p.id)">
|
|||
|
|
<td><strong x-text="p.name"></strong></td>
|
|||
|
|
<td x-text="typeLabel(p.project_type)"></td>
|
|||
|
|
<td x-text="p.client_name||'—'"></td>
|
|||
|
|
<td x-text="p.asset_count||0"></td>
|
|||
|
|
<td><span class="clients-tag" x-show="p.nas_path">✓ map</span><span x-show="!p.nas_path">—</span></td>
|
|||
|
|
<td x-text="p.status"></td>
|
|||
|
|
<td><button class="btn btn-sm" @click.stop="open(p.id)">Open</button></td>
|
|||
|
|
</tr>
|
|||
|
|
</template>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div x-show="tab==='byclient'" x-cloak>
|
|||
|
|
<template x-for="c in clientsWithProjects" :key="c.id">
|
|||
|
|
<section class="panel" style="margin-bottom:0.75rem">
|
|||
|
|
<h3 x-text="c.name"></h3>
|
|||
|
|
<p class="muted" style="font-size:0.75rem" x-show="c.nas_folder" x-text="'NAS: '+c.nas_folder"></p>
|
|||
|
|
<template x-for="p in c.projects" :key="p.id">
|
|||
|
|
<div class="feed-card clickable-row" @click="open(p.id)">
|
|||
|
|
<strong x-text="p.name"></strong>
|
|||
|
|
<small x-text="typeLabel(p.project_type)+' · '+(p.asset_count||0)+' assets'"></small>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<p x-show="!c.projects.length" class="muted">Geen projecten — maak er een aan voor deze klant.</p>
|
|||
|
|
</section>
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<aside class="clients-drawer" :class="{ open: drawer }" style="width:min(560px,96vw)">
|
|||
|
|
<div class="clients-drawer-head">
|
|||
|
|
<div>
|
|||
|
|
<h2 x-text="selected?.name||''"></h2>
|
|||
|
|
<p class="muted" x-text="typeLabel(selected?.project_type)+' · '+(selected?.client_name||'Geen klant')"></p>
|
|||
|
|
</div>
|
|||
|
|
<button class="drawer-close" @click="drawer=false">×</button>
|
|||
|
|
</div>
|
|||
|
|
<template x-if="selected">
|
|||
|
|
<div>
|
|||
|
|
<div class="clients-tabs" style="margin-bottom:0.75rem">
|
|||
|
|
<button class="clients-tab" :class="{active: detailTab==='info'}" @click="detailTab='info'">Info</button>
|
|||
|
|
<button class="clients-tab" :class="{active: detailTab==='assets'}" @click="detailTab='assets'">Assets</button>
|
|||
|
|
<button class="clients-tab" :class="{active: detailTab==='photos'}" @click="detailTab='photos'; loadPhotos()">Foto's</button>
|
|||
|
|
<button class="clients-tab" :class="{active: detailTab==='files'}" @click="detailTab='files'; loadNasFiles()">NAS files</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div x-show="detailTab==='info'">
|
|||
|
|
<p x-text="selected.description||'Geen beschrijving'"></p>
|
|||
|
|
<div x-show="selected.nas_path">
|
|||
|
|
<strong style="font-size:0.72rem;color:#94a3b8">NAS projectmap</strong>
|
|||
|
|
<div class="nas-path-box" x-text="selected.nas_path"></div>
|
|||
|
|
<p class="muted" style="font-size:0.7rem">Structuur: photos/ · documents/ · packaging/ · exports/ · briefs/</p>
|
|||
|
|
</div>
|
|||
|
|
<div x-show="selected.nas_client_root">
|
|||
|
|
<strong style="font-size:0.72rem;color:#94a3b8">Klant NAS root</strong>
|
|||
|
|
<div class="nas-path-box" x-text="selected.nas_client_root"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="btn-group" style="margin-top:0.75rem">
|
|||
|
|
<button class="btn btn-sm" @click="ensureNas()" x-show="!selected.nas_path">NAS-map aanmaken</button>
|
|||
|
|
<a class="btn btn-sm" :href="'/packaging?project_id='+(selected?.id||'')">📦 Packaging Studio</a>
|
|||
|
|
<a class="btn btn-sm" href="/documents">Documenten hub →</a>
|
|||
|
|
<a class="btn btn-sm" href="/clients">Klant CRM →</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div x-show="detailTab==='assets'">
|
|||
|
|
<div class="asset-grid">
|
|||
|
|
<template x-for="a in (selected.assets||[])" :key="a.id">
|
|||
|
|
<div class="asset-card">
|
|||
|
|
<div class="type" x-text="a.asset_type"></div>
|
|||
|
|
<strong x-text="a.title"></strong>
|
|||
|
|
<small x-text="(a.source_agent||a.created_by||'')+' · '+(a.created_at||'').substring(0,10)"></small>
|
|||
|
|
<div class="muted" style="font-size:0.68rem;word-break:break-all" x-show="a.file_path" x-text="a.file_path"></div>
|
|||
|
|
<div class="btn-group" style="margin-top:0.45rem" x-show="a.asset_type==='packaging' && a.ref_id">
|
|||
|
|
<a class="btn btn-sm" :href="'/packaging?project_id='+(selected?.id||'')">📦 Open in Studio</a>
|
|||
|
|
<a class="btn btn-sm btn-ghost" :href="'/api/packaging/download/'+a.ref_id+'?format=pdf'" target="_blank">PDF</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
<p x-show="!(selected.assets||[]).length" class="muted">Nog geen assets — koppel foto's of NAS-bestanden.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div x-show="detailTab==='photos'">
|
|||
|
|
<p class="page-tip">Klik een foto om te koppelen aan dit project.</p>
|
|||
|
|
<div class="photo-pick-grid">
|
|||
|
|
<template x-for="ph in photos" :key="ph.id">
|
|||
|
|
<div class="photo-pick-item" @click="linkPhoto(ph.id)">
|
|||
|
|
<img :src="'/api/admin/photos/' + ph.id + '/image.jpg'" :alt="ph.filename" loading="lazy" />
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
<p x-show="!photos.length" class="muted">Geen foto's — gebruik Browser/Photos om te importeren.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div x-show="detailTab==='files'">
|
|||
|
|
<p class="page-tip">Koppel een NAS-bestand aan dit project (gestructureerd in projectmap).</p>
|
|||
|
|
<div class="clients-toolbar">
|
|||
|
|
<input type="search" placeholder="Zoek bestand…" x-model="fileQ" @input="filterNasFiles()" />
|
|||
|
|
</div>
|
|||
|
|
<template x-for="f in nasFilesFiltered.slice(0,40)" :key="f.storage_path||f.path">
|
|||
|
|
<div class="feed-card clickable-row" @click="linkNasFile(f)">
|
|||
|
|
<strong x-text="f.filename||f.name"></strong>
|
|||
|
|
<small x-text="f.storage_path||f.path||''"></small>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<p x-show="!nasFiles.length" class="muted">Geen NAS-bestanden gevonden — check Documenten hub.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</aside>
|
|||
|
|
</div>
|
|||
|
|
{% endblock %}
|
|||
|
|
{% block scripts %}
|
|||
|
|
<script>
|
|||
|
|
function projectsHub() {
|
|||
|
|
return {
|
|||
|
|
tab: 'list', detailTab: 'info', busy: false, drawer: false,
|
|||
|
|
stats: {}, projects: [], filtered: [], clients: [], types: [],
|
|||
|
|
selected: null, photos: [], nasFiles: [], nasFilesFiltered: [], fileQ: '',
|
|||
|
|
filterQ: '', filterType: '', filterClient: '',
|
|||
|
|
form: { name: '', client_id: '', description: '', project_type: 'general', priority: 'normal' },
|
|||
|
|
|
|||
|
|
get clientsWithProjects() {
|
|||
|
|
return this.clients.map(c => ({
|
|||
|
|
...c,
|
|||
|
|
projects: this.projects.filter(p => p.client_id === c.id),
|
|||
|
|
})).filter(c => c.projects.length || true);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
typeLabel(id) {
|
|||
|
|
return (this.types.find(t => t.id === id) || {}).label_nl || id || '—';
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async init() {
|
|||
|
|
const q = new URLSearchParams(location.search).get('id');
|
|||
|
|
await Promise.all([this.loadAll(), this.loadClients(), this.loadTypes()]);
|
|||
|
|
if (q) this.open(parseInt(q, 10));
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async loadTypes() {
|
|||
|
|
const r = await fetch('/api/projects/types').then(x => x.json());
|
|||
|
|
this.types = r.items || [];
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async loadAll() {
|
|||
|
|
this.busy = true;
|
|||
|
|
try {
|
|||
|
|
const [statsR, projR] = await Promise.all([
|
|||
|
|
fetch('/api/projects/stats').then(x => x.json()),
|
|||
|
|
fetch('/api/projects?limit=200').then(x => x.json()),
|
|||
|
|
]);
|
|||
|
|
this.stats = statsR.stats || {};
|
|||
|
|
this.projects = projR.items || [];
|
|||
|
|
this.applyFilter();
|
|||
|
|
} catch (e) { Cockpit.toast(e.message, 'error'); }
|
|||
|
|
this.busy = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async loadClients() {
|
|||
|
|
try {
|
|||
|
|
const r = await Cockpit.api('/clients');
|
|||
|
|
this.clients = r.items || [];
|
|||
|
|
} catch (e) { this.clients = []; }
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
applyFilter() {
|
|||
|
|
const q = (this.filterQ || '').toLowerCase();
|
|||
|
|
this.filtered = this.projects.filter(p => {
|
|||
|
|
if (this.filterType && p.project_type !== this.filterType) return false;
|
|||
|
|
if (this.filterClient && String(p.client_id) !== String(this.filterClient)) return false;
|
|||
|
|
if (!q) return true;
|
|||
|
|
return [p.name, p.client_name, p.description].some(f => f && String(f).toLowerCase().includes(q));
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async create() {
|
|||
|
|
if (!this.form.name.trim()) return Cockpit.toast('Naam verplicht', 'error');
|
|||
|
|
if (!this.form.client_id) return Cockpit.toast('Selecteer een klant voor NAS-structuur', 'warn');
|
|||
|
|
await fetch('/api/projects', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
name: this.form.name,
|
|||
|
|
client_id: parseInt(this.form.client_id, 10),
|
|||
|
|
description: this.form.description,
|
|||
|
|
project_type: this.form.project_type,
|
|||
|
|
priority: this.form.priority,
|
|||
|
|
}),
|
|||
|
|
}).then(r => { if (!r.ok) throw new Error('Aanmaken mislukt'); return r.json(); });
|
|||
|
|
this.form = { name: '', client_id: '', description: '', project_type: 'general', priority: 'normal' };
|
|||
|
|
this.tab = 'list';
|
|||
|
|
await this.loadAll();
|
|||
|
|
Cockpit.toast('Project + NAS-map aangemaakt', 'success');
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async open(id) {
|
|||
|
|
const r = await fetch('/api/projects/' + id).then(x => x.json());
|
|||
|
|
this.selected = r.project;
|
|||
|
|
this.detailTab = 'info';
|
|||
|
|
this.drawer = true;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async ensureNas() {
|
|||
|
|
if (!this.selected) return;
|
|||
|
|
const r = await fetch('/api/projects/' + this.selected.id + '/ensure-nas', { method: 'POST' }).then(x => x.json());
|
|||
|
|
Cockpit.toast('NAS-map aangemaakt', 'success');
|
|||
|
|
await this.open(this.selected.id);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async loadPhotos() {
|
|||
|
|
try {
|
|||
|
|
const r = await Cockpit.api('/photos?limit=60');
|
|||
|
|
this.photos = r.items || r.photos || [];
|
|||
|
|
} catch (e) { this.photos = []; }
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async linkPhoto(photoId) {
|
|||
|
|
if (!this.selected) return;
|
|||
|
|
await Cockpit.api('/api/projects/photos/' + photoId + '/link', {
|
|||
|
|
method: 'POST',
|
|||
|
|
body: JSON.stringify({ project_id: this.selected.id }),
|
|||
|
|
});
|
|||
|
|
Cockpit.toast('Foto gekoppeld', 'success');
|
|||
|
|
await this.open(this.selected.id);
|
|||
|
|
await this.loadAll();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async loadNasFiles() {
|
|||
|
|
try {
|
|||
|
|
const r = await Cockpit.api('/documents/share-files?limit=200');
|
|||
|
|
this.nasFiles = r.items || r.files || [];
|
|||
|
|
this.filterNasFiles();
|
|||
|
|
} catch (e) { this.nasFiles = []; this.nasFilesFiltered = []; }
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
filterNasFiles() {
|
|||
|
|
const q = (this.fileQ || '').toLowerCase();
|
|||
|
|
this.nasFilesFiltered = this.nasFiles.filter(f => {
|
|||
|
|
const name = (f.filename || f.name || '').toLowerCase();
|
|||
|
|
const path = (f.storage_path || f.path || '').toLowerCase();
|
|||
|
|
return !q || name.includes(q) || path.includes(q);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async linkNasFile(f) {
|
|||
|
|
if (!this.selected) return;
|
|||
|
|
const path = f.storage_path || f.path;
|
|||
|
|
const title = f.filename || f.name || path;
|
|||
|
|
await fetch('/api/projects/' + this.selected.id + '/link-nas-file', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({ title, file_path: path, asset_type: 'document' }),
|
|||
|
|
});
|
|||
|
|
Cockpit.toast('Bestand gekoppeld', 'success');
|
|||
|
|
await this.open(this.selected.id);
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
{% endblock %}
|