Initial commit: SvelteKit PWA + PocketBase Setup für checkflo.de

- Landing Page mit Logo, Hero, Features, Steps, CTA
- QR-Scan Checklisten-Flow (/s/[id])
- PocketBase Client (pb.ts)
- Makefile für DS-Deployment (SSH)
- Setup-Scripts: setup-db.sh, seed-demo.sh
This commit is contained in:
rene 2026-05-17 11:31:13 +02:00
commit f2615c9e07
26 changed files with 2745 additions and 0 deletions

4
.gitignore vendored Normal file
View file

@ -0,0 +1,4 @@
.env
.env.*
*.local
.DS_Store

110
Makefile Normal file
View file

@ -0,0 +1,110 @@
# ==============================================================
# CHECKFLO — Makefile
# Deploy-Strategie: SSH zur DS, Docker Compose
# ==============================================================
DS_HOST := ds
DS_IP := 10.47.11.10
DS_SSH_PORT := 4711
DS_PATH := /volume1/docker/checkflo
CONTAINER_PB := checkflo-pocketbase
DOCKER := sudo /usr/local/bin/docker
.PHONY: help check-ssh start stop restart status logs logs-f shell-pb pb-admin
# ----------------------------------------------------------
# Hilfe
# ----------------------------------------------------------
help:
@echo ""
@echo " Checkflo — verfügbare Befehle:"
@echo ""
@echo " make start PocketBase starten"
@echo " make stop PocketBase stoppen"
@echo " make restart PocketBase neu starten"
@echo " make status Container-Status anzeigen"
@echo ""
@echo " make logs Letzte 100 Zeilen"
@echo " make logs-f Live-Log-Stream"
@echo " make shell-pb Shell in PocketBase-Container"
@echo " make pb-admin PocketBase Admin-URL anzeigen"
@echo ""
# ----------------------------------------------------------
# SSH-Prüfung
# ----------------------------------------------------------
check-ssh:
@if ! nc -z -w3 $(DS_IP) $(DS_SSH_PORT) 2>/dev/null; then \
echo ""; \
echo " ✗ DS nicht erreichbar ($(DS_IP):$(DS_SSH_PORT))"; \
echo ""; \
exit 1; \
fi
# ----------------------------------------------------------
# START
# ----------------------------------------------------------
start: check-ssh
@ssh $(DS_HOST) "cd $(DS_PATH) && $(DOCKER) compose up -d"
@echo " ✓ PocketBase gestartet."
# ----------------------------------------------------------
# STOP
# ----------------------------------------------------------
stop: check-ssh
@ssh $(DS_HOST) "cd $(DS_PATH) && $(DOCKER) compose down"
@echo " ✓ Gestoppt."
# ----------------------------------------------------------
# RESTART
# ----------------------------------------------------------
restart: check-ssh
@ssh $(DS_HOST) "cd $(DS_PATH) && $(DOCKER) compose restart"
@echo " ✓ Neugestartet."
# ----------------------------------------------------------
# STATUS
# ----------------------------------------------------------
status: check-ssh
@ssh $(DS_HOST) "$(DOCKER) ps \
--filter name=$(CONTAINER_PB) \
--format 'table {{.Names}}\t{{.Status}}\t{{.Ports}}'"
# ----------------------------------------------------------
# LOGS
# ----------------------------------------------------------
logs: check-ssh
@ssh $(DS_HOST) "$(DOCKER) logs $(CONTAINER_PB) --tail=100"
logs-f: check-ssh
@ssh $(DS_HOST) "$(DOCKER) logs $(CONTAINER_PB) -f"
# ----------------------------------------------------------
# SHELL in PocketBase
# ----------------------------------------------------------
shell-pb: check-ssh
@ssh -t $(DS_HOST) "$(DOCKER) exec -it $(CONTAINER_PB) sh"
# ----------------------------------------------------------
# POCKETBASE Admin
# ----------------------------------------------------------
pb-admin:
@echo " PocketBase Admin: https://api.checkflo.de/_/"
# ----------------------------------------------------------
# SETUP-DB — Datenmodell in PocketBase anlegen
# ----------------------------------------------------------
setup-db:
@PB_URL=https://api.checkflo.de \
PB_EMAIL=$(PB_EMAIL) \
PB_PASSWORD=$(PB_PASSWORD) \
./scripts/setup-db.sh
# ----------------------------------------------------------
# SEED-DEMO — Demo-Tenant mit Stationen anlegen
# ----------------------------------------------------------
seed-demo:
@PB_URL=https://api.checkflo.de \
PB_EMAIL=$(PB_EMAIL) \
PB_PASSWORD=$(PB_PASSWORD) \
./scripts/seed-demo.sh

23
app/.gitignore vendored Normal file
View file

@ -0,0 +1,23 @@
node_modules
# Output
.output
.vercel
.netlify
.wrangler
/.svelte-kit
/build
# OS
.DS_Store
Thumbs.db
# Env
.env
.env.*
!.env.example
!.env.test
# Vite
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

1
app/.npmrc Normal file
View file

@ -0,0 +1 @@
engine-strict=true

