commit 72a78b55fb66aa1d04c8caba6ab1e626fe4dba9b
Author: Jon Vanvik <jon@vanvikinternet.no>
Date:   Fri Jun 12 11:17:07 2026 +0200

    initial commit

diff --git a/netops-todo-apache-pakke.zip b/netops-todo-apache-pakke.zip
new file mode 100644
index 0000000..ee15fb4
Binary files /dev/null and b/netops-todo-apache-pakke.zip differ
diff --git a/netops-todo-server/.htaccess b/netops-todo-server/.htaccess
new file mode 100644
index 0000000..8c82327
--- /dev/null
+++ b/netops-todo-server/.htaccess
@@ -0,0 +1,39 @@
+# NetOps To-Do — Apache-konfigurasjon
+#
+# === 1) Basic Auth (enkleste måte) ===================================
+# Opprett .htpasswd et sted UTENFOR web-roten:
+#   htpasswd -c /etc/apache2/netops.htpasswd jon
+#   htpasswd /etc/apache2/netops.htpasswd kari     # legg til flere
+#
+# Juster pathen nedenfor og fjern kommentar-tegnene:
+#
+# AuthType Basic
+# AuthName "NetOps To-Do"
+# AuthUserFile /etc/apache2/netops.htpasswd
+# Require valid-user
+
+# === 2) Hvis du heller vil bruke reverse-proxy + ekstern auth ========
+# Proxy-en kan sette X-Remote-User:
+#   RequestHeader set X-Remote-User "%{REMOTE_USER}s"  (i proxy-konfig)
+# PHP-koden leser REMOTE_USER / PHP_AUTH_USER / HTTP_X_REMOTE_USER automatisk.
+
+# === 3) Generelle beskyttelser ========================================
+# Forby tilgang til data-mappa via web (en ekstra .htaccess ligger der også)
+RewriteEngine On
+RewriteRule ^data/ - [F,L]
+
+# Forby eksplisitt tilgang til seed.json og evt .json-filer i rot
+<FilesMatch "\.(json|bak|log|ini|env)$">
+    Require all denied
+</FilesMatch>
+
+# Standard index
+DirectoryIndex index.php
+
+# Sett UTF-8 for tekstfiler
+AddDefaultCharset UTF-8
+
+# Cache-headers (minimal — PHP setter sine egne)
+<FilesMatch "\.(html|htm|php)$">
+    Header set Cache-Control "no-cache, must-revalidate"
+</FilesMatch>
diff --git a/netops-todo-server/CLAUDE.md b/netops-todo-server/CLAUDE.md
new file mode 100644
index 0000000..868eb18
--- /dev/null
+++ b/netops-todo-server/CLAUDE.md
@@ -0,0 +1,175 @@
+# NetOps To-Do — Handoff / Project context
+
+> Også egnet som `CLAUDE.md` for fremtidige Claude-sesjoner som jobber videre med koden.
+
+## Hva er dette
+
+En enkel, selvstendig to-do-applikasjon tilpasset en network engineer som jobber bredt: L1 felt-kabling, L2 switching, L3 ruting, L4 lastbalansering, BGP, peering, security, NMS, automatisering, dokumentasjon, incident og prosjekt. Hver oppgave har prioritet (P1–P4), estimert tid, status, lokasjon/site, frist, tags og eier.
+
+Det finnes **to versjoner** levert i samme arbeidsstrøm:
+
+| Versjon | Fil | Lagring | Bruksområde |
+|---|---|---|---|
+| Standalone | `netops-todo.html` (ligger ved siden av denne mappa) | `localStorage` i nettleseren | Personlig bruk på én maskin, ingen server nødvendig |
+| Server / Apache | Hele `netops-todo-server/`-mappa | `data/tasks.json` på server, fil-låst | Delt for et team, auth i Apache eller proxy |
+
+Server-versjonen er der man kommer til å være etter første "single user, deretter delt"-overgang.
+
+## Filer i server-pakka
+
+```
+netops-todo-server/
+├── index.php        Frontend (HTML + JS). Tynt PHP-lag øverst leser brukernavn fra Apache.
+├── api.php          REST-API (single file). Alle actions ligger i én switch.
+├── seed.json        16 eksempel-oppgaver. Lastes via "Last inn eksempel-data"-knappen.
+├── .htaccess        Auth-skeleton + sperrer data/ for direkte web-tilgang.
+├── data/
+│   ├── .htaccess    Nekter all web-tilgang til lagringskatalogen.
+│   ├── tasks.json   Opprettes av api.php ved første skriv. Liste av task-objekter.
+│   └── known_users.json   Liste over brukere som har vært innom (for owner-dropdown).
+├── INSTALL.txt      Installasjonsguide for Apache.
+└── CLAUDE.md        (denne filen)
+```
+
+## Arkitektur
+
+Frontend er én HTML-side med vanilig JS (ingen rammeverk) og Chart.js fra CDN.
+Backend er to PHP-filer, null dependencies, kjører rett på Apache mod_php / php-fpm.
+
+### Dataflyt
+1. Apache autentiserer brukeren (Basic Auth, ekstern proxy, eller hva enn man velger).
+2. `index.php` leser `REMOTE_USER` / `PHP_AUTH_USER` / `HTTP_X_REMOTE_USER`, injiserer det i siden som `CURRENT_USER`.
+3. JS kaller `api.php?action=list` ved oppstart, så `create` / `update` / `delete` ved endringer.
+4. `api.php` validerer input mot whitelister, normaliserer task-objektet, og skriver `data/tasks.json` med `flock(LOCK_EX)`.
+5. Hvert minutt pollere frontend `list`-endepunktet for å hente endringer fra andre brukere.
+
+### API
+Alle endepunkt: `POST api.php?action=<name>` med JSON-body. `list` godtar også GET.
+
+| Action   | Body                | Svar                                       |
+|----------|---------------------|--------------------------------------------|
+| list     | —                   | `{ user, tasks: [...], known_users: [...] }` |
+| create   | task uten id        | `{ task }` (med tildelt id og audit-felt)  |
+| update   | task med id         | `{ task }`                                 |
+| delete   | `{ id }`            | `{ ok: true }`                             |
+| replace  | array av tasks      | `{ ok: true, count }` (for import)         |
+| seed     | —                   | `{ ok: true, count }` (kun hvis db er tom) |
+
+### Task-skjema (kanonisk form)
+```json
+{
+  "id": "t_abc123",
+  "title": "string ≤200",
+  "desc": "string ≤4000",
+  "category": "L1|L2|L3|L4|BGP|PEER|SEC|NMS|AUTO|DOC|INC|PROJ",
+  "priority": "P1|P2|P3|P4",
+  "status": "todo|progress|blocked|done",
+  "estHours": 0,
+  "location": "string ≤120",
+  "deadline": "YYYY-MM-DD eller tom",
+  "tags": ["≤20 strings, hver ≤40"],
+  "owner": "brukernavn eller tom = utildelt",
+  "created":     "ISO timestamp",
+  "createdBy":   "brukernavn",
+  "updated":     "ISO timestamp",
+  "updatedBy":   "brukernavn",
+  "completed":   "YYYY-MM-DD eller null",
+  "completedBy": "brukernavn eller null"
+}
+```
+
+`normalize_task()` i `api.php` er kilden til sannhet. Den whitelister enums, klamper strenger, valider deadline-format, og setter audit-feltene automatisk basert på `current_user()`.
+
+## Designvalg som er verdt å vite
+
+- **Ingen database.** JSON-fil + `flock` holder fint helt opp i tusenvis av oppgaver. Hvis det skulle bli ytelsestrøbbel, er det enkleste å bytte til SQLite (PHP `pdo_sqlite` følger med).
+- **Auth utenfor koden.** Innloggings-logikk er bevisst utelatt. Apache / proxy gjør jobben. Det gjør at koden er trivielt enkel å revidere og bytte ut.
+- **Felles datalager, ikke per-bruker.** Brukerne ser samme oppgaveliste, men `owner` per oppgave + audit-felt gir attribusjon.
+- **No-framework frontend.** Holdt bevisst gammeldags vanlig JS for at det skal være lett å patche av neste vakthavende.
+- **Polling, ikke websocket.** En `list`-request hvert 60s er nok for et team. Hvis flere skal jobbe samtidig kan intervallet senkes, men brukerne kan også trykke ↻.
+
+## Sikkerhetsstatus
+
+| Risiko | Tiltak |
+|---|---|
+| XSS i task-tekst | `escapeHtml()` i alle render-paths, `htmlspecialchars()` for brukernavn i PHP |
+| Path traversal | Filsti er hardkodet (`__DIR__ . '/data/tasks.json'`), ingen brukerinput i path |
+| Direct read av tasks.json | Egen `.htaccess` i `data/` med `Require all denied` |
+| Race conditions | `flock(LOCK_EX)` ved skriving, `LOCK_SH` ved lesing |
+| Injection i enums | Whitelist-validering: `in_array($val, $VALID_*, true)` |
+| Sanitering av brukernavn | `preg_replace('/[^A-Za-z0-9._@\-]/', '', $user)`, maks 64 tegn |
+| CSRF | Ikke håndtert eksplisitt. For en intern admin-side bak proxy med Basic Auth er det typisk akseptabelt, men hvis det monteres på offentlig nett bør det legges til en `X-Requested-With`-sjekk eller token. |
+
+## Vanlige utvidelser
+
+Hvis du jobber videre med dette, dette er de mest sannsynlige neste stegene og hvor du putter dem:
+
+**Nye kategorier eller prioriteter:**
+- Frontend: legg til i `CATEGORIES`-array og `CAT_COLORS`-map i `index.php` (JS-delen).
+- Backend: legg til i `$VALID_CATEGORIES` / `$VALID_PRIORITIES` i `api.php`.
+
+**Nytt felt per oppgave:**
+- Legg til input i modal i `index.php`.
+- Plukk opp i `saveForm()` (JS) og send med i body.
+- Legg til i `normalize_task()` (PHP) med passende sanitering.
+- Vis det i `renderTable()` om ønskelig.
+
+**Bedre samarbeid:**
+- Server-Sent Events fra PHP: ny `?action=stream` som holder en åpen koblet med `Cache-Control: no-cache`, sjekker fil-mtime og pusher endringer.
+- Eller bare senke `setInterval(loadAll, 60000)` i `init()`.
+
+**Audit-logg / historikk:**
+- I `normalize_task()` legg til append til `data/audit.log` med `[$updatedBy] $action $taskId`.
+- Vis logg under hver oppgave-modal med en ny `?action=history&id=...`.
+
+**Per-bruker syn:**
+- Endre `list` til å filtrere på `$user` hvis et flagg er satt.
+- Eller bare la frontend defaulte filter "Eier=Meg" — enklere.
+
+**SQLite-migrering** (hvis JSON blir tregt):
+- Bytt `read_tasks()` og `write_tasks()` mot PDO-kall.
+- Skjemaet matcher allerede et fornuftig SQL-skjema.
+
+## Kjente begrensninger
+
+- Ingen optimistisk locking på enkeltoppgave-nivå. Hvis to brukere lagrer samme oppgave samtidig, vinner den siste. Dette er hentet inn ved at filen i sin helhet låses, men man får ikke conflict-deteksjon.
+- Ikke i18n. Norsk er hardkodet i UI. Strings er samlet, så det er ikke vondt å trekke ut.
+- Ingen pagination i tabellen. Fungerer fint opp til noen hundre åpne oppgaver, deretter bør man legge til virtual scrolling eller side-knapper.
+- Klokken nederst i hover er klient-tid, ikke server-tid.
+
+## Testing-status
+
+- PHP-syntaks verifisert med AST-parser (`php-parser` via node, PHP 8-modus).
+- Kryssreferanse JS ↔ PHP: alle `api('X')`-kall fra frontend har matchende `case 'X':` i api.php.
+- Kryssreferanse DOM-IDer ↔ JS: alle `getElementById('x')` har matchende `id="x"` i HTML.
+- Onclick-handlere ↔ funksjonsdefinisjoner: ingen referanser til udefinerte funksjoner.
+- Ikke kjørt end-to-end (sandbox manglet PHP-runtime). Første ekte test bør være: `php -S localhost:8080` i mappa og åpne i nettleser.
+
+## Hurtigreferanse — installasjon
+
+```bash
+# 1. Kopier til server
+sudo cp -r netops-todo-server /var/www/netops-todo
+
+# 2. Skriverettigheter for data/
+sudo chown -R www-data:www-data /var/www/netops-todo/data
+sudo chmod 750 /var/www/netops-todo/data
+
+# 3. Basic Auth-brukere (utenfor docroot!)
+sudo htpasswd -c /etc/apache2/netops.htpasswd jon
+sudo htpasswd /etc/apache2/netops.htpasswd kari
+
+# 4. Aktiver auth-blokken i .htaccess (kommenter ut linjene under "1) Basic Auth")
+sudo nano /var/www/netops-todo/.htaccess
+
+# 5. Sørg for at AllowOverride All er aktivt i vhost
+# <Directory /var/www/netops-todo>
+#     AllowOverride All
+#     Require all granted
+# </Directory>
+
+sudo systemctl reload apache2
+# Åpne http://din-server.no/netops-todo/ → "Last inn eksempel-data"
+```
+
+Se `INSTALL.txt` for fyldigere variant og feilsøking.
diff --git a/netops-todo-server/INSTALL.txt b/netops-todo-server/INSTALL.txt
new file mode 100644
index 0000000..0e8765f
--- /dev/null
+++ b/netops-todo-server/INSTALL.txt
@@ -0,0 +1,100 @@
+NetOps To-Do — Installasjon på Apache
+======================================
+
+KRAV
+----
+- Apache 2.4+ med mod_php ELLER php-fpm (PHP 7.4+ holder, 8.x anbefales)
+- mod_rewrite aktivert (for .htaccess-reglene)
+- AllowOverride All (eller minst AllowOverride AuthConfig Limit FileInfo)
+  i <Directory>-blokken som peker på denne mappa.
+
+
+INSTALLASJON (3 steg)
+---------------------
+
+1. Kopier alt innholdet i denne mappa inn på webserveren, f.eks:
+     /var/www/netops-todo/
+   Strukturen skal være:
+     netops-todo/
+     ├── index.php
+     ├── api.php
+     ├── seed.json
+     ├── .htaccess
+     └── data/
+         └── .htaccess   (nekter direkte web-tilgang)
+
+2. Sett filrettigheter slik at Apache-brukeren kan skrive i data/:
+     chown -R www-data:www-data /var/www/netops-todo/data
+     chmod 750 /var/www/netops-todo/data
+
+   (bytt www-data med din Apache-bruker hvis den heter noe annet —
+    'httpd' på RHEL, 'apache' på CentOS, osv.)
+
+3. Sett opp autentisering. Enkleste variant med Basic Auth:
+
+     sudo htpasswd -c /etc/apache2/netops.htpasswd jon
+     sudo htpasswd /etc/apache2/netops.htpasswd kari    # flere brukere
+
+   Rediger deretter .htaccess i rot-mappa og fjern kommentar-tegnene på
+   blokk (1). Pek AuthUserFile til riktig path.
+
+   Restart/reload Apache:  systemctl reload apache2
+
+
+KONFIGURASJON AV APACHE VHOST
+------------------------------
+Hvis du kjører bak en reverse proxy (f.eks. nginx foran Apache),
+sørg for at Apache får brukernavnet. Eksempel på vhost-snippet:
+
+    <Directory /var/www/netops-todo>
+        AllowOverride All
+        Require all granted
+    </Directory>
+
+Hvis autentisering skjer i ytre proxy, send brukernavnet videre:
+    # i nginx-proxy:  proxy_set_header X-Remote-User $remote_user;
+    # PHP leser automatisk HTTP_X_REMOTE_USER.
+
+
+FØRSTE GANG DU ÅPNER SIDEN
+--------------------------
+Databasen (data/tasks.json) er tom. Siden viser en knapp
+"Last inn eksempel-data" som fyller på med 16 typiske NetOps-oppgaver
+for å demonstrere funksjonaliteten. Du kan slette alt og starte med
+blank liste når som helst — bruk Eksporter/Importer for å ta backup.
+
+
+BRUKERE OG EIERSKAP
+-------------------
+- Påloggingsbrukernavnet (fra Apache/proxy) vises som chip i header.
+- Hver oppgave har et "Eier"-felt (owner) som kan settes til hvilket
+  som helst brukernavn, eller være tomt (utildelt).
+- Ved ny oppgave settes eier automatisk til deg selv (kan endres).
+- "Ta eierskap"-knapp (👤) på utildelte oppgaver.
+- Filter: "Meg" / "Utildelt" / bruker-spesifikk / alle.
+- Hver endring logges med createdBy/updatedBy/completedBy.
+
+
+BACKUP
+------
+Alt ligger i data/tasks.json. Backup kan være en enkel cronjobb:
+
+    0 2 * * * cp /var/www/netops-todo/data/tasks.json \
+        /var/backups/netops-todo-$(date +\%F).json
+
+Eller bruk "Eksporter"-knappen i UI for en manuell kopi.
+
+
+FEILSØKING
+----------
+- "Uventet svar fra server" i toast → api.php ble ikke parset som PHP.
+  Sjekk at mod_php / php-fpm er aktivt og at Apache gjenkjenner .php.
+
+- 403 Forbidden på data/tasks.json → det er riktig! Data-mappa er
+  sperret for direkte web-tilgang.
+
+- "Kunne ikke opprette data-mappe" → Apache-brukeren mangler
+  skriverettigheter. Se steg 2 over.
+
+- Brukernavn viser "anon" → autentisering er ikke satt opp, eller
+  proxy-en sender ikke REMOTE_USER videre.
diff --git a/netops-todo-server/api.php b/netops-todo-server/api.php
new file mode 100644
index 0000000..376da40
--- /dev/null
+++ b/netops-todo-server/api.php
@@ -0,0 +1,307 @@
+<?php
+/**
+ * NetOps To-Do — REST API
+ *
+ * Lagrer oppgaver i data/tasks.json. Alle skrive-operasjoner bruker
+ * fil-låsing (flock) så parallelle requests ikke ødelegger fila.
+ *
+ * Endepunkt (alle via POST unntatt list som også godtar GET):
+ *   ?action=list                     → { user, tasks: [...], known_users: [...] }
+ *   ?action=create  body: task JSON  → { task }
+ *   ?action=update  body: task JSON  → { task }
+ *   ?action=delete  body: {id}       → { ok: true }
+ *   ?action=replace body: [task,...] → { ok: true, count }
+ *
+ * Brukernavn hentes fra (i denne rekkefølgen):
+ *   1. $_SERVER['REMOTE_USER']       (satt av Apache Basic Auth / mod_auth_*)
+ *   2. $_SERVER['PHP_AUTH_USER']     (Basic Auth håndtert av PHP)
+ *   3. $_SERVER['HTTP_X_REMOTE_USER'](en reverse-proxy kan sette dette)
+ *   4. 'anon'
+ */
+
+header('Content-Type: application/json; charset=utf-8');
+header('Cache-Control: no-store');
+header('X-Content-Type-Options: nosniff');
+
+// ---------- Config ----------
+define('DATA_DIR',  __DIR__ . '/data');
+define('DATA_FILE', DATA_DIR . '/tasks.json');
+define('USERS_FILE', DATA_DIR . '/known_users.json');
+
+$VALID_STATUS     = ['todo', 'progress', 'blocked', 'done'];
+$VALID_PRIORITIES = ['P1', 'P2', 'P3', 'P4'];
+$VALID_CATEGORIES = ['L1','L2','L3','L4','BGP','PEER','SEC','NMS','AUTO','DOC','INC','PROJ'];
+
+// ---------- Helpers ----------
+function current_user(): string {
+    foreach (['REMOTE_USER', 'PHP_AUTH_USER', 'HTTP_X_REMOTE_USER'] as $k) {
+        if (!empty($_SERVER[$k])) {
+            $u = preg_replace('/[^A-Za-z0-9._@\-]/', '', $_SERVER[$k]);
+            if ($u !== '') return substr($u, 0, 64);
+        }
+    }
+    return 'anon';
+}
+
+function json_out($data, int $code = 200): void {
+    http_response_code($code);
+    echo json_encode($data, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+    exit;
+}
+
+function bad(string $msg, int $code = 400): void {
+    json_out(['error' => $msg], $code);
+}
+
+function ensure_data_dir(): void {
+    if (!is_dir(DATA_DIR)) {
+        if (!@mkdir(DATA_DIR, 0750, true)) bad('Kunne ikke opprette data-mappe', 500);
+    }
+    if (!file_exists(DATA_FILE)) {
+        @file_put_contents(DATA_FILE, "[]\n");
+        @chmod(DATA_FILE, 0640);
+    }
+}
+
+function read_tasks(): array {
+    ensure_data_dir();
+    $fp = @fopen(DATA_FILE, 'r');
+    if (!$fp) bad('Kunne ikke lese data', 500);
+    try {
+        if (!flock($fp, LOCK_SH)) bad('Kunne ikke låse for lesing', 500);
+        $size = filesize(DATA_FILE);
+        $raw  = $size > 0 ? fread($fp, $size) : '[]';
+        flock($fp, LOCK_UN);
+    } finally { fclose($fp); }
+    $data = json_decode($raw, true);
+    if (!is_array($data)) return [];
+    return $data;
+}
+
+function write_tasks(array $tasks): void {
+    ensure_data_dir();
+    $fp = @fopen(DATA_FILE, 'c+');
+    if (!$fp) bad('Kunne ikke åpne data for skriving', 500);
+    try {
+        if (!flock($fp, LOCK_EX)) bad('Kunne ikke låse for skriving', 500);
+        ftruncate($fp, 0);
+        rewind($fp);
+        fwrite($fp, json_encode(array_values($tasks), JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT));
+        fflush($fp);
+        flock($fp, LOCK_UN);
+    } finally { fclose($fp); }
+}
+
+function add_known_user(string $user): void {
+    ensure_data_dir();
+    $known = @file_exists(USERS_FILE) ? json_decode(@file_get_contents(USERS_FILE), true) : [];
+    if (!is_array($known)) $known = [];
+    if (!in_array($user, $known, true)) {
+        $known[] = $user;
+        sort($known);
+        @file_put_contents(USERS_FILE, json_encode($known, JSON_UNESCAPED_UNICODE));
+    }
+}
+
+function known_users(): array {
+    if (!file_exists(USERS_FILE)) return [];
+    $list = json_decode(@file_get_contents(USERS_FILE), true);
+    return is_array($list) ? $list : [];
+}
+
+function uid(): string {
+    return 't_' . bin2hex(random_bytes(5));
+}
+
+function body_json(): array {
+    $raw = file_get_contents('php://input');
+    if ($raw === '' || $raw === false) return [];
+    $d = json_decode($raw, true);
+    return is_array($d) ? $d : [];
+}
+
+function sanitize_str($v, int $max = 500): string {
+    if (!is_string($v)) return '';
+    $v = trim($v);
+    // Fjern kontrolltegn (bortsett fra \n \r \t)
+    $v = preg_replace('/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/u', '', $v);
+    if (mb_strlen($v) > $max) $v = mb_substr($v, 0, $max);
+    return $v;
+}
+
+function sanitize_tags($v): array {
+    if (!is_array($v)) return [];
+    $out = [];
+    foreach ($v as $t) {
+        $t = sanitize_str($t, 40);
+        if ($t !== '') $out[] = $t;
+        if (count($out) >= 20) break;
+    }
+    return $out;
+}
+
+function normalize_task($in, string $user, ?array $existing = null): array {
+    global $VALID_STATUS, $VALID_PRIORITIES, $VALID_CATEGORIES;
+
+    $t = $existing ?: [];
+
+    $t['id']       = $existing['id'] ?? (isset($in['id']) && is_string($in['id']) ? preg_replace('/[^a-z0-9_]/i', '', $in['id']) : uid());
+    if (!$t['id']) $t['id'] = uid();
+
+    $t['title']    = sanitize_str($in['title'] ?? ($existing['title'] ?? ''), 200);
+    $t['desc']     = sanitize_str($in['desc']  ?? ($existing['desc'] ?? ''), 4000);
+
+    $cat = $in['category'] ?? ($existing['category'] ?? 'L3');
+    $t['category'] = in_array($cat, $VALID_CATEGORIES, true) ? $cat : 'L3';
+
+    $prio = $in['priority'] ?? ($existing['priority'] ?? 'P3');
+    $t['priority'] = in_array($prio, $VALID_PRIORITIES, true) ? $prio : 'P3';
+
+    $stat = $in['status'] ?? ($existing['status'] ?? 'todo');
+    $t['status'] = in_array($stat, $VALID_STATUS, true) ? $stat : 'todo';
+
+    $t['estHours'] = isset($in['estHours']) ? max(0, min(999, (float)$in['estHours'])) : ($existing['estHours'] ?? 0);
+    $t['location'] = sanitize_str($in['location'] ?? ($existing['location'] ?? ''), 120);
+
+    $dl = $in['deadline'] ?? ($existing['deadline'] ?? '');
+    if (is_string($dl) && preg_match('/^\d{4}-\d{2}-\d{2}$/', $dl)) $t['deadline'] = $dl;
+    else $t['deadline'] = '';
+
+    $t['tags']  = sanitize_tags($in['tags'] ?? ($existing['tags'] ?? []));
+
+    // Owner
+    $owner = isset($in['owner']) ? sanitize_str($in['owner'], 64) : ($existing['owner'] ?? '');
+    $t['owner'] = $owner !== '' ? $owner : ($existing['owner'] ?? $user);
+
+    // Audit
+    $t['created']   = $existing['created']   ?? gmdate('c');
+    $t['createdBy'] = $existing['createdBy'] ?? $user;
+    $t['updated']   = gmdate('c');
+    $t['updatedBy'] = $user;
+
+    // Completed timestamp logic
+    $wasDone = isset($existing['status']) && $existing['status'] === 'done';
+    if ($t['status'] === 'done' && !$wasDone) {
+        $t['completed']   = gmdate('Y-m-d');
+        $t['completedBy'] = $user;
+    } elseif ($t['status'] !== 'done') {
+        $t['completed']   = null;
+        $t['completedBy'] = null;
+    } else {
+        // still done, keep existing
+        $t['completed']   = $existing['completed']   ?? gmdate('Y-m-d');
+        $t['completedBy'] = $existing['completedBy'] ?? $user;
+    }
+
+    return $t;
+}
+
+// ---------- Dispatch ----------
+$user = current_user();
+add_known_user($user);
+
+$action = $_GET['action'] ?? '';
+$method = $_SERVER['REQUEST_METHOD'];
+
+try {
+    switch ($action) {
+
+    case 'list': {
+        $tasks = read_tasks();
+        // Samle eiere som også er kjent fra oppgavene
+        $owners = known_users();
+        foreach ($tasks as $t) {
+            foreach (['owner','createdBy','updatedBy','completedBy'] as $k) {
+                if (!empty($t[$k]) && !in_array($t[$k], $owners, true)) $owners[] = $t[$k];
+            }
+        }
+        sort($owners);
+        json_out([
+            'user'        => $user,
+            'tasks'       => $tasks,
+            'known_users' => array_values(array_unique($owners)),
+        ]);
+        break;
+    }
+
+    case 'create': {
+        if ($method !== 'POST') bad('POST required', 405);
+        $in = body_json();
+        if (empty($in['title'])) bad('title er påkrevd');
+        $tasks = read_tasks();
+        $new = normalize_task($in, $user, null);
+        $tasks[] = $new;
+        write_tasks($tasks);
+        json_out(['task' => $new]);
+        break;
+    }
+
+    case 'update': {
+        if ($method !== 'POST') bad('POST required', 405);
+        $in = body_json();
+        if (empty($in['id'])) bad('id er påkrevd');
+        $tasks = read_tasks();
+        $updated = null;
+        foreach ($tasks as $i => $t) {
+            if (($t['id'] ?? '') === $in['id']) {
+                $tasks[$i] = normalize_task($in, $user, $t);
+                $updated = $tasks[$i];
+                break;
+            }
+        }
+        if (!$updated) bad('Fant ikke oppgaven', 404);
+        write_tasks($tasks);
+        json_out(['task' => $updated]);
+        break;
+    }
+
+    case 'delete': {
+        if ($method !== 'POST') bad('POST required', 405);
+        $in = body_json();
+        if (empty($in['id'])) bad('id er påkrevd');
+        $tasks = read_tasks();
+        $before = count($tasks);
+        $tasks = array_values(array_filter($tasks, fn($t) => ($t['id'] ?? '') !== $in['id']));
+        if (count($tasks) === $before) bad('Fant ikke oppgaven', 404);
+        write_tasks($tasks);
+        json_out(['ok' => true]);
+        break;
+    }
+
+    case 'replace': {
+        if ($method !== 'POST') bad('POST required', 405);
+        $in = body_json();
+        if (!is_array($in) || !isset($in[0]) && !empty($in)) bad('Forventet array');
+        $out = [];
+        foreach ($in as $raw) {
+            if (!is_array($raw) || empty($raw['title'])) continue;
+            $out[] = normalize_task($raw, $user, null);
+        }
+        write_tasks($out);
+        json_out(['ok' => true, 'count' => count($out)]);
+        break;
+    }
+
+    case 'seed': {
+        // Last inn eksempel-data. Nekter hvis allerede data finnes.
+        if ($method !== 'POST') bad('POST required', 405);
+        $existing = read_tasks();
+        if (count($existing) > 0) bad('Data finnes allerede', 409);
+        $seed = json_decode(@file_get_contents(__DIR__ . '/seed.json'), true);
+        if (!is_array($seed)) bad('Mangler seed.json', 500);
+        $out = [];
+        foreach ($seed as $raw) {
+            if (!is_array($raw) || empty($raw['title'])) continue;
+            $out[] = normalize_task($raw, $user, null);
+        }
+        write_tasks($out);
+        json_out(['ok' => true, 'count' => count($out)]);
+        break;
+    }
+
+    default:
+        bad('Ukjent action. Bruk list/create/update/delete/replace/seed');
+    }
+} catch (Throwable $e) {
+    bad('Serverfeil: ' . $e->getMessage(), 500);
+}
diff --git a/netops-todo-server/data/.htaccess b/netops-todo-server/data/.htaccess
new file mode 100644
index 0000000..a750e8e
--- /dev/null
+++ b/netops-todo-server/data/.htaccess
@@ -0,0 +1,9 @@
+# Nekt all web-tilgang til data-mappa.
+# tasks.json skal kun leses/skrives av PHP-prosessen.
+Require all denied
+
+<IfModule !mod_authz_core.c>
+    # Fallback for Apache 2.2
+    Order deny,allow
+    Deny from all
+</IfModule>
diff --git a/netops-todo-server/index.php b/netops-todo-server/index.php
new file mode 100644
index 0000000..41ca4ed
--- /dev/null
+++ b/netops-todo-server/index.php
@@ -0,0 +1,1024 @@
+<?php
+/**
+ * NetOps To-Do — entry point.
+ * Leverer HTML + JS. All datalagring skjer via api.php.
+ */
+$currentUser = $_SERVER['REMOTE_USER']
+    ?? $_SERVER['PHP_AUTH_USER']
+    ?? $_SERVER['HTTP_X_REMOTE_USER']
+    ?? 'anon';
+$currentUser = preg_replace('/[^A-Za-z0-9._@\-]/', '', $currentUser);
+if ($currentUser === '') $currentUser = 'anon';
+?><!DOCTYPE html>
+<html lang="no">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>NetOps To-Do · Network Engineer</title>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1"></script>
+<style>
+:root {
+  --bg: #0f1419;
+  --bg-soft: #151b23;
+  --card: #1a212b;
+  --card-hover: #202836;
+  --border: #2a3340;
+  --border-strong: #3a4555;
+  --text: #e6edf3;
+  --text-dim: #8b98a9;
+  --text-faint: #5a6878;
+  --accent: #4fc3f7;
+  --accent-soft: rgba(79, 195, 247, 0.12);
+  --p1: #ff5370;
+  --p2: #ff9f43;
+  --p3: #ffd93d;
+  --p4: #7fb8ff;
+  --ok: #4ade80;
+  --warn: #ff9f43;
+  --err: #ff5370;
+  --radius: 8px;
+  --gap: 14px;
+  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html, body {
+  background: var(--bg); color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px; line-height: 1.5; min-height: 100vh;
+}
+.container { max-width: 1500px; margin: 0 auto; padding: 20px; }
+header {
+  display: flex; justify-content: space-between; align-items: center;
+  flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
+  padding-bottom: 16px; border-bottom: 1px solid var(--border);
+}
+header h1 { font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
+header h1::before {
+  content: ""; width: 10px; height: 10px; border-radius: 50%;
+  background: var(--ok); box-shadow: 0 0 12px var(--ok); animation: pulse 2s infinite;
+}
+@keyframes pulse { 0%,100% {opacity:1;} 50% {opacity:0.5;} }
+header .sub { color: var(--text-dim); font-size: 13px; font-family: var(--mono); }
+.user-chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 10px; background: var(--accent-soft); color: var(--accent);
+  border: 1px solid rgba(79,195,247,0.25); border-radius: 12px;
+  font-family: var(--mono); font-size: 12px;
+}
+.user-chip::before { content: "●"; }
+.header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+button, .btn {
+  background: var(--card); color: var(--text); border: 1px solid var(--border);
+  padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 500;
+  cursor: pointer; transition: all 0.15s;
+  display: inline-flex; align-items: center; gap: 6px;
+}
+button:hover, .btn:hover { background: var(--card-hover); border-color: var(--border-strong); }
+button.primary { background: var(--accent); color: #06151f; border-color: var(--accent); font-weight: 600; }
+button.primary:hover { background: #7dd3fc; border-color: #7dd3fc; }
+button.danger { background: transparent; color: var(--err); border-color: rgba(255,83,112,0.3); }
+button.danger:hover { background: rgba(255,83,112,0.1); border-color: var(--err); }
+button:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.kpi-row {
+  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+  gap: var(--gap); margin-bottom: var(--gap);
+}
+.kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 16px 18px; position: relative; overflow: hidden; }
+.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
+.kpi.kpi-p1::before { background: var(--p1); }
+.kpi.kpi-warn::before { background: var(--warn); }
+.kpi.kpi-ok::before { background: var(--ok); }
+.kpi.kpi-me::before { background: #bb86fc; }
+.kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; }
+.kpi-value { font-size: 26px; font-weight: 700; font-family: var(--mono); line-height: 1.1; }
+.kpi-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
+
+.chart-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }
+.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
+.panel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim);
+  margin-bottom: 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
+.chart-wrap { position: relative; height: 220px; }
+
+.filters {
+  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
+  margin-bottom: var(--gap); padding: 12px 16px;
+  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
+}
+.filter-group { display: flex; align-items: center; gap: 6px; }
+.filter-group label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); font-weight: 600; }
+select, input[type="text"], input[type="number"], input[type="date"], textarea {
+  background: var(--bg-soft); color: var(--text); border: 1px solid var(--border);
+  padding: 7px 10px; border-radius: 5px; font-size: 13px; font-family: inherit;
+}
+select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); }
+.search-input { flex: 1; min-width: 200px; }
+
+.table-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+.table-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
+.table-head h3 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
+.table-head .count { color: var(--text-dim); font-family: var(--mono); font-size: 12px; margin-left: 8px; }
+.table-scroll { overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; font-size: 13px; }
+thead th {
+  text-align: left; padding: 10px 14px; background: var(--bg-soft); color: var(--text-dim);
+  font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
+  cursor: pointer; user-select: none; white-space: nowrap; border-bottom: 1px solid var(--border);
+}
+thead th:hover { color: var(--text); }
+tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
+tbody tr { transition: background 0.1s; }
+tbody tr:hover { background: var(--card-hover); }
+tbody tr.status-done td { color: var(--text-faint); }
+tbody tr.status-done .task-title { text-decoration: line-through; }
+.task-title { font-weight: 500; color: var(--text); cursor: pointer; }
+.task-title:hover { color: var(--accent); }
+.task-desc { color: var(--text-dim); font-size: 12px; margin-top: 2px; max-width: 400px; }
+
+.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px;
+  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
+.prio-P1 { background: rgba(255,83,112,0.15); color: var(--p1); border: 1px solid rgba(255,83,112,0.3); }
+.prio-P2 { background: rgba(255,159,67,0.15); color: var(--p2); border: 1px solid rgba(255,159,67,0.3); }
+.prio-P3 { background: rgba(255,217,61,0.15); color: var(--p3); border: 1px solid rgba(255,217,61,0.3); }
+.prio-P4 { background: rgba(127,184,255,0.15); color: var(--p4); border: 1px solid rgba(127,184,255,0.3); }
+
+.status-badge { padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
+.status-todo { background: rgba(127,184,255,0.12); color: #7fb8ff; }
+.status-progress { background: rgba(255,159,67,0.15); color: var(--warn); }
+.status-blocked { background: rgba(255,83,112,0.15); color: var(--err); }
+.status-done { background: rgba(74,222,128,0.12); color: var(--ok); }
+
+.cat-badge { font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 4px;
+  background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(79,195,247,0.25); }
+
+.owner-badge { display:inline-flex; align-items:center; gap:5px; font-family: var(--mono); font-size: 12px;
+  padding: 2px 7px; background: rgba(187,134,252,0.1); color: #d4b0ff;
+  border: 1px solid rgba(187,134,252,0.25); border-radius: 4px; white-space: nowrap; }
+.owner-badge.me { background: rgba(74,222,128,0.1); color: var(--ok); border-color: rgba(74,222,128,0.3); }
+.owner-badge.unassigned { background: rgba(139,152,169,0.1); color: var(--text-dim); border-color: var(--border); }
+
+.time-cell { font-family: var(--mono); font-size: 12px; color: var(--text-dim); white-space: nowrap; }
+.time-cell.overdue { color: var(--err); font-weight: 600; }
+.time-cell.soon { color: var(--warn); }
+
+.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
+.icon-btn { background: none; border: none; color: var(--text-dim); padding: 4px 6px;
+  font-size: 13px; cursor: pointer; border-radius: 3px; }
+.icon-btn:hover { background: var(--bg-soft); color: var(--text); }
+.icon-btn.do:hover { color: var(--ok); }
+.icon-btn.del:hover { color: var(--err); }
+
+.modal-overlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px);
+  display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px;
+}
+.modal-overlay.open { display: flex; }
+.modal { background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius);
+  width: 100%; max-width: 620px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
+.modal-head { padding: 18px 22px; border-bottom: 1px solid var(--border);
+  display: flex; justify-content: space-between; align-items: center; }
+.modal-head h2 { font-size: 16px; font-weight: 600; }
+.modal-body { padding: 20px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+.form-field { display: flex; flex-direction: column; gap: 4px; }
+.form-field.full { grid-column: 1 / -1; }
+.form-field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); font-weight: 600; }
+.form-field textarea { resize: vertical; min-height: 72px; font-family: inherit; }
+.form-field .owner-input-row { display:flex; gap:6px; }
+.form-field .owner-input-row input { flex:1; }
+.form-field .owner-input-row select { flex:1; }
+.modal-foot { padding: 14px 22px; border-top: 1px solid var(--border);
+  display: flex; justify-content: space-between; gap: 8px; }
+
+.empty-state { padding: 40px; text-align: center; color: var(--text-dim); }
+.empty-state button { margin-top: 12px; }
+
+.toast {
+  position: fixed; bottom: 20px; right: 20px; padding: 12px 18px;
+  background: var(--card); border: 1px solid var(--border-strong); border-radius: 6px;
+  color: var(--text); font-size: 13px; z-index: 200;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+  transform: translateX(120%); transition: transform 0.25s;
+}
+.toast.show { transform: translateX(0); }
+.toast.err { border-color: var(--err); color: var(--err); }
+
+footer { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border);
+  text-align: center; color: var(--text-faint); font-size: 12px; font-family: var(--mono); }
+
+@media (max-width: 1100px) { .chart-row { grid-template-columns: 1fr 1fr; } }
+@media (max-width: 720px) {
+  .chart-row { grid-template-columns: 1fr; }
+  .modal-body { grid-template-columns: 1fr; }
+  .kpi-value { font-size: 22px; }
+  header h1 { font-size: 18px; }
+}
+</style>
+</head>
+<body>
+<div class="container">
+
+<header>
+  <div>
+    <h1>NetOps To-Do</h1>
+    <div class="sub" id="clock">network-engineer@nms:~$</div>
+  </div>
+  <div class="header-actions">
+    <span class="user-chip" title="Pålogget bruker (fra Apache/proxy)"><?php echo htmlspecialchars($currentUser, ENT_QUOTES, 'UTF-8'); ?></span>
+    <button id="exportBtn" title="Eksporter JSON">⬇ Eksporter</button>
+    <button id="importBtn" title="Importer JSON (erstatter alt)">⬆ Importer</button>
+    <input type="file" id="importFile" accept=".json" style="display:none">
+    <button class="primary" id="newTaskBtn">+ Ny oppgave</button>
+  </div>
+</header>
+
+<section class="kpi-row">
+  <div class="kpi">
+    <div class="kpi-label">Åpne oppgaver</div>
+    <div class="kpi-value" id="kpi-open">0</div>
+    <div class="kpi-sub" id="kpi-open-sub">av 0 totalt</div>
+  </div>
+  <div class="kpi kpi-me">
+    <div class="kpi-label">Mine åpne</div>
+    <div class="kpi-value" id="kpi-mine">0</div>
+    <div class="kpi-sub" id="kpi-mine-sub">tildelt meg</div>
+  </div>
+  <div class="kpi kpi-p1">
+    <div class="kpi-label">P1 Kritisk</div>
+    <div class="kpi-value" id="kpi-p1">0</div>
+    <div class="kpi-sub">umiddelbar handling</div>
+  </div>
+  <div class="kpi kpi-warn">
+    <div class="kpi-label">Est. tid igjen</div>
+    <div class="kpi-value" id="kpi-hours">0t</div>
+    <div class="kpi-sub" id="kpi-hours-sub">arbeidstimer</div>
+  </div>
+  <div class="kpi">
+    <div class="kpi-label">Forfalte</div>
+    <div class="kpi-value" id="kpi-overdue">0</div>
+    <div class="kpi-sub">over frist</div>
+  </div>
+  <div class="kpi kpi-ok">
+    <div class="kpi-label">Ferdig (7d)</div>
+    <div class="kpi-value" id="kpi-done">0</div>
+    <div class="kpi-sub">siste 7 dager</div>
+  </div>
+</section>
+
+<section class="chart-row">
+  <div class="panel">
+    <h3>Åpne oppgaver per kategori <span id="cat-total" style="color:var(--text-faint);font-family:var(--mono);text-transform:none;letter-spacing:0"></span></h3>
+    <div class="chart-wrap"><canvas id="catChart"></canvas></div>
+  </div>
+  <div class="panel">
+    <h3>Fordeling etter prioritet</h3>
+    <div class="chart-wrap"><canvas id="prioChart"></canvas></div>
+  </div>
+  <div class="panel">
+    <h3>Åpne oppgaver per eier</h3>
+    <div class="chart-wrap"><canvas id="ownerChart"></canvas></div>
+  </div>
+</section>
+
+<div class="filters">
+  <div class="filter-group">
+    <label>Status</label>
+    <select id="f-status">
+      <option value="open">Åpne</option>
+      <option value="all">Alle</option>
+      <option value="todo">Å gjøre</option>
+      <option value="progress">Pågår</option>
+      <option value="blocked">Blokkert</option>
+      <option value="done">Ferdig</option>
+    </select>
+  </div>
+  <div class="filter-group">
+    <label>Kategori</label>
+    <select id="f-category"><option value="all">Alle</option></select>
+  </div>
+  <div class="filter-group">
+    <label>Prioritet</label>
+    <select id="f-priority">
+      <option value="all">Alle</option>
+      <option value="P1">P1 Kritisk</option>
+      <option value="P2">P2 Høy</option>
+      <option value="P3">P3 Middels</option>
+      <option value="P4">P4 Lav</option>
+    </select>
+  </div>
+  <div class="filter-group">
+    <label>Eier</label>
+    <select id="f-owner">
+      <option value="all">Alle</option>
+      <option value="__me__">Meg</option>
+      <option value="__unassigned__">Utildelt</option>
+    </select>
+  </div>
+  <input class="search-input" type="text" id="f-search" placeholder="Søk tittel, beskrivelse, lokasjon, tag ...">
+  <button id="clearFilters">Nullstill</button>
+  <button id="refreshBtn" title="Hent på nytt fra server">↻</button>
+</div>
+
+<div class="table-panel">
+  <div class="table-head">
+    <h3>Oppgaveliste <span class="count" id="tbl-count">0</span></h3>
+    <div class="sub" style="color:var(--text-faint); font-family:var(--mono); font-size:11px">klikk kolonne for å sortere</div>
+  </div>
+  <div class="table-scroll">
+    <table id="tbl">
+      <thead>
+        <tr>
+          <th data-sort="priority" style="width:70px">Prio</th>
+          <th data-sort="title">Oppgave</th>
+          <th data-sort="category" style="width:110px">Kategori</th>
+          <th data-sort="status" style="width:100px">Status</th>
+          <th data-sort="owner" style="width:130px">Eier</th>
+          <th data-sort="location" style="width:130px">Lokasjon</th>
+          <th data-sort="estHours" style="width:70px;text-align:right">Est (t)</th>
+          <th data-sort="deadline" style="width:120px">Frist</th>
+          <th style="width:110px;text-align:right">Handling</th>
+        </tr>
+      </thead>
+      <tbody id="tbl-body"></tbody>
+    </table>
+  </div>
+  <div id="empty" class="empty-state" style="display:none">
+    Ingen oppgaver matcher filtrene.
+    <div id="empty-seed" style="display:none;margin-top:14px">
+      Tom database. <button id="seedBtn" class="primary">Last inn eksempel-data</button>
+    </div>
+  </div>
+</div>
+
+<footer>
+  Data lagres på serveren · Endringer fra andre brukere synes etter neste oppdatering (↻)
+</footer>
+</div>
+
+<div class="modal-overlay" id="modal">
+  <div class="modal">
+    <div class="modal-head">
+      <h2 id="modal-title">Ny oppgave</h2>
+      <button class="icon-btn" id="modal-close" style="font-size:18px">×</button>
+    </div>
+    <div class="modal-body">
+      <div class="form-field full">
+        <label>Tittel *</label>
+        <input type="text" id="f-title" placeholder="F.eks. Konfigurer BGP-peer mot AS2119">
+      </div>
+      <div class="form-field full">
+        <label>Beskrivelse / notater</label>
+        <textarea id="f-desc" placeholder="Kommandoer, konfigurasjon, referanser ..."></textarea>
+      </div>
+      <div class="form-field">
+        <label>Kategori *</label>
+        <select id="f-cat"></select>
+      </div>
+      <div class="form-field">
+        <label>Prioritet</label>
+        <select id="f-prio">
+          <option value="P1">P1 Kritisk</option>
+          <option value="P2" selected>P2 Høy</option>
+          <option value="P3">P3 Middels</option>
+          <option value="P4">P4 Lav</option>
+        </select>
+      </div>
+      <div class="form-field">
+        <label>Status</label>
+        <select id="f-stat">
+          <option value="todo" selected>Å gjøre</option>
+          <option value="progress">Pågår</option>
+          <option value="blocked">Blokkert</option>
+          <option value="done">Ferdig</option>
+        </select>
+      </div>
+      <div class="form-field">
+        <label>Est. tid (timer)</label>
+        <input type="number" id="f-est" min="0" step="0.5" placeholder="2">
+      </div>
+      <div class="form-field full">
+        <label>Eier / tildelt</label>
+        <div class="owner-input-row">
+          <input type="text" id="f-owner-input" placeholder="brukernavn, eller blank for utildelt">
+          <select id="f-owner-select" title="Velg eksisterende bruker">
+            <option value="">— velg —</option>
+          </select>
+        </div>
+      </div>
+      <div class="form-field">
+        <label>Lokasjon / site</label>
+        <input type="text" id="f-loc" placeholder="DC-OSL-1, Bergen POP, remote ...">
+      </div>
+      <div class="form-field">
+        <label>Frist</label>
+        <input type="date" id="f-dl">
+      </div>
+      <div class="form-field full">
+        <label>Tags (komma-separert)</label>
+        <input type="text" id="f-tags" placeholder="vedlikeholdsvindu, kunde-X, audit">
+      </div>
+    </div>
+    <div class="modal-foot">
+      <button class="danger" id="modal-delete" style="display:none">Slett</button>
+      <div style="flex:1"></div>
+      <button id="modal-cancel">Avbryt</button>
+      <button class="primary" id="modal-save">Lagre</button>
+    </div>
+  </div>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script>
+// ---------- Config ----------
+const CURRENT_USER = <?php echo json_encode($currentUser); ?>;
+const API = 'api.php';
+
+const CATEGORIES = [
+  { id: 'L1',    name: 'L1 Fysisk',          desc: 'Kabling, fiber, patch, SFP, rack' },
+  { id: 'L2',    name: 'L2 Switching',       desc: 'VLAN, STP, MAC, trunking' },
+  { id: 'L3',    name: 'L3 Ruting',          desc: 'OSPF, ISIS, statisk, VRF' },
+  { id: 'L4',    name: 'L4 Lastbalansering', desc: 'HAProxy, NGINX, F5, BIG-IP' },
+  { id: 'BGP',   name: 'BGP',                desc: 'iBGP / eBGP, policies, RR' },
+  { id: 'PEER',  name: 'Peering / IX',       desc: 'IXP, private peering, PeeringDB' },
+  { id: 'SEC',   name: 'Firewall / Security',desc: 'ACL, firewall, IPS, audit' },
+  { id: 'NMS',   name: 'Overvåking / NMS',   desc: 'LibreNMS, Grafana, alerts' },
+  { id: 'AUTO',  name: 'Automatisering',     desc: 'Ansible, scripts, CI/CD' },
+  { id: 'DOC',   name: 'Dokumentasjon',      desc: 'Diagrammer, IPAM, runbooks' },
+  { id: 'INC',   name: 'Incident / On-call', desc: 'Feilsøking, postmortem' },
+  { id: 'PROJ',  name: 'Prosjekt / Plan',    desc: 'Design, anskaffelse, oppgraderinger' },
+];
+const CAT_COLORS = {
+  L1: '#ff9f43', L2: '#4fc3f7', L3: '#7fb8ff', L4: '#bb86fc',
+  BGP: '#4ade80', PEER: '#26de81', SEC: '#ff5370', NMS: '#ffd93d',
+  AUTO: '#00d2d3', DOC: '#a0a0a0', INC: '#ff6b6b', PROJ: '#8172B3'
+};
+const STATUS_LABELS = { todo:'Å gjøre', progress:'Pågår', blocked:'Blokkert', done:'Ferdig' };
+const PRIO_ORDER = { P1: 1, P2: 2, P3: 3, P4: 4 };
+
+// ---------- State ----------
+let state = {
+  tasks: [],
+  knownUsers: [],
+  filters: { status: 'open', category: 'all', priority: 'all', owner: 'all', search: '' },
+  sort: { field: 'priority', dir: 'asc' },
+  editingId: null,
+};
+let charts = {};
+
+// ---------- API helpers ----------
+async function api(action, body = null) {
+  const opts = { method: body ? 'POST' : 'GET', headers: {} };
+  if (body) {
+    opts.headers['Content-Type'] = 'application/json';
+    opts.body = JSON.stringify(body);
+  }
+  const res = await fetch(`${API}?action=${action}`, opts);
+  const ct = res.headers.get('content-type') || '';
+  if (!ct.includes('application/json')) {
+    throw new Error(`Uventet svar fra server (HTTP ${res.status}). Er api.php tilgjengelig?`);
+  }
+  const data = await res.json();
+  if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+  return data;
+}
+
+function toast(msg, isErr = false) {
+  const el = document.getElementById('toast');
+  el.textContent = msg;
+  el.className = 'toast show' + (isErr ? ' err' : '');
+  clearTimeout(el._t);
+  el._t = setTimeout(() => el.classList.remove('show'), 2800);
+}
+
+// ---------- Utilities ----------
+function daysFromNow(d) {
+  const date = new Date(); date.setDate(date.getDate() + d);
+  return date.toISOString().slice(0, 10);
+}
+
+function formatDeadline(dateStr) {
+  if (!dateStr) return { text: '—', cls: '' };
+  const d = new Date(dateStr);
+  const today = new Date(); today.setHours(0,0,0,0);
+  const diff = Math.round((d - today) / 86400000);
+  if (diff < 0) return { text: `${Math.abs(diff)}d forfalt`, cls: 'overdue' };
+  if (diff === 0) return { text: 'I dag', cls: 'soon' };
+  if (diff === 1) return { text: 'I morgen', cls: 'soon' };
+  if (diff <= 3) return { text: `${diff}d igjen`, cls: 'soon' };
+  return { text: dateStr, cls: '' };
+}
+
+function escapeHtml(s) {
+  return String(s||'').replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[m]);
+}
+
+// ---------- Filtering / sorting ----------
+function applyFilters(tasks) {
+  const f = state.filters;
+  return tasks.filter(t => {
+    if (f.status === 'open') { if (t.status === 'done') return false; }
+    else if (f.status !== 'all' && t.status !== f.status) return false;
+    if (f.category !== 'all' && t.category !== f.category) return false;
+    if (f.priority !== 'all' && t.priority !== f.priority) return false;
+    if (f.owner === '__me__') { if ((t.owner||'') !== CURRENT_USER) return false; }
+    else if (f.owner === '__unassigned__') { if (t.owner) return false; }
+    else if (f.owner !== 'all') { if ((t.owner||'') !== f.owner) return false; }
+    if (f.search) {
+      const q = f.search.toLowerCase();
+      const hay = [t.title, t.desc, t.location, t.owner, (t.tags||[]).join(' ')].join(' ').toLowerCase();
+      if (!hay.includes(q)) return false;
+    }
+    return true;
+  });
+}
+
+function sortTasks(tasks) {
+  const { field, dir } = state.sort;
+  const sign = dir === 'asc' ? 1 : -1;
+  return [...tasks].sort((a, b) => {
+    let av = a[field], bv = b[field];
+    if (field === 'priority') { av = PRIO_ORDER[av]; bv = PRIO_ORDER[bv]; }
+    if (field === 'deadline') { av = av || '9999'; bv = bv || '9999'; }
+    if (field === 'estHours') { av = av || 0; bv = bv || 0; }
+    if (av == null) av = '';
+    if (bv == null) bv = '';
+    if (av < bv) return -1 * sign;
+    if (av > bv) return 1 * sign;
+    return 0;
+  });
+}
+
+// ---------- Render ----------
+function render() {
+  renderKPIs();
+  renderCharts();
+  renderTable();
+  updateOwnerFilterOptions();
+}
+
+function renderKPIs() {
+  const open = state.tasks.filter(t => t.status !== 'done');
+  const mine = open.filter(t => (t.owner||'') === CURRENT_USER);
+  const total = state.tasks.length;
+  const p1 = open.filter(t => t.priority === 'P1').length;
+  const hours = open.reduce((s,t) => s + (t.estHours || 0), 0);
+  const today = new Date().toISOString().slice(0,10);
+  const overdue = open.filter(t => t.deadline && t.deadline < today).length;
+  const weekAgo = daysFromNow(-7);
+  const done7 = state.tasks.filter(t => t.status === 'done' && t.completed && t.completed >= weekAgo).length;
+
+  document.getElementById('kpi-open').textContent = open.length;
+  document.getElementById('kpi-open-sub').textContent = `av ${total} totalt`;
+  document.getElementById('kpi-mine').textContent = mine.length;
+  const mineHours = mine.reduce((s,t) => s + (t.estHours||0), 0);
+  document.getElementById('kpi-mine-sub').textContent = mineHours > 0 ? `≈ ${mineHours.toFixed(1).replace(/\.0$/,'')}t arbeid` : 'tildelt meg';
+  document.getElementById('kpi-p1').textContent = p1;
+  document.getElementById('kpi-hours').textContent = hours.toFixed(1).replace(/\.0$/,'') + 't';
+  document.getElementById('kpi-hours-sub').textContent = hours > 8 ? `≈ ${(hours/8).toFixed(1)} arbeidsdager` : 'arbeidstimer';
+  document.getElementById('kpi-overdue').textContent = overdue;
+  document.getElementById('kpi-done').textContent = done7;
+}
+
+function renderCharts() {
+  const open = state.tasks.filter(t => t.status !== 'done');
+
+  const byCat = {};
+  open.forEach(t => { byCat[t.category] = (byCat[t.category] || 0) + 1; });
+  const catEntries = Object.entries(byCat).sort((a,b) => b[1] - a[1]);
+  document.getElementById('cat-total').textContent = `${open.length} åpne`;
+
+  const byPrio = { P1:0, P2:0, P3:0, P4:0 };
+  open.forEach(t => { byPrio[t.priority]++; });
+
+  const byOwner = {};
+  open.forEach(t => {
+    const o = t.owner || '(utildelt)';
+    byOwner[o] = (byOwner[o] || 0) + 1;
+  });
+  const ownerEntries = Object.entries(byOwner).sort((a,b) => b[1] - a[1]).slice(0, 10);
+
+  Object.values(charts).forEach(c => c && c.destroy());
+  const commonFont = { family: "-apple-system, 'Segoe UI', sans-serif", size: 11 };
+
+  charts.cat = new Chart(document.getElementById('catChart'), {
+    type: 'bar',
+    data: {
+      labels: catEntries.map(([k]) => (CATEGORIES.find(c => c.id === k)||{name:k}).name),
+      datasets: [{
+        data: catEntries.map(([,v]) => v),
+        backgroundColor: catEntries.map(([k]) => (CAT_COLORS[k]||'#666') + 'CC'),
+        borderColor: catEntries.map(([k]) => CAT_COLORS[k]||'#666'),
+        borderWidth: 1, borderRadius: 4,
+      }]
+    },
+    options: {
+      indexAxis: 'y', responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { display: false },
+        tooltip: { callbacks: { label: ctx => `${ctx.parsed.x} oppgave${ctx.parsed.x===1?'':'r'}` } } },
+      scales: {
+        x: { beginAtZero: true, ticks: { color: '#8b98a9', font: commonFont, stepSize: 1 }, grid: { color: '#2a3340' } },
+        y: { ticks: { color: '#e6edf3', font: commonFont }, grid: { display: false } }
+      }
+    }
+  });
+
+  charts.prio = new Chart(document.getElementById('prioChart'), {
+    type: 'doughnut',
+    data: {
+      labels: ['P1 Kritisk','P2 Høy','P3 Middels','P4 Lav'],
+      datasets: [{
+        data: [byPrio.P1, byPrio.P2, byPrio.P3, byPrio.P4],
+        backgroundColor: ['#ff5370CC','#ff9f43CC','#ffd93dCC','#7fb8ffCC'],
+        borderColor: '#1a212b', borderWidth: 2,
+      }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false, cutout: '60%',
+      plugins: {
+        legend: { position: 'right', labels: { color: '#e6edf3', font: commonFont, usePointStyle: true, padding: 12 } },
+        tooltip: { callbacks: { label: ctx => {
+          const tot = ctx.dataset.data.reduce((a,b)=>a+b,0);
+          const pct = tot ? ((ctx.parsed/tot)*100).toFixed(0) : 0;
+          return `${ctx.label}: ${ctx.parsed} (${pct}%)`;
+        } } }
+      }
+    }
+  });
+
+  charts.owner = new Chart(document.getElementById('ownerChart'), {
+    type: 'bar',
+    data: {
+      labels: ownerEntries.map(([k]) => k),
+      datasets: [{
+        data: ownerEntries.map(([,v]) => v),
+        backgroundColor: ownerEntries.map(([k]) => k === CURRENT_USER ? '#4ade80CC' : '#bb86fcCC'),
+        borderColor: ownerEntries.map(([k]) => k === CURRENT_USER ? '#4ade80' : '#bb86fc'),
+        borderWidth: 1, borderRadius: 4,
+      }]
+    },
+    options: {
+      indexAxis: 'y', responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { display: false },
+        tooltip: { callbacks: { label: ctx => `${ctx.parsed.x} oppgave${ctx.parsed.x===1?'':'r'}` } } },
+      scales: {
+        x: { beginAtZero: true, ticks: { color: '#8b98a9', font: commonFont, stepSize: 1 }, grid: { color: '#2a3340' } },
+        y: { ticks: { color: '#e6edf3', font: commonFont }, grid: { display: false } }
+      }
+    }
+  });
+}
+
+function renderTable() {
+  const filtered = sortTasks(applyFilters(state.tasks));
+  const tbody = document.getElementById('tbl-body');
+  const empty = document.getElementById('empty');
+  const emptySeed = document.getElementById('empty-seed');
+  document.getElementById('tbl-count').textContent = filtered.length;
+
+  if (filtered.length === 0) {
+    tbody.innerHTML = '';
+    empty.style.display = 'block';
+    emptySeed.style.display = state.tasks.length === 0 ? 'block' : 'none';
+    return;
+  }
+  empty.style.display = 'none';
+
+  tbody.innerHTML = filtered.map(t => {
+    const cat = CATEGORIES.find(c => c.id === t.category);
+    const dl = formatDeadline(t.deadline);
+    const tags = (t.tags||[]).map(tag => `<span style="font-family:var(--mono);font-size:11px;color:var(--text-faint)">#${escapeHtml(tag)}</span>`).join(' ');
+    const ownerCls = !t.owner ? 'unassigned' : (t.owner === CURRENT_USER ? 'me' : '');
+    const ownerText = t.owner ? escapeHtml(t.owner) : 'utildelt';
+    return `
+      <tr class="status-${t.status}" data-id="${t.id}">
+        <td><span class="badge prio-${t.priority}">${t.priority}</span></td>
+        <td>
+          <div class="task-title" onclick="openEdit('${t.id}')">${escapeHtml(t.title)}</div>
+          ${t.desc ? `<div class="task-desc">${escapeHtml(t.desc.slice(0,160))}${t.desc.length>160?'…':''}</div>` : ''}
+          ${tags ? `<div style="margin-top:4px">${tags}</div>` : ''}
+        </td>
+        <td><span class="cat-badge" style="color:${CAT_COLORS[t.category]||'#4fc3f7'};border-color:${(CAT_COLORS[t.category]||'#4fc3f7')}40;background:${(CAT_COLORS[t.category]||'#4fc3f7')}15" title="${cat?escapeHtml(cat.desc):''}">${cat?escapeHtml(cat.name):escapeHtml(t.category)}</span></td>
+        <td><span class="status-badge status-${t.status}">${STATUS_LABELS[t.status]||t.status}</span></td>
+        <td><span class="owner-badge ${ownerCls}" title="${t.createdBy?`Opprettet av ${escapeHtml(t.createdBy)}`:''}">${ownerText}</span></td>
+        <td style="font-family:var(--mono);font-size:12px;color:var(--text-dim)">${escapeHtml(t.location||'—')}</td>
+        <td style="text-align:right;font-family:var(--mono)">${t.estHours||'—'}</td>
+        <td class="time-cell ${dl.cls}">${dl.text}</td>
+        <td>
+          <div class="row-actions">
+            ${t.status !== 'done'
+              ? `<button class="icon-btn do" onclick="markDone('${t.id}')" title="Marker ferdig">✓</button>`
+              : `<button class="icon-btn" onclick="unmarkDone('${t.id}')" title="Gjenåpne">↺</button>`}
+            <button class="icon-btn" onclick="openEdit('${t.id}')" title="Rediger">✎</button>
+            ${!t.owner ? `<button class="icon-btn do" onclick="claim('${t.id}')" title="Ta eierskap">👤</button>` : ''}
+            <button class="icon-btn del" onclick="deleteTask('${t.id}')" title="Slett">🗑</button>
+          </div>
+        </td>
+      </tr>`;
+  }).join('');
+}
+
+function updateOwnerFilterOptions() {
+  const sel = document.getElementById('f-owner');
+  const current = sel.value;
+  // Samle alle eiere
+  const users = new Set(state.knownUsers);
+  state.tasks.forEach(t => { if (t.owner) users.add(t.owner); });
+  // Bevar "Alle", "Meg", "Utildelt", legg til øvrige
+  sel.innerHTML = '<option value="all">Alle</option><option value="__me__">Meg</option><option value="__unassigned__">Utildelt</option>';
+  [...users].sort().forEach(u => {
+    const opt = document.createElement('option');
+    opt.value = u; opt.textContent = u;
+    sel.appendChild(opt);
+  });
+  sel.value = [...sel.options].some(o => o.value === current) ? current : 'all';
+
+  // Samme for modal-dropdown
+  const msel = document.getElementById('f-owner-select');
+  msel.innerHTML = '<option value="">— velg —</option>';
+  [...users].sort().forEach(u => {
+    const opt = document.createElement('option');
+    opt.value = u; opt.textContent = u;
+    msel.appendChild(opt);
+  });
+}
+
+// ---------- Actions ----------
+async function loadAll() {
+  try {
+    const data = await api('list');
+    state.tasks = data.tasks || [];
+    state.knownUsers = data.known_users || [];
+    render();
+  } catch (e) {
+    toast('Kunne ikke laste: ' + e.message, true);
+    console.error(e);
+  }
+}
+
+window.markDone = async function(id) {
+  const t = state.tasks.find(x => x.id === id);
+  if (!t) return;
+  try {
+    const { task } = await api('update', { ...t, status: 'done' });
+    Object.assign(t, task);
+    render();
+    toast('Markert ferdig');
+  } catch (e) { toast('Feil: ' + e.message, true); }
+};
+
+window.unmarkDone = async function(id) {
+  const t = state.tasks.find(x => x.id === id);
+  if (!t) return;
+  try {
+    const { task } = await api('update', { ...t, status: 'todo' });
+    Object.assign(t, task);
+    render();
+  } catch (e) { toast('Feil: ' + e.message, true); }
+};
+
+window.claim = async function(id) {
+  const t = state.tasks.find(x => x.id === id);
+  if (!t) return;
+  try {
+    const { task } = await api('update', { ...t, owner: CURRENT_USER });
+    Object.assign(t, task);
+    render();
+    toast(`Du eier nå "${task.title.slice(0,30)}${task.title.length>30?'…':''}"`);
+  } catch (e) { toast('Feil: ' + e.message, true); }
+};
+
+window.deleteTask = async function(id) {
+  const t = state.tasks.find(x => x.id === id);
+  if (!t) return;
+  if (!confirm(`Slette oppgaven "${t.title}"?`)) return;
+  try {
+    await api('delete', { id });
+    state.tasks = state.tasks.filter(x => x.id !== id);
+    render();
+    toast('Slettet');
+  } catch (e) { toast('Feil: ' + e.message, true); }
+};
+
+window.openEdit = function(id) {
+  const t = state.tasks.find(x => x.id === id);
+  if (!t) return;
+  state.editingId = id;
+  document.getElementById('modal-title').textContent = 'Rediger oppgave';
+  document.getElementById('f-title').value = t.title;
+  document.getElementById('f-desc').value = t.desc || '';
+  document.getElementById('f-cat').value = t.category;
+  document.getElementById('f-prio').value = t.priority;
+  document.getElementById('f-stat').value = t.status;
+  document.getElementById('f-est').value = t.estHours || '';
+  document.getElementById('f-owner-input').value = t.owner || '';
+  document.getElementById('f-owner-select').value = '';
+  document.getElementById('f-loc').value = t.location || '';
+  document.getElementById('f-dl').value = t.deadline || '';
+  document.getElementById('f-tags').value = (t.tags||[]).join(', ');
+  document.getElementById('modal-delete').style.display = 'inline-flex';
+  document.getElementById('modal').classList.add('open');
+};
+
+function openNew() {
+  state.editingId = null;
+  document.getElementById('modal-title').textContent = 'Ny oppgave';
+  document.getElementById('f-title').value = '';
+  document.getElementById('f-desc').value = '';
+  document.getElementById('f-cat').value = CATEGORIES[0].id;
+  document.getElementById('f-prio').value = 'P2';
+  document.getElementById('f-stat').value = 'todo';
+  document.getElementById('f-est').value = '';
+  document.getElementById('f-owner-input').value = CURRENT_USER;
+  document.getElementById('f-owner-select').value = '';
+  document.getElementById('f-loc').value = '';
+  document.getElementById('f-dl').value = '';
+  document.getElementById('f-tags').value = '';
+  document.getElementById('modal-delete').style.display = 'none';
+  document.getElementById('modal').classList.add('open');
+  setTimeout(() => document.getElementById('f-title').focus(), 50);
+}
+
+function closeModal() {
+  document.getElementById('modal').classList.remove('open');
+  state.editingId = null;
+}
+
+async function saveForm() {
+  const title = document.getElementById('f-title').value.trim();
+  if (!title) { alert('Tittel er påkrevd'); return; }
+  const data = {
+    title,
+    desc: document.getElementById('f-desc').value.trim(),
+    category: document.getElementById('f-cat').value,
+    priority: document.getElementById('f-prio').value,
+    status: document.getElementById('f-stat').value,
+    estHours: parseFloat(document.getElementById('f-est').value) || 0,
+    owner: document.getElementById('f-owner-input').value.trim(),
+    location: document.getElementById('f-loc').value.trim(),
+    deadline: document.getElementById('f-dl').value,
+    tags: document.getElementById('f-tags').value.split(',').map(s=>s.trim()).filter(Boolean),
+  };
+
+  try {
+    if (state.editingId) {
+      data.id = state.editingId;
+      const { task } = await api('update', data);
+      const idx = state.tasks.findIndex(x => x.id === state.editingId);
+      if (idx >= 0) state.tasks[idx] = task;
+      toast('Lagret');
+    } else {
+      const { task } = await api('create', data);
+      state.tasks.push(task);
+      toast('Opprettet');
+    }
+    closeModal();
+    render();
+  } catch (e) { toast('Feil: ' + e.message, true); }
+}
+
+async function deleteFromModal() {
+  if (!state.editingId) return;
+  const t = state.tasks.find(x => x.id === state.editingId);
+  if (!t) return;
+  if (!confirm(`Slette oppgaven "${t.title}"?`)) return;
+  try {
+    await api('delete', { id: state.editingId });
+    state.tasks = state.tasks.filter(x => x.id !== state.editingId);
+    closeModal();
+    render();
+    toast('Slettet');
+  } catch (e) { toast('Feil: ' + e.message, true); }
+}
+
+// ---------- Filters ----------
+function bindFilters() {
+  document.getElementById('f-status').addEventListener('change', e => { state.filters.status = e.target.value; render(); });
+  document.getElementById('f-category').addEventListener('change', e => { state.filters.category = e.target.value; render(); });
+  document.getElementById('f-priority').addEventListener('change', e => { state.filters.priority = e.target.value; render(); });
+  document.getElementById('f-owner').addEventListener('change', e => { state.filters.owner = e.target.value; render(); });
+  document.getElementById('f-search').addEventListener('input', e => { state.filters.search = e.target.value; render(); });
+  document.getElementById('clearFilters').addEventListener('click', () => {
+    state.filters = { status: 'open', category: 'all', priority: 'all', owner: 'all', search: '' };
+    document.getElementById('f-status').value = 'open';
+    document.getElementById('f-category').value = 'all';
+    document.getElementById('f-priority').value = 'all';
+    document.getElementById('f-owner').value = 'all';
+    document.getElementById('f-search').value = '';
+    render();
+  });
+  document.getElementById('refreshBtn').addEventListener('click', loadAll);
+}
+
+function populateCategorySelects() {
+  const filterSel = document.getElementById('f-category');
+  const formSel = document.getElementById('f-cat');
+  CATEGORIES.forEach(c => {
+    filterSel.insertAdjacentHTML('beforeend', `<option value="${c.id}">${c.name}</option>`);
+    formSel.insertAdjacentHTML('beforeend', `<option value="${c.id}">${c.name}</option>`);
+  });
+}
+
+function bindSort() {
+  document.querySelectorAll('thead th[data-sort]').forEach(th => {
+    th.addEventListener('click', () => {
+      const field = th.dataset.sort;
+      if (state.sort.field === field) {
+        state.sort.dir = state.sort.dir === 'asc' ? 'desc' : 'asc';
+      } else {
+        state.sort.field = field;
+        state.sort.dir = field === 'priority' || field === 'deadline' ? 'asc' : 'desc';
+      }
+      render();
+    });
+  });
+}
+
+// ---------- Import / Export ----------
+function exportJSON() {
+  const data = JSON.stringify(state.tasks, null, 2);
+  const blob = new Blob([data], { type: 'application/json' });
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  a.download = `netops-todo-${new Date().toISOString().slice(0,10)}.json`;
+  a.click();
+  URL.revokeObjectURL(a.href);
+}
+
+async function importJSON(file) {
+  try {
+    const text = await file.text();
+    const data = JSON.parse(text);
+    if (!Array.isArray(data)) throw new Error('Forventet array');
+    if (!confirm(`Importere ${data.length} oppgaver? Dette erstatter alt på serveren.`)) return;
+    await api('replace', data);
+    toast('Importert');
+    await loadAll();
+  } catch (e) { toast('Kunne ikke importere: ' + e.message, true); }
+}
+
+// ---------- Seed ----------
+async function seedSamples() {
+  if (!confirm('Last inn 16 eksempel-oppgaver?')) return;
+  try {
+    await api('seed', {});
+    toast('Eksempel-data lastet');
+    await loadAll();
+  } catch (e) { toast('Feil: ' + e.message, true); }
+}
+
+// ---------- Clock ----------
+function updateClock() {
+  const now = new Date();
+  const s = now.toLocaleString('nb-NO', { weekday:'short', day:'2-digit', month:'short', hour:'2-digit', minute:'2-digit' });
+  document.getElementById('clock').textContent = `$ date → ${s}`;
+}
+
+// ---------- Init ----------
+function init() {
+  populateCategorySelects();
+  bindFilters();
+  bindSort();
+
+  document.getElementById('newTaskBtn').addEventListener('click', openNew);
+  document.getElementById('modal-close').addEventListener('click', closeModal);
+  document.getElementById('modal-cancel').addEventListener('click', closeModal);
+  document.getElementById('modal-save').addEventListener('click', saveForm);
+  document.getElementById('modal-delete').addEventListener('click', deleteFromModal);
+  document.getElementById('modal').addEventListener('click', e => { if (e.target.id === 'modal') closeModal(); });
+  document.addEventListener('keydown', e => {
+    if (e.key === 'Escape') closeModal();
+    if (e.key === 'n' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA' && e.target.tagName !== 'SELECT') {
+      e.preventDefault(); openNew();
+    }
+  });
+
+  // Owner select i modal fyller inn fritekstfeltet
+  document.getElementById('f-owner-select').addEventListener('change', e => {
+    if (e.target.value) {
+      document.getElementById('f-owner-input').value = e.target.value;
+      e.target.value = '';
+    }
+  });
+
+  document.getElementById('exportBtn').addEventListener('click', exportJSON);
+  document.getElementById('importBtn').addEventListener('click', () => document.getElementById('importFile').click());
+  document.getElementById('importFile').addEventListener('change', e => {
+    if (e.target.files[0]) importJSON(e.target.files[0]);
+    e.target.value = '';
+  });
+  document.getElementById('seedBtn').addEventListener('click', seedSamples);
+
+  updateClock();
+  setInterval(updateClock, 30000);
+
+  // Auto-refresh hvert 60s for å hente inn andres endringer
+  setInterval(loadAll, 60000);
+
+  loadAll();
+}
+
+init();
+</script>
+</body>
+</html>
diff --git a/netops-todo-server/seed.json b/netops-todo-server/seed.json
new file mode 100644
index 0000000..04f7dfe
--- /dev/null
+++ b/netops-todo-server/seed.json
@@ -0,0 +1,18 @@
+[
+  {"title":"OSPF adjacency drops mellom RTR-OSL-01 og RTR-OSL-02","desc":"Intermittent flapping ca. hvert 15. min. Sjekk MTU, hello/dead timers og interface-feil. Logger på NMS.","category":"L3","priority":"P1","status":"progress","estHours":4,"location":"DC-OSL-1","tags":["feilsøking","prod"]},
+  {"title":"Høy latency mot NIX peering","desc":"Pakketap 0.3%, latency 8→18ms mot AS-path via NIX. Kan være congestion – kontakt NIX NOC.","category":"PEER","priority":"P1","status":"todo","estHours":2,"location":"remote","tags":["peering","nix"]},
+  {"title":"Konfigurer nye eBGP-peers mot Telenor AS2119","desc":"To nye sesjoner på redundant uplink. Husk MD5, max-prefix, og route-map inn/ut. Dokumentér AS-set.","category":"BGP","priority":"P2","status":"todo","estHours":3,"location":"DC-OSL-1","tags":["bgp","telenor"]},
+  {"title":"Bytt defekt SFP+ i core-sw01 port 24","desc":"CRC-feil øker, link flapper. RMA er bestilt, reservedel på lager B-12.","category":"L1","priority":"P2","status":"todo","estHours":1,"location":"DC-OSL-1","tags":["hardware"]},
+  {"title":"Sett opp HAProxy for nytt API-cluster","desc":"Backend: 4 noder, TLS termination, HTTP/2, health check /healthz. ACL for rate limit.","category":"L4","priority":"P2","status":"todo","estHours":4,"location":"remote","tags":["prosjekt"]},
+  {"title":"Fiberkoble nytt rack B12","desc":"24x LC-LC single-mode, 3m patch. Dokumentér i kabelregister. Labels iht. standard.","category":"L1","priority":"P3","status":"todo","estHours":6,"location":"DC-BGO-1","tags":["felt","bergen"]},
+  {"title":"Oppgrader IOS-XE på dist-sw03 til 05","desc":"Vedlikeholdsvindu 02:00–04:00. Backup konfig, ISSU der det støttes. Rollback plan.","category":"L2","priority":"P2","status":"todo","estHours":3,"location":"DC-OSL-1","tags":["vedlikehold","oppgradering"]},
+  {"title":"Legg til route reflector i iBGP-mesh","desc":"Reduser full-mesh. RR-klienter: alle PE-rutere. Test failover mellom RR1/RR2.","category":"BGP","priority":"P3","status":"todo","estHours":5,"location":"remote","tags":["design"]},
+  {"title":"Review FW-regler før Q2 audit","desc":"Finn og rydd vekk ubrukte regler, dupliserte objekter. Eksportér rapport til sec-team.","category":"SEC","priority":"P2","status":"blocked","estHours":8,"location":"remote","tags":["audit","compliance"]},
+  {"title":"Bytt batteri på UPS i Trondheim POP","desc":"Batteritest feiler. Kontakt kjøpetjeneste for reservedel. Krever fysisk oppmøte.","category":"L1","priority":"P2","status":"todo","estHours":2,"location":"POP-TRD","tags":["felt","trondheim"]},
+  {"title":"Oppdater LibreNMS poller-nodes","desc":"v24.x → v25.x. Backup MySQL, test med staging-poller først.","category":"NMS","priority":"P4","status":"todo","estHours":1,"location":"remote","tags":["vedlikehold"]},
+  {"title":"Dokumentér nye VLAN-er (120-135) i IPAM","desc":"Oppdater NetBox. Inkluder prefix, site, role og tenant.","category":"DOC","priority":"P3","status":"progress","estHours":2,"location":"remote","tags":["netbox"]},
+  {"title":"Ansible-playbook for standard switch-config","desc":"Base config, NTP, SNMP, AAA, banner. Idempotent. Test i lab først.","category":"AUTO","priority":"P3","status":"todo","estHours":6,"location":"remote","tags":["automatisering"]},
+  {"title":"Postmortem for uptime-hendelse 2026-04-19","desc":"45 min utfall etter oppgradering. RCA + tiltaksliste. Del med ledergruppe.","category":"INC","priority":"P2","status":"progress","estHours":3,"location":"remote","tags":["postmortem"]},
+  {"title":"Planlegg 100G oppgradering DC-BGO ↔ DC-OSL","desc":"Kostestimat, lead time optikk, migreringsvindu, rollback.","category":"PROJ","priority":"P3","status":"todo","estHours":10,"location":"remote","tags":["planlegging","capex"]},
+  {"title":"Verifisér BFD timere på alle OSPF-lenker","desc":"Mål: 150ms detection. Sjekk at alle rutere støtter og har konfigurert.","category":"L3","priority":"P4","status":"todo","estHours":2,"location":"remote","tags":["optimalisering"]}
+]
diff --git a/netops-todo.html b/netops-todo.html
new file mode 100644
index 0000000..61438c9
--- /dev/null
+++ b/netops-todo.html
@@ -0,0 +1,1312 @@
+<!DOCTYPE html>
+<html lang="no">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>NetOps To-Do · Network Engineer</title>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1"></script>
+<style>
+:root {
+  --bg: #0f1419;
+  --bg-soft: #151b23;
+  --card: #1a212b;
+  --card-hover: #202836;
+  --border: #2a3340;
+  --border-strong: #3a4555;
+  --text: #e6edf3;
+  --text-dim: #8b98a9;
+  --text-faint: #5a6878;
+  --accent: #4fc3f7;
+  --accent-soft: rgba(79, 195, 247, 0.12);
+  --p1: #ff5370;
+  --p2: #ff9f43;
+  --p3: #ffd93d;
+  --p4: #7fb8ff;
+  --ok: #4ade80;
+  --warn: #ff9f43;
+  --err: #ff5370;
+  --radius: 8px;
+  --gap: 14px;
+  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html, body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  min-height: 100vh;
+}
+
+.container {
+  max-width: 1500px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* Header */
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+header h1 {
+  font-size: 22px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+header h1::before {
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--ok);
+  box-shadow: 0 0 12px var(--ok);
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+header .sub {
+  color: var(--text-dim);
+  font-size: 13px;
+  font-family: var(--mono);
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* Buttons */
+button, .btn {
+  background: var(--card);
+  color: var(--text);
+  border: 1px solid var(--border);
+  padding: 8px 14px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+button:hover, .btn:hover {
+  background: var(--card-hover);
+  border-color: var(--border-strong);
+}
+
+button.primary, .btn.primary {
+  background: var(--accent);
+  color: #06151f;
+  border-color: var(--accent);
+  font-weight: 600;
+}
+
+button.primary:hover, .btn.primary:hover {
+  background: #7dd3fc;
+  border-color: #7dd3fc;
+}
+
+button.danger {
+  background: transparent;
+  color: var(--err);
+  border-color: rgba(255, 83, 112, 0.3);
+}
+
+button.danger:hover {
+  background: rgba(255, 83, 112, 0.1);
+  border-color: var(--err);
+}
+
+/* KPI row */
+.kpi-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+  gap: var(--gap);
+  margin-bottom: var(--gap);
+}
+
+.kpi {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px 18px;
+  position: relative;
+  overflow: hidden;
+}
+
+.kpi::before {
+  content: "";
+  position: absolute;
+  left: 0; top: 0; bottom: 0;
+  width: 3px;
+  background: var(--accent);
+}
+
+.kpi.kpi-p1::before { background: var(--p1); }
+.kpi.kpi-warn::before { background: var(--warn); }
+.kpi.kpi-ok::before { background: var(--ok); }
+
+.kpi-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-dim);
+  margin-bottom: 6px;
+  font-weight: 600;
+}
+
+.kpi-value {
+  font-size: 26px;
+  font-weight: 700;
+  font-family: var(--mono);
+  line-height: 1.1;
+}
+
+.kpi-sub {
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-top: 4px;
+}
+
+/* Chart row */
+.chart-row {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr 1fr;
+  gap: var(--gap);
+  margin-bottom: var(--gap);
+}
+
+.panel {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px 18px;
+}
+
+.panel h3 {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-dim);
+  margin-bottom: 14px;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.chart-wrap {
+  position: relative;
+  height: 220px;
+}
+
+/* Filters */
+.filters {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: var(--gap);
+  padding: 12px 16px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.filter-group label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-dim);
+  font-weight: 600;
+}
+
+select, input[type="text"], input[type="number"], input[type="date"], textarea {
+  background: var(--bg-soft);
+  color: var(--text);
+  border: 1px solid var(--border);
+  padding: 7px 10px;
+  border-radius: 5px;
+  font-size: 13px;
+  font-family: inherit;
+}
+
+select:focus, input:focus, textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.search-input {
+  flex: 1;
+  min-width: 200px;
+}
+
+/* Task list table */
+.table-panel {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.table-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border);
+}
+
+.table-head h3 {
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.table-head .count {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: 12px;
+  margin-left: 8px;
+}
+
+.table-scroll { overflow-x: auto; }
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+thead th {
+  text-align: left;
+  padding: 10px 14px;
+  background: var(--bg-soft);
+  color: var(--text-dim);
+  font-weight: 600;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--border);
+}
+
+thead th:hover { color: var(--text); }
+
+tbody td {
+  padding: 11px 14px;
+  border-bottom: 1px solid var(--border);
+  vertical-align: top;
+}
+
+tbody tr { transition: background 0.1s; }
+tbody tr:hover { background: var(--card-hover); }
+
+tbody tr.status-done td {
+  color: var(--text-faint);
+}
+tbody tr.status-done .task-title {
+  text-decoration: line-through;
+}
+
+.task-title {
+  font-weight: 500;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.task-title:hover { color: var(--accent); }
+
+.task-desc {
+  color: var(--text-dim);
+  font-size: 12px;
+  margin-top: 2px;
+  max-width: 400px;
+}
+
+/* Badges */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  white-space: nowrap;
+}
+
+.prio-P1 { background: rgba(255, 83, 112, 0.15); color: var(--p1); border: 1px solid rgba(255, 83, 112, 0.3); }
+.prio-P2 { background: rgba(255, 159, 67, 0.15); color: var(--p2); border: 1px solid rgba(255, 159, 67, 0.3); }
+.prio-P3 { background: rgba(255, 217, 61, 0.15); color: var(--p3); border: 1px solid rgba(255, 217, 61, 0.3); }
+.prio-P4 { background: rgba(127, 184, 255, 0.15); color: var(--p4); border: 1px solid rgba(127, 184, 255, 0.3); }
+
+.status-badge {
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+}
+.status-todo { background: rgba(127, 184, 255, 0.12); color: #7fb8ff; }
+.status-progress { background: rgba(255, 159, 67, 0.15); color: var(--warn); }
+.status-blocked { background: rgba(255, 83, 112, 0.15); color: var(--err); }
+.status-done { background: rgba(74, 222, 128, 0.12); color: var(--ok); }
+
+.cat-badge {
+  font-family: var(--mono);
+  font-size: 11px;
+  padding: 2px 7px;
+  border-radius: 4px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  border: 1px solid rgba(79, 195, 247, 0.25);
+}
+
+.time-cell {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text-dim);
+  white-space: nowrap;
+}
+
+.time-cell.overdue { color: var(--err); font-weight: 600; }
+.time-cell.soon { color: var(--warn); }
+
+.row-actions {
+  display: flex;
+  gap: 4px;
+  justify-content: flex-end;
+}
+
+.icon-btn {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  padding: 4px 6px;
+  font-size: 13px;
+  cursor: pointer;
+  border-radius: 3px;
+}
+.icon-btn:hover { background: var(--bg-soft); color: var(--text); }
+.icon-btn.do:hover { color: var(--ok); }
+.icon-btn.del:hover { color: var(--err); }
+
+/* Modal */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(3px);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  padding: 20px;
+}
+.modal-overlay.open { display: flex; }
+
+.modal {
+  background: var(--card);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  width: 100%;
+  max-width: 620px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+.modal-head {
+  padding: 18px 22px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.modal-head h2 { font-size: 16px; font-weight: 600; }
+
+.modal-body {
+  padding: 20px 22px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.form-field.full { grid-column: 1 / -1; }
+.form-field label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-dim);
+  font-weight: 600;
+}
+.form-field textarea { resize: vertical; min-height: 72px; font-family: inherit; }
+
+.modal-foot {
+  padding: 14px 22px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.empty-state {
+  padding: 40px;
+  text-align: center;
+  color: var(--text-dim);
+}
+
+footer {
+  margin-top: 28px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border);
+  text-align: center;
+  color: var(--text-faint);
+  font-size: 12px;
+  font-family: var(--mono);
+}
+
+/* Responsive */
+@media (max-width: 1100px) {
+  .chart-row { grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 720px) {
+  .chart-row { grid-template-columns: 1fr; }
+  .modal-body { grid-template-columns: 1fr; }
+  .kpi-value { font-size: 22px; }
+  header h1 { font-size: 18px; }
+}
+</style>
+</head>
+<body>
+<div class="container">
+
+<header>
+  <div>
+    <h1>NetOps To-Do</h1>
+    <div class="sub" id="clock">network-engineer@nms:~$</div>
+  </div>
+  <div class="header-actions">
+    <button id="exportBtn" title="Eksporter JSON">⬇ Eksporter</button>
+    <button id="importBtn" title="Importer JSON">⬆ Importer</button>
+    <input type="file" id="importFile" accept=".json" style="display:none">
+    <button class="primary" id="newTaskBtn">+ Ny oppgave</button>
+  </div>
+</header>
+
+<!-- KPIs -->
+<section class="kpi-row">
+  <div class="kpi">
+    <div class="kpi-label">Åpne oppgaver</div>
+    <div class="kpi-value" id="kpi-open">0</div>
+    <div class="kpi-sub" id="kpi-open-sub">av 0 totalt</div>
+  </div>
+  <div class="kpi kpi-p1">
+    <div class="kpi-label">P1 Kritisk</div>
+    <div class="kpi-value" id="kpi-p1">0</div>
+    <div class="kpi-sub" id="kpi-p1-sub">krever umiddelbar handling</div>
+  </div>
+  <div class="kpi kpi-warn">
+    <div class="kpi-label">Est. tid igjen</div>
+    <div class="kpi-value" id="kpi-hours">0t</div>
+    <div class="kpi-sub" id="kpi-hours-sub">arbeidstimer</div>
+  </div>
+  <div class="kpi">
+    <div class="kpi-label">Forfalte</div>
+    <div class="kpi-value" id="kpi-overdue">0</div>
+    <div class="kpi-sub">over frist</div>
+  </div>
+  <div class="kpi kpi-ok">
+    <div class="kpi-label">Ferdig (7d)</div>
+    <div class="kpi-value" id="kpi-done">0</div>
+    <div class="kpi-sub" id="kpi-done-sub">siste 7 dager</div>
+  </div>
+</section>
+
+<!-- Charts -->
+<section class="chart-row">
+  <div class="panel">
+    <h3>Åpne oppgaver per kategori <span id="cat-total" style="color:var(--text-faint);font-family:var(--mono);text-transform:none;letter-spacing:0"></span></h3>
+    <div class="chart-wrap"><canvas id="catChart"></canvas></div>
+  </div>
+  <div class="panel">
+    <h3>Fordeling etter prioritet</h3>
+    <div class="chart-wrap"><canvas id="prioChart"></canvas></div>
+  </div>
+  <div class="panel">
+    <h3>Ferdigstilt siste 14 dager</h3>
+    <div class="chart-wrap"><canvas id="trendChart"></canvas></div>
+  </div>
+</section>
+
+<!-- Filters -->
+<div class="filters">
+  <div class="filter-group">
+    <label>Status</label>
+    <select id="f-status">
+      <option value="open">Åpne</option>
+      <option value="all">Alle</option>
+      <option value="todo">Å gjøre</option>
+      <option value="progress">Pågår</option>
+      <option value="blocked">Blokkert</option>
+      <option value="done">Ferdig</option>
+    </select>
+  </div>
+  <div class="filter-group">
+    <label>Kategori</label>
+    <select id="f-category"><option value="all">Alle</option></select>
+  </div>
+  <div class="filter-group">
+    <label>Prioritet</label>
+    <select id="f-priority">
+      <option value="all">Alle</option>
+      <option value="P1">P1 Kritisk</option>
+      <option value="P2">P2 Høy</option>
+      <option value="P3">P3 Middels</option>
+      <option value="P4">P4 Lav</option>
+    </select>
+  </div>
+  <input class="search-input" type="text" id="f-search" placeholder="Søk tittel, beskrivelse, lokasjon, tag ...">
+  <button id="clearFilters">Nullstill</button>
+</div>
+
+<!-- Table -->
+<div class="table-panel">
+  <div class="table-head">
+    <h3>Oppgaveliste <span class="count" id="tbl-count">0</span></h3>
+    <div class="sub" style="color:var(--text-faint); font-family:var(--mono); font-size:11px">klikk kolonne for å sortere</div>
+  </div>
+  <div class="table-scroll">
+    <table id="tbl">
+      <thead>
+        <tr>
+          <th data-sort="priority" style="width:70px">Prio</th>
+          <th data-sort="title">Oppgave</th>
+          <th data-sort="category" style="width:110px">Kategori</th>
+          <th data-sort="status" style="width:100px">Status</th>
+          <th data-sort="location" style="width:130px">Lokasjon</th>
+          <th data-sort="estHours" style="width:70px;text-align:right">Est (t)</th>
+          <th data-sort="deadline" style="width:120px">Frist</th>
+          <th style="width:110px;text-align:right">Handling</th>
+        </tr>
+      </thead>
+      <tbody id="tbl-body"></tbody>
+    </table>
+  </div>
+  <div id="empty" class="empty-state" style="display:none">
+    Ingen oppgaver som matcher filtrene. Prøv å nullstille filtre eller legg til en ny oppgave.
+  </div>
+</div>
+
+<footer>
+  Lagres lokalt i nettleseren · Kan eksporteres til JSON for backup
+</footer>
+</div>
+
+<!-- Task Modal -->
+<div class="modal-overlay" id="modal">
+  <div class="modal">
+    <div class="modal-head">
+      <h2 id="modal-title">Ny oppgave</h2>
+      <button class="icon-btn" id="modal-close" style="font-size:18px">×</button>
+    </div>
+    <div class="modal-body">
+      <div class="form-field full">
+        <label>Tittel *</label>
+        <input type="text" id="f-title" placeholder="F.eks. Konfigurer BGP-peer mot AS2119">
+      </div>
+      <div class="form-field full">
+        <label>Beskrivelse / notater</label>
+        <textarea id="f-desc" placeholder="Kommandoer, konfigurasjon, referanser ..."></textarea>
+      </div>
+      <div class="form-field">
+        <label>Kategori *</label>
+        <select id="f-cat"></select>
+      </div>
+      <div class="form-field">
+        <label>Prioritet</label>
+        <select id="f-prio">
+          <option value="P1">P1 Kritisk</option>
+          <option value="P2" selected>P2 Høy</option>
+          <option value="P3">P3 Middels</option>
+          <option value="P4">P4 Lav</option>
+        </select>
+      </div>
+      <div class="form-field">
+        <label>Status</label>
+        <select id="f-stat">
+          <option value="todo" selected>Å gjøre</option>
+          <option value="progress">Pågår</option>
+          <option value="blocked">Blokkert</option>
+          <option value="done">Ferdig</option>
+        </select>
+      </div>
+      <div class="form-field">
+        <label>Est. tid (timer)</label>
+        <input type="number" id="f-est" min="0" step="0.5" placeholder="2">
+      </div>
+      <div class="form-field">
+        <label>Lokasjon / site</label>
+        <input type="text" id="f-loc" placeholder="DC-OSL-1, Bergen POP, remote ...">
+      </div>
+      <div class="form-field">
+        <label>Frist</label>
+        <input type="date" id="f-dl">
+      </div>
+      <div class="form-field full">
+        <label>Tags (komma-separert)</label>
+        <input type="text" id="f-tags" placeholder="vedlikeholdsvindu, kunde-X, audit">
+      </div>
+    </div>
+    <div class="modal-foot">
+      <button class="danger" id="modal-delete" style="display:none">Slett</button>
+      <div style="flex:1"></div>
+      <button id="modal-cancel">Avbryt</button>
+      <button class="primary" id="modal-save">Lagre</button>
+    </div>
+  </div>
+</div>
+
+<script>
+// ---------- Constants ----------
+const CATEGORIES = [
+  { id: 'L1',    name: 'L1 Fysisk',         desc: 'Kabling, fiber, patch, SFP, rack' },
+  { id: 'L2',    name: 'L2 Switching',      desc: 'VLAN, STP, MAC, trunking' },
+  { id: 'L3',    name: 'L3 Ruting',         desc: 'OSPF, ISIS, statisk, VRF' },
+  { id: 'L4',    name: 'L4 Lastbalansering',desc: 'HAProxy, NGINX, F5, BIG-IP' },
+  { id: 'BGP',   name: 'BGP',               desc: 'iBGP / eBGP, policies, RR' },
+  { id: 'PEER',  name: 'Peering / IX',      desc: 'IXP, private peering, PeeringDB' },
+  { id: 'SEC',   name: 'Firewall / Security', desc: 'ACL, firewall, IPS, audit' },
+  { id: 'NMS',   name: 'Overvåking / NMS',  desc: 'LibreNMS, Grafana, alerts' },
+  { id: 'AUTO',  name: 'Automatisering',    desc: 'Ansible, scripts, CI/CD' },
+  { id: 'DOC',   name: 'Dokumentasjon',     desc: 'Diagrammer, IPAM, runbooks' },
+  { id: 'INC',   name: 'Incident / On-call',desc: 'Feilsøking, postmortem' },
+  { id: 'PROJ',  name: 'Prosjekt / Plan',   desc: 'Design, anskaffelse, oppgraderinger' },
+];
+
+const CAT_COLORS = {
+  L1: '#ff9f43', L2: '#4fc3f7', L3: '#7fb8ff', L4: '#bb86fc',
+  BGP: '#4ade80', PEER: '#26de81', SEC: '#ff5370', NMS: '#ffd93d',
+  AUTO: '#00d2d3', DOC: '#a0a0a0', INC: '#ff6b6b', PROJ: '#8172B3'
+};
+
+const STATUS_LABELS = {
+  todo: 'Å gjøre', progress: 'Pågår', blocked: 'Blokkert', done: 'Ferdig'
+};
+
+const PRIO_ORDER = { P1: 1, P2: 2, P3: 3, P4: 4 };
+
+// ---------- Sample seed data ----------
+const SAMPLE_TASKS = [
+  { title: 'OSPF adjacency drops mellom RTR-OSL-01 og RTR-OSL-02',
+    desc: 'Intermittent flapping ca. hvert 15. min. Sjekk MTU, hello/dead timers og interface-feil. Logger på NMS.',
+    category: 'L3', priority: 'P1', status: 'progress', estHours: 4,
+    location: 'DC-OSL-1', deadline: daysFromNow(0), tags: ['feilsøking','prod'] },
+  { title: 'Høy latency mot NIX peering',
+    desc: 'Pakketap 0.3%, latency 8→18ms mot AS-path via NIX. Kan være congestion – kontakt NIX NOC.',
+    category: 'PEER', priority: 'P1', status: 'todo', estHours: 2,
+    location: 'remote', deadline: daysFromNow(1), tags: ['peering','nix'] },
+  { title: 'Konfigurer nye eBGP-peers mot Telenor AS2119',
+    desc: 'To nye sesjoner på redundant uplink. Husk MD5, max-prefix, og route-map inn/ut. Dokumentér AS-set.',
+    category: 'BGP', priority: 'P2', status: 'todo', estHours: 3,
+    location: 'DC-OSL-1', deadline: daysFromNow(3), tags: ['bgp','telenor'] },
+  { title: 'Bytt defekt SFP+ i core-sw01 port 24',
+    desc: 'CRC-feil øker, link flapper. RMA er bestilt, reservedel på lager B-12.',
+    category: 'L1', priority: 'P2', status: 'todo', estHours: 1,
+    location: 'DC-OSL-1', deadline: daysFromNow(2), tags: ['hardware'] },
+  { title: 'Sett opp HAProxy for nytt API-cluster',
+    desc: 'Backend: 4 noder, TLS termination, HTTP/2, health check /healthz. ACL for rate limit.',
+    category: 'L4', priority: 'P2', status: 'todo', estHours: 4,
+    location: 'remote', deadline: daysFromNow(5), tags: ['prosjekt'] },
+  { title: 'Fiberkoble nytt rack B12',
+    desc: '24x LC-LC single-mode, 3m patch. Dokumentér i kabelregister. Labels iht. standard.',
+    category: 'L1', priority: 'P3', status: 'todo', estHours: 6,
+    location: 'DC-BGO-1', deadline: daysFromNow(7), tags: ['felt','bergen'] },
+  { title: 'Oppgrader IOS-XE på dist-sw03 til 05',
+    desc: 'Vedlikeholdsvindu 02:00–04:00. Backup konfig, ISSU der det støttes. Rollback plan.',
+    category: 'L2', priority: 'P2', status: 'todo', estHours: 3,
+    location: 'DC-OSL-1', deadline: daysFromNow(4), tags: ['vedlikehold','oppgradering'] },
+  { title: 'Legg til route reflector i iBGP-mesh',
+    desc: 'Reduser full-mesh. RR-klienter: alle PE-rutere. Test failover mellom RR1/RR2.',
+    category: 'BGP', priority: 'P3', status: 'todo', estHours: 5,
+    location: 'remote', deadline: daysFromNow(10), tags: ['design'] },
+  { title: 'Review FW-regler før Q2 audit',
+    desc: 'Finn og rydd vekk ubrukte regler, dupliserte objekter. Eksportér rapport til sec-team.',
+    category: 'SEC', priority: 'P2', status: 'blocked', estHours: 8,
+    location: 'remote', deadline: daysFromNow(14), tags: ['audit','compliance'] },
+  { title: 'Bytt batteri på UPS i Trondheim POP',
+    desc: 'Batteritest feiler. Kontakt kjøpetjeneste for reservedel. Krever fysisk oppmøte.',
+    category: 'L1', priority: 'P2', status: 'todo', estHours: 2,
+    location: 'POP-TRD', deadline: daysFromNow(6), tags: ['felt','trondheim'] },
+  { title: 'Oppdater LibreNMS poller-nodes',
+    desc: 'v24.x → v25.x. Backup MySQL, test med staging-poller først.',
+    category: 'NMS', priority: 'P4', status: 'todo', estHours: 1,
+    location: 'remote', deadline: daysFromNow(12), tags: ['vedlikehold'] },
+  { title: 'Dokumentér nye VLAN-er (120-135) i IPAM',
+    desc: 'Oppdater NetBox. Inkluder prefix, site, role og tenant.',
+    category: 'DOC', priority: 'P3', status: 'progress', estHours: 2,
+    location: 'remote', deadline: daysFromNow(3), tags: ['netbox'] },
+  { title: 'Ansible-playbook for standard switch-config',
+    desc: 'Base config, NTP, SNMP, AAA, banner. Idempotent. Test i lab først.',
+    category: 'AUTO', priority: 'P3', status: 'todo', estHours: 6,
+    location: 'remote', deadline: daysFromNow(14), tags: ['automatisering'] },
+  { title: 'Postmortem for uptime-hendelse 2026-04-19',
+    desc: '45 min utfall etter oppgradering. RCA + tiltaksliste. Del med ledergruppe.',
+    category: 'INC', priority: 'P2', status: 'progress', estHours: 3,
+    location: 'remote', deadline: daysFromNow(2), tags: ['postmortem'] },
+  { title: 'Planlegg 100G oppgradering DC-BGO ↔ DC-OSL',
+    desc: 'Kostestimat, lead time optikk, migreringsvindu, rollback.',
+    category: 'PROJ', priority: 'P3', status: 'todo', estHours: 10,
+    location: 'remote', deadline: daysFromNow(30), tags: ['planlegging','capex'] },
+  { title: 'Verifisér BFD timere på alle OSPF-lenker',
+    desc: 'Mål: 150ms detection. Sjekk at alle rutere støtter og har konfigurert.',
+    category: 'L3', priority: 'P4', status: 'todo', estHours: 2,
+    location: 'remote', deadline: daysFromNow(20), tags: ['optimalisering'] },
+  // A few completed tasks for the trend chart
+  { title: 'Ferdig: Bytt strømkurs i rack A3', category: 'L1', priority: 'P3',
+    status: 'done', estHours: 2, location: 'DC-OSL-1',
+    completed: daysFromNow(-2), tags: ['felt'] },
+  { title: 'Ferdig: Aktivér BFD på eBGP mot AS1299', category: 'BGP', priority: 'P3',
+    status: 'done', estHours: 1, location: 'remote',
+    completed: daysFromNow(-4), tags: ['optimalisering'] },
+  { title: 'Ferdig: Oppdater runbook for core-sw reboot', category: 'DOC', priority: 'P4',
+    status: 'done', estHours: 2, location: 'remote',
+    completed: daysFromNow(-1), tags: ['runbook'] },
+  { title: 'Ferdig: Løst MAC-flap alarm på acc-sw14', category: 'L2', priority: 'P2',
+    status: 'done', estHours: 2, location: 'DC-OSL-1',
+    completed: daysFromNow(-6), tags: ['feilsøking'] },
+];
+
+function daysFromNow(d) {
+  const date = new Date();
+  date.setDate(date.getDate() + d);
+  return date.toISOString().slice(0, 10);
+}
+
+// ---------- State / Storage ----------
+const STORAGE_KEY = 'netops-todo-v1';
+
+function uid() {
+  return 't_' + Math.random().toString(36).slice(2, 10) + Date.now().toString(36).slice(-4);
+}
+
+function loadTasks() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) return JSON.parse(raw);
+  } catch (e) { console.warn('Load error', e); }
+  // First run: seed with sample tasks
+  const seeded = SAMPLE_TASKS.map(t => ({
+    id: uid(),
+    title: t.title,
+    desc: t.desc || '',
+    category: t.category,
+    priority: t.priority,
+    status: t.status,
+    estHours: t.estHours || 0,
+    location: t.location || '',
+    deadline: t.deadline || '',
+    tags: t.tags || [],
+    created: new Date().toISOString(),
+    completed: t.completed || null
+  }));
+  saveTasks(seeded);
+  return seeded;
+}
+
+function saveTasks(tasks) {
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks)); }
+  catch (e) { console.warn('Save error', e); }
+}
+
+let state = {
+  tasks: loadTasks(),
+  filters: { status: 'open', category: 'all', priority: 'all', search: '' },
+  sort: { field: 'priority', dir: 'asc' },
+  editingId: null,
+};
+
+let charts = {};
+
+// ---------- Rendering ----------
+function formatDeadline(dateStr) {
+  if (!dateStr) return { text: '—', cls: '' };
+  const d = new Date(dateStr);
+  const today = new Date(); today.setHours(0,0,0,0);
+  const diff = Math.round((d - today) / 86400000);
+  let text, cls = '';
+  if (diff < 0) { text = `${Math.abs(diff)}d forfalt`; cls = 'overdue'; }
+  else if (diff === 0) { text = 'I dag'; cls = 'soon'; }
+  else if (diff === 1) { text = 'I morgen'; cls = 'soon'; }
+  else if (diff <= 3) { text = `${diff}d igjen`; cls = 'soon'; }
+  else { text = dateStr; }
+  return { text, cls };
+}
+
+function applyFilters(tasks) {
+  const f = state.filters;
+  return tasks.filter(t => {
+    if (f.status === 'open') { if (t.status === 'done') return false; }
+    else if (f.status !== 'all' && t.status !== f.status) return false;
+    if (f.category !== 'all' && t.category !== f.category) return false;
+    if (f.priority !== 'all' && t.priority !== f.priority) return false;
+    if (f.search) {
+      const q = f.search.toLowerCase();
+      const hay = [t.title, t.desc, t.location, (t.tags||[]).join(' ')].join(' ').toLowerCase();
+      if (!hay.includes(q)) return false;
+    }
+    return true;
+  });
+}
+
+function sortTasks(tasks) {
+  const { field, dir } = state.sort;
+  const sign = dir === 'asc' ? 1 : -1;
+  return [...tasks].sort((a, b) => {
+    let av = a[field], bv = b[field];
+    if (field === 'priority') { av = PRIO_ORDER[av]; bv = PRIO_ORDER[bv]; }
+    if (field === 'deadline') { av = av || '9999'; bv = bv || '9999'; }
+    if (field === 'estHours') { av = av || 0; bv = bv || 0; }
+    if (av == null) av = '';
+    if (bv == null) bv = '';
+    if (av < bv) return -1 * sign;
+    if (av > bv) return 1 * sign;
+    return 0;
+  });
+}
+
+function render() {
+  renderKPIs();
+  renderCharts();
+  renderTable();
+}
+
+function renderKPIs() {
+  const open = state.tasks.filter(t => t.status !== 'done');
+  const total = state.tasks.length;
+  const p1 = open.filter(t => t.priority === 'P1').length;
+  const hours = open.reduce((sum, t) => sum + (t.estHours || 0), 0);
+  const today = new Date().toISOString().slice(0,10);
+  const overdue = open.filter(t => t.deadline && t.deadline < today).length;
+  const weekAgo = daysFromNow(-7);
+  const done7 = state.tasks.filter(t => t.status === 'done' && t.completed && t.completed >= weekAgo).length;
+
+  document.getElementById('kpi-open').textContent = open.length;
+  document.getElementById('kpi-open-sub').textContent = `av ${total} totalt`;
+  document.getElementById('kpi-p1').textContent = p1;
+  document.getElementById('kpi-hours').textContent = hours.toFixed(1).replace(/\.0$/,'') + 't';
+  document.getElementById('kpi-hours-sub').textContent = hours > 8 ? `≈ ${(hours/8).toFixed(1)} arbeidsdager` : 'arbeidstimer';
+  document.getElementById('kpi-overdue').textContent = overdue;
+  document.getElementById('kpi-done').textContent = done7;
+}
+
+function renderCharts() {
+  const open = state.tasks.filter(t => t.status !== 'done');
+
+  // By category
+  const byCat = {};
+  CATEGORIES.forEach(c => { byCat[c.id] = 0; });
+  open.forEach(t => { byCat[t.category] = (byCat[t.category] || 0) + 1; });
+  const catEntries = Object.entries(byCat).filter(([,v]) => v > 0)
+    .sort((a,b) => b[1] - a[1]);
+  document.getElementById('cat-total').textContent = `${open.length} åpne`;
+
+  // By priority
+  const byPrio = { P1:0, P2:0, P3:0, P4:0 };
+  open.forEach(t => { byPrio[t.priority]++; });
+
+  // Trend (last 14 days)
+  const days = [];
+  for (let i = 13; i >= 0; i--) days.push(daysFromNow(-i));
+  const completedByDay = days.map(d => state.tasks.filter(t => t.status === 'done' && t.completed === d).length);
+
+  // Destroy existing
+  Object.values(charts).forEach(c => c && c.destroy());
+
+  const commonFont = { family: "-apple-system, 'Segoe UI', sans-serif", size: 11 };
+
+  charts.cat = new Chart(document.getElementById('catChart'), {
+    type: 'bar',
+    data: {
+      labels: catEntries.map(([k]) => CATEGORIES.find(c => c.id === k).name),
+      datasets: [{
+        data: catEntries.map(([,v]) => v),
+        backgroundColor: catEntries.map(([k]) => CAT_COLORS[k] + 'CC'),
+        borderColor: catEntries.map(([k]) => CAT_COLORS[k]),
+        borderWidth: 1,
+        borderRadius: 4,
+      }]
+    },
+    options: {
+      indexAxis: 'y',
+      responsive: true, maintainAspectRatio: false,
+      plugins: {
+        legend: { display: false },
+        tooltip: { callbacks: { label: ctx => `${ctx.parsed.x} oppgave${ctx.parsed.x===1?'':'r'}` } }
+      },
+      scales: {
+        x: { beginAtZero: true, ticks: { color: '#8b98a9', font: commonFont, stepSize: 1 }, grid: { color: '#2a3340' } },
+        y: { ticks: { color: '#e6edf3', font: commonFont }, grid: { display: false } }
+      }
+    }
+  });
+
+  charts.prio = new Chart(document.getElementById('prioChart'), {
+    type: 'doughnut',
+    data: {
+      labels: ['P1 Kritisk','P2 Høy','P3 Middels','P4 Lav'],
+      datasets: [{
+        data: [byPrio.P1, byPrio.P2, byPrio.P3, byPrio.P4],
+        backgroundColor: ['#ff5370CC','#ff9f43CC','#ffd93dCC','#7fb8ffCC'],
+        borderColor: '#1a212b',
+        borderWidth: 2,
+      }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      cutout: '60%',
+      plugins: {
+        legend: { position: 'right', labels: { color: '#e6edf3', font: commonFont, usePointStyle: true, padding: 12 } },
+        tooltip: {
+          callbacks: {
+            label: ctx => {
+              const total = ctx.dataset.data.reduce((a,b)=>a+b,0);
+              const pct = total ? ((ctx.parsed/total)*100).toFixed(0) : 0;
+              return `${ctx.label}: ${ctx.parsed} (${pct}%)`;
+            }
+          }
+        }
+      }
+    }
+  });
+
+  charts.trend = new Chart(document.getElementById('trendChart'), {
+    type: 'bar',
+    data: {
+      labels: days.map(d => d.slice(5)),
+      datasets: [{
+        label: 'Ferdige',
+        data: completedByDay,
+        backgroundColor: '#4ade80CC',
+        borderColor: '#4ade80',
+        borderWidth: 1,
+        borderRadius: 3,
+      }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      plugins: {
+        legend: { display: false },
+        tooltip: { callbacks: { label: ctx => `${ctx.parsed.y} ferdig` } }
+      },
+      scales: {
+        x: { ticks: { color: '#8b98a9', font: { ...commonFont, size: 10 }, maxRotation: 0, autoSkip: true, autoSkipPadding: 10 }, grid: { display: false } },
+        y: { beginAtZero: true, ticks: { color: '#8b98a9', font: commonFont, stepSize: 1 }, grid: { color: '#2a3340' } }
+      }
+    }
+  });
+}
+
+function renderTable() {
+  const filtered = sortTasks(applyFilters(state.tasks));
+  const tbody = document.getElementById('tbl-body');
+  const empty = document.getElementById('empty');
+  document.getElementById('tbl-count').textContent = filtered.length;
+
+  if (filtered.length === 0) {
+    tbody.innerHTML = '';
+    empty.style.display = 'block';
+    return;
+  }
+  empty.style.display = 'none';
+
+  tbody.innerHTML = filtered.map(t => {
+    const cat = CATEGORIES.find(c => c.id === t.category);
+    const dl = formatDeadline(t.deadline);
+    const tags = (t.tags||[]).map(tag => `<span style="font-family:var(--mono);font-size:11px;color:var(--text-faint)">#${tag}</span>`).join(' ');
+    return `
+      <tr class="status-${t.status}" data-id="${t.id}">
+        <td><span class="badge prio-${t.priority}">${t.priority}</span></td>
+        <td>
+          <div class="task-title" onclick="openEdit('${t.id}')">${escapeHtml(t.title)}</div>
+          ${t.desc ? `<div class="task-desc">${escapeHtml(t.desc).slice(0,160)}${t.desc.length>160?'…':''}</div>` : ''}
+          ${tags ? `<div style="margin-top:4px">${tags}</div>` : ''}
+        </td>
+        <td><span class="cat-badge" style="color:${CAT_COLORS[t.category]};border-color:${CAT_COLORS[t.category]}40;background:${CAT_COLORS[t.category]}15" title="${cat?cat.desc:''}">${cat?cat.name:t.category}</span></td>
+        <td><span class="status-badge status-${t.status}">${STATUS_LABELS[t.status]}</span></td>
+        <td style="font-family:var(--mono);font-size:12px;color:var(--text-dim)">${escapeHtml(t.location||'—')}</td>
+        <td style="text-align:right;font-family:var(--mono)">${t.estHours||'—'}</td>
+        <td class="time-cell ${dl.cls}">${dl.text}</td>
+        <td>
+          <div class="row-actions">
+            ${t.status !== 'done'
+              ? `<button class="icon-btn do" onclick="markDone('${t.id}')" title="Marker ferdig">✓</button>`
+              : `<button class="icon-btn" onclick="unmarkDone('${t.id}')" title="Gjenåpne">↺</button>`}
+            <button class="icon-btn" onclick="openEdit('${t.id}')" title="Rediger">✎</button>
+            <button class="icon-btn del" onclick="deleteTask('${t.id}')" title="Slett">🗑</button>
+          </div>
+        </td>
+      </tr>`;
+  }).join('');
+}
+
+function escapeHtml(s) {
+  return String(s||'').replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[m]);
+}
+
+// ---------- Actions ----------
+window.markDone = function(id) {
+  const t = state.tasks.find(x => x.id === id);
+  if (!t) return;
+  t.status = 'done';
+  t.completed = new Date().toISOString().slice(0,10);
+  saveTasks(state.tasks);
+  render();
+};
+
+window.unmarkDone = function(id) {
+  const t = state.tasks.find(x => x.id === id);
+  if (!t) return;
+  t.status = 'todo';
+  t.completed = null;
+  saveTasks(state.tasks);
+  render();
+};
+
+window.deleteTask = function(id) {
+  const t = state.tasks.find(x => x.id === id);
+  if (!t) return;
+  if (!confirm(`Slette oppgaven "${t.title}"?`)) return;
+  state.tasks = state.tasks.filter(x => x.id !== id);
+  saveTasks(state.tasks);
+  render();
+};
+
+window.openEdit = function(id) {
+  const t = state.tasks.find(x => x.id === id);
+  if (!t) return;
+  state.editingId = id;
+  document.getElementById('modal-title').textContent = 'Rediger oppgave';
+  document.getElementById('f-title').value = t.title;
+  document.getElementById('f-desc').value = t.desc || '';
+  document.getElementById('f-cat').value = t.category;
+  document.getElementById('f-prio').value = t.priority;
+  document.getElementById('f-stat').value = t.status;
+  document.getElementById('f-est').value = t.estHours || '';
+  document.getElementById('f-loc').value = t.location || '';
+  document.getElementById('f-dl').value = t.deadline || '';
+  document.getElementById('f-tags').value = (t.tags||[]).join(', ');
+  document.getElementById('modal-delete').style.display = 'inline-flex';
+  document.getElementById('modal').classList.add('open');
+};
+
+function openNew() {
+  state.editingId = null;
+  document.getElementById('modal-title').textContent = 'Ny oppgave';
+  document.getElementById('f-title').value = '';
+  document.getElementById('f-desc').value = '';
+  document.getElementById('f-cat').value = CATEGORIES[0].id;
+  document.getElementById('f-prio').value = 'P2';
+  document.getElementById('f-stat').value = 'todo';
+  document.getElementById('f-est').value = '';
+  document.getElementById('f-loc').value = '';
+  document.getElementById('f-dl').value = '';
+  document.getElementById('f-tags').value = '';
+  document.getElementById('modal-delete').style.display = 'none';
+  document.getElementById('modal').classList.add('open');
+  setTimeout(() => document.getElementById('f-title').focus(), 50);
+}
+
+function closeModal() {
+  document.getElementById('modal').classList.remove('open');
+  state.editingId = null;
+}
+
+function saveForm() {
+  const title = document.getElementById('f-title').value.trim();
+  if (!title) { alert('Tittel er påkrevd'); return; }
+  const data = {
+    title,
+    desc: document.getElementById('f-desc').value.trim(),
+    category: document.getElementById('f-cat').value,
+    priority: document.getElementById('f-prio').value,
+    status: document.getElementById('f-stat').value,
+    estHours: parseFloat(document.getElementById('f-est').value) || 0,
+    location: document.getElementById('f-loc').value.trim(),
+    deadline: document.getElementById('f-dl').value,
+    tags: document.getElementById('f-tags').value.split(',').map(s=>s.trim()).filter(Boolean),
+  };
+
+  if (state.editingId) {
+    const t = state.tasks.find(x => x.id === state.editingId);
+    const wasDone = t.status === 'done';
+    Object.assign(t, data);
+    if (data.status === 'done' && !wasDone) t.completed = new Date().toISOString().slice(0,10);
+    if (data.status !== 'done') t.completed = null;
+  } else {
+    state.tasks.push({
+      id: uid(), ...data,
+      created: new Date().toISOString(),
+      completed: data.status === 'done' ? new Date().toISOString().slice(0,10) : null
+    });
+  }
+  saveTasks(state.tasks);
+  closeModal();
+  render();
+}
+
+function deleteFromModal() {
+  if (!state.editingId) return;
+  const t = state.tasks.find(x => x.id === state.editingId);
+  if (!t) return;
+  if (!confirm(`Slette oppgaven "${t.title}"?`)) return;
+  state.tasks = state.tasks.filter(x => x.id !== state.editingId);
+  saveTasks(state.tasks);
+  closeModal();
+  render();
+}
+
+// ---------- Filters ----------
+function bindFilters() {
+  document.getElementById('f-status').addEventListener('change', e => { state.filters.status = e.target.value; render(); });
+  document.getElementById('f-category').addEventListener('change', e => { state.filters.category = e.target.value; render(); });
+  document.getElementById('f-priority').addEventListener('change', e => { state.filters.priority = e.target.value; render(); });
+  document.getElementById('f-search').addEventListener('input', e => { state.filters.search = e.target.value; render(); });
+  document.getElementById('clearFilters').addEventListener('click', () => {
+    state.filters = { status: 'open', category: 'all', priority: 'all', search: '' };
+    document.getElementById('f-status').value = 'open';
+    document.getElementById('f-category').value = 'all';
+    document.getElementById('f-priority').value = 'all';
+    document.getElementById('f-search').value = '';
+    render();
+  });
+}
+
+function populateCategorySelects() {
+  const filterSel = document.getElementById('f-category');
+  const formSel = document.getElementById('f-cat');
+  CATEGORIES.forEach(c => {
+    filterSel.insertAdjacentHTML('beforeend', `<option value="${c.id}">${c.name}</option>`);
+    formSel.insertAdjacentHTML('beforeend', `<option value="${c.id}">${c.name}</option>`);
+  });
+}
+
+function bindSort() {
+  document.querySelectorAll('thead th[data-sort]').forEach(th => {
+    th.addEventListener('click', () => {
+      const field = th.dataset.sort;
+      if (state.sort.field === field) {
+        state.sort.dir = state.sort.dir === 'asc' ? 'desc' : 'asc';
+      } else {
+        state.sort.field = field;
+        state.sort.dir = field === 'priority' || field === 'deadline' ? 'asc' : 'desc';
+      }
+      render();
+    });
+  });
+}
+
+// ---------- Import / Export ----------
+function exportJSON() {
+  const data = JSON.stringify(state.tasks, null, 2);
+  const blob = new Blob([data], { type: 'application/json' });
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  a.download = `netops-todo-${new Date().toISOString().slice(0,10)}.json`;
+  a.click();
+  URL.revokeObjectURL(a.href);
+}
+
+function importJSON(file) {
+  const reader = new FileReader();
+  reader.onload = e => {
+    try {
+      const data = JSON.parse(e.target.result);
+      if (!Array.isArray(data)) throw new Error('Forventet array');
+      if (!confirm(`Importere ${data.length} oppgaver? Dette erstatter eksisterende data.`)) return;
+      state.tasks = data;
+      saveTasks(state.tasks);
+      render();
+    } catch (err) { alert('Kunne ikke lese JSON: ' + err.message); }
+  };
+  reader.readAsText(file);
+}
+
+// ---------- Clock ----------
+function updateClock() {
+  const now = new Date();
+  const s = now.toLocaleString('nb-NO', { weekday:'short', day:'2-digit', month:'short', hour:'2-digit', minute:'2-digit' });
+  document.getElementById('clock').textContent = `$ date → ${s}`;
+}
+
+// ---------- Init ----------
+function init() {
+  populateCategorySelects();
+  bindFilters();
+  bindSort();
+
+  document.getElementById('newTaskBtn').addEventListener('click', openNew);
+  document.getElementById('modal-close').addEventListener('click', closeModal);
+  document.getElementById('modal-cancel').addEventListener('click', closeModal);
+  document.getElementById('modal-save').addEventListener('click', saveForm);
+  document.getElementById('modal-delete').addEventListener('click', deleteFromModal);
+  document.getElementById('modal').addEventListener('click', e => { if (e.target.id === 'modal') closeModal(); });
+  document.addEventListener('keydown', e => {
+    if (e.key === 'Escape') closeModal();
+    if (e.key === 'n' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA' && e.target.tagName !== 'SELECT') {
+      e.preventDefault(); openNew();
+    }
+  });
+
+  document.getElementById('exportBtn').addEventListener('click', exportJSON);
+  document.getElementById('importBtn').addEventListener('click', () => document.getElementById('importFile').click());
+  document.getElementById('importFile').addEventListener('change', e => {
+    if (e.target.files[0]) importJSON(e.target.files[0]);
+    e.target.value = '';
+  });
+
+  updateClock();
+  setInterval(updateClock, 30000);
+  render();
+}
+
+init();
+</script>
+</body>
+</html>