3
app/.vscode/extensions.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"recommendations": ["svelte.svelte-vscode"]
}

42
app/README.md Normal file
View file

@ -0,0 +1,42 @@
# sv
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
## Creating a project
If you're seeing this, you've probably already done this step. Congrats!
```sh
# create a new project
npx sv create my-app
```
To recreate this project with the same configuration:
```sh
# recreate this project
npx sv@0.15.3 create --template minimal --types ts --install yarn app
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```sh
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```sh
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

1385
app/package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

26
app/package.json Normal file
View file

@ -0,0 +1,26 @@
{
"name": "app",
"private": true,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"prepare": "svelte-kit sync || echo ''",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^7.0.1",
"@sveltejs/kit": "^2.57.0",
"@sveltejs/vite-plugin-svelte": "^7.0.0",
"svelte": "^5.55.2",
"svelte-check": "^4.4.6",
"typescript": "^6.0.2",
"vite": "^8.0.7"
},
"dependencies": {
"pocketbase": "^0.26.9"
}
}

13
app/src/app.d.ts vendored Normal file
View file

@ -0,0 +1,13 @@
// See https://svelte.dev/docs/kit/types#app.d.ts
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};

12
app/src/app.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="text-scale" content="scale" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 MiB

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

1
app/src/lib/index.ts Normal file
View file

@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.

14
app/src/lib/pb.ts Normal file
View file

@ -0,0 +1,14 @@
import PocketBase from 'pocketbase';
import { browser } from '$app/environment';
const PB_URL = 'https://api.checkflo.de';
export const pb = new PocketBase(PB_URL);
// Auth-State nur im Browser persistieren
if (browser) {
pb.authStore.loadFromCookie(document.cookie);
pb.authStore.onChange(() => {
document.cookie = pb.authStore.exportToCookie({ httpOnly: false });
});
}

View file

@ -0,0 +1,31 @@
<script lang="ts">
let { children } = $props();
</script>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>checkflo — Digitale HACCP-Protokolle</title>
</svelte:head>
{@render children()}
<style>
:global(*) {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:global(body) {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #1a1a2e;
background: #fff;
line-height: 1.6;
}
:global(a) {
color: inherit;
text-decoration: none;
}
</style>

281
app/src/routes/+page.svelte Normal file
View file

@ -0,0 +1,281 @@
<script lang="ts">
import logo from '$lib/assets/checkflo-logo.png';
const features = [
{
icon: '📱',
title: 'Kein App-Store',
text: 'QR-Code scannen — fertig. Die App öffnet direkt im Browser, ohne Installation.'
},
{
icon: '📶',
title: 'Offline-fähig',
text: 'Kein Empfang im Keller? Kein Problem. Daten werden lokal gespeichert und automatisch synchronisiert.'
},
{
icon: '📄',
title: 'PDF auf Knopfdruck',
text: 'Monatsprotokolle für Lebensmittelkontrolleure automatisch generieren — rechtssicher und vollständig.'
}
];
</script>
<!-- NAV -->
<nav>
<a href="/" class="logo">
<img src={logo} alt="checkflo" height="36" />
</a>
<a href="/admin" class="btn-nav">Anmelden</a>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-inner">
<p class="eyebrow">HACCP-Dokumentation für die Gastronomie</p>
<h1>Prüfprotokolle.<br />Ohne Papier.<br />Ohne App-Store.</h1>
<p class="subtitle">
Kühlschranktemperaturen, Hygienekontrollen und Wartungsnachweise —
digital erfasst, automatisch protokolliert, jederzeit abrufbar.
</p>
<div class="hero-actions">
<a href="mailto:hallo@checkflo.de" class="btn-primary">Kostenlose Demo anfragen</a>
<a href="#funktionen" class="btn-ghost">Wie es funktioniert ↓</a>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section class="steps" id="funktionen">
<div class="container">
<h2>In 3 Schritten zum digitalen Protokoll</h2>
<div class="steps-grid">
<div class="step">
<div class="step-num">1</div>
<h3>QR-Code aufkleben</h3>
<p>Robuste NFC/QR-Tags direkt am Kühlschrank, Warmhaltebehälter oder an der Hygiene-Station.</p>
</div>
<div class="step">
<div class="step-num">2</div>
<h3>Scannen & ausfüllen</h3>
<p>Techniker scannt den Code, trägt Temperatur ein, macht bei Abweichung ein Foto — fertig.</p>
</div>
<div class="step">
<div class="step-num">3</div>
<h3>Protokoll abrufen</h3>
<p>Vollständiges Monatsprotokoll als PDF — für Lebensmittelkontrolle, Franchise-Geber oder eigene Dokumentation.</p>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="features">
<div class="container">
<h2>Warum checkflo?</h2>
<div class="features-grid">
{#each features as f}
<div class="feature-card">
<span class="feature-icon">{f.icon}</span>
<h3>{f.title}</h3>
<p>{f.text}</p>
</div>
{/each}
</div>
</div>
</section>
<!-- CTA -->
<section class="cta">
<div class="container">
<h2>Bereit für papierlose HACCP-Dokumentation?</h2>
<p>Für Gastronomie, Kantinen, Caterer und Lebensmittelverarbeiter.</p>
<a href="mailto:hallo@checkflo.de" class="btn-primary btn-large">Jetzt Demo vereinbaren</a>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="container">
<span class="logo"><span class="logo-check">check</span><span class="logo-flo">flo</span></span>
<span>© 2026 checkflo · <a href="mailto:hallo@checkflo.de">hallo@checkflo.de</a></span>
</div>
</footer>
<style>
/* NAV */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
border-bottom: 1px solid #f0f0f0;
position: sticky;
top: 0;
background: #fff;
z-index: 10;
}
.logo { display: flex; align-items: center; }
.logo img { height: 36px; width: auto; }
.btn-nav {
padding: 0.5rem 1.25rem;
border: 1.5px solid #0B1023;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.15s;
}
.btn-nav:hover { background: #0B1023; color: #fff; }
/* HERO */
.hero {
background: linear-gradient(135deg, #0B1023 0%, #16213e 100%);
color: #fff;
padding: 5rem 2rem 6rem;
text-align: center;
}
.hero-inner { max-width: 720px; margin: 0 auto; }
.eyebrow {
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #F97316;
margin-bottom: 1.5rem;
}
h1 {
font-size: clamp(2.2rem, 6vw, 3.5rem);
font-weight: 800;
line-height: 1.15;
margin-bottom: 1.5rem;
}
.subtitle {
font-size: 1.15rem;
color: #b0b8cc;
max-width: 560px;
margin: 0 auto 2.5rem;
}
.hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* BUTTONS */
.btn-primary {
background: #F97316;
color: #fff;
padding: 0.85rem 2rem;
border-radius: 8px;
font-weight: 700;
font-size: 1rem;
transition: background 0.15s;
display: inline-block;
}
.btn-primary:hover { background: #ea6c10; }
.btn-large { padding: 1rem 2.5rem; font-size: 1.1rem; }
.btn-ghost {
color: #b0b8cc;
padding: 0.85rem 1.5rem;
font-size: 1rem;
transition: color 0.15s;
display: inline-block;
}
.btn-ghost:hover { color: #fff; }
/* STEPS */
.steps {
padding: 5rem 2rem;
background: #F5F7FA;
}
.container { max-width: 1000px; margin: 0 auto; }
h2 {
font-size: 1.9rem;
font-weight: 800;
text-align: center;
margin-bottom: 3rem;
}
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
}
.step {
background: #fff;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.step-num {
width: 2.5rem;
height: 2.5rem;
background: #F97316;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.1rem;
margin-bottom: 1rem;
}
.step h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.step p { color: #555; font-size: 0.95rem; }
/* FEATURES */
.features { padding: 5rem 2rem; }
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
}
.feature-card {
border: 1.5px solid #eee;
border-radius: 12px;
padding: 2rem;
transition: border-color 0.15s;
}
.feature-card:hover { border-color: #F97316; }
.feature-icon { font-size: 2rem; display: block; margin-bottom: 1rem; }
.feature-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.feature-card p { color: #555; font-size: 0.95rem; }
/* CTA */
.cta {
background: #0B1023;
color: #fff;
padding: 5rem 2rem;
text-align: center;
}
.cta h2 { color: #fff; margin-bottom: 1rem; }
.cta p { color: #b0b8cc; margin-bottom: 2rem; }
/* FOOTER */
footer {
padding: 1.5rem 2rem;
border-top: 1px solid #f0f0f0;
}
footer .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.9rem;
color: #888;
}
footer a:hover { color: #F97316; }
</style>

View file

@ -0,0 +1,356 @@
<script lang="ts">
import { pb } from '$lib/pb';
let { data } = $props();
const station = $derived(data.station);
const tenant = $derived(station.expand?.tenant);
const primaryColor = $derived(tenant?.primary_color ?? '#e85d04');
type Status = 'ok' | 'abweichung' | 'kritisch';
let temperature = $state<string>('');
let status = $state<Status | null>(null);
let notes = $state('');
let checkedBy = $state('');
let photo = $state<File | null>(null);
let photoPreview = $state<string | null>(null);
let submitting = $state(false);
let submitted = $state(false);
let submittedAt = $state('');
let error = $state('');
const statusLabels: Record<Status, string> = {
ok: '✓ Alles in Ordnung',
abweichung: '⚠ Abweichung',
kritisch: '✗ Kritisch'
};
const showTemp = $derived(
station.type === 'kuehlschrank' ||
station.type === 'tiefkuehl' ||
station.type === 'warmhalte'
);
function onPhoto(e: Event) {
const file = (e.target as HTMLInputElement).files?.[0];
if (!file) return;
photo = file;
photoPreview = URL.createObjectURL(file);
}
async function submit() {
if (!status) { error = 'Bitte Status auswählen.'; return; }
if (!checkedBy.trim()) { error = 'Bitte Namen eintragen.'; return; }
error = '';
submitting = true;
try {
const fd = new FormData();
fd.append('station', station.id);
fd.append('tenant', station.tenant);
fd.append('status', status);
fd.append('notes', notes);
fd.append('checked_by', checkedBy.trim());
if (temperature) fd.append('temperature', temperature);
if (photo) fd.append('photo', photo);
await pb.collection('check_logs').create(fd);
submittedAt = new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
submitted = true;
} catch (e) {
error = 'Fehler beim Speichern. Bitte erneut versuchen.';
} finally {
submitting = false;
}
}
function reset() {
temperature = '';
status = null;
notes = '';
photo = null;
photoPreview = null;
submitted = false;
error = '';
}
</script>
<svelte:head>
<title>{station.name} — checkflo</title>
</svelte:head>
<div class="page" style="--brand: {primaryColor}">
<!-- HEADER -->
<header>
<div class="tenant-name">{tenant?.name ?? 'checkflo'}</div>
<div class="station-name">{station.name}</div>
{#if station.target_temp_min || station.target_temp_max}
<div class="temp-range">
Zielbereich: {station.target_temp_min}° bis {station.target_temp_max}°C
</div>
{/if}
</header>
<!-- ERFOLG -->
{#if submitted}
<div class="success">
<div class="success-icon"></div>
<h2>Erfasst um {submittedAt} Uhr</h2>
<p>Der Eintrag wurde gespeichert.</p>
<button class="btn-primary" onclick={reset}>Neuen Eintrag erfassen</button>
</div>
<!-- FORMULAR -->
{:else}
<form onsubmit={(e) => { e.preventDefault(); submit(); }}>
<!-- TEMPERATUR -->
{#if showTemp}
<div class="field">
<label for="temp">Temperatur (°C)</label>
<input
id="temp"
type="number"
inputmode="decimal"
step="0.1"
placeholder="z.B. 4.5"
bind:value={temperature}
/>
</div>
{/if}
<!-- STATUS -->
<div class="field">
<span class="field-label">Status *</span>
<div class="status-buttons">
{#each (Object.keys(statusLabels) as Status[]) as s}
<button
type="button"
class="status-btn status-{s}"
class:active={status === s}
onclick={() => status = s}
>
{statusLabels[s]}
</button>
{/each}
</div>
</div>
<!-- NOTIZ -->
{#if status === 'abweichung' || status === 'kritisch'}
<div class="field">
<label for="notes">Beschreibung der Abweichung *</label>
<textarea id="notes" rows="3" placeholder="Was wurde festgestellt?" bind:value={notes}></textarea>
</div>
{/if}
<!-- FOTO -->
<div class="field">
<span class="field-label">Foto (optional)</span>
{#if photoPreview}
<img src={photoPreview} alt="Vorschau" class="photo-preview" />
{/if}
<label class="file-btn">
📷 {photo ? 'Foto ändern' : 'Foto aufnehmen'}
<input type="file" accept="image/*" capture="environment" onchange={onPhoto} hidden />
</label>
</div>
<!-- NAME -->
<div class="field">
<label for="name">Ihr Name *</label>
<input id="name" type="text" placeholder="Max Mustermann" bind:value={checkedBy} />
</div>
{#if error}
<p class="error">{error}</p>
{/if}
<button type="submit" class="btn-primary btn-submit" disabled={submitting}>
{submitting ? 'Wird gespeichert…' : 'Eintrag speichern'}
</button>
</form>
{/if}
<footer>
<a href="/">checkflo</a>
</footer>
</div>
<style>
.page {
min-height: 100dvh;
display: flex;
flex-direction: column;
max-width: 480px;
margin: 0 auto;
padding: 0 0 2rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* HEADER */
header {
background: var(--brand);
color: #fff;
padding: 2rem 1.5rem 1.5rem;
}
.tenant-name {
font-size: 0.8rem;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.25rem;
}
.station-name {
font-size: 1.6rem;
font-weight: 800;
line-height: 1.2;
}
.temp-range {
margin-top: 0.5rem;
font-size: 0.85rem;
opacity: 0.85;
}
/* FORMULAR */
form {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
flex: 1;
}
.field { display: flex; flex-direction: column; gap: 0.5rem; }
label, .field-label {
font-size: 0.9rem;
font-weight: 600;
color: #333;
}
input[type='text'],
input[type='number'],
textarea {
border: 1.5px solid #ddd;
border-radius: 8px;
padding: 0.75rem 1rem;
font-size: 1rem;
width: 100%;
transition: border-color 0.15s;
}
input:focus, textarea:focus {
outline: none;
border-color: var(--brand);
}
textarea { resize: vertical; }
/* STATUS BUTTONS */
.status-buttons {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.status-btn {
padding: 1rem;
border-radius: 10px;
border: 2px solid transparent;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
text-align: left;
transition: all 0.15s;
}
.status-ok { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.status-abweichung { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.status-kritisch { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.status-ok.active { background: #dcfce7; border-color: #16a34a; }
.status-abweichung.active { background: #ffedd5; border-color: #ea580c; }
.status-kritisch.active { background: #fee2e2; border-color: #dc2626; }
/* FOTO */
.photo-preview {
width: 100%;
border-radius: 8px;
margin-bottom: 0.5rem;
}
.file-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
border: 1.5px dashed #ccc;
border-radius: 8px;
cursor: pointer;
font-size: 0.95rem;
font-weight: 500;
color: #555;
transition: border-color 0.15s;
}
.file-btn:hover { border-color: var(--brand); color: var(--brand); }
/* BUTTONS */
.btn-primary {
background: var(--brand);
color: #fff;
border: none;
border-radius: 10px;
padding: 1rem;
font-size: 1.05rem;
font-weight: 700;
cursor: pointer;
width: 100%;
transition: opacity 0.15s;
}
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-submit { margin-top: 0.5rem; }
/* FEHLER */
.error {
color: #dc2626;
font-size: 0.9rem;
padding: 0.75rem 1rem;
background: #fef2f2;
border-radius: 8px;
}
/* ERFOLG */
.success {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
text-align: center;
gap: 1rem;
}
.success-icon {
width: 4rem;
height: 4rem;
background: #dcfce7;
color: #16a34a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 700;
}
.success h2 { font-size: 1.4rem; }
.success p { color: #666; }
/* FOOTER */
footer {
text-align: center;
padding: 1rem;
font-size: 0.8rem;
color: #aaa;
}
footer a { color: #aaa; }
footer a:hover { color: var(--brand); }
</style>

View file

@ -0,0 +1,15 @@
import { error } from '@sveltejs/kit';
import { pb } from '$lib/pb';
export const ssr = false;
export async function load({ params }) {
try {
const station = await pb
.collection('stations')
.getFirstListItem(`qr_id = "${params.id}"`, { expand: 'tenant' });
return { station };
} catch {
throw error(404, 'Station nicht gefunden');
}
}

3
app/static/robots.txt Normal file
View file

@ -0,0 +1,3 @@
# allow crawling everything by default
User-agent: *
Disallow:

17
app/svelte.config.js Normal file
View file

@ -0,0 +1,17 @@
import adapter from '@sveltejs/adapter-auto';
/** @type {import('@sveltejs/kit').Config} */
const config = {
compilerOptions: {
// Force runes mode for the project, except for libraries. Can be removed in svelte 6.
runes: ({ filename }) => (filename.split(/[/\\]/).includes('node_modules') ? undefined : true)
},
kit: {
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
adapter: adapter()
}
};
export default config;

20
app/tsconfig.json Normal file
View file

@ -0,0 +1,20 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"rewriteRelativeImportExtensions": true,
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"moduleResolution": "bundler"
}
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
//
// To make changes to top-level options such as include and exclude, we recommend extending
// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
}

6
app/vite.config.ts Normal file
View file

@ -0,0 +1,6 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()]
});

BIN
logo/checkflo-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 MiB

93
scripts/seed-demo.sh Executable file
View file

@ -0,0 +1,93 @@
#!/bin/bash
# Legt den Demo-Tenant mit Stationen an.
set -euo pipefail
PB_URL="${PB_URL:-https://api.checkflo.de}"
if [ -z "${PB_EMAIL:-}" ] || [ -z "${PB_PASSWORD:-}" ]; then
echo "Aufruf: PB_EMAIL=... PB_PASSWORD=... ./seed-demo.sh"
exit 1
fi
# Authentifizierung
TOKEN=$(curl -sf -X POST "$PB_URL/api/collections/_superusers/auth-with-password" \
-H "Content-Type: application/json" \
-d "{\"identity\":\"$PB_EMAIL\",\"password\":\"$PB_PASSWORD\"}" | jq -r '.token')
echo "✓ Eingeloggt"
# ----------------------------------------------------------
# Tenant: Musterküche GmbH
# ----------------------------------------------------------
echo "→ Erstelle Demo-Tenant..."
TENANT=$(curl -sf -X POST "$PB_URL/api/collections/tenants/records" \
-H "Authorization: $TOKEN" \
-H "Content-Type: application/json" \
-d '{
"name": "Musterküche GmbH",
"slug": "musterkueche",
"primary_color": "#e85d04",
"plan": "basic",
"active": true
}')
TENANT_ID=$(echo "$TENANT" | jq -r '.id')
echo "✓ Tenant: Musterküche GmbH ($TENANT_ID)"
# ----------------------------------------------------------
# Stationen
# ----------------------------------------------------------
create_station() {
local name=$1
local type=$2
local min=$3
local max=$4
local qr_id
qr_id=$(uuidgen | tr '[:upper:]' '[:lower:]')
curl -sf -X POST "$PB_URL/api/collections/stations/records" \
-H "Authorization: $TOKEN" \
-H "Content-Type: application/json" \
-d "{
\"tenant\": \"$TENANT_ID\",
\"name\": \"$name\",
\"type\": \"$type\",
\"target_temp_min\": $min,
\"target_temp_max\": $max,
\"qr_id\": \"$qr_id\",
\"active\": true
}" | jq -r '"✓ Station: \(.name) — QR: \(.qr_id)"'
}
echo "→ Erstelle Stationen..."
create_station "Kühlschrank 1 (Küche)" "kuehlschrank" 1 7
create_station "Kühlschrank 2 (Getränke)" "kuehlschrank" 1 8
create_station "Tiefkühlzelle" "tiefkuehl" -22 -18
create_station "Warmhaltebehälter" "warmhalte" 65 80
create_station "Wochenhygiene-Check" "hygiene" 0 0
# ----------------------------------------------------------
# Demo-User (Admin des Tenants)
# ----------------------------------------------------------
echo "→ Erstelle Demo-User..."
curl -sf -X POST "$PB_URL/api/collections/users/records" \
-H "Authorization: $TOKEN" \
-H "Content-Type: application/json" \
-d "{
\"email\": \"chef@musterkueche.de\",
\"password\": \"Demo1234567!\",
\"passwordConfirm\": \"Demo1234567!\",
\"name\": \"Chef Demo\",
\"tenant\": \"$TENANT_ID\",
\"role\": \"admin\",
\"verified\": true
}" | jq -r '"✓ User: \(.email)"'
echo ""
echo " ✓ Demo-Daten angelegt:"
echo " Tenant: Musterküche GmbH ($TENANT_ID)"
echo " Login: chef@musterkueche.de / Demo1234567!"
echo " Stationen: 5"
echo ""
echo " QR-Scan URL: https://checkflo.de/s/{qr_id}"
echo ""

144
scripts/setup-db Executable file
View file

@ -0,0 +1,144 @@
#!/bin/bash
# Legt das PocketBase-Datenmodell für checkflo an.
# Aufruf: PB_EMAIL=... PB_PASSWORD=... ./scripts/setup-db.sh
set -euo pipefail
PB_URL="${PB_URL:-https://api.checkflo.de}"
if [ -z "${PB_EMAIL:-}" ] || [ -z "${PB_PASSWORD:-}" ]; then
echo "Aufruf: PB_EMAIL=admin@... PB_PASSWORD=... ./scripts/setup-db.sh"
exit 1
fi
if ! command -v jq &>/dev/null; then
echo "✗ jq nicht gefunden. Installieren: brew install jq"
exit 1
fi
echo "→ Verbinde mit $PB_URL ..."
# Authentifizierung
AUTH=$(curl -sf -X POST "$PB_URL/api/collections/_superusers/auth-with-password" \
-H "Content-Type: application/json" \
-d "{\"identity\":\"$PB_EMAIL\",\"password\":\"$PB_PASSWORD\"}")
TOKEN=$(echo "$AUTH" | jq -r '.token')
if [ -z "$TOKEN" ] || [ "$TOKEN" = "null" ]; then
echo "✗ Authentifizierung fehlgeschlagen"
exit 1
fi
echo "✓ Eingeloggt"
# ----------------------------------------------------------
# Helper: Collection erstellen
# ----------------------------------------------------------
create_collection() {
local label=$1
local json=$2
RESP=$(curl -sf -X POST "$PB_URL/api/collections" \
-H "Authorization: $TOKEN" \
-H "Content-Type: application/json" \
-d "$json")
ID=$(echo "$RESP" | jq -r '.id')
echo "$ID"
}
# ----------------------------------------------------------
# 1. tenants
# ----------------------------------------------------------
echo "→ Erstelle 'tenants'..."
TENANTS_ID=$(create_collection "tenants" '{
"name": "tenants",
"type": "base",
"fields": [
{"name": "name", "type": "text", "required": true},
{"name": "slug", "type": "text", "required": true},
{"name": "primary_color", "type": "text"},
{"name": "logo", "type": "file", "maxSelect": 1, "maxSize": 5242880},
{"name": "plan", "type": "select", "values": ["basic","pro","enterprise"], "maxSelect": 1},
{"name": "active", "type": "bool"}
],
"listRule": "@request.auth.id != \"\"",
"viewRule": "@request.auth.id != \"\"",
"createRule": null,
"updateRule": null,
"deleteRule": null
}')
echo "✓ tenants ($TENANTS_ID)"
# ----------------------------------------------------------
# 2. stations
# ----------------------------------------------------------
echo "→ Erstelle 'stations'..."
STATIONS_ID=$(create_collection "stations" "{
\"name\": \"stations\",
\"type\": \"base\",
\"fields\": [
{\"name\": \"tenant\", \"type\": \"relation\", \"collectionId\": \"$TENANTS_ID\", \"required\": true, \"maxSelect\": 1, \"cascadeDelete\": true},
{\"name\": \"name\", \"type\": \"text\", \"required\": true},
{\"name\": \"type\", \"type\": \"select\", \"values\": [\"kuehlschrank\",\"tiefkuehl\",\"warmhalte\",\"hygiene\",\"sonstiges\"], \"maxSelect\": 1},
{\"name\": \"target_temp_min\", \"type\": \"number\"},
{\"name\": \"target_temp_max\", \"type\": \"number\"},
{\"name\": \"qr_id\", \"type\": \"text\", \"required\": true},
{\"name\": \"active\", \"type\": \"bool\"}
],
\"listRule\": \"@request.auth.tenant = tenant\",
\"viewRule\": \"@request.auth.tenant = tenant\",
\"createRule\": \"@request.auth.tenant = tenant && @request.auth.role = 'admin'\",
\"updateRule\": \"@request.auth.tenant = tenant && @request.auth.role = 'admin'\",
\"deleteRule\": null
}")
echo "✓ stations ($STATIONS_ID)"
# ----------------------------------------------------------
# 3. check_logs
# ----------------------------------------------------------
echo "→ Erstelle 'check_logs'..."
LOGS_ID=$(create_collection "check_logs" "{
\"name\": \"check_logs\",
\"type\": \"base\",
\"fields\": [
{\"name\": \"station\", \"type\": \"relation\", \"collectionId\": \"$STATIONS_ID\", \"required\": true, \"maxSelect\": 1, \"cascadeDelete\": false},
{\"name\": \"tenant\", \"type\": \"relation\", \"collectionId\": \"$TENANTS_ID\", \"required\": true, \"maxSelect\": 1, \"cascadeDelete\": false},
{\"name\": \"temperature\", \"type\": \"number\"},
{\"name\": \"status\", \"type\": \"select\", \"values\": [\"ok\",\"abweichung\",\"kritisch\"], \"maxSelect\": 1},
{\"name\": \"notes\", \"type\": \"text\"},
{\"name\": \"photo\", \"type\": \"file\", \"maxSelect\": 1, \"maxSize\": 5242880},
{\"name\": \"checked_by\", \"type\": \"text\"}
],
\"listRule\": \"@request.auth.tenant = tenant\",
\"viewRule\": \"@request.auth.tenant = tenant\",
\"createRule\": \"\",
\"updateRule\": null,
\"deleteRule\": \"@request.auth.tenant = tenant && @request.auth.role = 'admin'\"
}")
echo "✓ check_logs ($LOGS_ID)"
# ----------------------------------------------------------
# 4. users — tenant + role hinzufügen
# ----------------------------------------------------------
echo "→ Erweitere 'users' (tenant + role)..."
USERS_RESP=$(curl -sf "$PB_URL/api/collections/users" -H "Authorization: $TOKEN")
EXISTING_FIELDS=$(echo "$USERS_RESP" | jq '.fields')
NEW_FIELDS=$(echo "$EXISTING_FIELDS" | jq ". + [
{\"name\": \"tenant\", \"type\": \"relation\", \"collectionId\": \"$TENANTS_ID\", \"maxSelect\": 1, \"cascadeDelete\": false},
{\"name\": \"role\", \"type\": \"select\", \"values\": [\"admin\",\"techniker\"], \"maxSelect\": 1}
]")
curl -sf -X PATCH "$PB_URL/api/collections/users" \
-H "Authorization: $TOKEN" \
-H "Content-Type: application/json" \
-d "{\"fields\": $NEW_FIELDS}" > /dev/null
echo "✓ users erweitert"
# ----------------------------------------------------------
# Zusammenfassung
# ----------------------------------------------------------
echo ""
echo " ✓ Datenmodell angelegt:"
echo " tenants $TENANTS_ID"
echo " stations $STATIONS_ID"
echo " check_logs $LOGS_ID"
echo ""

144
scripts/setup-db.sh Executable file
View file

@ -0,0 +1,144 @@
#!/bin/bash
# Legt das PocketBase-Datenmodell für checkflo an.
# Aufruf: PB_EMAIL=... PB_PASSWORD=... ./scripts/setup-db.sh
set -euo pipefail
PB_URL="${PB_URL:-https://api.checkflo.de}"
if [ -z "${PB_EMAIL:-}" ] || [ -z "${PB_PASSWORD:-}" ]; then
echo "Aufruf: PB_EMAIL=admin@... PB_PASSWORD=... ./scripts/setup-db.sh"
exit 1
fi
if ! command -v jq &>/dev/null; then
echo "✗ jq nicht gefunden. Installieren: brew install jq"
exit 1
fi
echo "→ Verbinde mit $PB_URL ..."
# Authentifizierung
AUTH=$(curl -sf -X POST "$PB_URL/api/collections/_superusers/auth-with-password" \
-H "Content-Type: application/json" \
-d "{\"identity\":\"$PB_EMAIL\",\"password\":\"$PB_PASSWORD\"}")
TOKEN=$(echo "$AUTH" | jq -r '.token')
if [ -z "$TOKEN" ] || [ "$TOKEN" = "null" ]; then
echo "✗ Authentifizierung fehlgeschlagen"
exit 1
fi
echo "✓ Eingeloggt"
# ----------------------------------------------------------
# Helper: Collection erstellen
# ----------------------------------------------------------
create_collection() {
local label=$1
local json=$2
RESP=$(curl -sf -X POST "$PB_URL/api/collections" \
-H "Authorization: $TOKEN" \
-H "Content-Type: application/json" \
-d "$json")
ID=$(echo "$RESP" | jq -r '.id')
echo "$ID"
}
# ----------------------------------------------------------
# 1. tenants
# ----------------------------------------------------------
echo "→ Erstelle 'tenants'..."
TENANTS_ID=$(create_collection "tenants" '{
"name": "tenants",
"type": "base",
"fields": [
{"name": "name", "type": "text", "required": true},
{"name": "slug", "type": "text", "required": true},
{"name": "primary_color", "type": "text"},
{"name": "logo", "type": "file", "maxSelect": 1, "maxSize": 5242880},
{"name": "plan", "type": "select", "values": ["basic","pro","enterprise"], "maxSelect": 1},
{"name": "active", "type": "bool"}
],
"listRule": "@request.auth.id != \"\"",
"viewRule": "@request.auth.id != \"\"",
"createRule": null,
"updateRule": null,
"deleteRule": null
}')
echo "✓ tenants ($TENANTS_ID)"
# ----------------------------------------------------------
# 2. stations
# ----------------------------------------------------------
echo "→ Erstelle 'stations'..."
STATIONS_ID=$(create_collection "stations" "{
\"name\": \"stations\",
\"type\": \"base\",
\"fields\": [
{\"name\": \"tenant\", \"type\": \"relation\", \"collectionId\": \"$TENANTS_ID\", \"required\": true, \"maxSelect\": 1, \"cascadeDelete\": true},
{\"name\": \"name\", \"type\": \"text\", \"required\": true},
{\"name\": \"type\", \"type\": \"select\", \"values\": [\"kuehlschrank\",\"tiefkuehl\",\"warmhalte\",\"hygiene\",\"sonstiges\"], \"maxSelect\": 1},
{\"name\": \"target_temp_min\", \"type\": \"number\"},
{\"name\": \"target_temp_max\", \"type\": \"number\"},
{\"name\": \"qr_id\", \"type\": \"text\", \"required\": true},
{\"name\": \"active\", \"type\": \"bool\"}
],
\"listRule\": \"@request.auth.tenant = tenant\",
\"viewRule\": \"@request.auth.tenant = tenant\",
\"createRule\": \"@request.auth.tenant = tenant && @request.auth.role = 'admin'\",
\"updateRule\": \"@request.auth.tenant = tenant && @request.auth.role = 'admin'\",
\"deleteRule\": null
}")
echo "✓ stations ($STATIONS_ID)"
# ----------------------------------------------------------
# 3. check_logs
# ----------------------------------------------------------
echo "→ Erstelle 'check_logs'..."
LOGS_ID=$(create_collection "check_logs" "{
\"name\": \"check_logs\",
\"type\": \"base\",
\"fields\": [
{\"name\": \"station\", \"type\": \"relation\", \"collectionId\": \"$STATIONS_ID\", \"required\": true, \"maxSelect\": 1, \"cascadeDelete\": false},
{\"name\": \"tenant\", \"type\": \"relation\", \"collectionId\": \"$TENANTS_ID\", \"required\": true, \"maxSelect\": 1, \"cascadeDelete\": false},
{\"name\": \"temperature\", \"type\": \"number\"},
{\"name\": \"status\", \"type\": \"select\", \"values\": [\"ok\",\"abweichung\",\"kritisch\"], \"maxSelect\": 1},
{\"name\": \"notes\", \"type\": \"text\"},
{\"name\": \"photo\", \"type\": \"file\", \"maxSelect\": 1, \"maxSize\": 5242880},
{\"name\": \"checked_by\", \"type\": \"text\"}
],
\"listRule\": \"@request.auth.tenant = tenant\",
\"viewRule\": \"@request.auth.tenant = tenant\",
\"createRule\": \"\",
\"updateRule\": null,
\"deleteRule\": \"@request.auth.tenant = tenant && @request.auth.role = 'admin'\"
}")
echo "✓ check_logs ($LOGS_ID)"
# ----------------------------------------------------------
# 4. users — tenant + role hinzufügen
# ----------------------------------------------------------
echo "→ Erweitere 'users' (tenant + role)..."
USERS_RESP=$(curl -sf "$PB_URL/api/collections/users" -H "Authorization: $TOKEN")
EXISTING_FIELDS=$(echo "$USERS_RESP" | jq '.fields')
NEW_FIELDS=$(echo "$EXISTING_FIELDS" | jq ". + [
{\"name\": \"tenant\", \"type\": \"relation\", \"collectionId\": \"$TENANTS_ID\", \"maxSelect\": 1, \"cascadeDelete\": false},
{\"name\": \"role\", \"type\": \"select\", \"values\": [\"admin\",\"techniker\"], \"maxSelect\": 1}
]")
curl -sf -X PATCH "$PB_URL/api/collections/users" \
-H "Authorization: $TOKEN" \
-H "Content-Type: application/json" \
-d "{\"fields\": $NEW_FIELDS}" > /dev/null
echo "✓ users erweitert"
# ----------------------------------------------------------
# Zusammenfassung
# ----------------------------------------------------------
echo ""
echo " ✓ Datenmodell angelegt:"
echo " tenants $TENANTS_ID"
echo " stations $STATIONS_ID"
echo " check_logs $LOGS_ID"
echo ""