initial booking

.dockerignore

@@ -0,0 +1,13 @@
+node_modules
+.next
+.git
+.env
+.env.local
+data
+prisma/*.db
+prisma/*.db-journal
+Dockerfile
+docker-compose.yml
+README.md
+.vscode
+.idea

.env.example

@@ -0,0 +1,22 @@
+# Database
+DATABASE_URL="file:./data/app.db"
+
+# NextAuth — generate with: openssl rand -base64 32
+AUTH_SECRET="change-me-to-a-long-random-string"
+AUTH_URL="http://localhost:3000"
+AUTH_TRUST_HOST="true"
+
+# Mailjet — https://app.mailjet.com/account/apikeys
+MAILJET_API_KEY=""
+MAILJET_API_SECRET=""
+MAIL_FROM_EMAIL="bokning@example.com"
+MAIL_FROM_NAME="Gasol247 Bokning"
+
+# Public site
+NEXT_PUBLIC_SITE_URL="http://localhost:3000"
+NEXT_PUBLIC_EVENT_NAME="Jamboree 2027"
+
+# Initial admin (used by seed script). Change before deploy.
+SEED_ADMIN_EMAIL="admin@example.com"
+SEED_ADMIN_PASSWORD="change-me"
+SEED_ADMIN_NAME="Admin"

.gitignore

@@ -0,0 +1,40 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env
+.env*.local
+!.env.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+# database
+/prisma/*.db
+/prisma/*.db-journal
+/data

BACKLOG.md

@@ -0,0 +1,57 @@
+# Backlog
+
+Prioriterade förbättringar och kända luckor. Top-down ungefär i prioritetsordning.
+
+## P0 — innan skarp lansering
+
+- [ ] **Rate-limit på `POST /api/bookings`**: enkel IP-baserad throttle (t.ex. 5 bokningar/timme/IP) för att stoppa spam/bots. Implementera i `src/app/api/bookings/route.ts` eller via en middleware-wrapper.
+- [ ] **Honeypot eller hCaptcha på formuläret**: bokningsformuläret är publikt utan skydd. Honeypot är minimalistiskt och räcker ofta.
+- [ ] **Generera riktigt `AUTH_SECRET`**: dokumenterat i README men måste göras manuellt vid deploy.
+- [ ] **Verifiera Mailjet-avsändare**: `MAIL_FROM_EMAIL` måste vara verifierad i Mailjet-kontot innan mejl kommer fram.
+- [ ] **Skarpa produktpriser och upphämtningstider**: ändra i `prisma/seed.ts` eller via Prisma Studio innan lansering.
+- [ ] **Cookie-banner / GDPR-info**: bokningen samlar PII (namn, e-post, org.nummer, adress). Kort policy-text + länk.
+- [ ] **Backup-rutin för SQLite-volymen**: cron-jobb på värden som kör `cp` mot en separat disk eller S3.
+
+## P1 — höjer kvaliteten
+
+- [ ] **Admin-UI för produkter och upphämtningstider**: idag måste man köra seed-filen eller Prisma Studio. Lägg till `/admin/products` och `/admin/pickup-slots` med CRUD.
+- [ ] **Admin-UI för att skapa fler administratörer**: tabellen `Admin` stöder flera men det finns ingen invite-flow. Antingen self-serve invite via mejl-länk eller manuell skapa-form i admin-panelen.
+- [ ] **Kund-avbokning via token-länk**: lägg till `cancelToken` på `Booking`, inkludera unik avbokningslänk i bekräftelsemejlet. Trigger på `GET /booking/cancel/{token}` med bekräftelsesida.
+- [ ] **Lagerbegränsning per produkt**: idag finns kapacitet bara på upphämtnings-slots. Lägg `totalStock` på `Product` och kontrollera i POST-routen att `Σ confirmed quantity ≤ stock`.
+- [ ] **Mailjet Templates (Template-ID) istället för inline HTML**: gör det möjligt att ändra mejldesign utan redeploy. Inline HTML kvar som fallback om template-id saknas.
+- [ ] **Resend-bekräftelse loggar**: idag skickar admin-knappen "Resend confirmation" tyst — visa toast/success vid lyckad sändning.
+- [ ] **Bookings-vy: paginering**: nuvarande tar `take: 200`. Lägg cursor-paginering vid skarp volym.
+- [ ] **PDF-faktureringsunderlag per bokning**: utöver CSV — en PDF som matchar fakturamall, lättare att bifoga.
+- [ ] **Audit log för admin-actions**: tabell `AuditEvent` med vem som ändrade status, körde resend, etc.
+- [ ] **Healthcheck-endpoint**: `GET /api/health` returnerar 200 + `{db: 'ok'}` för proxy/uptime-monitor.
+
+## P2 — bra att ha
+
+- [ ] **Prisma migrate istället för db push**: när schemat är stabilt, kör `prisma migrate dev` initialt och commita migrations-mappen. Byt entrypoint till `migrate deploy`.
+- [ ] **Multi-event-stöd**: idag är allt knutet till ett event via `NEXT_PUBLIC_EVENT_NAME`. Lägg till `Event`-tabell med egen produkt- och slot-koppling om systemet ska användas till fler läger.
+- [ ] **E-mail verification innan bokning**: skicka kod eller bekräfta via dubbelt opt-in. Idag litar vi på att kunden anger korrekt mejl.
+- [ ] **Slot-omval via avbokningslänk**: kunden kan byta upphämtningstid utan att kontakta admin.
+- [ ] **Skicka påminnelse-mejl** dagen innan upphämtning (cron + Mailjet).
+- [ ] **Status-mejl vid statusbyte**: kunden får mejl när bokningen markeras `INVOICED` eller `CANCELLED`.
+- [ ] **Inbjudnings-mejl till nya admins** (kopplat till P1 admin-UI för admins).
+- [ ] **Tester**: minst en smoke-test för `POST /api/bookings` (Playwright eller Vitest + Supertest).
+- [ ] **CI**: GitHub Actions som kör `npm run build` på PR.
+- [ ] **Telemetri / felrapportering**: Sentry eller liknande.
+
+## P3 — framtida överväganden
+
+- [ ] **Postgres istället för SQLite**: när volymen växer eller om vi vill ha managed backups. Prisma byter provider med en rad + ny `DATABASE_URL`.
+- [ ] **Prisma 7-uppgradering**: ny `prisma.config.ts` med driver adapter (t.ex. `@prisma/adapter-better-sqlite3`), uppdaterad `PrismaClient`-init. Inte värt det förrän Prisma 7 är stabilare och vi har annat skäl att uppgradera.
+- [ ] **Server-side e-postvalidering**: t.ex. DNS/MX-koll eller integration mot Mailjet Address Validation.
+- [ ] **Bilder på produkterna i formuläret**: laddas från egen `/public/products/*.webp` eller via en CDN.
+- [ ] **Skip-link och bättre a11y-audit**: fokushantering i stegen, ARIA-live för felmeddelanden.
+- [ ] **Webhooks från Mailjet** (bounce/spam-rapport) — markerar bokningar med ogiltig e-post.
+
+## Beslutslogg
+
+- **2026-05-22**: Valt SQLite + Prisma 5 (inte 7) för MVP. SQLite-fil i Docker-volym räcker för ett event. Prisma 5 fungerar utan `prisma.config.ts`.
+- **2026-05-22**: `prisma db push` istället för `migrate deploy` i entrypoint — färre artefakter att hålla reda på i MVP. Byt vid stabilt schema.
+- **2026-05-22**: Priser i öre (`Int`) snarare än `Decimal` — enklare och säkrare för en valuta (SEK).
+- **2026-05-22**: Egen inline HTML-mall i `src/lib/mailjet.ts` istället för Mailjet Templates — färre externa beroenden för MVP, men ändras inte utan deploy.
+- **2026-05-22**: NextAuth Credentials + lokal Admin-tabell (inte magic link) — användaren valde detta för flera admins.
+- **2026-05-22**: next-intl med `localePrefix: "as-needed"` — `/` är svenska, `/en/*` engelska. Switch i header behåller path.

Dockerfile

@@ -0,0 +1,56 @@
+# syntax=docker/dockerfile:1.7
+
+# -------- deps --------
+FROM node:20-alpine AS deps
+RUN apk add --no-cache libc6-compat openssl
+WORKDIR /app
+COPY package.json package-lock.json* ./
+COPY prisma ./prisma
+RUN --mount=type=cache,target=/root/.npm npm ci
+
+# -------- build --------
+FROM node:20-alpine AS builder
+RUN apk add --no-cache libc6-compat openssl
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+ENV NEXT_TELEMETRY_DISABLED=1
+# Generate prisma client; skip migrate during build (no DB yet).
+RUN npx prisma generate
+RUN npm run build
+
+# -------- runner --------
+FROM node:20-alpine AS runner
+RUN apk add --no-cache libc6-compat openssl
+WORKDIR /app
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV PORT=3000
+
+RUN addgroup --system --gid 1001 nodejs \
+ && adduser --system --uid 1001 nextjs \
+ && mkdir -p /app/data \
+ && chown -R nextjs:nodejs /app
+
+# Standalone output bundles only what's needed.
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+
+# Prisma needs the schema + engines + CLI for migrate deploy at startup.
+COPY --from=builder --chown=nextjs:nodejs /app/prisma ./prisma
+COPY --from=builder --chown=nextjs:nodejs /app/node_modules/@prisma ./node_modules/@prisma
+COPY --from=builder --chown=nextjs:nodejs /app/node_modules/prisma ./node_modules/prisma
+COPY --from=builder --chown=nextjs:nodejs /app/node_modules/.bin/prisma ./node_modules/.bin/prisma
+COPY --from=builder --chown=nextjs:nodejs /app/node_modules/.prisma ./node_modules/.prisma
+COPY --from=builder --chown=nextjs:nodejs /app/node_modules/bcryptjs ./node_modules/bcryptjs
+COPY --from=builder --chown=nextjs:nodejs /app/node_modules/tsx ./node_modules/tsx
+
+COPY docker/entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+USER nextjs
+EXPOSE 3000
+VOLUME ["/app/data"]
+ENTRYPOINT ["/entrypoint.sh"]
+CMD ["node", "server.js"]

README.md

@@ -0,0 +1,200 @@
+# boka.gasol247
+
+Beställningsplattform för gasoltuber till ett enskilt scoutläger (Jamboree).
+Riktar sig till organisationer (scoutkårer, föreningar) som beställer för leverans/upphämtning
+på plats. Bokningen genererar ett faktureringsunderlag som administratören exporterar
+till CSV — själva faktureringen sker utanför systemet.
+
+Tekniskt frikopplad från [gasol247.com](https://www.gasol247.com/) men ärver dess
+färgspråk. Tänkt att deployas på egen subdomän.
+
+## Funktioner i MVP
+
+- **Publikt bokningsformulär** med fyra steg: produkter → uppgifter → upphämtning → granska
+- **Språkstöd**: svenska (default) och engelska, växlas i header
+- **Organisationsbeställning** med Luhn-validering av svenskt organisationsnummer
+- **Upphämtningstider** (slots) — kunden väljer tid, kapacitet per slot
+- **Bekräftelse-mejl** via Mailjet med responsiv HTML-template (mobil + desktop)
+- **Admin-panel** bakom lösen: lista bokningar, filter, status, detaljvy, ändra status
+- **CSV-export** av faktureringsunderlag (Excel-vänlig, semikolon + UTF-8 BOM)
+- **Prissnapshot**: priser & namn fryses i bokningen när den skapas
+- **Bokningsnummer** i formatet `JAM-YY-XXXX` (läsbart över telefon)
+
+## Teknisk stack
+
+| Lager | Val | Varför |
+|---|---|---|
+| Frontend + Backend | Next.js 15 (App Router) | En process, enkel deploy |
+| Språk | TypeScript | Typsäkerhet över hela kodbasen |
+| Styling | Tailwind CSS | Snabb iteration, små bundles |
+| Databas | SQLite via Prisma 5 | En fil, ingen separat container för MVP |
+| Auth | Auth.js v5 (NextAuth) Credentials + bcrypt | Lokal admin-tabell, ingen extern beroende |
+| i18n | next-intl | Server- + client-translations, prefix-routing |
+| Mejl | Mailjet (`node-mailjet`) | Bra leverans, designat HTML-mejl |
+| Deploy | Docker (Next standalone) | Körs bakom egen reverse proxy |
+
+## Snabbstart – utveckling
+
+```bash
+cp .env.example .env
+# Generera AUTH_SECRET:
+#   openssl rand -base64 32
+
+npm install
+npx prisma db push       # skapa SQLite-schemat
+npm run db:seed          # admin + produkter + upphämtningstider
+npm run dev              # http://localhost:3000
+```
+
+Default-admin (från `.env`): `admin@example.com` / `change-me` — ändra direkt i `.env` innan deploy.
+
+### Användbara kommandon
+
+```bash
+npm run dev              # dev-server med hot reload
+npm run build            # produktionsbygge
+npm run start            # produktionsserver (kräver byggd app)
+npm run db:studio        # Prisma Studio — visuell DB-editor
+npm run db:seed          # idempotent seed (kör om för uppdaterade priser)
+npx prisma db push       # synka schemat till SQLite efter ändring i prisma/schema.prisma
+```
+
+### Projektstruktur
+
+```
+boka.gasol247/
+├── prisma/
+│   ├── schema.prisma             Admin, Product, PickupSlot, Booking, BookingItem
+│   └── seed.ts                   Första admin + P6/P11/P19 + exempel-slots
+├── src/
+│   ├── app/
+│   │   ├── [locale]/             sv default, /en/* för engelska
+│   │   │   ├── page.tsx          Publikt bokningsformulär
+│   │   │   ├── booking/[number]/ Bekräftelsesida
+│   │   │   └── admin/            Login + dashboard + detaljvy
+│   │   └── api/
+│   │       ├── bookings/         POST: skapa bokning + skicka mejl
+│   │       ├── admin/export/     GET: CSV-faktureringsunderlag
+│   │       └── auth/[...nextauth]/
+│   ├── components/               BookingForm, Header, LanguageSwitcher, StatusBadge
+│   ├── lib/                      prisma, money, mailjet, bookingNumber, orgNumber, validation
+│   ├── i18n/                     next-intl routing + request config
+│   ├── auth.ts                   Auth.js v5 setup
+│   └── middleware.ts             Locale-routing
+├── messages/{sv,en}.json         Översättningar (UI + e-post)
+├── docker/entrypoint.sh          Kör prisma db push + ev. seed vid start
+├── Dockerfile                    Multi-stage, Next standalone, non-root
+├── docker-compose.yml            Volym för SQLite
+└── .env.example
+```
+
+## Datamodell – snabb översikt
+
+- **Admin** — `email`, `passwordHash` (bcrypt), `name`. Krediter för login.
+- **Product** — `sku`, lokaliserade namn/beskrivningar, `priceOre` (öre, inte SEK), `vatBp` (basis-punkter), `active`, `sortOrder`.
+- **PickupSlot** — `labelSv`/`labelEn`, `startsAt`/`endsAt`, `capacity`, `active`.
+- **Booking** — bokningsnr, status, kontaktuppgifter, organisationsuppgifter, fakturaadress, snapshot av subtotal/vat/total, locale, valfri `pickupSlotId`.
+- **BookingItem** — snapshot av `sku`/`nameSv`/`nameEn`/`unitPriceOre`/`vatBp`/`quantity`/`lineTotalOre`. Frysta vid bokningstillfället så priser kan ändras i `Product` utan att gamla bokningar påverkas.
+
+### Bokningsstatus
+`PENDING` → `CONFIRMED` → `DELIVERED` → `INVOICED` (eller `CANCELLED` när som helst). Lagras som sträng eftersom SQLite inte stöder enums.
+
+### Priser i öre
+All prismatte sker i heltal (öre). Konvertering till SEK vid presentation eller export via [`src/lib/money.ts`](src/lib/money.ts). Undviker float-drift.
+
+## Produktion – deploy med Docker
+
+```bash
+# 1. Skapa .env för produktion (på servern)
+cp .env.example .env
+# - Sätt AUTH_SECRET (openssl rand -base64 32)
+# - Sätt MAILJET_API_KEY / SECRET / MAIL_FROM_EMAIL
+# - Sätt AUTH_URL och NEXT_PUBLIC_SITE_URL till din domän (https://...)
+# - Sätt SEED_ADMIN_EMAIL / PASSWORD för första admin
+
+# 2. Bygg och starta
+docker compose build
+RUN_SEED=true docker compose up -d    # första gången
+# Vid omstarter: docker compose up -d  (RUN_SEED är false som default)
+
+# 3. Logga in
+# https://din-domän/admin/login
+```
+
+### Bakom reverse proxy
+
+`docker-compose.yml` exponerar port 3000 endast på `127.0.0.1` som standard. Om du
+kör Caddy/Traefik/nginx som separat stack:
+
+1. Ta bort `ports:` i `docker-compose.yml`
+2. Anslut containern till proxyns Docker-nätverk med `networks:` i compose-filen
+3. Pekande proxy → `boka-gasol247:3000`
+
+Sätt `AUTH_TRUST_HOST=true` (redan satt) så Auth.js godkänner proxyns host-header.
+
+### SQLite-volym & backup
+
+Databasen ligger i Docker-volymen `app-data` (monterad som `/app/data/app.db`).
+
+```bash
+# Backup
+docker run --rm \
+  -v boka.gasol247_app-data:/data \
+  -v "$PWD":/out alpine \
+  cp /data/app.db /out/app.backup-$(date +%F).db
+
+# Restore (stoppa appen först)
+docker compose down
+docker run --rm \
+  -v boka.gasol247_app-data:/data \
+  -v "$PWD":/in alpine \
+  cp /in/app.backup-2026-05-22.db /data/app.db
+docker compose up -d
+```
+
+Kör backup minst dagligen vid skarp användning.
+
+## Konfiguration – miljövariabler
+
+| Variabel | Krav | Beskrivning |
+|---|---|---|
+| `DATABASE_URL` | ✅ | T.ex. `file:./data/app.db` lokalt, `file:/app/data/app.db` i Docker |
+| `AUTH_SECRET` | ✅ | `openssl rand -base64 32` |
+| `AUTH_URL` | ✅ | T.ex. `https://boka.gasol247.com` i produktion |
+| `AUTH_TRUST_HOST` | ✅ | `true` bakom proxy |
+| `MAILJET_API_KEY` | ⚠️ | Krävs för att skicka mejl. Utan: bokning skapas, mejl skippas |
+| `MAILJET_API_SECRET` | ⚠️ | Som ovan |
+| `MAIL_FROM_EMAIL` | ⚠️ | Verifierad avsändaradress i Mailjet |
+| `MAIL_FROM_NAME` | – | Visningsnamn |
+| `NEXT_PUBLIC_SITE_URL` | – | För absoluta länkar i framtida e-post |
+| `NEXT_PUBLIC_EVENT_NAME` | – | Visas i header och e-postmall |
+| `SEED_ADMIN_EMAIL/PASSWORD/NAME` | – | Bara för `npm run db:seed` / `RUN_SEED=true` |
+
+## Aktuell status och kända begränsningar
+
+> **Verifierat 2026-05-22:** `next build` grönt, `prisma db push` skapar schemat, seed körs, `GET /sv|/en|/admin/login` 200, `POST /api/bookings` validerar och skapar bokning.
+
+- **Inga migrationer** — vi kör `prisma db push` istället för `prisma migrate dev`. Bra för MVP, men byt till `migrate dev` när schemat är stabilt så historiken finns versionerad.
+- **Mailjet-mall är inline HTML** i [src/lib/mailjet.ts](src/lib/mailjet.ts). Funkar och är responsiv, men för att kunna ändra design utan deploy bör vi flytta till Mailjet Template-ID.
+- **Ingen lagerbegränsning** — boka.gasol247 förhindrar inte överbokning av en produkt. Kapacitet hanteras bara per upphämtnings-slot.
+- **Ingen kund-avbokning** — admin kan markera `CANCELLED` men kunden själv har ingen länk i mejlet.
+- **Admin-tabellen finns** men det finns inget UI för att skapa nya admins. Lägg till manuellt via Prisma Studio eller kör seed med andra `SEED_ADMIN_*`-variabler.
+- **Produkter & slots redigeras genom seed-filen** — inget admin-UI för det än.
+- **Ingen rate-limit eller CAPTCHA** på publika `POST /api/bookings`. Lägg till om eventet annonseras brett.
+- **Prisma VS Code-tillägget visar Prisma 7-varningar** för `datasource.url` — kosmetiskt; projektet kör Prisma 5.22 där det fortfarande är obligatoriskt.
+
+Backlog och prioriterade förbättringar finns i [BACKLOG.md](./BACKLOG.md).
+
+## Felsökning
+
+**"Cannot find module './globals.css'"** — Cleared via `src/types/css.d.ts`. Om felet kommer tillbaka, kontrollera att filen finns kvar.
+
+**Mejl skickas inte** — Kolla logs: `docker compose logs app | grep mailjet`. Vanliga orsaker: avsändaradress inte verifierad i Mailjet, fel API-key, eller `MAILJET_API_KEY` saknas (då skippas sändningen tyst och loggas).
+
+**Bokning skapas inte** — Kolla validation: `POST /api/bookings` returnerar `{error: "validation", issues: {...}}` med fältnivå-detaljer. Org.nummer måste passera Luhn-check.
+
+**Admin kan inte logga in** — Kör `npm run db:seed` igen, eller skapa admin manuellt via Prisma Studio. Lösenord bcrypt-hashas i seed-scriptet.
+
+## Licens
+
+Privat — för intern användning på Jamboree-eventet.

docker-compose.yml

@@ -0,0 +1,32 @@
+services:
+  app:
+    build: .
+    image: boka-gasol247:latest
+    container_name: boka-gasol247
+    restart: unless-stopped
+    environment:
+      NODE_ENV: production
+      DATABASE_URL: "file:/app/data/app.db"
+      AUTH_SECRET: ${AUTH_SECRET}
+      AUTH_URL: ${AUTH_URL}
+      AUTH_TRUST_HOST: "true"
+      MAILJET_API_KEY: ${MAILJET_API_KEY}
+      MAILJET_API_SECRET: ${MAILJET_API_SECRET}
+      MAIL_FROM_EMAIL: ${MAIL_FROM_EMAIL}
+      MAIL_FROM_NAME: ${MAIL_FROM_NAME}
+      NEXT_PUBLIC_SITE_URL: ${NEXT_PUBLIC_SITE_URL}
+      NEXT_PUBLIC_EVENT_NAME: ${NEXT_PUBLIC_EVENT_NAME}
+      RUN_SEED: ${RUN_SEED:-false}
+      SEED_ADMIN_EMAIL: ${SEED_ADMIN_EMAIL}
+      SEED_ADMIN_PASSWORD: ${SEED_ADMIN_PASSWORD}
+      SEED_ADMIN_NAME: ${SEED_ADMIN_NAME}
+    volumes:
+      - app-data:/app/data
+    # Expose only to a reverse proxy on the same docker network.
+    # If you run a Caddy/nginx/Traefik proxy as a separate stack,
+    # attach this container to that proxy's network and remove the ports below.
+    ports:
+      - "127.0.0.1:3000:3000"
+
+volumes:
+  app-data:

docker/entrypoint.sh

@@ -0,0 +1,16 @@
+#!/bin/sh
+set -e
+
+# Sync schema to the mounted SQLite volume. `db push` is fine for a single-tenant
+# MVP where we don't need an audit trail of migrations. Switch to `migrate deploy`
+# once the schema stabilizes and we want versioned migrations.
+echo "→ Running prisma db push"
+npx prisma db push --skip-generate --accept-data-loss=false
+
+# Optionally seed when explicitly requested. Idempotent (upsert).
+if [ "${RUN_SEED:-false}" = "true" ]; then
+  echo "→ Running seed"
+  node --import tsx ./prisma/seed.ts || true
+fi
+
+exec "$@"

messages/en.json

@@ -0,0 +1,290 @@
+{
+  "common": {
+    "siteName": "Gasol247 Booking",
+    "eventName": "Jamboree 2027",
+    "languageSwedish": "Svenska",
+    "languageEnglish": "English",
+    "back": "Back",
+    "save": "Save",
+    "cancel": "Cancel",
+    "loading": "Loading…",
+    "submit": "Submit",
+    "currency": "SEK",
+    "vat": "VAT",
+    "ofWhichVat": "of which VAT",
+    "inclVat": "incl. VAT",
+    "exclVat": "excl. VAT",
+    "total": "Total",
+    "subtotal": "Subtotal",
+    "quantity": "Qty",
+    "price": "Price",
+    "search": "Search"
+  },
+  "header": {
+    "tagline": "Book LPG cylinders for the Jamboree camp",
+    "switchLanguage": "Switch language"
+  },
+  "booking": {
+    "title": "LPG cylinder order",
+    "intro": "Reserve LPG cylinders for your contingent at the camp. A confirmation will be sent to the email you provide.",
+    "stepProducts": "Choose products",
+    "stepDetails": "Your details",
+    "stepPickup": "Pickup",
+    "stepReview": "Review",
+    "stepProductsShort": "Products",
+    "stepDetailsShort": "Details",
+    "stepPickupShort": "Pickup",
+    "stepReviewShort": "Review",
+    "stepOf": "Step {current} of {total}",
+    "products": {
+      "title": "Choose products",
+      "subtitle": "Adjust the quantity for each cylinder size below.",
+      "addToCart": "Add",
+      "remove": "Remove",
+      "perUnit": "/unit",
+      "noneSelected": "Select at least one product to continue."
+    },
+    "details": {
+      "title": "Your details",
+      "organization": "Organization",
+      "orgName": "Organization name",
+      "orgNamePlaceholder": "Scout group, association, company …",
+      "orgNumber": "Organization number",
+      "orgNumberPlaceholder": "XXXXXX-XXXX",
+      "contact": "Contact person",
+      "contactName": "Name",
+      "contactNamePlaceholder": "First and last name",
+      "email": "Email",
+      "emailPlaceholder": "example@group.org",
+      "phone": "Phone",
+      "phonePlaceholder": "+46 …",
+      "invoiceAddress": "Invoice address",
+      "address": "Street address",
+      "postalCode": "Postal code",
+      "city": "City",
+      "country": "Country"
+    },
+    "pickup": {
+      "title": "Choose a pickup time",
+      "subtitle": "Pick a time when you can collect the cylinders at the camp site.",
+      "noSlots": "No pickup times are configured yet.",
+      "capacity": "{count} slots left"
+    },
+    "notes": {
+      "label": "Additional notes (optional)",
+      "placeholder": "Any preferences or information we should know."
+    },
+    "review": {
+      "title": "Review your order",
+      "confirm": "I confirm that the details are correct and accept that a booking is created.",
+      "submitting": "Submitting booking…"
+    },
+    "errors": {
+      "required": "This field is required",
+      "invalidEmail": "Enter a valid email address",
+      "invalidOrgNumber": "Enter a valid organization number (XXXXXX-XXXX)",
+      "selectProduct": "Select at least one product",
+      "submitFailed": "Something went wrong. Try again or contact us."
+    },
+    "success": {
+      "title": "Thank you! Your booking has been received.",
+      "subtitle": "A confirmation has been sent to {email}.",
+      "bookingNumber": "Booking number: {number}",
+      "newOrder": "Make another booking"
+    },
+    "next": "Next",
+    "previous": "Previous"
+  },
+  "admin": {
+    "title": "Administration",
+    "login": {
+      "title": "Sign in",
+      "email": "Email",
+      "password": "Password",
+      "submit": "Sign in",
+      "error": "Invalid email or password."
+    },
+    "nav": {
+      "bookings": "Bookings",
+      "products": "Products",
+      "pickupSlots": "Pickup slots",
+      "settings": "Settings",
+      "users": "Users",
+      "admins": "Admins",
+      "signOut": "Sign out"
+    },
+    "users": {
+      "title": "Administrators",
+      "empty": "No administrators.",
+      "new": "New administrator",
+      "edit": "Edit",
+      "create": "Create",
+      "save": "Save",
+      "delete": "Delete",
+      "deleteConfirm": "Are you sure you want to delete this administrator?",
+      "cannotDeleteSelf": "You can't delete your own account.",
+      "cannotDeleteLast": "There must be at least one administrator.",
+      "emailInUse": "Email is already used by another administrator.",
+      "passwordMismatch": "Passwords don't match.",
+      "passwordTooShort": "Password must be at least 8 characters.",
+      "passwordChanged": "Password updated.",
+      "you": "(you)",
+      "columns": {
+        "name": "Name",
+        "email": "Email",
+        "created": "Created",
+        "actions": "Actions"
+      },
+      "fields": {
+        "name": "Name",
+        "email": "Email",
+        "password": "Password",
+        "passwordConfirm": "Confirm password",
+        "newPassword": "New password",
+        "newPasswordHint": "Leave empty to keep the current password",
+        "passwordHint": "Minimum 8 characters"
+      },
+      "changePassword": "Change password"
+    },
+    "settings": {
+      "title": "Settings",
+      "saved": "Settings saved.",
+      "save": "Save",
+      "pickupEnabled": "Show pickup step in the booking form",
+      "pickupEnabledHint": "When off, the entire step is removed from the form and no pickup slot is selected. Existing bookings and pickup slots are not affected."
+    },
+    "products": {
+      "title": "Products",
+      "empty": "No products yet.",
+      "new": "New product",
+      "edit": "Edit",
+      "create": "Create",
+      "save": "Save",
+      "delete": "Delete",
+      "deleteConfirm": "Are you sure you want to delete this product?",
+      "cannotDelete": "Cannot delete — used in {count} booking(s). Deactivate it instead.",
+      "activate": "Activate",
+      "deactivate": "Deactivate",
+      "active": "Active",
+      "inactive": "Inactive",
+      "columns": {
+        "sku": "SKU",
+        "name": "Name",
+        "price": "Price",
+        "vat": "VAT",
+        "active": "Active",
+        "actions": "Actions"
+      },
+      "fields": {
+        "sku": "SKU",
+        "skuHint": "Unique code, e.g. P11",
+        "nameSv": "Name (Swedish)",
+        "nameEn": "Name (English)",
+        "descriptionSv": "Description (Swedish)",
+        "descriptionEn": "Description (English)",
+        "priceSek": "Price (SEK ex VAT)",
+        "vatPct": "VAT (%)",
+        "sortOrder": "Sort order",
+        "sortOrderHint": "Lower values appear first",
+        "active": "Active (shown in booking form)"
+      }
+    },
+    "pickupSlots": {
+      "title": "Pickup slots",
+      "empty": "No pickup slots yet.",
+      "new": "New slot",
+      "edit": "Edit",
+      "create": "Create",
+      "save": "Save",
+      "delete": "Delete",
+      "deleteConfirm": "Are you sure you want to delete this slot?",
+      "cannotDelete": "Cannot delete — chosen by {count} booking(s). Deactivate it instead.",
+      "activate": "Activate",
+      "deactivate": "Deactivate",
+      "columns": {
+        "label": "Label",
+        "when": "When",
+        "capacity": "Capacity",
+        "bookings": "Bookings",
+        "active": "Active",
+        "actions": "Actions"
+      },
+      "fields": {
+        "labelSv": "Label (Swedish)",
+        "labelEn": "Label (English)",
+        "labelHint": "e.g. \"Day 1 — Morning\"",
+        "startsAt": "Starts",
+        "endsAt": "Ends",
+        "capacity": "Capacity",
+        "capacityHint": "Maximum bookings that can choose this slot",
+        "active": "Active (shown in booking form)"
+      },
+      "invalidTime": "End time must be after start time."
+    },
+    "bookings": {
+      "title": "Bookings",
+      "empty": "No bookings yet.",
+      "columns": {
+        "number": "Booking #",
+        "date": "Date",
+        "org": "Organization",
+        "contact": "Contact",
+        "total": "Amount",
+        "status": "Status",
+        "actions": "Actions"
+      },
+      "filters": {
+        "all": "All",
+        "search": "Search booking #, org or email"
+      },
+      "export": "Export CSV",
+      "view": "View",
+      "detail": {
+        "title": "Booking {number}",
+        "items": "Products",
+        "customer": "Customer",
+        "pickup": "Pickup",
+        "totals": "Totals",
+        "markInvoiced": "Mark invoiced",
+        "markDelivered": "Mark delivered",
+        "markCancelled": "Cancel booking",
+        "resendEmail": "Resend confirmation"
+      },
+      "status": {
+        "PENDING": "Pending",
+        "CONFIRMED": "Confirmed",
+        "DELIVERED_PARTIAL": "Partly handed out",
+        "DELIVERED": "Handed out",
+        "RETURNED_PARTIAL": "Partly returned",
+        "RETURNED": "Returned",
+        "INVOICED": "Invoiced",
+        "CANCELLED": "Cancelled"
+      },
+      "fulfillment": {
+        "title": "Handout & return",
+        "ordered": "Ordered",
+        "delivered": "Handed out",
+        "returned": "Returned",
+        "outstanding": "Out",
+        "deliverAll": "Hand out all",
+        "returnAll": "Return all",
+        "save": "Save",
+        "saved": "Saved",
+        "deliveredHint": "Cylinders the customer has collected",
+        "returnedHint": "Cylinders that have come back",
+        "invalidValue": "Value out of allowed range"
+      }
+    }
+  },
+  "email": {
+    "subject": "Booking confirmation {number} — {event}",
+    "greeting": "Hi {name},",
+    "intro": "Thank you for ordering LPG cylinders for {event}. Here is your booking confirmation.",
+    "bookingNumber": "Booking number",
+    "orderSummary": "Order",
+    "pickup": "Pickup",
+    "invoiceInfo": "An invoice will be sent to your organization after the event.",
+    "questions": "Questions? Reply to this email and we will help you.",
+    "footer": "This is an automated confirmation from Gasol247."
+  }
+}

messages/sv.json

@@ -0,0 +1,290 @@
+{
+  "common": {
+    "siteName": "Gasol247 Bokning",
+    "eventName": "Jamboree 2027",
+    "languageSwedish": "Svenska",
+    "languageEnglish": "English",
+    "back": "Tillbaka",
+    "save": "Spara",
+    "cancel": "Avbryt",
+    "loading": "Laddar…",
+    "submit": "Skicka in",
+    "currency": "kr",
+    "vat": "moms",
+    "ofWhichVat": "varav moms",
+    "inclVat": "inkl. moms",
+    "exclVat": "exkl. moms",
+    "total": "Totalt",
+    "subtotal": "Delsumma",
+    "quantity": "Antal",
+    "price": "Pris",
+    "search": "Sök"
+  },
+  "header": {
+    "tagline": "Boka gasoltuber till Jamboree-lägret",
+    "switchLanguage": "Byt språk"
+  },
+  "booking": {
+    "title": "Beställning av gasoltuber",
+    "intro": "Reservera gasoltuber till ert kontingent på lägret. Bekräftelse skickas till angiven e-postadress.",
+    "stepProducts": "Välj produkter",
+    "stepDetails": "Era uppgifter",
+    "stepPickup": "Upphämtning",
+    "stepReview": "Sammanfattning",
+    "stepProductsShort": "Produkter",
+    "stepDetailsShort": "Uppgifter",
+    "stepPickupShort": "Upphämtning",
+    "stepReviewShort": "Granska",
+    "stepOf": "Steg {current} av {total}",
+    "products": {
+      "title": "Välj produkter",
+      "subtitle": "Justera antalet av varje tubstorlek nedan.",
+      "addToCart": "Lägg till",
+      "remove": "Ta bort",
+      "perUnit": "/st",
+      "noneSelected": "Välj minst en produkt för att fortsätta."
+    },
+    "details": {
+      "title": "Era uppgifter",
+      "organization": "Organisation",
+      "orgName": "Organisationsnamn",
+      "orgNamePlaceholder": "Scoutkår, förening, företag …",
+      "orgNumber": "Organisationsnummer",
+      "orgNumberPlaceholder": "XXXXXX-XXXX",
+      "contact": "Kontaktperson",
+      "contactName": "Namn",
+      "contactNamePlaceholder": "För- och efternamn",
+      "email": "E-post",
+      "emailPlaceholder": "exempel@kar.se",
+      "phone": "Telefon",
+      "phonePlaceholder": "07X-XXX XX XX",
+      "invoiceAddress": "Fakturaadress",
+      "address": "Gatuadress",
+      "postalCode": "Postnummer",
+      "city": "Ort",
+      "country": "Land"
+    },
+    "pickup": {
+      "title": "Välj upphämtningstid",
+      "subtitle": "Välj en tid då ni kan hämta tuberna på lägerplatsen.",
+      "noSlots": "Inga upphämtningstider är konfigurerade ännu.",
+      "capacity": "{count} platser kvar"
+    },
+    "notes": {
+      "label": "Övriga meddelanden (valfritt)",
+      "placeholder": "Eventuella önskemål eller information vi bör veta om."
+    },
+    "review": {
+      "title": "Granska din beställning",
+      "confirm": "Jag bekräftar att uppgifterna stämmer och godkänner att en bokning skapas.",
+      "submitting": "Skickar bokning…"
+    },
+    "errors": {
+      "required": "Detta fält är obligatoriskt",
+      "invalidEmail": "Ange en giltig e-postadress",
+      "invalidOrgNumber": "Ange ett giltigt organisationsnummer (XXXXXX-XXXX)",
+      "selectProduct": "Välj minst en produkt",
+      "submitFailed": "Något gick fel. Försök igen eller kontakta oss."
+    },
+    "success": {
+      "title": "Tack! Din beställning är mottagen.",
+      "subtitle": "Bekräftelse är skickad till {email}.",
+      "bookingNumber": "Bokningsnummer: {number}",
+      "newOrder": "Gör ny beställning"
+    },
+    "next": "Nästa",
+    "previous": "Föregående"
+  },
+  "admin": {
+    "title": "Administration",
+    "login": {
+      "title": "Logga in",
+      "email": "E-post",
+      "password": "Lösenord",
+      "submit": "Logga in",
+      "error": "Felaktig e-post eller lösenord."
+    },
+    "nav": {
+      "bookings": "Bokningar",
+      "products": "Produkter",
+      "pickupSlots": "Upphämtningstider",
+      "settings": "Inställningar",
+      "users": "Användare",
+      "admins": "Administratörer",
+      "signOut": "Logga ut"
+    },
+    "users": {
+      "title": "Administratörer",
+      "empty": "Inga administratörer.",
+      "new": "Ny administratör",
+      "edit": "Redigera",
+      "create": "Skapa",
+      "save": "Spara",
+      "delete": "Ta bort",
+      "deleteConfirm": "Är du säker på att du vill ta bort denna administratör?",
+      "cannotDeleteSelf": "Du kan inte ta bort ditt eget konto.",
+      "cannotDeleteLast": "Det måste finnas minst en administratör.",
+      "emailInUse": "E-postadressen används redan av en annan administratör.",
+      "passwordMismatch": "Lösenorden matchar inte.",
+      "passwordTooShort": "Lösenordet måste vara minst 8 tecken.",
+      "passwordChanged": "Lösenordet har uppdaterats.",
+      "you": "(du)",
+      "columns": {
+        "name": "Namn",
+        "email": "E-post",
+        "created": "Skapad",
+        "actions": "Åtgärder"
+      },
+      "fields": {
+        "name": "Namn",
+        "email": "E-post",
+        "password": "Lösenord",
+        "passwordConfirm": "Bekräfta lösenord",
+        "newPassword": "Nytt lösenord",
+        "newPasswordHint": "Lämna tomt för att behålla nuvarande lösenord",
+        "passwordHint": "Minst 8 tecken"
+      },
+      "changePassword": "Byt lösenord"
+    },
+    "settings": {
+      "title": "Inställningar",
+      "saved": "Inställningarna är sparade.",
+      "save": "Spara",
+      "pickupEnabled": "Visa upphämtningssteget i bokningsformuläret",
+      "pickupEnabledHint": "När detta är av tas hela steget bort från formuläret och inga upphämtningstider väljs. Befintliga bokningar och upphämtningstider påverkas inte."
+    },
+    "products": {
+      "title": "Produkter",
+      "empty": "Inga produkter ännu.",
+      "new": "Ny produkt",
+      "edit": "Redigera",
+      "create": "Skapa",
+      "save": "Spara",
+      "delete": "Ta bort",
+      "deleteConfirm": "Är du säker på att du vill ta bort produkten?",
+      "cannotDelete": "Produkten kan inte tas bort — den används i {count} bokning(ar). Inaktivera den i stället.",
+      "activate": "Aktivera",
+      "deactivate": "Inaktivera",
+      "active": "Aktiv",
+      "inactive": "Inaktiv",
+      "columns": {
+        "sku": "SKU",
+        "name": "Namn",
+        "price": "Pris",
+        "vat": "Moms",
+        "active": "Aktiv",
+        "actions": "Åtgärder"
+      },
+      "fields": {
+        "sku": "SKU",
+        "skuHint": "Unik kod, t.ex. P11",
+        "nameSv": "Namn (svenska)",
+        "nameEn": "Namn (engelska)",
+        "descriptionSv": "Beskrivning (svenska)",
+        "descriptionEn": "Beskrivning (engelska)",
+        "priceSek": "Pris (kr exkl. moms)",
+        "vatPct": "Moms (%)",
+        "sortOrder": "Sorteringsordning",
+        "sortOrderHint": "Lägre värde visas först",
+        "active": "Aktiv (visas i bokningsformuläret)"
+      }
+    },
+    "pickupSlots": {
+      "title": "Upphämtningstider",
+      "empty": "Inga upphämtningstider ännu.",
+      "new": "Ny tid",
+      "edit": "Redigera",
+      "create": "Skapa",
+      "save": "Spara",
+      "delete": "Ta bort",
+      "deleteConfirm": "Är du säker på att du vill ta bort tiden?",
+      "cannotDelete": "Tiden kan inte tas bort — den är vald i {count} bokning(ar). Inaktivera den i stället.",
+      "activate": "Aktivera",
+      "deactivate": "Inaktivera",
+      "columns": {
+        "label": "Etikett",
+        "when": "När",
+        "capacity": "Kapacitet",
+        "bookings": "Bokningar",
+        "active": "Aktiv",
+        "actions": "Åtgärder"
+      },
+      "fields": {
+        "labelSv": "Etikett (svenska)",
+        "labelEn": "Etikett (engelska)",
+        "labelHint": "T.ex. \"Dag 1 — Förmiddag\"",
+        "startsAt": "Startar",
+        "endsAt": "Slutar",
+        "capacity": "Kapacitet",
+        "capacityHint": "Max antal bokningar som kan välja denna tid",
+        "active": "Aktiv (visas i bokningsformuläret)"
+      },
+      "invalidTime": "Sluttiden måste vara efter starttiden."
+    },
+    "bookings": {
+      "title": "Bokningar",
+      "empty": "Inga bokningar ännu.",
+      "columns": {
+        "number": "Boknings-nr",
+        "date": "Datum",
+        "org": "Organisation",
+        "contact": "Kontakt",
+        "total": "Belopp",
+        "status": "Status",
+        "actions": "Åtgärder"
+      },
+      "filters": {
+        "all": "Alla",
+        "search": "Sök boknings-nr, organisation eller e-post"
+      },
+      "export": "Exportera CSV",
+      "view": "Visa",
+      "detail": {
+        "title": "Bokning {number}",
+        "items": "Produkter",
+        "customer": "Kund",
+        "pickup": "Upphämtning",
+        "totals": "Summor",
+        "markInvoiced": "Markera fakturerad",
+        "markDelivered": "Markera levererad",
+        "markCancelled": "Avboka",
+        "resendEmail": "Skicka om bekräftelse"
+      },
+      "status": {
+        "PENDING": "Väntar",
+        "CONFIRMED": "Bekräftad",
+        "DELIVERED_PARTIAL": "Delvis utlämnad",
+        "DELIVERED": "Utlämnad",
+        "RETURNED_PARTIAL": "Delvis inlämnad",
+        "RETURNED": "Inlämnad",
+        "INVOICED": "Fakturerad",
+        "CANCELLED": "Avbokad"
+      },
+      "fulfillment": {
+        "title": "Utlämning & retur",
+        "ordered": "Beställt",
+        "delivered": "Utlämnat",
+        "returned": "Inlämnat",
+        "outstanding": "Ute",
+        "deliverAll": "Utlämna allt",
+        "returnAll": "Lämna in allt",
+        "save": "Spara",
+        "saved": "Sparat",
+        "deliveredHint": "Antal tuber som kunden hämtat",
+        "returnedHint": "Antal tuber som kommit tillbaka",
+        "invalidValue": "Värdet ligger utanför tillåtet intervall"
+      }
+    }
+  },
+  "email": {
+    "subject": "Bokningsbekräftelse {number} — {event}",
+    "greeting": "Hej {name},",
+    "intro": "Tack för din beställning av gasoltuber till {event}. Här är din bokningsbekräftelse.",
+    "bookingNumber": "Bokningsnummer",
+    "orderSummary": "Beställning",
+    "pickup": "Upphämtning",
+    "invoiceInfo": "Faktura skickas till organisationen efter eventet.",
+    "questions": "Har du frågor? Svara på detta mejl så hjälper vi dig.",
+    "footer": "Detta är en automatiserad bekräftelse från Gasol247."
+  }
+}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.mjs

@@ -0,0 +1,15 @@
+import createNextIntlPlugin from 'next-intl/plugin';
+
+const withNextIntl = createNextIntlPlugin('./src/i18n/request.ts');
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+  experimental: {
+    serverActions: {
+      bodySizeLimit: '2mb',
+    },
+  },
+};
+
+export default withNextIntl(nextConfig);

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "boka-gasol247",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "prisma generate && next build",
+    "start": "next start",
+    "lint": "next lint",
+    "db:push": "prisma db push",
+    "db:migrate": "prisma migrate dev",
+    "db:studio": "prisma studio",
+    "db:seed": "node --env-file=.env --import tsx prisma/seed.ts",
+    "postinstall": "prisma generate"
+  },
+  "dependencies": {
+    "@prisma/client": "^5.22.0",
+    "bcryptjs": "^2.4.3",
+    "next": "15.0.3",
+    "next-auth": "5.0.0-beta.25",
+    "next-intl": "^3.25.1",
+    "node-mailjet": "^6.0.6",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "zod": "^3.23.8",
+    "zustand": "^5.0.13"
+  },
+  "devDependencies": {
+    "@types/bcryptjs": "^2.4.6",
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.14.0",
+    "eslint-config-next": "15.0.3",
+    "postcss": "^8.4.49",
+    "prisma": "^5.22.0",
+    "tailwindcss": "^3.4.15",
+    "tsx": "^4.19.2",
+    "typescript": "^5.6.3"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

prisma/schema.prisma

@@ -0,0 +1,135 @@
+// Boka Gasol247 — Prisma schema
+// SQLite for MVP. Migrating to Postgres later: change provider + DATABASE_URL.
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+// Singleton settings row. Always accessed with id = "singleton" so we never
+// have more than one row. Add new fields as feature flags grow.
+model Settings {
+  id             String   @id @default("singleton")
+  pickupEnabled  Boolean  @default(true)
+  updatedAt      DateTime @updatedAt
+}
+
+model Admin {
+  id           String   @id @default(cuid())
+  email        String   @unique
+  name         String
+  passwordHash String
+  createdAt    DateTime @default(now())
+  updatedAt    DateTime @updatedAt
+}
+
+model Product {
+  id            String        @id @default(cuid())
+  sku           String        @unique
+  nameSv        String
+  nameEn        String
+  descriptionSv String
+  descriptionEn String
+  // Price in öre (SEK * 100) to avoid float issues.
+  priceOre      Int
+  // VAT in basis points (e.g. 2500 = 25.00%).
+  vatBp         Int           @default(2500)
+  active        Boolean       @default(true)
+  sortOrder     Int           @default(0)
+  createdAt     DateTime      @default(now())
+  updatedAt     DateTime      @updatedAt
+  bookingItems  BookingItem[]
+}
+
+model PickupSlot {
+  id        String    @id @default(cuid())
+  // Human label fallback (e.g. "Måndag förmiddag").
+  labelSv   String
+  labelEn   String
+  startsAt  DateTime
+  endsAt    DateTime
+  capacity  Int       @default(50)
+  active    Boolean   @default(true)
+  bookings  Booking[]
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @updatedAt
+}
+
+// BookingStatus values (string, since SQLite has no enums):
+//   PENDING | CONFIRMED
+//   DELIVERED_PARTIAL | DELIVERED              (handout out, none returned)
+//   RETURNED_PARTIAL  | RETURNED               (everything has come back)
+//   INVOICED          (billing done, terminal)
+//   CANCELLED         (terminal)
+// Derived statuses (DELIVERED*/RETURNED*) are normally auto-set from item
+// counters; INVOICED and CANCELLED are set explicitly by admin.
+model Booking {
+  id            String        @id @default(cuid())
+  bookingNumber String        @unique
+  status        String        @default("CONFIRMED")
+
+  // Contact
+  contactName   String
+  email         String
+  phone         String
+
+  // Organization
+  orgName       String
+  orgNumber     String
+
+  // Invoice address
+  address       String
+  postalCode    String
+  city          String
+  country       String        @default("SE")
+
+  // Pickup
+  pickupSlotId  String?
+  pickupSlot    PickupSlot?   @relation(fields: [pickupSlotId], references: [id])
+
+  notes         String?
+
+  // Snapshots in öre at booking time
+  subtotalOre   Int
+  vatOre        Int
+  totalOre      Int
+
+  locale        String        @default("sv")
+
+  items         BookingItem[]
+
+  createdAt     DateTime      @default(now())
+  updatedAt     DateTime      @updatedAt
+
+  @@index([createdAt])
+  @@index([status])
+}
+
+model BookingItem {
+  id          String  @id @default(cuid())
+  bookingId   String
+  booking     Booking @relation(fields: [bookingId], references: [id], onDelete: Cascade)
+  productId   String
+  product     Product @relation(fields: [productId], references: [id])
+
+  // Snapshots so historical bookings don't break if a product changes
+  sku         String
+  nameSv      String
+  nameEn      String
+  unitPriceOre Int
+  vatBp       Int
+  quantity    Int
+  lineTotalOre Int
+
+  // Fulfillment tracking — set by admin as cylinders go out and come back.
+  // Invariants: 0 <= deliveredQuantity <= quantity
+  //             0 <= returnedQuantity  <= deliveredQuantity
+  deliveredQuantity Int @default(0)
+  returnedQuantity  Int @default(0)
+
+  @@index([bookingId])
+}

prisma/seed.ts

@@ -0,0 +1,121 @@
+import { PrismaClient } from '@prisma/client';
+import bcrypt from 'bcryptjs';
+
+const prisma = new PrismaClient();
+
+async function main() {
+  // -- Settings singleton --
+  await prisma.settings.upsert({
+    where: { id: 'singleton' },
+    update: {},
+    create: { id: 'singleton', pickupEnabled: true },
+  });
+  console.log('✓ Settings singleton ensured');
+
+  // -- Initial admin --
+  const email = (process.env.SEED_ADMIN_EMAIL ?? 'admin@example.com').toLowerCase();
+  const password = process.env.SEED_ADMIN_PASSWORD ?? 'change-me';
+  const name = process.env.SEED_ADMIN_NAME ?? 'Admin';
+
+  const passwordHash = await bcrypt.hash(password, 12);
+  await prisma.admin.upsert({
+    where: { email },
+    update: {},
+    create: { email, name, passwordHash },
+  });
+  console.log(`✓ Admin ensured: ${email}`);
+
+  // -- Products (example LPG cylinders) --
+  const products = [
+    {
+      sku: 'P6',
+      nameSv: 'Gasoltub P6',
+      nameEn: 'LPG cylinder P6',
+      descriptionSv: '6 kg gasol — för mindre kök och campingkök.',
+      descriptionEn: '6 kg LPG — for smaller stoves and camping cooktops.',
+      priceOre: 39900, // 399 kr
+      sortOrder: 10,
+    },
+    {
+      sku: 'P11',
+      nameSv: 'Gasoltub P11',
+      nameEn: 'LPG cylinder P11',
+      descriptionSv: '11 kg gasol — vanligaste storleken för matlagning på läger.',
+      descriptionEn: '11 kg LPG — most common size for cooking at camps.',
+      priceOre: 64900, // 649 kr
+      sortOrder: 20,
+    },
+    {
+      sku: 'P19',
+      nameSv: 'Gasoltub P19',
+      nameEn: 'LPG cylinder P19',
+      descriptionSv: '19 kg gasol — för större kök eller längre vistelse.',
+      descriptionEn: '19 kg LPG — for larger kitchens or longer stays.',
+      priceOre: 99900, // 999 kr
+      sortOrder: 30,
+    },
+  ];
+
+  for (const p of products) {
+    await prisma.product.upsert({
+      where: { sku: p.sku },
+      update: {
+        nameSv: p.nameSv,
+        nameEn: p.nameEn,
+        descriptionSv: p.descriptionSv,
+        descriptionEn: p.descriptionEn,
+        priceOre: p.priceOre,
+        sortOrder: p.sortOrder,
+      },
+      create: { ...p, active: true, vatBp: 2500 },
+    });
+  }
+  console.log(`✓ Seeded ${products.length} products`);
+
+  // -- Pickup slots (example: 3 days × 2 slots) --
+  const existing = await prisma.pickupSlot.count();
+  if (existing === 0) {
+    const baseDay = new Date();
+    baseDay.setUTCHours(8, 0, 0, 0);
+    // Place slots ~6 months out so they don't expire immediately.
+    baseDay.setUTCMonth(baseDay.getUTCMonth() + 6);
+
+    const slots = [
+      { offsetDays: 0, startH: 9, endH: 12, labelSv: 'Dag 1 — Förmiddag', labelEn: 'Day 1 — Morning' },
+      { offsetDays: 0, startH: 13, endH: 17, labelSv: 'Dag 1 — Eftermiddag', labelEn: 'Day 1 — Afternoon' },
+      { offsetDays: 1, startH: 9, endH: 12, labelSv: 'Dag 2 — Förmiddag', labelEn: 'Day 2 — Morning' },
+      { offsetDays: 1, startH: 13, endH: 17, labelSv: 'Dag 2 — Eftermiddag', labelEn: 'Day 2 — Afternoon' },
+      { offsetDays: 2, startH: 9, endH: 12, labelSv: 'Dag 3 — Förmiddag', labelEn: 'Day 3 — Morning' },
+    ];
+    for (const s of slots) {
+      const startsAt = new Date(baseDay);
+      startsAt.setUTCDate(baseDay.getUTCDate() + s.offsetDays);
+      startsAt.setUTCHours(s.startH, 0, 0, 0);
+      const endsAt = new Date(startsAt);
+      endsAt.setUTCHours(s.endH, 0, 0, 0);
+
+      await prisma.pickupSlot.create({
+        data: {
+          labelSv: s.labelSv,
+          labelEn: s.labelEn,
+          startsAt,
+          endsAt,
+          capacity: 50,
+          active: true,
+        },
+      });
+    }
+    console.log(`✓ Seeded ${slots.length} pickup slots`);
+  } else {
+    console.log(`• Pickup slots already exist (${existing}) — skipping`);
+  }
+}
+
+main()
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
+  })
+  .finally(async () => {
+    await prisma.$disconnect();
+  });

src/app/[locale]/admin/bookings/[id]/actions.ts

@@ -0,0 +1,92 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { prisma } from '@/lib/prisma';
+import { requireAdmin } from '@/lib/requireAdmin';
+import {
+  clampFulfillment,
+  deriveBookingStatus,
+} from '@/lib/bookingStatus';
+
+async function recomputeBookingStatus(bookingId: string) {
+  const booking = await prisma.booking.findUnique({
+    where: { id: bookingId },
+    include: { items: true },
+  });
+  if (!booking) return;
+  const next = deriveBookingStatus(booking.status, booking.items);
+  if (next !== booking.status) {
+    await prisma.booking.update({
+      where: { id: bookingId },
+      data: { status: next },
+    });
+  }
+}
+
+export async function setItemFulfillment(formData: FormData) {
+  await requireAdmin();
+  const bookingId = String(formData.get('bookingId') ?? '');
+  const itemId = String(formData.get('itemId') ?? '');
+  const deliveredRaw = Number(formData.get('delivered') ?? 0);
+  const returnedRaw = Number(formData.get('returned') ?? 0);
+  if (!bookingId || !itemId) return;
+
+  const item = await prisma.bookingItem.findUnique({ where: { id: itemId } });
+  if (!item || item.bookingId !== bookingId) return;
+
+  const { delivered, returned } = clampFulfillment(
+    item.quantity,
+    deliveredRaw,
+    returnedRaw,
+  );
+
+  await prisma.bookingItem.update({
+    where: { id: itemId },
+    data: { deliveredQuantity: delivered, returnedQuantity: returned },
+  });
+
+  await recomputeBookingStatus(bookingId);
+  revalidatePath(`/admin/bookings/${bookingId}`);
+  revalidatePath('/admin');
+}
+
+export async function markAllDelivered(formData: FormData) {
+  await requireAdmin();
+  const bookingId = String(formData.get('bookingId') ?? '');
+  if (!bookingId) return;
+
+  const items = await prisma.bookingItem.findMany({ where: { bookingId } });
+  await prisma.$transaction(
+    items.map((it) =>
+      prisma.bookingItem.update({
+        where: { id: it.id },
+        data: { deliveredQuantity: it.quantity },
+      }),
+    ),
+  );
+  await recomputeBookingStatus(bookingId);
+  revalidatePath(`/admin/bookings/${bookingId}`);
+  revalidatePath('/admin');
+}
+
+export async function markAllReturned(formData: FormData) {
+  await requireAdmin();
+  const bookingId = String(formData.get('bookingId') ?? '');
+  if (!bookingId) return;
+
+  const items = await prisma.bookingItem.findMany({ where: { bookingId } });
+  // "Return all" means: everything that was handed out comes back. If nothing
+  // was marked delivered we treat it as a full handout + return cycle.
+  await prisma.$transaction(
+    items.map((it) => {
+      const delivered = it.deliveredQuantity > 0 ? it.deliveredQuantity : it.quantity;
+      return prisma.bookingItem.update({
+        where: { id: it.id },
+        data: { deliveredQuantity: delivered, returnedQuantity: delivered },
+      });
+    }),
+  );
+  await recomputeBookingStatus(bookingId);
+  revalidatePath(`/admin/bookings/${bookingId}`);
+  revalidatePath('/admin');
+}

src/app/[locale]/admin/bookings/[id]/page.tsx

@@ -0,0 +1,288 @@
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { revalidatePath } from 'next/cache';
+import { prisma } from '@/lib/prisma';
+import { requireAdmin } from '@/lib/requireAdmin';
+import { Link } from '@/i18n/routing';
+import { formatOre } from '@/lib/money';
+import { StatusBadge } from '@/components/StatusBadge';
+import { FulfillmentTable } from '@/components/admin/FulfillmentTable';
+import { sendBookingConfirmation } from '@/lib/mailjet';
+
+export const dynamic = 'force-dynamic';
+
+async function setStatus(formData: FormData) {
+  'use server';
+  await requireAdmin();
+  const id = String(formData.get('id') ?? '');
+  const status = String(formData.get('status') ?? '');
+  if (!id || !status) return;
+  await prisma.booking.update({ where: { id }, data: { status } });
+  revalidatePath(`/admin/bookings/${id}`);
+  revalidatePath('/admin');
+}
+
+async function resendEmail(formData: FormData) {
+  'use server';
+  await requireAdmin();
+  const id = String(formData.get('id') ?? '');
+  if (!id) return;
+  const booking = await prisma.booking.findUnique({
+    where: { id },
+    include: { items: true, pickupSlot: true },
+  });
+  if (booking) {
+    await sendBookingConfirmation(booking);
+  }
+  revalidatePath(`/admin/bookings/${id}`);
+}
+
+export default async function BookingDetailPage({
+  params,
+}: {
+  params: Promise<{ locale: string; id: string }>;
+}) {
+  const { locale, id } = await params;
+  setRequestLocale(locale);
+  await requireAdmin();
+
+  const t = await getTranslations('admin.bookings');
+  const c = await getTranslations('common');
+  const loc = locale as 'sv' | 'en';
+
+  const booking = await prisma.booking.findUnique({
+    where: { id },
+    include: { items: true, pickupSlot: true },
+  });
+  if (!booking) notFound();
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <Link href="/admin" className="btn-ghost text-sm">
+          ← {c('back')}
+        </Link>
+        <h1 className="text-xl font-semibold text-ink-900">
+          {t('detail.title', { number: booking.bookingNumber })}
+        </h1>
+        <StatusBadge status={booking.status} />
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-3">
+        <div className="card p-4 lg:col-span-2">
+          <h2 className="text-xs font-medium uppercase tracking-wide text-ink-500">
+            {t('detail.items')}
+          </h2>
+          <table className="mt-2 w-full text-sm">
+            <thead>
+              <tr className="text-left text-xs uppercase tracking-wide text-ink-500">
+                <th className="py-1">SKU</th>
+                <th className="py-1">{loc === 'sv' ? 'Namn' : 'Name'}</th>
+                <th className="py-1 text-right">{c('quantity')}</th>
+                <th className="py-1 text-right">{c('price')}</th>
+                <th className="py-1 text-right">{c('total')}</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-ink-100">
+              {booking.items.map((it) => (
+                <tr key={it.id}>
+                  <td className="py-2 font-mono text-xs">{it.sku}</td>
+                  <td className="py-2">
+                    {loc === 'sv' ? it.nameSv : it.nameEn}
+                  </td>
+                  <td className="py-2 text-right tabular-nums">
+                    {it.quantity}
+                  </td>
+                  <td className="py-2 text-right tabular-nums">
+                    {formatOre(it.unitPriceOre, loc)}
+                  </td>
+                  <td className="py-2 text-right tabular-nums">
+                    {formatOre(it.lineTotalOre, loc)}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+            <tfoot className="border-t border-ink-200">
+              <tr>
+                <td colSpan={4} className="pt-2 text-ink-600">
+                  {c('subtotal')}
+                </td>
+                <td className="pt-2 text-right tabular-nums">
+                  {formatOre(booking.subtotalOre, loc)}
+                </td>
+              </tr>
+              <tr>
+                <td colSpan={4} className="text-ink-500">
+                  {c('ofWhichVat')}
+                </td>
+                <td className="text-right tabular-nums text-ink-500">
+                  {formatOre(booking.vatOre, loc)}
+                </td>
+              </tr>
+              <tr>
+                <td colSpan={4} className="pt-1 font-semibold">
+                  {c('total')}
+                </td>
+                <td className="pt-1 text-right font-semibold tabular-nums">
+                  {formatOre(booking.totalOre, loc)}
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+
+          {booking.notes && (
+            <div className="mt-4 rounded-lg bg-ink-50 p-3 text-sm">
+              <div className="text-xs font-medium uppercase tracking-wide text-ink-500">
+                Notes
+              </div>
+              <p className="mt-1 whitespace-pre-wrap text-ink-700">
+                {booking.notes}
+              </p>
+            </div>
+          )}
+
+          <div className="mt-4">
+            <FulfillmentTable
+              bookingId={booking.id}
+              items={booking.items.map((it) => ({
+                id: it.id,
+                sku: it.sku,
+                nameSv: it.nameSv,
+                nameEn: it.nameEn,
+                quantity: it.quantity,
+                deliveredQuantity: it.deliveredQuantity,
+                returnedQuantity: it.returnedQuantity,
+              }))}
+            />
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <div className="card p-4">
+            <h2 className="text-xs font-medium uppercase tracking-wide text-ink-500">
+              {t('detail.customer')}
+            </h2>
+            <dl className="mt-2 space-y-1 text-sm">
+              <DLRow label={loc === 'sv' ? 'Organisation' : 'Organization'} value={booking.orgName} />
+              <DLRow label="Org.nr" value={booking.orgNumber} />
+              <DLRow label={loc === 'sv' ? 'Kontakt' : 'Contact'} value={booking.contactName} />
+              <DLRow
+                label="E-post"
+                value={
+                  <a className="text-brand-600 hover:underline" href={`mailto:${booking.email}`}>
+                    {booking.email}
+                  </a>
+                }
+              />
+              <DLRow label={loc === 'sv' ? 'Telefon' : 'Phone'} value={booking.phone} />
+              <DLRow
+                label={loc === 'sv' ? 'Adress' : 'Address'}
+                value={
+                  <span>
+                    {booking.address}
+                    <br />
+                    {booking.postalCode} {booking.city}
+                    <br />
+                    {booking.country}
+                  </span>
+                }
+              />
+            </dl>
+          </div>
+
+          {booking.pickupSlot && (
+            <div className="card p-4">
+              <h2 className="text-xs font-medium uppercase tracking-wide text-ink-500">
+                {t('detail.pickup')}
+              </h2>
+              <p className="mt-1 text-sm">
+                {loc === 'sv'
+                  ? booking.pickupSlot.labelSv
+                  : booking.pickupSlot.labelEn}
+              </p>
+              <p className="mt-0.5 text-xs text-ink-500">
+                {booking.pickupSlot.startsAt.toLocaleString(
+                  loc === 'sv' ? 'sv-SE' : 'en-SE',
+                  { dateStyle: 'medium', timeStyle: 'short' },
+                )}
+              </p>
+            </div>
+          )}
+
+          <div className="card p-4">
+            <h2 className="text-xs font-medium uppercase tracking-wide text-ink-500">
+              Actions
+            </h2>
+            <p className="mt-1 text-xs text-ink-500">
+              {loc === 'sv'
+                ? 'Status uppdateras automatiskt från utlämnings­raderna.'
+                : 'Status updates automatically from the handout rows.'}
+            </p>
+            <div className="mt-3 space-y-2">
+              {booking.status !== 'INVOICED' &&
+                booking.status !== 'CANCELLED' && (
+                  <StatusButton
+                    bookingId={booking.id}
+                    status="INVOICED"
+                    label={t('detail.markInvoiced')}
+                    setStatus={setStatus}
+                  />
+                )}
+              {booking.status !== 'CANCELLED' && (
+                <StatusButton
+                  bookingId={booking.id}
+                  status="CANCELLED"
+                  label={t('detail.markCancelled')}
+                  setStatus={setStatus}
+                  destructive
+                />
+              )}
+              <form action={resendEmail}>
+                <input type="hidden" name="id" value={booking.id} />
+                <button className="btn-secondary w-full text-sm" type="submit">
+                  {t('detail.resendEmail')}
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StatusButton({
+  bookingId,
+  status,
+  label,
+  setStatus,
+  destructive,
+}: {
+  bookingId: string;
+  status: string;
+  label: string;
+  setStatus: (fd: FormData) => Promise<void>;
+  destructive?: boolean;
+}) {
+  return (
+    <form action={setStatus}>
+      <input type="hidden" name="id" value={bookingId} />
+      <input type="hidden" name="status" value={status} />
+      <button
+        type="submit"
+        className={`w-full text-sm ${destructive ? 'btn border border-red-200 bg-white text-red-700 hover:bg-red-50' : 'btn-secondary'}`}
+      >
+        {label}
+      </button>
+    </form>
+  );
+}
+
+function DLRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="flex justify-between gap-3">
+      <dt className="text-ink-500">{label}</dt>
+      <dd className="text-right text-ink-900">{value}</dd>
+    </div>
+  );
+}

src/app/[locale]/admin/layout.tsx

@@ -0,0 +1,90 @@
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import { signOut } from '@/auth';
+import { getSafeSession } from '@/lib/safeAuth';
+import { Link } from '@/i18n/routing';
+import { LanguageSwitcher } from '@/components/LanguageSwitcher';
+
+export default async function AdminLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  const session = await getSafeSession();
+  const t = await getTranslations('admin');
+
+  // Public login page is handled in admin/login/page.tsx — but layout still wraps it.
+  // For non-login admin routes we redirect when not signed in via a route segment guard.
+  // Here we expose `session` to the rendered children via a server util; simpler:
+  // we redirect from this layout only when path is NOT /admin/login. Since segment
+  // info isn't easily accessible, we let each page check itself. Login page will not redirect.
+  // We do the protection by rendering the nav only when signed in; pages must call requireAdmin().
+
+  return (
+    <div className="min-h-screen bg-ink-50">
+      <header className="border-b border-ink-200 bg-white">
+        <div className="mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-3">
+          <div className="flex items-center gap-3">
+            <Link href="/admin" className="text-base font-semibold text-ink-900">
+              {t('title')}
+            </Link>
+            {session?.user && (
+              <nav className="hidden gap-1 sm:flex">
+                <Link
+                  href="/admin"
+                  className="rounded-md px-3 py-1.5 text-sm text-ink-600 hover:bg-ink-100"
+                >
+                  {t('nav.bookings')}
+                </Link>
+                <Link
+                  href="/admin/products"
+                  className="rounded-md px-3 py-1.5 text-sm text-ink-600 hover:bg-ink-100"
+                >
+                  {t('nav.products')}
+                </Link>
+                <Link
+                  href="/admin/pickup-slots"
+                  className="rounded-md px-3 py-1.5 text-sm text-ink-600 hover:bg-ink-100"
+                >
+                  {t('nav.pickupSlots')}
+                </Link>
+                <Link
+                  href="/admin/settings"
+                  className="rounded-md px-3 py-1.5 text-sm text-ink-600 hover:bg-ink-100"
+                >
+                  {t('nav.settings')}
+                </Link>
+                <Link
+                  href="/admin/users"
+                  className="rounded-md px-3 py-1.5 text-sm text-ink-600 hover:bg-ink-100"
+                >
+                  {t('nav.users')}
+                </Link>
+              </nav>
+            )}
+          </div>
+          <div className="flex items-center gap-3">
+            <LanguageSwitcher />
+            {session?.user && (
+              <form
+                action={async () => {
+                  'use server';
+                  await signOut({ redirectTo: '/admin/login' });
+                }}
+              >
+                <button type="submit" className="btn-ghost text-xs">
+                  {t('nav.signOut')}
+                </button>
+              </form>
+            )}
+          </div>
+        </div>
+      </header>
+      <main className="mx-auto max-w-6xl px-4 py-6">{children}</main>
+    </div>
+  );
+}
+

src/app/[locale]/admin/login/page.tsx

@@ -0,0 +1,98 @@
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import { redirect } from 'next/navigation';
+import { signIn } from '@/auth';
+import { getSafeSession } from '@/lib/safeAuth';
+import { Header } from '@/components/Header';
+
+export default async function LoginPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ locale: string }>;
+  searchParams: Promise<{ error?: string; from?: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  const { error, from } = await searchParams;
+
+  const session = await getSafeSession();
+  if (session?.user) {
+    redirect(`/${locale === 'sv' ? '' : locale + '/'}admin`);
+  }
+
+  const t = await getTranslations('admin.login');
+
+  async function login(formData: FormData) {
+    'use server';
+    const email = String(formData.get('email') ?? '');
+    const password = String(formData.get('password') ?? '');
+    try {
+      await signIn('credentials', {
+        email,
+        password,
+        redirectTo: from || '/admin',
+      });
+    } catch (e) {
+      // Auth.js v5 throws an error to trigger the redirect; rethrow non-redirect ones.
+      // Errors that are not "NEXT_REDIRECT" should be re-thrown so Next.js handles routing.
+      if (
+        e &&
+        typeof e === 'object' &&
+        'digest' in e &&
+        typeof (e as { digest?: unknown }).digest === 'string' &&
+        ((e as { digest: string }).digest.startsWith('NEXT_REDIRECT') ||
+          (e as { digest: string }).digest.startsWith('NEXT_HTTP_ERROR'))
+      ) {
+        throw e;
+      }
+      redirect(`/admin/login?error=1`);
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-ink-50">
+      <Header />
+      <main className="mx-auto flex max-w-md flex-col px-4 py-12">
+        <div className="card p-6">
+          <h1 className="text-xl font-semibold text-ink-900">{t('title')}</h1>
+          <form action={login} className="mt-6 space-y-4">
+            <div>
+              <label className="label" htmlFor="email">
+                {t('email')}
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                required
+                className="input mt-1"
+                autoComplete="username"
+              />
+            </div>
+            <div>
+              <label className="label" htmlFor="password">
+                {t('password')}
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                required
+                className="input mt-1"
+                autoComplete="current-password"
+              />
+            </div>
+            {error && (
+              <div className="rounded-lg border border-red-200 bg-red-50 p-2 text-sm text-red-700">
+                {t('error')}
+              </div>
+            )}
+            <button type="submit" className="btn-primary w-full">
+              {t('submit')}
+            </button>
+          </form>
+        </div>
+      </main>
+    </div>
+  );
+}

src/app/[locale]/admin/page.tsx

@@ -0,0 +1,219 @@
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import type { Prisma } from '@prisma/client';
+import { prisma } from '@/lib/prisma';
+import { requireAdmin } from '@/lib/requireAdmin';
+import { Link } from '@/i18n/routing';
+import { formatOre } from '@/lib/money';
+import { StatusBadge } from '@/components/StatusBadge';
+import { AdminFilters } from '@/components/admin/AdminFilters';
+import { SortHeader } from '@/components/admin/SortHeader';
+import { Pagination } from '@/components/admin/Pagination';
+
+export const dynamic = 'force-dynamic';
+
+const PAGE_SIZE = 25;
+const SORT_WHITELIST: Record<string, Prisma.BookingOrderByWithRelationInput> = {
+  createdAt: { createdAt: 'desc' },
+  bookingNumber: { bookingNumber: 'desc' },
+  orgName: { orgName: 'desc' },
+  contactName: { contactName: 'desc' },
+  totalOre: { totalOre: 'desc' },
+  status: { status: 'desc' },
+  pickupSlot: { pickupSlot: { startsAt: 'desc' } },
+};
+
+function buildOrderBy(
+  sort: string,
+  dir: 'asc' | 'desc',
+): Prisma.BookingOrderByWithRelationInput {
+  const base = SORT_WHITELIST[sort] ?? SORT_WHITELIST.createdAt;
+  // Replace direction
+  if ('pickupSlot' in base) {
+    return { pickupSlot: { startsAt: dir } };
+  }
+  const [key] = Object.keys(base);
+  return { [key]: dir } as Prisma.BookingOrderByWithRelationInput;
+}
+
+export default async function AdminBookingsPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ locale: string }>;
+  searchParams: Promise<{
+    q?: string;
+    status?: string;
+    page?: string;
+    sort?: string;
+    dir?: string;
+  }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  await requireAdmin();
+  const t = await getTranslations('admin.bookings');
+  const sp = await searchParams;
+
+  const loc = locale as 'sv' | 'en';
+  const page = Math.max(1, parseInt(sp.page ?? '1', 10) || 1);
+  const sort = sp.sort && SORT_WHITELIST[sp.sort] ? sp.sort : 'createdAt';
+  const dir: 'asc' | 'desc' = sp.dir === 'asc' ? 'asc' : 'desc';
+
+  const where: Prisma.BookingWhereInput = {
+    ...(sp.status && sp.status !== 'all' ? { status: sp.status } : {}),
+    ...(sp.q
+      ? {
+          OR: [
+            { bookingNumber: { contains: sp.q } },
+            { orgName: { contains: sp.q } },
+            { email: { contains: sp.q } },
+            { contactName: { contains: sp.q } },
+            { orgNumber: { contains: sp.q } },
+          ],
+        }
+      : {}),
+  };
+
+  const [total, bookings] = await Promise.all([
+    prisma.booking.count({ where }),
+    prisma.booking.findMany({
+      where,
+      orderBy: buildOrderBy(sort, dir),
+      skip: (page - 1) * PAGE_SIZE,
+      take: PAGE_SIZE,
+      include: { pickupSlot: true },
+    }),
+  ]);
+
+  // Build export URL preserving current filters (skip page/sort).
+  const exportParams = new URLSearchParams();
+  if (sp.status) exportParams.set('status', sp.status);
+  if (sp.q) exportParams.set('q', sp.q);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <h1 className="text-xl font-semibold text-ink-900">{t('title')}</h1>
+        <a
+          href={`/api/admin/export?${exportParams.toString()}`}
+          className="btn-secondary text-sm"
+        >
+          ↓ {t('export')}
+        </a>
+      </div>
+
+      <AdminFilters />
+
+      <div className="card overflow-hidden">
+        {bookings.length === 0 ? (
+          <div className="p-8 text-center text-sm text-ink-500">{t('empty')}</div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead className="bg-ink-50 text-left">
+                <tr>
+                  <th className="px-4 py-2.5">
+                    <SortHeader
+                      field="bookingNumber"
+                      label={t('columns.number')}
+                    />
+                  </th>
+                  <th className="px-4 py-2.5">
+                    <SortHeader field="createdAt" label={t('columns.date')} />
+                  </th>
+                  <th className="px-4 py-2.5">
+                    <SortHeader field="orgName" label={t('columns.org')} />
+                  </th>
+                  <th className="px-4 py-2.5">
+                    <SortHeader
+                      field="contactName"
+                      label={t('columns.contact')}
+                    />
+                  </th>
+                  <th className="px-4 py-2.5">
+                    <SortHeader
+                      field="pickupSlot"
+                      label={t('detail.pickup')}
+                    />
+                  </th>
+                  <th className="px-4 py-2.5 text-right">
+                    <SortHeader
+                      field="totalOre"
+                      label={t('columns.total')}
+                      align="right"
+                    />
+                  </th>
+                  <th className="px-4 py-2.5">
+                    <SortHeader field="status" label={t('columns.status')} />
+                  </th>
+                  <th className="px-4 py-2.5"></th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-ink-100">
+                {bookings.map((b) => (
+                  <tr key={b.id} className="hover:bg-ink-50/50">
+                    <td className="px-4 py-2.5 font-mono text-xs">
+                      {b.bookingNumber}
+                    </td>
+                    <td className="px-4 py-2.5 text-ink-600">
+                      {b.createdAt.toLocaleDateString(
+                        loc === 'sv' ? 'sv-SE' : 'en-SE',
+                      )}
+                    </td>
+                    <td className="px-4 py-2.5">
+                      <div className="font-medium text-ink-900">
+                        {b.orgName}
+                      </div>
+                      <div className="text-xs text-ink-500">{b.orgNumber}</div>
+                    </td>
+                    <td className="px-4 py-2.5">
+                      <div>{b.contactName}</div>
+                      <div className="text-xs text-ink-500">{b.email}</div>
+                    </td>
+                    <td className="px-4 py-2.5">
+                      {b.pickupSlot ? (
+                        <>
+                          <div className="text-ink-900">
+                            {loc === 'sv'
+                              ? b.pickupSlot.labelSv
+                              : b.pickupSlot.labelEn}
+                          </div>
+                          <div className="text-xs text-ink-500">
+                            {b.pickupSlot.startsAt.toLocaleString(
+                              loc === 'sv' ? 'sv-SE' : 'en-SE',
+                              { dateStyle: 'short', timeStyle: 'short' },
+                            )}
+                          </div>
+                        </>
+                      ) : (
+                        <span className="text-xs text-ink-400">—</span>
+                      )}
+                    </td>
+                    <td className="px-4 py-2.5 text-right tabular-nums">
+                      {formatOre(b.totalOre, loc)}
+                    </td>
+                    <td className="px-4 py-2.5">
+                      <StatusBadge status={b.status} />
+                    </td>
+                    <td className="px-4 py-2.5 text-right">
+                      <Link
+                        href={`/admin/bookings/${b.id}`}
+                        className="text-brand-600 hover:underline"
+                      >
+                        {t('view')} →
+                      </Link>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      {total > 0 && (
+        <Pagination page={page} pageSize={PAGE_SIZE} total={total} />
+      )}
+    </div>
+  );
+}

src/app/[locale]/admin/pickup-slots/[id]/page.tsx

@@ -0,0 +1,94 @@
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { prisma } from '@/lib/prisma';
+import { requireAdmin } from '@/lib/requireAdmin';
+import { Link } from '@/i18n/routing';
+import { PickupSlotForm } from '@/components/admin/PickupSlotForm';
+import { updatePickupSlot, deletePickupSlot } from '../actions';
+
+export const dynamic = 'force-dynamic';
+
+// Convert a UTC Date to a "YYYY-MM-DDTHH:mm" string in the server's local
+// timezone — that's the format datetime-local inputs expect.
+function toLocalInputValue(d: Date): string {
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+export default async function EditPickupSlotPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ locale: string; id: string }>;
+  searchParams: Promise<{ error?: string; count?: string }>;
+}) {
+  const { locale, id } = await params;
+  setRequestLocale(locale);
+  await requireAdmin();
+  const t = await getTranslations('admin.pickupSlots');
+  const c = await getTranslations('common');
+  const { error, count } = await searchParams;
+
+  const slot = await prisma.pickupSlot.findUnique({
+    where: { id },
+    include: { _count: { select: { bookings: true } } },
+  });
+  if (!slot) notFound();
+
+  const inUseCount = slot._count.bookings;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <Link href="/admin/pickup-slots" className="btn-ghost text-sm">
+          ← {c('back')}
+        </Link>
+        <h1 className="text-xl font-semibold text-ink-900">
+          {t('edit')} ·{' '}
+          <span className="text-ink-600">
+            {locale === 'sv' ? slot.labelSv : slot.labelEn}
+          </span>
+        </h1>
+      </div>
+
+      {error === 'in-use' && (
+        <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800">
+          {t('cannotDelete', { count: count ?? '?' })}
+        </div>
+      )}
+
+      <PickupSlotForm
+        mode="edit"
+        slot={{
+          id: slot.id,
+          labelSv: slot.labelSv,
+          labelEn: slot.labelEn,
+          startsAt: toLocalInputValue(slot.startsAt),
+          endsAt: toLocalInputValue(slot.endsAt),
+          capacity: slot.capacity,
+          active: slot.active,
+        }}
+        action={updatePickupSlot}
+      />
+
+      <form
+        action={deletePickupSlot}
+        className="flex items-center justify-between gap-3 rounded-lg border border-red-200 bg-red-50/50 p-3 text-sm"
+      >
+        <input type="hidden" name="id" value={slot.id} />
+        <div className="text-red-700">
+          {inUseCount > 0
+            ? t('cannotDelete', { count: inUseCount })
+            : t('deleteConfirm')}
+        </div>
+        <button
+          type="submit"
+          disabled={inUseCount > 0}
+          className="btn border border-red-300 bg-white text-red-700 hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {t('delete')}
+        </button>
+      </form>
+    </div>
+  );
+}

src/app/[locale]/admin/pickup-slots/actions.ts

@@ -0,0 +1,101 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+import { z } from 'zod';
+import { prisma } from '@/lib/prisma';
+import { requireAdmin } from '@/lib/requireAdmin';
+
+// datetime-local inputs return "YYYY-MM-DDTHH:mm" in the browser's local
+// timezone. We treat them as local time and convert via Date constructor
+// (which interprets the string in the server's timezone — for a single-host
+// deploy that's fine; document if you ever shard across timezones).
+const slotSchema = z
+  .object({
+    labelSv: z.string().trim().min(1).max(200),
+    labelEn: z.string().trim().min(1).max(200),
+    startsAt: z.string().trim().min(1),
+    endsAt: z.string().trim().min(1),
+    capacity: z.coerce.number().int().min(0).max(10000),
+    active: z.preprocess(
+      (v) => v === 'on' || v === 'true' || v === true,
+      z.boolean(),
+    ),
+  })
+  .refine((d) => new Date(d.startsAt) < new Date(d.endsAt), {
+    path: ['endsAt'],
+    message: 'invalidTime',
+  });
+
+type Parsed = z.infer<typeof slotSchema>;
+
+function toDbFields(d: Parsed) {
+  return {
+    labelSv: d.labelSv,
+    labelEn: d.labelEn,
+    startsAt: new Date(d.startsAt),
+    endsAt: new Date(d.endsAt),
+    capacity: d.capacity,
+    active: d.active,
+  };
+}
+
+function fromFormData(fd: FormData): Parsed {
+  return slotSchema.parse({
+    labelSv: fd.get('labelSv') ?? '',
+    labelEn: fd.get('labelEn') ?? '',
+    startsAt: fd.get('startsAt') ?? '',
+    endsAt: fd.get('endsAt') ?? '',
+    capacity: fd.get('capacity') ?? 0,
+    active: fd.get('active') ?? false,
+  });
+}
+
+export async function createPickupSlot(formData: FormData) {
+  await requireAdmin();
+  const data = fromFormData(formData);
+  await prisma.pickupSlot.create({ data: toDbFields(data) });
+  revalidatePath('/admin/pickup-slots');
+  revalidatePath('/');
+  redirect('/admin/pickup-slots');
+}
+
+export async function updatePickupSlot(formData: FormData) {
+  await requireAdmin();
+  const id = String(formData.get('id') ?? '');
+  if (!id) return;
+  const data = fromFormData(formData);
+  await prisma.pickupSlot.update({ where: { id }, data: toDbFields(data) });
+  revalidatePath('/admin/pickup-slots');
+  revalidatePath(`/admin/pickup-slots/${id}`);
+  revalidatePath('/');
+  redirect('/admin/pickup-slots');
+}
+
+export async function togglePickupSlotActive(formData: FormData) {
+  await requireAdmin();
+  const id = String(formData.get('id') ?? '');
+  if (!id) return;
+  const cur = await prisma.pickupSlot.findUnique({ where: { id } });
+  if (!cur) return;
+  await prisma.pickupSlot.update({
+    where: { id },
+    data: { active: !cur.active },
+  });
+  revalidatePath('/admin/pickup-slots');
+  revalidatePath('/');
+}
+
+export async function deletePickupSlot(formData: FormData) {
+  await requireAdmin();
+  const id = String(formData.get('id') ?? '');
+  if (!id) return;
+  const inUse = await prisma.booking.count({ where: { pickupSlotId: id } });
+  if (inUse > 0) {
+    redirect(`/admin/pickup-slots/${id}?error=in-use&count=${inUse}`);
+  }
+  await prisma.pickupSlot.delete({ where: { id } });
+  revalidatePath('/admin/pickup-slots');
+  revalidatePath('/');
+  redirect('/admin/pickup-slots');
+}

src/app/[locale]/admin/pickup-slots/new/page.tsx

@@ -0,0 +1,29 @@
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import { requireAdmin } from '@/lib/requireAdmin';
+import { Link } from '@/i18n/routing';
+import { PickupSlotForm } from '@/components/admin/PickupSlotForm';
+import { createPickupSlot } from '../actions';
+
+export default async function NewPickupSlotPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  await requireAdmin();
+  const t = await getTranslations('admin.pickupSlots');
+  const c = await getTranslations('common');
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <Link href="/admin/pickup-slots" className="btn-ghost text-sm">
+          ← {c('back')}
+        </Link>
+        <h1 className="text-xl font-semibold text-ink-900">{t('new')}</h1>
+      </div>
+      <PickupSlotForm mode="create" action={createPickupSlot} />
+    </div>
+  );
+}

src/app/[locale]/admin/pickup-slots/page.tsx

@@ -0,0 +1,137 @@
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import { prisma } from '@/lib/prisma';
+import { requireAdmin } from '@/lib/requireAdmin';
+import { Link } from '@/i18n/routing';
+import { togglePickupSlotActive } from './actions';
+
+export const dynamic = 'force-dynamic';
+
+export default async function AdminPickupSlotsPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  await requireAdmin();
+  const t = await getTranslations('admin.pickupSlots');
+  const loc = locale as 'sv' | 'en';
+
+  const slots = await prisma.pickupSlot.findMany({
+    orderBy: { startsAt: 'asc' },
+    include: { _count: { select: { bookings: true } } },
+  });
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <h1 className="text-xl font-semibold text-ink-900">{t('title')}</h1>
+        <Link href="/admin/pickup-slots/new" className="btn-primary text-sm">
+          + {t('new')}
+        </Link>
+      </div>
+
+      <div className="card overflow-hidden">
+        {slots.length === 0 ? (
+          <div className="p-8 text-center text-sm text-ink-500">
+            {t('empty')}
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead className="bg-ink-50 text-left text-xs uppercase tracking-wide text-ink-500">
+                <tr>
+                  <th className="px-4 py-2.5">{t('columns.label')}</th>
+                  <th className="px-4 py-2.5">{t('columns.when')}</th>
+                  <th className="px-4 py-2.5 text-right">
+                    {t('columns.capacity')}
+                  </th>
+                  <th className="px-4 py-2.5 text-right">
+                    {t('columns.bookings')}
+                  </th>
+                  <th className="px-4 py-2.5 text-center">
+                    {t('columns.active')}
+                  </th>
+                  <th className="px-4 py-2.5 text-right">
+                    {t('columns.actions')}
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-ink-100">
+                {slots.map((s) => {
+                  const taken = s._count.bookings;
+                  const left = Math.max(0, s.capacity - taken);
+                  return (
+                    <tr
+                      key={s.id}
+                      className={`hover:bg-ink-50/50 ${s.active ? '' : 'opacity-60'}`}
+                    >
+                      <td className="px-4 py-2.5">
+                        <div className="font-medium text-ink-900">
+                          {loc === 'sv' ? s.labelSv : s.labelEn}
+                        </div>
+                        <div className="text-xs text-ink-500">
+                          {loc === 'sv' ? s.labelEn : s.labelSv}
+                        </div>
+                      </td>
+                      <td className="px-4 py-2.5">
+                        <div>
+                          {s.startsAt.toLocaleString(
+                            loc === 'sv' ? 'sv-SE' : 'en-SE',
+                            { dateStyle: 'medium', timeStyle: 'short' },
+                          )}
+                        </div>
+                        <div className="text-xs text-ink-500">
+                          →{' '}
+                          {s.endsAt.toLocaleString(
+                            loc === 'sv' ? 'sv-SE' : 'en-SE',
+                            { timeStyle: 'short' },
+                          )}
+                        </div>
+                      </td>
+                      <td className="px-4 py-2.5 text-right tabular-nums">
+                        {s.capacity}
+                      </td>
+                      <td className="px-4 py-2.5 text-right tabular-nums">
+                        {taken}
+                        <span className="ml-1 text-xs text-ink-400">
+                          ({left} {loc === 'sv' ? 'kvar' : 'left'})
+                        </span>
+                      </td>
+                      <td className="px-4 py-2.5 text-center">
+                        <form
+                          action={togglePickupSlotActive}
+                          className="inline"
+                        >
+                          <input type="hidden" name="id" value={s.id} />
+                          <button
+                            type="submit"
+                            className={`badge ${
+                              s.active
+                                ? 'bg-emerald-100 text-emerald-800 hover:bg-emerald-200'
+                                : 'bg-ink-200 text-ink-700 hover:bg-ink-300'
+                            }`}
+                          >
+                            {s.active ? '✓' : '○'}
+                          </button>
+                        </form>
+                      </td>
+                      <td className="px-4 py-2.5 text-right">
+                        <Link
+                          href={`/admin/pickup-slots/${s.id}`}
+                          className="text-brand-600 hover:underline"
+                        >
+                          {t('edit')} →
+                        </Link>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/[locale]/admin/products/[id]/page.tsx

@@ -0,0 +1,87 @@
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { prisma } from '@/lib/prisma';
+import { requireAdmin } from '@/lib/requireAdmin';
+import { Link } from '@/i18n/routing';
+import { ProductForm } from '@/components/admin/ProductForm';
+import { updateProduct, deleteProduct } from '../actions';
+
+export const dynamic = 'force-dynamic';
+
+export default async function EditProductPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ locale: string; id: string }>;
+  searchParams: Promise<{ error?: string; count?: string }>;
+}) {
+  const { locale, id } = await params;
+  setRequestLocale(locale);
+  await requireAdmin();
+  const t = await getTranslations('admin.products');
+  const c = await getTranslations('common');
+  const { error, count } = await searchParams;
+
+  const product = await prisma.product.findUnique({
+    where: { id },
+    include: { _count: { select: { bookingItems: true } } },
+  });
+  if (!product) notFound();
+
+  const inUseCount = product._count.bookingItems;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <Link href="/admin/products" className="btn-ghost text-sm">
+          ← {c('back')}
+        </Link>
+        <h1 className="text-xl font-semibold text-ink-900">
+          {t('edit')} · <span className="font-mono">{product.sku}</span>
+        </h1>
+      </div>
+
+      {error === 'in-use' && (
+        <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800">
+          {t('cannotDelete', { count: count ?? '?' })}
+        </div>
+      )}
+
+      <ProductForm
+        mode="edit"
+        product={{
+          id: product.id,
+          sku: product.sku,
+          nameSv: product.nameSv,
+          nameEn: product.nameEn,
+          descriptionSv: product.descriptionSv,
+          descriptionEn: product.descriptionEn,
+          priceOre: product.priceOre,
+          vatBp: product.vatBp,
+          sortOrder: product.sortOrder,
+          active: product.active,
+        }}
+        action={updateProduct}
+      />
+
+      <form
+        action={deleteProduct}
+        className="flex items-center justify-between gap-3 rounded-lg border border-red-200 bg-red-50/50 p-3 text-sm"
+      >
+        <input type="hidden" name="id" value={product.id} />
+        <div className="text-red-700">
+          {inUseCount > 0
+            ? t('cannotDelete', { count: inUseCount })
+            : t('deleteConfirm')}
+        </div>
+        <button
+          type="submit"
+          disabled={inUseCount > 0}
+          className="btn border border-red-300 bg-white text-red-700 hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {t('delete')}
+        </button>
+      </form>
+    </div>
+  );
+}

src/app/[locale]/admin/products/actions.ts

@@ -0,0 +1,106 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+import { z } from 'zod';
+import { prisma } from '@/lib/prisma';
+import { requireAdmin } from '@/lib/requireAdmin';
+
+// Form coercion: HTML number inputs send strings; we sanitize to int/float.
+const productSchema = z.object({
+  sku: z.string().trim().min(1).max(50),
+  nameSv: z.string().trim().min(1).max(200),
+  nameEn: z.string().trim().min(1).max(200),
+  descriptionSv: z.string().trim().max(2000),
+  descriptionEn: z.string().trim().max(2000),
+  priceSek: z.coerce.number().min(0).max(1_000_000),
+  vatPct: z.coerce.number().min(0).max(100),
+  sortOrder: z.coerce.number().int().min(0).max(10000),
+  active: z.preprocess(
+    (v) => v === 'on' || v === 'true' || v === true,
+    z.boolean(),
+  ),
+});
+
+type Parsed = z.infer<typeof productSchema>;
+
+function toDbFields(d: Parsed) {
+  return {
+    sku: d.sku,
+    nameSv: d.nameSv,
+    nameEn: d.nameEn,
+    descriptionSv: d.descriptionSv,
+    descriptionEn: d.descriptionEn,
+    priceOre: Math.round(d.priceSek * 100),
+    vatBp: Math.round(d.vatPct * 100),
+    sortOrder: d.sortOrder,
+    active: d.active,
+  };
+}
+
+function fromFormData(fd: FormData): Parsed {
+  const obj = {
+    sku: fd.get('sku') ?? '',
+    nameSv: fd.get('nameSv') ?? '',
+    nameEn: fd.get('nameEn') ?? '',
+    descriptionSv: fd.get('descriptionSv') ?? '',
+    descriptionEn: fd.get('descriptionEn') ?? '',
+    priceSek: fd.get('priceSek') ?? 0,
+    vatPct: fd.get('vatPct') ?? 25,
+    sortOrder: fd.get('sortOrder') ?? 0,
+    active: fd.get('active') ?? false,
+  };
+  return productSchema.parse(obj);
+}
+
+export async function createProduct(formData: FormData) {
+  await requireAdmin();
+  const data = fromFormData(formData);
+  await prisma.product.create({ data: toDbFields(data) });
+  revalidatePath('/admin/products');
+  revalidatePath('/');
+  redirect('/admin/products');
+}
+
+export async function updateProduct(formData: FormData) {
+  await requireAdmin();
+  const id = String(formData.get('id') ?? '');
+  if (!id) return;
+  const data = fromFormData(formData);
+  await prisma.product.update({ where: { id }, data: toDbFields(data) });
+  revalidatePath('/admin/products');
+  revalidatePath(`/admin/products/${id}`);
+  revalidatePath('/');
+  redirect('/admin/products');
+}
+
+export async function toggleProductActive(formData: FormData) {
+  await requireAdmin();
+  const id = String(formData.get('id') ?? '');
+  if (!id) return;
+  const cur = await prisma.product.findUnique({ where: { id } });
+  if (!cur) return;
+  await prisma.product.update({
+    where: { id },
+    data: { active: !cur.active },
+  });
+  revalidatePath('/admin/products');
+  revalidatePath('/');
+}
+
+export async function deleteProduct(formData: FormData) {
+  await requireAdmin();
+  const id = String(formData.get('id') ?? '');
+  if (!id) return;
+  // Guard: never delete products that have booking history — would break
+  // invoicing/reporting. Deactivate is the right move there.
+  const inUse = await prisma.bookingItem.count({ where: { productId: id } });
+  if (inUse > 0) {
+    // Soft-redirect with error hint in query.
+    redirect(`/admin/products/${id}?error=in-use&count=${inUse}`);
+  }
+  await prisma.product.delete({ where: { id } });
+  revalidatePath('/admin/products');
+  revalidatePath('/');
+  redirect('/admin/products');
+}

src/app/[locale]/admin/products/new/page.tsx

@@ -0,0 +1,29 @@
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import { requireAdmin } from '@/lib/requireAdmin';
+import { Link } from '@/i18n/routing';
+import { ProductForm } from '@/components/admin/ProductForm';
+import { createProduct } from '../actions';
+
+export default async function NewProductPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  await requireAdmin();
+  const t = await getTranslations('admin.products');
+  const c = await getTranslations('common');
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <Link href="/admin/products" className="btn-ghost text-sm">
+          ← {c('back')}
+        </Link>
+        <h1 className="text-xl font-semibold text-ink-900">{t('new')}</h1>
+      </div>
+      <ProductForm mode="create" action={createProduct} />
+    </div>
+  );
+}

src/app/[locale]/admin/products/page.tsx

@@ -0,0 +1,115 @@
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import { prisma } from '@/lib/prisma';
+import { requireAdmin } from '@/lib/requireAdmin';
+import { Link } from '@/i18n/routing';
+import { formatOre } from '@/lib/money';
+import { toggleProductActive } from './actions';
+
+export const dynamic = 'force-dynamic';
+
+export default async function AdminProductsPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  await requireAdmin();
+  const t = await getTranslations('admin.products');
+  const loc = locale as 'sv' | 'en';
+
+  const products = await prisma.product.findMany({
+    orderBy: [{ active: 'desc' }, { sortOrder: 'asc' }],
+    include: { _count: { select: { bookingItems: true } } },
+  });
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <h1 className="text-xl font-semibold text-ink-900">{t('title')}</h1>
+        <Link href="/admin/products/new" className="btn-primary text-sm">
+          + {t('new')}
+        </Link>
+      </div>
+
+      <div className="card overflow-hidden">
+        {products.length === 0 ? (
+          <div className="p-8 text-center text-sm text-ink-500">
+            {t('empty')}
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead className="bg-ink-50 text-left text-xs uppercase tracking-wide text-ink-500">
+                <tr>
+                  <th className="px-4 py-2.5">{t('columns.sku')}</th>
+                  <th className="px-4 py-2.5">{t('columns.name')}</th>
+                  <th className="px-4 py-2.5 text-right">
+                    {t('columns.price')}
+                  </th>
+                  <th className="px-4 py-2.5 text-right">
+                    {t('columns.vat')}
+                  </th>
+                  <th className="px-4 py-2.5 text-center">
+                    {t('columns.active')}
+                  </th>
+                  <th className="px-4 py-2.5 text-right">
+                    {t('columns.actions')}
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-ink-100">
+                {products.map((p) => (
+                  <tr
+                    key={p.id}
+                    className={`hover:bg-ink-50/50 ${p.active ? '' : 'opacity-60'}`}
+                  >
+                    <td className="px-4 py-2.5 font-mono text-xs">{p.sku}</td>
+                    <td className="px-4 py-2.5">
+                      <div className="font-medium text-ink-900">
+                        {loc === 'sv' ? p.nameSv : p.nameEn}
+                      </div>
+                      <div className="text-xs text-ink-500">
+                        {p._count.bookingItems}{' '}
+                        {loc === 'sv' ? 'bokningar' : 'bookings'}
+                      </div>
+                    </td>
+                    <td className="px-4 py-2.5 text-right tabular-nums">
+                      {formatOre(p.priceOre, loc)}
+                    </td>
+                    <td className="px-4 py-2.5 text-right tabular-nums text-ink-500">
+                      {(p.vatBp / 100).toFixed(0)}%
+                    </td>
+                    <td className="px-4 py-2.5 text-center">
+                      <form action={toggleProductActive} className="inline">
+                        <input type="hidden" name="id" value={p.id} />
+                        <button
+                          type="submit"
+                          className={`badge ${
+                            p.active
+                              ? 'bg-emerald-100 text-emerald-800 hover:bg-emerald-200'
+                              : 'bg-ink-200 text-ink-700 hover:bg-ink-300'
+                          }`}
+                        >
+                          {p.active ? t('active') : t('inactive')}
+                        </button>
+                      </form>
+                    </td>
+                    <td className="px-4 py-2.5 text-right">
+                      <Link
+                        href={`/admin/products/${p.id}`}
+                        className="text-brand-600 hover:underline"
+                      >
+                        {t('edit')} →
+                      </Link>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/[locale]/admin/settings/actions.ts

@@ -0,0 +1,17 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+import { requireAdmin } from '@/lib/requireAdmin';
+import { updateSettings } from '@/lib/settings';
+
+export async function saveSettings(formData: FormData) {
+  await requireAdmin();
+  const pickupEnabled = formData.get('pickupEnabled') === 'on';
+  await updateSettings({ pickupEnabled });
+
+  // Public booking form depends on this — bust its cache.
+  revalidatePath('/', 'layout');
+  revalidatePath('/admin/settings');
+  redirect('/admin/settings?saved=1');
+}

src/app/[locale]/admin/settings/page.tsx

@@ -0,0 +1,58 @@
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import { requireAdmin } from '@/lib/requireAdmin';
+import { getSettings } from '@/lib/settings';
+import { saveSettings } from './actions';
+
+export const dynamic = 'force-dynamic';
+
+export default async function AdminSettingsPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ locale: string }>;
+  searchParams: Promise<{ saved?: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  await requireAdmin();
+  const t = await getTranslations('admin.settings');
+  const { saved } = await searchParams;
+  const settings = await getSettings();
+
+  return (
+    <div className="space-y-4">
+      <h1 className="text-xl font-semibold text-ink-900">{t('title')}</h1>
+
+      {saved && (
+        <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-800">
+          {t('saved')}
+        </div>
+      )}
+
+      <form action={saveSettings} className="card space-y-5 p-5">
+        <label className="flex items-start gap-3">
+          <input
+            type="checkbox"
+            name="pickupEnabled"
+            defaultChecked={settings.pickupEnabled}
+            className="mt-0.5 h-4 w-4 rounded border-ink-300 text-accent-500 focus:ring-accent-400"
+          />
+          <span>
+            <span className="block text-sm font-medium text-ink-900">
+              {t('pickupEnabled')}
+            </span>
+            <span className="mt-0.5 block text-xs text-ink-500">
+              {t('pickupEnabledHint')}
+            </span>
+          </span>
+        </label>
+
+        <div className="flex justify-end border-t border-ink-200 pt-4">
+          <button type="submit" className="btn-primary">
+            {t('save')}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

src/app/[locale]/admin/users/[id]/page.tsx

@@ -0,0 +1,115 @@
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { prisma } from '@/lib/prisma';
+import { requireAdmin } from '@/lib/requireAdmin';
+import { Link } from '@/i18n/routing';
+import {
+  AdminUserForm,
+  PasswordChangeForm,
+} from '@/components/admin/AdminUserForm';
+import {
+  updateAdmin,
+  changeAdminPassword,
+  deleteAdmin,
+} from '../actions';
+
+export const dynamic = 'force-dynamic';
+
+const KNOWN_ERRORS = [
+  'emailInUse',
+  'cannotDeleteSelf',
+  'cannotDeleteLast',
+  'passwordMismatch',
+  'passwordTooShort',
+] as const;
+type ErrorKey = (typeof KNOWN_ERRORS)[number];
+
+const KNOWN_OK = ['passwordChanged'] as const;
+type OkKey = (typeof KNOWN_OK)[number];
+
+export default async function EditAdminUserPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ locale: string; id: string }>;
+  searchParams: Promise<{ error?: string; ok?: string }>;
+}) {
+  const { locale, id } = await params;
+  setRequestLocale(locale);
+  const session = await requireAdmin();
+  const t = await getTranslations('admin.users');
+  const c = await getTranslations('common');
+  const { error, ok } = await searchParams;
+
+  const admin = await prisma.admin.findUnique({
+    where: { id },
+    select: { id: true, name: true, email: true },
+  });
+  if (!admin) notFound();
+
+  const isMe = session.user?.id === admin.id;
+  const adminCount = await prisma.admin.count();
+  const canDelete = !isMe && adminCount > 1;
+
+  const errorKey =
+    error && (KNOWN_ERRORS as readonly string[]).includes(error)
+      ? (error as ErrorKey)
+      : null;
+  const okKey =
+    ok && (KNOWN_OK as readonly string[]).includes(ok) ? (ok as OkKey) : null;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <Link href="/admin/users" className="btn-ghost text-sm">
+          ← {c('back')}
+        </Link>
+        <h1 className="text-xl font-semibold text-ink-900">
+          {t('edit')} ·{' '}
+          <span className="text-ink-600">{admin.name}</span>
+          {isMe && (
+            <span className="ml-2 text-sm font-normal text-accent-600">
+              {t('you')}
+            </span>
+          )}
+        </h1>
+      </div>
+
+      {errorKey && (
+        <div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+          {t(errorKey)}
+        </div>
+      )}
+      {okKey && (
+        <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-800">
+          {t(okKey)}
+        </div>
+      )}
+
+      <AdminUserForm mode="edit" admin={admin} action={updateAdmin} />
+
+      <PasswordChangeForm adminId={admin.id} action={changeAdminPassword} />
+
+      <form
+        action={deleteAdmin}
+        className="flex items-center justify-between gap-3 rounded-lg border border-red-200 bg-red-50/50 p-3 text-sm"
+      >
+        <input type="hidden" name="id" value={admin.id} />
+        <div className="text-red-700">
+          {isMe
+            ? t('cannotDeleteSelf')
+            : adminCount <= 1
+              ? t('cannotDeleteLast')
+              : t('deleteConfirm')}
+        </div>
+        <button
+          type="submit"
+          disabled={!canDelete}
+          className="btn border border-red-300 bg-white text-red-700 hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {t('delete')}
+        </button>
+      </form>
+    </div>
+  );
+}

src/app/[locale]/admin/users/actions.ts

@@ -0,0 +1,147 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+import bcrypt from 'bcryptjs';
+import { z } from 'zod';
+import { prisma } from '@/lib/prisma';
+import { requireAdmin } from '@/lib/requireAdmin';
+import type { Prisma } from '@prisma/client';
+
+const baseFields = z.object({
+  name: z.string().trim().min(1).max(200),
+  email: z.string().trim().toLowerCase().email().max(200),
+});
+
+const passwordField = z
+  .string()
+  .min(8, 'passwordTooShort')
+  .max(200);
+
+const createSchema = baseFields.extend({
+  password: passwordField,
+  passwordConfirm: z.string(),
+}).refine((d) => d.password === d.passwordConfirm, {
+  path: ['passwordConfirm'],
+  message: 'passwordMismatch',
+});
+
+const updateSchema = baseFields;
+
+const passwordChangeSchema = z
+  .object({
+    password: passwordField,
+    passwordConfirm: z.string(),
+  })
+  .refine((d) => d.password === d.passwordConfirm, {
+    path: ['passwordConfirm'],
+    message: 'passwordMismatch',
+  });
+
+function fail(id: string, code: string): never {
+  redirect(`/admin/users/${id}?error=${encodeURIComponent(code)}`);
+}
+
+function failNew(code: string): never {
+  redirect(`/admin/users/new?error=${encodeURIComponent(code)}`);
+}
+
+export async function createAdmin(formData: FormData) {
+  await requireAdmin();
+  const parsed = createSchema.safeParse({
+    name: formData.get('name') ?? '',
+    email: formData.get('email') ?? '',
+    password: formData.get('password') ?? '',
+    passwordConfirm: formData.get('passwordConfirm') ?? '',
+  });
+  if (!parsed.success) {
+    const code = parsed.error.errors[0]?.message ?? 'invalid';
+    failNew(code);
+  }
+  const { name, email, password } = parsed.data;
+
+  try {
+    const hash = await bcrypt.hash(password, 12);
+    await prisma.admin.create({
+      data: { name, email, passwordHash: hash },
+    });
+  } catch (e) {
+    const err = e as Prisma.PrismaClientKnownRequestError;
+    if (err.code === 'P2002') failNew('emailInUse');
+    throw e;
+  }
+
+  revalidatePath('/admin/users');
+  redirect('/admin/users');
+}
+
+export async function updateAdmin(formData: FormData) {
+  await requireAdmin();
+  const id = String(formData.get('id') ?? '');
+  if (!id) return;
+
+  const parsed = updateSchema.safeParse({
+    name: formData.get('name') ?? '',
+    email: formData.get('email') ?? '',
+  });
+  if (!parsed.success) {
+    fail(id, parsed.error.errors[0]?.message ?? 'invalid');
+  }
+
+  try {
+    await prisma.admin.update({
+      where: { id },
+      data: parsed.data,
+    });
+  } catch (e) {
+    const err = e as Prisma.PrismaClientKnownRequestError;
+    if (err.code === 'P2002') fail(id, 'emailInUse');
+    throw e;
+  }
+
+  revalidatePath('/admin/users');
+  revalidatePath(`/admin/users/${id}`);
+  redirect('/admin/users');
+}
+
+export async function changeAdminPassword(formData: FormData) {
+  await requireAdmin();
+  const id = String(formData.get('id') ?? '');
+  if (!id) return;
+
+  const parsed = passwordChangeSchema.safeParse({
+    password: formData.get('password') ?? '',
+    passwordConfirm: formData.get('passwordConfirm') ?? '',
+  });
+  if (!parsed.success) {
+    fail(id, parsed.error.errors[0]?.message ?? 'invalid');
+  }
+
+  const hash = await bcrypt.hash(parsed.data.password, 12);
+  await prisma.admin.update({
+    where: { id },
+    data: { passwordHash: hash },
+  });
+
+  revalidatePath(`/admin/users/${id}`);
+  redirect(`/admin/users/${id}?ok=passwordChanged`);
+}
+
+export async function deleteAdmin(formData: FormData) {
+  const session = await requireAdmin();
+  const id = String(formData.get('id') ?? '');
+  if (!id) return;
+
+  // Two safeguards: you can't lock yourself out, and you can't empty the table.
+  if (session.user?.id === id) {
+    fail(id, 'cannotDeleteSelf');
+  }
+  const count = await prisma.admin.count();
+  if (count <= 1) {
+    fail(id, 'cannotDeleteLast');
+  }
+
+  await prisma.admin.delete({ where: { id } });
+  revalidatePath('/admin/users');
+  redirect('/admin/users');
+}

src/app/[locale]/admin/users/new/page.tsx

@@ -0,0 +1,46 @@
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import { requireAdmin } from '@/lib/requireAdmin';
+import { Link } from '@/i18n/routing';
+import { AdminUserForm } from '@/components/admin/AdminUserForm';
+import { createAdmin } from '../actions';
+
+export default async function NewAdminUserPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ locale: string }>;
+  searchParams: Promise<{ error?: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  await requireAdmin();
+  const t = await getTranslations('admin.users');
+  const c = await getTranslations('common');
+  const { error } = await searchParams;
+
+  const errorKey = error as
+    | 'emailInUse'
+    | 'passwordMismatch'
+    | 'passwordTooShort'
+    | undefined;
+  const errorMsg = errorKey ? t(errorKey) : null;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <Link href="/admin/users" className="btn-ghost text-sm">
+          ← {c('back')}
+        </Link>
+        <h1 className="text-xl font-semibold text-ink-900">{t('new')}</h1>
+      </div>
+
+      {errorMsg && (
+        <div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+          {errorMsg}
+        </div>
+      )}
+
+      <AdminUserForm mode="create" action={createAdmin} />
+    </div>
+  );
+}

src/app/[locale]/admin/users/page.tsx

@@ -0,0 +1,89 @@
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import { prisma } from '@/lib/prisma';
+import { requireAdmin } from '@/lib/requireAdmin';
+import { Link } from '@/i18n/routing';
+
+export const dynamic = 'force-dynamic';
+
+export default async function AdminUsersPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  const session = await requireAdmin();
+  const t = await getTranslations('admin.users');
+  const loc = locale as 'sv' | 'en';
+  const currentUserId = session.user?.id;
+
+  const admins = await prisma.admin.findMany({
+    orderBy: { createdAt: 'asc' },
+    select: { id: true, name: true, email: true, createdAt: true },
+  });
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <h1 className="text-xl font-semibold text-ink-900">{t('title')}</h1>
+        <Link href="/admin/users/new" className="btn-primary text-sm">
+          + {t('new')}
+        </Link>
+      </div>
+
+      <div className="card overflow-hidden">
+        {admins.length === 0 ? (
+          <div className="p-8 text-center text-sm text-ink-500">
+            {t('empty')}
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead className="bg-ink-50 text-left text-xs uppercase tracking-wide text-ink-500">
+                <tr>
+                  <th className="px-4 py-2.5">{t('columns.name')}</th>
+                  <th className="px-4 py-2.5">{t('columns.email')}</th>
+                  <th className="px-4 py-2.5">{t('columns.created')}</th>
+                  <th className="px-4 py-2.5 text-right">
+                    {t('columns.actions')}
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-ink-100">
+                {admins.map((a) => {
+                  const isMe = a.id === currentUserId;
+                  return (
+                    <tr key={a.id} className="hover:bg-ink-50/50">
+                      <td className="px-4 py-2.5 font-medium text-ink-900">
+                        {a.name}
+                        {isMe && (
+                          <span className="ml-2 text-xs font-normal text-accent-600">
+                            {t('you')}
+                          </span>
+                        )}
+                      </td>
+                      <td className="px-4 py-2.5 text-ink-700">{a.email}</td>
+                      <td className="px-4 py-2.5 text-ink-500">
+                        {a.createdAt.toLocaleDateString(
+                          loc === 'sv' ? 'sv-SE' : 'en-SE',
+                        )}
+                      </td>
+                      <td className="px-4 py-2.5 text-right">
+                        <Link
+                          href={`/admin/users/${a.id}`}
+                          className="text-brand-600 hover:underline"
+                        >
+                          {t('edit')} →
+                        </Link>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/[locale]/booking/[number]/page.tsx

@@ -0,0 +1,129 @@
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { prisma } from '@/lib/prisma';
+import { Header } from '@/components/Header';
+import { formatOre } from '@/lib/money';
+import { Link } from '@/i18n/routing';
+
+export default async function BookingConfirmedPage({
+  params,
+}: {
+  params: Promise<{ locale: string; number: string }>;
+}) {
+  const { locale, number } = await params;
+  setRequestLocale(locale);
+  const t = await getTranslations();
+
+  const booking = await prisma.booking.findUnique({
+    where: { bookingNumber: number },
+    include: { items: true, pickupSlot: true },
+  });
+  if (!booking) notFound();
+
+  const loc = locale as 'sv' | 'en';
+
+  return (
+    <div className="min-h-screen bg-ink-50">
+      <Header />
+      <main className="mx-auto max-w-3xl px-4 py-8 sm:py-12">
+        <div className="card overflow-hidden">
+          <div className="bg-brand-600 px-6 py-5 text-white">
+            <div className="flex items-center gap-2 text-sm">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                className="h-5 w-5"
+                aria-hidden="true"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zm4.7-12.3a1 1 0 0 0-1.4-1.4L11 12.6 8.7 10.3a1 1 0 1 0-1.4 1.4l3 3a1 1 0 0 0 1.4 0l5-5z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              <span>{t('booking.success.title')}</span>
+            </div>
+            <div className="mt-3 text-2xl font-semibold">
+              {t('booking.success.bookingNumber', { number: booking.bookingNumber })}
+            </div>
+            <div className="mt-1 text-sm text-white/80">
+              {t('booking.success.subtitle', { email: booking.email })}
+            </div>
+          </div>
+
+          <div className="space-y-6 p-6">
+            <div>
+              <h2 className="text-xs font-medium uppercase tracking-wide text-ink-500">
+                {t('email.orderSummary')}
+              </h2>
+              <table className="mt-2 w-full text-sm">
+                <tbody className="divide-y divide-ink-100">
+                  {booking.items.map((it) => (
+                    <tr key={it.id}>
+                      <td className="py-2">
+                        {loc === 'sv' ? it.nameSv : it.nameEn}
+                        <span className="ml-2 text-ink-400">×{it.quantity}</span>
+                      </td>
+                      <td className="py-2 text-right tabular-nums">
+                        {formatOre(it.lineTotalOre, loc)}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+                <tfoot>
+                  <tr className="border-t border-ink-200">
+                    <td className="pt-2 text-ink-600">
+                      {t('common.subtotal')}
+                    </td>
+                    <td className="pt-2 text-right tabular-nums">
+                      {formatOre(booking.subtotalOre, loc)}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className="text-ink-500">{t('common.ofWhichVat')}</td>
+                    <td className="text-right tabular-nums text-ink-500">
+                      {formatOre(booking.vatOre, loc)}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className="pt-1 font-semibold">{t('common.total')}</td>
+                    <td className="pt-1 text-right font-semibold tabular-nums">
+                      {formatOre(booking.totalOre, loc)}
+                    </td>
+                  </tr>
+                </tfoot>
+              </table>
+            </div>
+
+            {booking.pickupSlot && (
+              <div>
+                <h2 className="text-xs font-medium uppercase tracking-wide text-ink-500">
+                  {t('email.pickup')}
+                </h2>
+                <p className="mt-1 text-sm">
+                  {loc === 'sv'
+                    ? booking.pickupSlot.labelSv
+                    : booking.pickupSlot.labelEn}{' '}
+                  ·{' '}
+                  {booking.pickupSlot.startsAt.toLocaleString(
+                    loc === 'sv' ? 'sv-SE' : 'en-SE',
+                    { dateStyle: 'medium', timeStyle: 'short' },
+                  )}
+                </p>
+              </div>
+            )}
+
+            <div className="rounded-lg bg-ink-50 p-4 text-sm text-ink-600">
+              {t('email.invoiceInfo')}
+            </div>
+
+            <Link href="/" className="btn-secondary w-full justify-center">
+              {t('booking.success.newOrder')}
+            </Link>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

src/app/[locale]/layout.tsx

@@ -0,0 +1,35 @@
+import { NextIntlClientProvider } from 'next-intl';
+import { getMessages, setRequestLocale } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { routing } from '@/i18n/routing';
+
+export function generateStaticParams() {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+
+  if (!routing.locales.includes(locale as 'sv' | 'en')) {
+    notFound();
+  }
+
+  setRequestLocale(locale);
+  const messages = await getMessages();
+
+  return (
+    <html lang={locale}>
+      <body>
+        <NextIntlClientProvider messages={messages} locale={locale}>
+          {children}
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}

src/app/[locale]/page.tsx

@@ -0,0 +1,78 @@
+import { setRequestLocale, getTranslations } from 'next-intl/server';
+import { prisma } from '@/lib/prisma';
+import { getSettings } from '@/lib/settings';
+import { Header } from '@/components/Header';
+import { BookingForm } from '@/components/BookingForm';
+
+// Render fresh so toggling settings, products or slots in admin reflects
+// immediately on the public form. revalidatePath() in admin actions covers
+// most cases, but force-dynamic removes any cache surprise.
+export const dynamic = 'force-dynamic';
+
+export default async function BookingPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  const t = await getTranslations('booking');
+
+  const [products, slotsRaw, settings] = await Promise.all([
+    prisma.product.findMany({
+      where: { active: true },
+      orderBy: { sortOrder: 'asc' },
+    }),
+    prisma.pickupSlot.findMany({
+      where: { active: true, endsAt: { gte: new Date() } },
+      orderBy: { startsAt: 'asc' },
+      include: { _count: { select: { bookings: true } } },
+    }),
+    getSettings(),
+  ]);
+
+  const slots = slotsRaw.map((s) => ({
+    id: s.id,
+    labelSv: s.labelSv,
+    labelEn: s.labelEn,
+    startsAt: s.startsAt.toISOString(),
+    endsAt: s.endsAt.toISOString(),
+    capacityLeft: Math.max(0, s.capacity - s._count.bookings),
+  }));
+
+  return (
+    <div className="min-h-screen bg-ink-50">
+      <Header />
+      <main className="mx-auto max-w-5xl px-4 py-6 sm:py-10">
+        <div className="mb-6">
+          <h1 className="text-2xl font-bold text-ink-900 sm:text-3xl">
+            {t('title')}
+          </h1>
+          <p className="mt-1 max-w-2xl text-sm text-ink-600">{t('intro')}</p>
+        </div>
+        <BookingForm
+          products={products.map((p) => ({
+            id: p.id,
+            sku: p.sku,
+            nameSv: p.nameSv,
+            nameEn: p.nameEn,
+            descriptionSv: p.descriptionSv,
+            descriptionEn: p.descriptionEn,
+            priceOre: p.priceOre,
+            vatBp: p.vatBp,
+          }))}
+          pickupSlots={settings.pickupEnabled ? slots : []}
+          pickupEnabled={settings.pickupEnabled}
+        />
+      </main>
+      <footer className="border-t border-ink-200 bg-white">
+        <div className="mx-auto max-w-5xl px-4 py-6 text-xs text-ink-500">
+          © {new Date().getFullYear()} Gasol247 ·{' '}
+          <a href="https://www.gasol247.com" className="hover:underline">
+            gasol247.com
+          </a>
+        </div>
+      </footer>
+    </div>
+  );
+}

src/app/api/admin/export/route.ts

@@ -0,0 +1,155 @@
+import { NextResponse } from 'next/server';
+import { getSafeSession } from '@/lib/safeAuth';
+import { prisma } from '@/lib/prisma';
+
+// CSV export of bookings for invoicing. One row per booking line item so the
+// receiver can sum across SKUs per customer in their accounting software.
+// Excel-friendly: UTF-8 BOM + ; separator + Windows line endings.
+
+const SEP = ';';
+const EOL = '\r\n';
+
+function csvCell(v: unknown): string {
+  if (v === null || v === undefined) return '';
+  const s = String(v);
+  if (/[";\r\n]/.test(s)) return `"${s.replace(/"/g, '""')}"`;
+  return s;
+}
+
+function row(cells: unknown[]): string {
+  return cells.map(csvCell).join(SEP);
+}
+
+export async function GET(req: Request) {
+  const session = await getSafeSession();
+  if (!session?.user) {
+    return NextResponse.json({ error: 'unauthorized' }, { status: 401 });
+  }
+
+  const url = new URL(req.url);
+  const status = url.searchParams.get('status') ?? undefined;
+  const q = url.searchParams.get('q') ?? undefined;
+  const fromStr = url.searchParams.get('from');
+  const toStr = url.searchParams.get('to');
+
+  const bookings = await prisma.booking.findMany({
+    where: {
+      ...(status && status !== 'all' ? { status } : {}),
+      ...(q
+        ? {
+            OR: [
+              { bookingNumber: { contains: q } },
+              { orgName: { contains: q } },
+              { email: { contains: q } },
+              { contactName: { contains: q } },
+            ],
+          }
+        : {}),
+      ...(fromStr || toStr
+        ? {
+            createdAt: {
+              ...(fromStr ? { gte: new Date(fromStr) } : {}),
+              ...(toStr ? { lte: new Date(toStr) } : {}),
+            },
+          }
+        : {}),
+    },
+    orderBy: { createdAt: 'asc' },
+    include: { items: true, pickupSlot: true },
+  });
+
+  const lines: string[] = [];
+  lines.push(
+    row([
+      'BookingNumber',
+      'BookingDate',
+      'Status',
+      'OrgName',
+      'OrgNumber',
+      'ContactName',
+      'Email',
+      'Phone',
+      'Address',
+      'PostalCode',
+      'City',
+      'Country',
+      'SKU',
+      'Product',
+      'Quantity',
+      'DeliveredQuantity',
+      'ReturnedQuantity',
+      'BillableQuantity',
+      'UnitPriceSEK',
+      'BillableNetSEK',
+      'VATPct',
+      'BillableVatSEK',
+      'BillableTotalSEK',
+      'OrderedNetSEK',
+      'OrderedTotalSEK',
+      'PickupLabel',
+      'PickupStart',
+      'Notes',
+    ]),
+  );
+
+  for (const b of bookings) {
+    for (const it of b.items) {
+      // Billable = handed out − returned. That's what the customer pays for.
+      const billableQty = Math.max(
+        0,
+        it.deliveredQuantity - it.returnedQuantity,
+      );
+      const unitSek = it.unitPriceOre / 100;
+      const billableNet = unitSek * billableQty;
+      const vatPct = it.vatBp / 100;
+      const billableVat = (billableNet * it.vatBp) / 10000;
+      const billableTotal = billableNet + billableVat;
+      const orderedNet = unitSek * it.quantity;
+      const orderedTotal = it.lineTotalOre / 100;
+      const dec = (n: number) => n.toFixed(2).replace('.', ',');
+      lines.push(
+        row([
+          b.bookingNumber,
+          b.createdAt.toISOString(),
+          b.status,
+          b.orgName,
+          b.orgNumber,
+          b.contactName,
+          b.email,
+          b.phone,
+          b.address,
+          b.postalCode,
+          b.city,
+          b.country,
+          it.sku,
+          it.nameSv,
+          it.quantity,
+          it.deliveredQuantity,
+          it.returnedQuantity,
+          billableQty,
+          dec(unitSek),
+          dec(billableNet),
+          dec(vatPct),
+          dec(billableVat),
+          dec(billableTotal),
+          dec(orderedNet),
+          dec(orderedTotal),
+          b.pickupSlot?.labelSv ?? '',
+          b.pickupSlot?.startsAt.toISOString() ?? '',
+          b.notes ?? '',
+        ]),
+      );
+    }
+  }
+
+  const body = '' + lines.join(EOL) + EOL;
+  const date = new Date().toISOString().slice(0, 10);
+  return new NextResponse(body, {
+    status: 200,
+    headers: {
+      'Content-Type': 'text/csv; charset=utf-8',
+      'Content-Disposition': `attachment; filename="bookings-${date}.csv"`,
+      'Cache-Control': 'no-store',
+    },
+  });
+}

src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,3 @@
+import { handlers } from '@/auth';
+
+export const { GET, POST } = handlers;

src/app/api/bookings/route.ts

@@ -0,0 +1,129 @@
+import { NextResponse } from 'next/server';
+import { prisma } from '@/lib/prisma';
+import { bookingSubmitSchema } from '@/lib/validation';
+import { generateBookingNumber } from '@/lib/bookingNumber';
+import { computeTotals, vatAmountOre } from '@/lib/money';
+import { sendBookingConfirmation } from '@/lib/mailjet';
+import { getSettings } from '@/lib/settings';
+import type { Prisma } from '@prisma/client';
+
+export async function POST(req: Request) {
+  let body: unknown;
+  try {
+    body = await req.json();
+  } catch {
+    return NextResponse.json({ error: 'invalid-json' }, { status: 400 });
+  }
+
+  const parsed = bookingSubmitSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: 'validation', issues: parsed.error.flatten() },
+      { status: 400 },
+    );
+  }
+  const input = parsed.data;
+
+  // Pull live products to snapshot prices/names (don't trust client prices).
+  const productIds = input.items.map((i) => i.productId);
+  const products = await prisma.product.findMany({
+    where: { id: { in: productIds }, active: true },
+  });
+  if (products.length !== productIds.length) {
+    return NextResponse.json({ error: 'product-not-found' }, { status: 400 });
+  }
+  const productById = new Map(products.map((p) => [p.id, p]));
+
+  // If admin has globally disabled the pickup step, drop any slot id the
+  // client sent so we don't tie this booking to a possibly-stale slot.
+  const settings = await getSettings();
+  if (!settings.pickupEnabled) {
+    input.pickupSlotId = null;
+  } else if (input.pickupSlotId) {
+    // Validate pickup slot if given
+    const slot = await prisma.pickupSlot.findUnique({
+      where: { id: input.pickupSlotId },
+    });
+    if (!slot || !slot.active) {
+      return NextResponse.json({ error: 'pickup-slot-invalid' }, { status: 400 });
+    }
+  }
+
+  const itemSnapshots = input.items.map((i) => {
+    const p = productById.get(i.productId)!;
+    const lineNet = p.priceOre * i.quantity;
+    const lineVat = vatAmountOre(lineNet, p.vatBp);
+    return {
+      productId: p.id,
+      sku: p.sku,
+      nameSv: p.nameSv,
+      nameEn: p.nameEn,
+      unitPriceOre: p.priceOre,
+      vatBp: p.vatBp,
+      quantity: i.quantity,
+      lineTotalOre: lineNet + lineVat,
+    };
+  });
+
+  const totals = computeTotals(
+    itemSnapshots.map((i) => ({
+      unitPriceOre: i.unitPriceOre,
+      quantity: i.quantity,
+      vatBp: i.vatBp,
+    })),
+  );
+
+  // Insert with retry on unique-number collision (very unlikely with our format).
+  let booking;
+  for (let attempt = 0; attempt < 5; attempt++) {
+    const bookingNumber = generateBookingNumber();
+    try {
+      booking = await prisma.booking.create({
+        data: {
+          bookingNumber,
+          status: 'CONFIRMED',
+          contactName: input.contactName,
+          email: input.email.toLowerCase(),
+          phone: input.phone,
+          orgName: input.orgName,
+          orgNumber: input.orgNumber,
+          address: input.address,
+          postalCode: input.postalCode,
+          city: input.city,
+          country: input.country,
+          pickupSlotId: input.pickupSlotId ?? null,
+          notes: input.notes ?? null,
+          locale: input.locale,
+          subtotalOre: totals.subtotalOre,
+          vatOre: totals.vatOre,
+          totalOre: totals.totalOre,
+          items: { create: itemSnapshots },
+        },
+        include: { items: true, pickupSlot: true },
+      });
+      break;
+    } catch (e) {
+      const err = e as Prisma.PrismaClientKnownRequestError;
+      if (err.code === 'P2002') continue; // unique violation — retry with new number
+      throw e;
+    }
+  }
+
+  if (!booking) {
+    return NextResponse.json(
+      { error: 'could-not-generate-booking-number' },
+      { status: 500 },
+    );
+  }
+
+  // Send confirmation email (best-effort — don't fail the booking if email fails).
+  const mail = await sendBookingConfirmation(booking);
+  if (!mail.ok) {
+    console.warn('[bookings] confirmation email not sent:', mail.error);
+  }
+
+  return NextResponse.json({
+    bookingNumber: booking.bookingNumber,
+    emailSent: mail.ok,
+  });
+}

src/app/globals.css

@@ -0,0 +1,57 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: light;
+}
+
+html,
+body {
+  background: #fffaf5;
+  color: theme('colors.ink.900');
+  -webkit-font-smoothing: antialiased;
+}
+
+@layer components {
+  .btn {
+    @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50;
+  }
+  .btn-primary {
+    @apply btn bg-brand-600 text-white hover:bg-brand-700 active:bg-brand-800
+           focus:outline-none focus:ring-2 focus:ring-accent-300 focus:ring-offset-2;
+  }
+  .btn-secondary {
+    @apply btn border border-ink-200 bg-white text-ink-800 hover:bg-ink-50
+           focus:outline-none focus:ring-2 focus:ring-accent-300;
+  }
+  .btn-ghost {
+    @apply btn text-ink-700 hover:bg-ink-100
+           focus:outline-none focus:ring-2 focus:ring-accent-300;
+  }
+  .input {
+    @apply w-full rounded-lg border border-ink-200 bg-white px-3 py-2.5 text-sm text-ink-900 placeholder:text-ink-400
+           focus:border-accent-400 focus:outline-none focus:ring-2 focus:ring-accent-300/40;
+  }
+  .label {
+    @apply block text-sm font-medium text-ink-700;
+  }
+  .card {
+    @apply rounded-xl border border-ink-200 bg-white shadow-card;
+  }
+  .badge {
+    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
+  }
+  /* Numeric input with no spinner — used for quantity boxes. */
+  .num-input {
+    @apply w-14 rounded-md border border-ink-200 bg-white py-1.5 text-center text-sm font-medium tabular-nums
+           focus:border-accent-400 focus:outline-none focus:ring-2 focus:ring-accent-300/40;
+    appearance: textfield;
+    -moz-appearance: textfield;
+  }
+  .num-input::-webkit-outer-spin-button,
+  .num-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}

src/app/layout.tsx

@@ -0,0 +1,14 @@
+import './globals.css';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: {
+    default: 'Gasol247 Bokning',
+    template: '%s — Gasol247 Bokning',
+  },
+  description: 'Boka gasoltuber till Jamboree-lägret.',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return children;
+}

src/auth.config.ts

@@ -0,0 +1,28 @@
+import type { NextAuthConfig } from 'next-auth';
+
+// Edge-compatible part of the auth config. No DB calls here — those go in auth.ts.
+export const authConfig = {
+  pages: {
+    signIn: '/admin/login',
+  },
+  callbacks: {
+    async jwt({ token, user }) {
+      if (user) {
+        token.id = user.id;
+        token.email = user.email;
+        token.name = user.name;
+      }
+      return token;
+    },
+    async session({ session, token }) {
+      if (token && session.user) {
+        session.user.id = token.id as string;
+        session.user.email = token.email as string;
+        session.user.name = token.name as string;
+      }
+      return session;
+    },
+  },
+  providers: [],
+  session: { strategy: 'jwt' },
+} satisfies NextAuthConfig;

src/auth.ts

@@ -0,0 +1,42 @@
+import NextAuth from 'next-auth';
+import Credentials from 'next-auth/providers/credentials';
+import bcrypt from 'bcryptjs';
+import { z } from 'zod';
+import { authConfig } from './auth.config';
+import { prisma } from './lib/prisma';
+
+const loginSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(1),
+});
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+  ...authConfig,
+  providers: [
+    Credentials({
+      credentials: {
+        email: { label: 'E-post', type: 'email' },
+        password: { label: 'Lösenord', type: 'password' },
+      },
+      async authorize(credentials) {
+        const parsed = loginSchema.safeParse(credentials);
+        if (!parsed.success) return null;
+
+        const { email, password } = parsed.data;
+        const admin = await prisma.admin.findUnique({
+          where: { email: email.toLowerCase() },
+        });
+        if (!admin) return null;
+
+        const ok = await bcrypt.compare(password, admin.passwordHash);
+        if (!ok) return null;
+
+        return {
+          id: admin.id,
+          email: admin.email,
+          name: admin.name,
+        };
+      },
+    }),
+  ],
+});

src/components/BookingForm.tsx

@@ -0,0 +1,825 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslations, useLocale } from 'next-intl';
+import { useRouter } from '@/i18n/routing';
+import { formatOre, computeTotals, priceInclVatOre } from '@/lib/money';
+import { isValidSeOrgNumber } from '@/lib/orgNumber';
+import { useBookingStore, type Step } from '@/lib/bookingStore';
+
+type Product = {
+  id: string;
+  sku: string;
+  nameSv: string;
+  nameEn: string;
+  descriptionSv: string;
+  descriptionEn: string;
+  priceOre: number;
+  vatBp: number;
+};
+
+type PickupSlot = {
+  id: string;
+  labelSv: string;
+  labelEn: string;
+  startsAt: string;
+  endsAt: string;
+  capacityLeft: number;
+};
+
+const ALL_STEPS: Step[] = ['products', 'details', 'pickup', 'review'];
+
+export function BookingForm({
+  products,
+  pickupSlots,
+  pickupEnabled,
+}: {
+  products: Product[];
+  pickupSlots: PickupSlot[];
+  pickupEnabled: boolean;
+}) {
+  // Step list adapts to whether pickup is enabled at all.
+  const STEPS: Step[] = pickupEnabled
+    ? ALL_STEPS
+    : ALL_STEPS.filter((s) => s !== 'pickup');
+  const t = useTranslations('booking');
+  const c = useTranslations('common');
+  const locale = useLocale() as 'sv' | 'en';
+  const router = useRouter();
+
+  // Persisted state — survives language switch and tab refresh.
+  const store = useBookingStore();
+  const {
+    step,
+    quantities,
+    contactName,
+    email,
+    phone,
+    orgName,
+    orgNumber,
+    address,
+    postalCode,
+    city,
+    country,
+    pickupSlotId,
+    notes,
+    setStep,
+    setQuantity,
+    patch,
+    reset,
+  } = store;
+
+  // Confirm checkbox is intentionally not persisted; keep local.
+  const [confirm, setConfirm] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  // Avoid hydration mismatch: don't render store-backed UI until mounted.
+  const [hydrated, setHydrated] = useState(false);
+  useEffect(() => setHydrated(true), []);
+
+  // If the persisted step no longer exists (admin toggled pickup off mid-flow),
+  // bump back to the closest still-valid step.
+  useEffect(() => {
+    if (!STEPS.includes(step)) {
+      setStep('products');
+    }
+  }, [step, STEPS, setStep]);
+
+  const selectedItems = useMemo(() => {
+    return products
+      .map((p) => {
+        const qty = quantities[p.id] ?? 0;
+        return qty > 0
+          ? {
+              product: p,
+              quantity: qty,
+              unitPriceOre: p.priceOre,
+              vatBp: p.vatBp,
+            }
+          : null;
+      })
+      .filter((x): x is NonNullable<typeof x> => x !== null);
+  }, [products, quantities]);
+
+  const totals = useMemo(
+    () =>
+      computeTotals(
+        selectedItems.map((i) => ({
+          unitPriceOre: i.unitPriceOre,
+          quantity: i.quantity,
+          vatBp: i.vatBp,
+        })),
+      ),
+    [selectedItems],
+  );
+
+  const stepIndex = STEPS.indexOf(step);
+
+  // Per-step validity. Used both for the Next button and for deciding which
+  // step boxes are clickable.
+  const isStepValid = (s: Step): boolean => {
+    if (s === 'products') return selectedItems.length > 0;
+    if (s === 'details') {
+      return (
+        contactName.trim().length >= 2 &&
+        /^\S+@\S+\.\S+$/.test(email) &&
+        phone.trim().length >= 5 &&
+        orgName.trim().length >= 2 &&
+        isValidSeOrgNumber(orgNumber) &&
+        address.trim().length >= 2 &&
+        postalCode.trim().length >= 3 &&
+        city.trim().length >= 1
+      );
+    }
+    if (s === 'pickup') return true; // optional
+    if (s === 'review') return confirm;
+    return true;
+  };
+
+  const canGoNext = (): boolean => isStepValid(step);
+
+  // A target step is reachable if you go backwards, or if all earlier steps
+  // are valid (so you can jump ahead in a wizard).
+  const canReachStep = (target: Step): boolean => {
+    const targetIdx = STEPS.indexOf(target);
+    if (targetIdx <= stepIndex) return true;
+    for (let i = 0; i < targetIdx; i++) {
+      if (!isStepValid(STEPS[i])) return false;
+    }
+    return true;
+  };
+
+  const goToStep = (target: Step) => {
+    if (canReachStep(target)) setStep(target);
+  };
+
+  const goNext = () => {
+    const idx = STEPS.indexOf(step);
+    if (idx < STEPS.length - 1) setStep(STEPS[idx + 1]);
+  };
+  const goPrev = () => {
+    const idx = STEPS.indexOf(step);
+    if (idx > 0) setStep(STEPS[idx - 1]);
+  };
+
+  const submit = async () => {
+    setSubmitting(true);
+    setSubmitError(null);
+    try {
+      const payload = {
+        contactName,
+        email,
+        phone,
+        orgName,
+        orgNumber,
+        address,
+        postalCode,
+        city,
+        country,
+        // Drop any pickup slot the user might have selected before admin
+        // disabled the step.
+        pickupSlotId: pickupEnabled ? pickupSlotId : null,
+        notes: notes || null,
+        locale,
+        items: selectedItems.map((i) => ({
+          productId: i.product.id,
+          quantity: i.quantity,
+        })),
+      };
+      const res = await fetch('/api/bookings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data?.error ?? 'submitFailed');
+      }
+      const data = (await res.json()) as { bookingNumber: string };
+      reset();
+      router.push(`/booking/${data.bookingNumber}`);
+    } catch {
+      setSubmitError(t('errors.submitFailed'));
+      setSubmitting(false);
+    }
+  };
+
+  // Render a stable placeholder before hydration so SSR markup matches.
+  if (!hydrated) {
+    return (
+      <div className="space-y-6">
+        <StepIndicator
+          steps={STEPS}
+          step="products"
+          goToStep={() => {}}
+          canReachStep={() => false}
+        />
+        <div className="card p-6 text-sm text-ink-500">…</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <StepIndicator
+        steps={STEPS}
+        step={step}
+        goToStep={goToStep}
+        canReachStep={canReachStep}
+      />
+
+      <div className="card p-4 sm:p-6">
+        {step === 'products' && (
+          <section>
+            <h2 className="text-lg font-semibold text-ink-900">
+              {t('products.title')}
+            </h2>
+            <p className="mt-1 text-sm text-ink-500">{t('products.subtitle')}</p>
+            <div className="mt-4 space-y-3">
+              {products.map((p) => {
+                const qty = quantities[p.id] ?? 0;
+                return (
+                  <div
+                    key={p.id}
+                    className={`flex flex-col gap-3 rounded-lg border p-4 transition-colors sm:flex-row sm:items-center sm:justify-between ${
+                      qty > 0
+                        ? 'border-accent-300 bg-accent-50/40'
+                        : 'border-ink-200'
+                    }`}
+                  >
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2">
+                        <div className="font-medium text-ink-900">
+                          {locale === 'sv' ? p.nameSv : p.nameEn}
+                        </div>
+                        <span className="badge bg-ink-100 text-ink-600">
+                          {p.sku}
+                        </span>
+                      </div>
+                      <p className="mt-1 text-sm text-ink-500">
+                        {locale === 'sv' ? p.descriptionSv : p.descriptionEn}
+                      </p>
+                      <div className="mt-2 flex flex-wrap items-baseline gap-x-3 gap-y-1">
+                        <div className="text-sm font-medium text-ink-700">
+                          {formatOre(priceInclVatOre(p.priceOre, p.vatBp), locale)}
+                          <span className="text-ink-400">
+                            {' '}
+                            {t('products.perUnit')}
+                          </span>
+                          <span className="ml-1 text-xs text-ink-400">
+                            ({c('inclVat')})
+                          </span>
+                        </div>
+                        {qty > 0 && (
+                          <div className="text-sm font-semibold text-brand-700 tabular-nums">
+                            ={' '}
+                            {formatOre(
+                              priceInclVatOre(p.priceOre, p.vatBp) * qty,
+                              locale,
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2 self-end sm:self-auto">
+                      <button
+                        type="button"
+                        onClick={() => setQuantity(p.id, qty - 1)}
+                        disabled={qty === 0}
+                        className="btn-secondary !px-3 !py-2"
+                        aria-label={`-1 ${p.sku}`}
+                      >
+                        −
+                      </button>
+                      <input
+                        type="number"
+                        inputMode="numeric"
+                        min={0}
+                        max={999}
+                        value={qty}
+                        onChange={(e) => {
+                          const n = parseInt(e.target.value, 10);
+                          setQuantity(p.id, Number.isFinite(n) ? n : 0);
+                        }}
+                        onFocus={(e) => e.currentTarget.select()}
+                        className="num-input"
+                        aria-label={`${c('quantity')} ${p.sku}`}
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setQuantity(p.id, qty + 1)}
+                        className="btn-primary !px-3 !py-2"
+                        aria-label={`+1 ${p.sku}`}
+                      >
+                        +
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            {selectedItems.length === 0 && (
+              <p className="mt-3 text-sm text-ink-500">
+                {t('products.noneSelected')}
+              </p>
+            )}
+          </section>
+        )}
+
+        {step === 'details' && (
+          <section className="space-y-6">
+            <h2 className="text-lg font-semibold text-ink-900">
+              {t('details.title')}
+            </h2>
+
+            <div>
+              <h3 className="text-sm font-medium text-ink-700">
+                {t('details.organization')}
+              </h3>
+              <div className="mt-3 grid gap-3 sm:grid-cols-2">
+                <Field
+                  label={t('details.orgName')}
+                  required
+                  value={orgName}
+                  onChange={(v) => patch({ orgName: v })}
+                  placeholder={t('details.orgNamePlaceholder')}
+                />
+                <Field
+                  label={t('details.orgNumber')}
+                  required
+                  value={orgNumber}
+                  onChange={(v) => patch({ orgNumber: v })}
+                  placeholder={t('details.orgNumberPlaceholder')}
+                  error={
+                    orgNumber.length > 0 && !isValidSeOrgNumber(orgNumber)
+                      ? t('errors.invalidOrgNumber')
+                      : undefined
+                  }
+                />
+              </div>
+            </div>
+
+            <div>
+              <h3 className="text-sm font-medium text-ink-700">
+                {t('details.contact')}
+              </h3>
+              <div className="mt-3 grid gap-3 sm:grid-cols-2">
+                <Field
+                  label={t('details.contactName')}
+                  required
+                  value={contactName}
+                  onChange={(v) => patch({ contactName: v })}
+                  placeholder={t('details.contactNamePlaceholder')}
+                />
+                <Field
+                  label={t('details.email')}
+                  required
+                  type="email"
+                  value={email}
+                  onChange={(v) => patch({ email: v })}
+                  placeholder={t('details.emailPlaceholder')}
+                  error={
+                    email.length > 0 && !/^\S+@\S+\.\S+$/.test(email)
+                      ? t('errors.invalidEmail')
+                      : undefined
+                  }
+                />
+                <Field
+                  label={t('details.phone')}
+                  required
+                  value={phone}
+                  onChange={(v) => patch({ phone: v })}
+                  placeholder={t('details.phonePlaceholder')}
+                  type="tel"
+                />
+              </div>
+            </div>
+
+            <div>
+              <h3 className="text-sm font-medium text-ink-700">
+                {t('details.invoiceAddress')}
+              </h3>
+              <div className="mt-3 grid gap-3 sm:grid-cols-2">
+                <div className="sm:col-span-2">
+                  <Field
+                    label={t('details.address')}
+                    required
+                    value={address}
+                    onChange={(v) => patch({ address: v })}
+                  />
+                </div>
+                <Field
+                  label={t('details.postalCode')}
+                  required
+                  value={postalCode}
+                  onChange={(v) => patch({ postalCode: v })}
+                />
+                <Field
+                  label={t('details.city')}
+                  required
+                  value={city}
+                  onChange={(v) => patch({ city: v })}
+                />
+              </div>
+            </div>
+          </section>
+        )}
+
+        {step === 'pickup' && (
+          <section>
+            <h2 className="text-lg font-semibold text-ink-900">
+              {t('pickup.title')}
+            </h2>
+            <p className="mt-1 text-sm text-ink-500">{t('pickup.subtitle')}</p>
+
+            {pickupSlots.length === 0 ? (
+              <p className="mt-4 text-sm text-ink-500">{t('pickup.noSlots')}</p>
+            ) : (
+              <div className="mt-4 grid gap-3 sm:grid-cols-2">
+                {pickupSlots.map((s) => {
+                  const selected = pickupSlotId === s.id;
+                  return (
+                    <button
+                      key={s.id}
+                      type="button"
+                      onClick={() =>
+                        patch({ pickupSlotId: selected ? null : s.id })
+                      }
+                      className={`rounded-lg border p-4 text-left transition-colors ${
+                        selected
+                          ? 'border-accent-400 bg-accent-50/40 ring-2 ring-accent-300/40'
+                          : 'border-ink-200 bg-white hover:bg-ink-50'
+                      }`}
+                    >
+                      <div className="font-medium text-ink-900">
+                        {locale === 'sv' ? s.labelSv : s.labelEn}
+                      </div>
+                      <div className="mt-1 text-xs text-ink-500">
+                        {new Date(s.startsAt).toLocaleString(
+                          locale === 'sv' ? 'sv-SE' : 'en-SE',
+                          { dateStyle: 'medium', timeStyle: 'short' },
+                        )}
+                        {' – '}
+                        {new Date(s.endsAt).toLocaleString(
+                          locale === 'sv' ? 'sv-SE' : 'en-SE',
+                          { timeStyle: 'short' },
+                        )}
+                      </div>
+                      <div className="mt-2 text-xs text-ink-500">
+                        {t('pickup.capacity', { count: s.capacityLeft })}
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+
+            <div className="mt-6">
+              <label className="label" htmlFor="notes">
+                {t('notes.label')}
+              </label>
+              <textarea
+                id="notes"
+                className="input mt-1 min-h-24"
+                placeholder={t('notes.placeholder')}
+                value={notes}
+                onChange={(e) => patch({ notes: e.target.value })}
+              />
+            </div>
+          </section>
+        )}
+
+        {step === 'review' && (
+          <section className="space-y-4">
+            <h2 className="text-lg font-semibold text-ink-900">
+              {t('review.title')}
+            </h2>
+
+            <ReviewSection
+              title={c('subtotal')}
+              rows={selectedItems.map((i) => ({
+                left: `${i.quantity} × ${locale === 'sv' ? i.product.nameSv : i.product.nameEn}`,
+                right: formatOre(
+                  priceInclVatOre(i.unitPriceOre, i.vatBp) * i.quantity,
+                  locale,
+                ),
+              }))}
+              footer={
+                <>
+                  <Row
+                    label={`${c('subtotal')} (${c('exclVat')})`}
+                    value={formatOre(totals.subtotalOre, locale)}
+                    muted
+                  />
+                  <Row
+                    label={c('ofWhichVat')}
+                    value={formatOre(totals.vatOre, locale)}
+                    muted
+                  />
+                  <Row
+                    label={`${c('total')} (${c('inclVat')})`}
+                    value={formatOre(totals.totalOre, locale)}
+                    bold
+                  />
+                </>
+              }
+            />
+
+            <ReviewSection
+              title={t('details.organization')}
+              rows={[
+                { left: t('details.orgName'), right: orgName },
+                { left: t('details.orgNumber'), right: orgNumber },
+              ]}
+            />
+            <ReviewSection
+              title={t('details.contact')}
+              rows={[
+                { left: t('details.contactName'), right: contactName },
+                { left: t('details.email'), right: email },
+                { left: t('details.phone'), right: phone },
+              ]}
+            />
+            <ReviewSection
+              title={t('details.invoiceAddress')}
+              rows={[
+                { left: t('details.address'), right: address },
+                {
+                  left: `${t('details.postalCode')} / ${t('details.city')}`,
+                  right: `${postalCode} ${city}`,
+                },
+              ]}
+            />
+
+            {pickupEnabled && pickupSlotId && (
+              <ReviewSection
+                title={t('pickup.title')}
+                rows={(() => {
+                  const slot = pickupSlots.find((s) => s.id === pickupSlotId);
+                  if (!slot) return [];
+                  return [
+                    {
+                      left: locale === 'sv' ? slot.labelSv : slot.labelEn,
+                      right: new Date(slot.startsAt).toLocaleString(
+                        locale === 'sv' ? 'sv-SE' : 'en-SE',
+                        { dateStyle: 'medium', timeStyle: 'short' },
+                      ),
+                    },
+                  ];
+                })()}
+              />
+            )}
+
+            <label className="flex items-start gap-3 rounded-lg border border-ink-200 bg-ink-50/50 p-3 text-sm">
+              <input
+                type="checkbox"
+                checked={confirm}
+                onChange={(e) => setConfirm(e.target.checked)}
+                className="mt-0.5 h-4 w-4 rounded border-ink-300 text-accent-500 focus:ring-accent-400"
+              />
+              <span>{t('review.confirm')}</span>
+            </label>
+
+            {submitError && (
+              <div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+                {submitError}
+              </div>
+            )}
+          </section>
+        )}
+      </div>
+
+      <SummaryBar
+        totals={totals}
+        itemCount={selectedItems.reduce((acc, i) => acc + i.quantity, 0)}
+        locale={locale}
+      />
+
+      <div className="flex items-center justify-between gap-3">
+        <button
+          type="button"
+          onClick={goPrev}
+          disabled={stepIndex === 0 || submitting}
+          className="btn-secondary"
+        >
+          ← {t('previous')}
+        </button>
+        {step !== 'review' ? (
+          <button
+            type="button"
+            onClick={goNext}
+            disabled={!canGoNext()}
+            className="btn-primary"
+          >
+            {t('next')} →
+          </button>
+        ) : (
+          <button
+            type="button"
+            onClick={submit}
+            disabled={!canGoNext() || submitting}
+            className="btn-primary"
+          >
+            {submitting ? t('review.submitting') : c('submit')}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function StepIndicator({
+  steps,
+  step,
+  goToStep,
+  canReachStep,
+}: {
+  steps: Step[];
+  step: Step;
+  goToStep: (s: Step) => void;
+  canReachStep: (s: Step) => boolean;
+}) {
+  const t = useTranslations('booking');
+  const longLabels: Record<Step, string> = {
+    products: t('stepProducts'),
+    details: t('stepDetails'),
+    pickup: t('stepPickup'),
+    review: t('stepReview'),
+  };
+  const currentIdx = steps.indexOf(step);
+  // Mobile: 2-up grid (with 3 steps, last cell wraps to its own row — that's
+  // intentional, it puts emphasis on the final step). sm+: one row.
+  const desktopCols = steps.length === 4 ? 'sm:grid-cols-4' : 'sm:grid-cols-3';
+
+  return (
+    <div className="space-y-2">
+      <ol className={`grid grid-cols-2 gap-1.5 ${desktopCols} sm:gap-2`}>
+        {steps.map((s, i) => {
+          const active = s === step;
+          const done = i < currentIdx;
+          const reachable = canReachStep(s);
+          return (
+            <li key={s}>
+              <button
+                type="button"
+                onClick={() => goToStep(s)}
+                disabled={!reachable}
+                aria-current={active ? 'step' : undefined}
+                className={`flex w-full items-center gap-2 rounded-lg border p-2 text-left transition-colors sm:gap-3 ${
+                  active
+                    ? 'border-accent-400 bg-accent-50/60 text-accent-700'
+                    : done
+                      ? 'border-brand-300 bg-brand-50/40 text-brand-700 hover:bg-brand-50'
+                      : reachable
+                        ? 'border-ink-200 bg-white text-ink-600 hover:bg-ink-50'
+                        : 'cursor-not-allowed border-ink-200 bg-white text-ink-300'
+                } ${reachable ? '' : 'opacity-70'}`}
+              >
+                <span
+                  className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold sm:h-7 sm:w-7 ${
+                    active
+                      ? 'bg-accent-400 text-white'
+                      : done
+                        ? 'bg-brand-600 text-white'
+                        : 'bg-ink-100 text-ink-500'
+                  }`}
+                  aria-hidden
+                >
+                  {done ? '✓' : i + 1}
+                </span>
+                <span className="min-w-0 flex-1 truncate text-xs font-medium leading-tight">
+                  {longLabels[s]}
+                </span>
+              </button>
+            </li>
+          );
+        })}
+      </ol>
+      <p className="text-center text-xs text-ink-500 sm:hidden">
+        {t('stepOf', { current: currentIdx + 1, total: steps.length })} ·{' '}
+        <span className="font-medium text-ink-700">{longLabels[step]}</span>
+      </p>
+    </div>
+  );
+}
+
+function Field({
+  label,
+  value,
+  onChange,
+  required,
+  placeholder,
+  type = 'text',
+  error,
+}: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  required?: boolean;
+  placeholder?: string;
+  type?: string;
+  error?: string;
+}) {
+  return (
+    <div>
+      <label className="label">
+        {label}
+        {required && <span className="ml-1 text-accent-600">*</span>}
+      </label>
+      <input
+        type={type}
+        className="input mt-1"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        required={required}
+      />
+      {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
+    </div>
+  );
+}
+
+function ReviewSection({
+  title,
+  rows,
+  footer,
+}: {
+  title: string;
+  rows: { left: string; right: string }[];
+  footer?: React.ReactNode;
+}) {
+  return (
+    <div className="rounded-lg border border-ink-200">
+      <div className="border-b border-ink-200 bg-ink-50/50 px-4 py-2 text-xs font-medium uppercase tracking-wide text-ink-500">
+        {title}
+      </div>
+      <div className="divide-y divide-ink-100">
+        {rows.map((r, i) => (
+          <div
+            key={i}
+            className="flex items-center justify-between px-4 py-2 text-sm"
+          >
+            <span className="text-ink-600">{r.left}</span>
+            <span className="text-ink-900">{r.right}</span>
+          </div>
+        ))}
+        {footer && <div className="bg-ink-50/30 px-4 py-2">{footer}</div>}
+      </div>
+    </div>
+  );
+}
+
+function Row({
+  label,
+  value,
+  muted,
+  bold,
+}: {
+  label: string;
+  value: string;
+  muted?: boolean;
+  bold?: boolean;
+}) {
+  return (
+    <div
+      className={`flex justify-between text-sm ${muted ? 'text-ink-500' : 'text-ink-900'} ${bold ? 'font-semibold' : ''}`}
+    >
+      <span>{label}</span>
+      <span className="tabular-nums">{value}</span>
+    </div>
+  );
+}
+
+function SummaryBar({
+  totals,
+  itemCount,
+  locale,
+}: {
+  totals: { subtotalOre: number; vatOre: number; totalOre: number };
+  itemCount: number;
+  locale: 'sv' | 'en';
+}) {
+  const c = useTranslations('common');
+  if (itemCount === 0) return null;
+  return (
+    <div className="rounded-lg border-2 border-brand-600 bg-white px-4 py-3 text-sm shadow-card">
+      <div className="flex items-center justify-between">
+        <span className="text-ink-600">
+          {itemCount} {c('quantity').toLowerCase()}
+        </span>
+        <div className="text-right">
+          <div className="text-lg font-semibold tabular-nums text-brand-700">
+            {formatOre(totals.totalOre, locale)}
+          </div>
+          <div className="text-[10px] uppercase tracking-wide text-ink-400">
+            {c('inclVat')}
+          </div>
+        </div>
+      </div>
+      <div className="text-xs text-ink-400">
+        {c('ofWhichVat')} {formatOre(totals.vatOre, locale)}
+      </div>
+    </div>
+  );
+}

src/components/Header.tsx

@@ -0,0 +1,35 @@
+import Image from 'next/image';
+import { useTranslations } from 'next-intl';
+import { LanguageSwitcher } from './LanguageSwitcher';
+
+export function Header() {
+  const t = useTranslations('header');
+  const c = useTranslations('common');
+  return (
+    <header className="border-b border-brand-700 bg-brand-600 text-white">
+      <div className="mx-auto flex max-w-5xl items-center justify-between gap-3 px-4 py-3 sm:py-5">
+        <div className="flex min-w-0 items-center gap-3">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-white p-1 shadow-sm sm:h-12 sm:w-12 sm:p-1.5">
+            <Image
+              src="/gasol247-logo.png"
+              alt="Gasol247"
+              width={48}
+              height={62}
+              priority
+              className="h-full w-auto object-contain"
+            />
+          </div>
+          <div className="min-w-0">
+            <div className="truncate text-sm font-semibold sm:text-base">
+              {c('siteName')}
+            </div>
+            <div className="truncate text-xs text-white/80">
+              {t('tagline')}
+            </div>
+          </div>
+        </div>
+        <LanguageSwitcher />
+      </div>
+    </header>
+  );
+}

src/components/LanguageSwitcher.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useRouter, usePathname } from '@/i18n/routing';
+import { useParams } from 'next/navigation';
+
+export function LanguageSwitcher() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = useParams();
+  const current = (params?.locale as string) ?? 'sv';
+
+  const switchTo = (next: 'sv' | 'en') => {
+    router.replace(pathname, { locale: next });
+  };
+
+  return (
+    <div
+      className="inline-flex shrink-0 overflow-hidden rounded-lg border border-white/20 bg-white/10 text-xs font-medium backdrop-blur-sm"
+      role="group"
+      aria-label="Language switcher"
+    >
+      <button
+        type="button"
+        onClick={() => switchTo('sv')}
+        className={`px-3 py-1.5 transition-colors ${
+          current === 'sv'
+            ? 'bg-accent-300 text-brand-900'
+            : 'text-white hover:bg-white/10'
+        }`}
+      >
+        SV
+      </button>
+      <button
+        type="button"
+        onClick={() => switchTo('en')}
+        className={`px-3 py-1.5 transition-colors ${
+          current === 'en'
+            ? 'bg-accent-300 text-brand-900'
+            : 'text-white hover:bg-white/10'
+        }`}
+      >
+        EN
+      </button>
+    </div>
+  );
+}

src/components/StatusBadge.tsx

@@ -0,0 +1,32 @@
+import { useTranslations } from 'next-intl';
+
+const COLORS: Record<string, string> = {
+  PENDING: 'bg-amber-100 text-amber-800',
+  CONFIRMED: 'bg-sky-100 text-sky-800',
+  DELIVERED_PARTIAL: 'bg-blue-100 text-blue-800',
+  DELIVERED: 'bg-emerald-100 text-emerald-800',
+  RETURNED_PARTIAL: 'bg-teal-100 text-teal-800',
+  RETURNED: 'bg-slate-200 text-slate-800',
+  INVOICED: 'bg-violet-100 text-violet-800',
+  CANCELLED: 'bg-ink-200 text-ink-700',
+};
+
+const KNOWN = new Set([
+  'PENDING',
+  'CONFIRMED',
+  'DELIVERED_PARTIAL',
+  'DELIVERED',
+  'RETURNED_PARTIAL',
+  'RETURNED',
+  'INVOICED',
+  'CANCELLED',
+] as const);
+
+type Known = Parameters<typeof KNOWN.has>[0];
+
+export function StatusBadge({ status }: { status: string }) {
+  const t = useTranslations('admin.bookings.status');
+  const cls = COLORS[status] ?? 'bg-ink-100 text-ink-700';
+  const label = KNOWN.has(status as Known) ? t(status as Known) : status;
+  return <span className={`badge ${cls}`}>{label}</span>;
+}

src/components/admin/AdminFilters.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useEffect, useState, useTransition } from 'react';
+import { useRouter, useSearchParams, usePathname } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+
+// Debounced filter bar — writes search and status to the URL, which the
+// server component re-reads. No submit button.
+export function AdminFilters() {
+  const t = useTranslations('admin.bookings');
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [, startTransition] = useTransition();
+
+  const initialQ = searchParams.get('q') ?? '';
+  const initialStatus = searchParams.get('status') ?? 'all';
+
+  const [q, setQ] = useState(initialQ);
+  const [status, setStatus] = useState(initialStatus);
+
+  // Debounced URL push when q changes.
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      const next = new URLSearchParams(searchParams.toString());
+      if (q) next.set('q', q);
+      else next.delete('q');
+      // Reset to page 1 when filter changes.
+      next.delete('page');
+      startTransition(() => {
+        router.replace(`${pathname}?${next.toString()}`, { scroll: false });
+      });
+    }, 250);
+    return () => clearTimeout(handle);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [q]);
+
+  const onStatusChange = (next: string) => {
+    setStatus(next);
+    const sp = new URLSearchParams(searchParams.toString());
+    if (next === 'all') sp.delete('status');
+    else sp.set('status', next);
+    sp.delete('page');
+    startTransition(() => {
+      router.replace(`${pathname}?${sp.toString()}`, { scroll: false });
+    });
+  };
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <input
+        type="search"
+        value={q}
+        onChange={(e) => setQ(e.target.value)}
+        placeholder={t('filters.search')}
+        className="input max-w-sm"
+        autoComplete="off"
+      />
+      <select
+        value={status}
+        onChange={(e) => onStatusChange(e.target.value)}
+        className="input max-w-xs"
+      >
+        <option value="all">{t('filters.all')}</option>
+        <option value="CONFIRMED">{t('status.CONFIRMED')}</option>
+        <option value="DELIVERED_PARTIAL">
+          {t('status.DELIVERED_PARTIAL')}
+        </option>
+        <option value="DELIVERED">{t('status.DELIVERED')}</option>
+        <option value="RETURNED_PARTIAL">
+          {t('status.RETURNED_PARTIAL')}
+        </option>
+        <option value="RETURNED">{t('status.RETURNED')}</option>
+        <option value="INVOICED">{t('status.INVOICED')}</option>
+        <option value="CANCELLED">{t('status.CANCELLED')}</option>
+      </select>
+    </div>
+  );
+}

src/components/admin/AdminUserForm.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/routing';
+
+type Admin = {
+  id?: string;
+  name: string;
+  email: string;
+};
+
+export function AdminUserForm({
+  mode,
+  admin,
+  action,
+}: {
+  mode: 'create' | 'edit';
+  admin?: Admin;
+  action: (fd: FormData) => Promise<void>;
+}) {
+  const t = useTranslations('admin.users');
+  const c = useTranslations('common');
+
+  const a: Admin = admin ?? { name: '', email: '' };
+
+  return (
+    <form action={action} className="card space-y-5 p-5">
+      {a.id && <input type="hidden" name="id" value={a.id} />}
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <Field
+          name="name"
+          label={t('fields.name')}
+          defaultValue={a.name}
+          required
+          autoFocus={mode === 'create'}
+        />
+        <Field
+          name="email"
+          label={t('fields.email')}
+          type="email"
+          defaultValue={a.email}
+          autoComplete="username"
+          required
+        />
+        {mode === 'create' && (
+          <>
+            <Field
+              name="password"
+              label={t('fields.password')}
+              hint={t('fields.passwordHint')}
+              type="password"
+              autoComplete="new-password"
+              required
+            />
+            <Field
+              name="passwordConfirm"
+              label={t('fields.passwordConfirm')}
+              type="password"
+              autoComplete="new-password"
+              required
+            />
+          </>
+        )}
+      </div>
+
+      <div className="flex items-center justify-end gap-2 border-t border-ink-200 pt-4">
+        <Link href="/admin/users" className="btn-secondary">
+          {c('cancel')}
+        </Link>
+        <button type="submit" className="btn-primary">
+          {mode === 'create' ? t('create') : t('save')}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+export function PasswordChangeForm({
+  adminId,
+  action,
+}: {
+  adminId: string;
+  action: (fd: FormData) => Promise<void>;
+}) {
+  const t = useTranslations('admin.users');
+
+  return (
+    <form action={action} className="card space-y-5 p-5">
+      <h2 className="text-sm font-semibold text-ink-900">
+        {t('changePassword')}
+      </h2>
+      <input type="hidden" name="id" value={adminId} />
+      <div className="grid gap-4 sm:grid-cols-2">
+        <Field
+          name="password"
+          label={t('fields.newPassword')}
+          hint={t('fields.passwordHint')}
+          type="password"
+          autoComplete="new-password"
+          required
+        />
+        <Field
+          name="passwordConfirm"
+          label={t('fields.passwordConfirm')}
+          type="password"
+          autoComplete="new-password"
+          required
+        />
+      </div>
+      <div className="flex items-center justify-end border-t border-ink-200 pt-4">
+        <button type="submit" className="btn-primary">
+          {t('changePassword')}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function Field({
+  name,
+  label,
+  hint,
+  type = 'text',
+  defaultValue,
+  required,
+  autoFocus,
+  autoComplete,
+}: {
+  name: string;
+  label: string;
+  hint?: string;
+  type?: string;
+  defaultValue?: string;
+  required?: boolean;
+  autoFocus?: boolean;
+  autoComplete?: string;
+}) {
+  return (
+    <div>
+      <label className="label" htmlFor={name}>
+        {label}
+        {required && <span className="ml-1 text-accent-600">*</span>}
+      </label>
+      <input
+        id={name}
+        name={name}
+        type={type}
+        defaultValue={defaultValue}
+        required={required}
+        autoFocus={autoFocus}
+        autoComplete={autoComplete}
+        className="input mt-1"
+      />
+      {hint && <p className="mt-1 text-xs text-ink-500">{hint}</p>}
+    </div>
+  );
+}

src/components/admin/FulfillmentTable.tsx

@@ -0,0 +1,198 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { useTranslations, useLocale } from 'next-intl';
+import {
+  setItemFulfillment,
+  markAllDelivered,
+  markAllReturned,
+} from '@/app/[locale]/admin/bookings/[id]/actions';
+
+type Item = {
+  id: string;
+  sku: string;
+  nameSv: string;
+  nameEn: string;
+  quantity: number;
+  deliveredQuantity: number;
+  returnedQuantity: number;
+};
+
+export function FulfillmentTable({
+  bookingId,
+  items,
+}: {
+  bookingId: string;
+  items: Item[];
+}) {
+  const t = useTranslations('admin.bookings.fulfillment');
+  const locale = useLocale() as 'sv' | 'en';
+  const [pending, startTransition] = useTransition();
+
+  return (
+    <div className="rounded-lg border border-ink-200">
+      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-ink-200 bg-ink-50/50 px-4 py-2">
+        <h3 className="text-xs font-medium uppercase tracking-wide text-ink-500">
+          {t('title')}
+        </h3>
+        <div className="flex gap-1">
+          <form
+            action={(fd) => startTransition(() => markAllDelivered(fd))}
+          >
+            <input type="hidden" name="bookingId" value={bookingId} />
+            <button
+              type="submit"
+              disabled={pending}
+              className="btn-secondary !px-2.5 !py-1 text-xs"
+            >
+              ↑ {t('deliverAll')}
+            </button>
+          </form>
+          <form
+            action={(fd) => startTransition(() => markAllReturned(fd))}
+          >
+            <input type="hidden" name="bookingId" value={bookingId} />
+            <button
+              type="submit"
+              disabled={pending}
+              className="btn-secondary !px-2.5 !py-1 text-xs"
+            >
+              ↓ {t('returnAll')}
+            </button>
+          </form>
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="text-left text-xs uppercase tracking-wide text-ink-500">
+              <th className="px-4 py-2">SKU</th>
+              <th className="px-4 py-2">
+                {locale === 'sv' ? 'Namn' : 'Name'}
+              </th>
+              <th className="px-4 py-2 text-right">{t('ordered')}</th>
+              <th className="px-4 py-2 text-right">{t('delivered')}</th>
+              <th className="px-4 py-2 text-right">{t('returned')}</th>
+              <th className="px-4 py-2 text-right">{t('outstanding')}</th>
+              <th className="px-4 py-2"></th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-ink-100">
+            {items.map((it) => (
+              <FulfillmentRow
+                key={it.id}
+                bookingId={bookingId}
+                item={it}
+                locale={locale}
+                pending={pending}
+                startTransition={startTransition}
+              />
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function FulfillmentRow({
+  bookingId,
+  item,
+  locale,
+  pending,
+  startTransition,
+}: {
+  bookingId: string;
+  item: Item;
+  locale: 'sv' | 'en';
+  pending: boolean;
+  startTransition: React.TransitionStartFunction;
+}) {
+  const t = useTranslations('admin.bookings.fulfillment');
+  const [delivered, setDelivered] = useState(item.deliveredQuantity);
+  const [returned, setReturned] = useState(item.returnedQuantity);
+
+  const outstanding = Math.max(0, delivered - returned);
+  const dirty =
+    delivered !== item.deliveredQuantity || returned !== item.returnedQuantity;
+  const validDelivered =
+    Number.isFinite(delivered) && delivered >= 0 && delivered <= item.quantity;
+  const validReturned =
+    Number.isFinite(returned) && returned >= 0 && returned <= delivered;
+  const canSave = dirty && validDelivered && validReturned && !pending;
+
+  return (
+    <tr>
+      <td className="px-4 py-2 font-mono text-xs">{item.sku}</td>
+      <td className="px-4 py-2">
+        {locale === 'sv' ? item.nameSv : item.nameEn}
+      </td>
+      <td className="px-4 py-2 text-right tabular-nums text-ink-600">
+        {item.quantity}
+      </td>
+      <td className="px-4 py-2 text-right">
+        <input
+          type="number"
+          inputMode="numeric"
+          min={0}
+          max={item.quantity}
+          value={delivered}
+          onChange={(e) => {
+            const n = parseInt(e.target.value, 10);
+            setDelivered(Number.isFinite(n) ? n : 0);
+          }}
+          onFocus={(e) => e.currentTarget.select()}
+          className={`num-input ${validDelivered ? '' : 'border-red-400'}`}
+          aria-label={t('delivered')}
+          title={t('deliveredHint')}
+        />
+      </td>
+      <td className="px-4 py-2 text-right">
+        <input
+          type="number"
+          inputMode="numeric"
+          min={0}
+          max={delivered}
+          value={returned}
+          onChange={(e) => {
+            const n = parseInt(e.target.value, 10);
+            setReturned(Number.isFinite(n) ? n : 0);
+          }}
+          onFocus={(e) => e.currentTarget.select()}
+          className={`num-input ${validReturned ? '' : 'border-red-400'}`}
+          aria-label={t('returned')}
+          title={t('returnedHint')}
+        />
+      </td>
+      <td className="px-4 py-2 text-right tabular-nums">
+        <span
+          className={
+            outstanding > 0 ? 'font-semibold text-brand-700' : 'text-ink-400'
+          }
+        >
+          {outstanding}
+        </span>
+      </td>
+      <td className="px-4 py-2 text-right">
+        <form
+          action={(fd) => {
+            fd.set('delivered', String(delivered));
+            fd.set('returned', String(returned));
+            startTransition(() => setItemFulfillment(fd));
+          }}
+        >
+          <input type="hidden" name="bookingId" value={bookingId} />
+          <input type="hidden" name="itemId" value={item.id} />
+          <button
+            type="submit"
+            disabled={!canSave}
+            className="btn-primary !px-3 !py-1 text-xs"
+          >
+            {t('save')}
+          </button>
+        </form>
+      </td>
+    </tr>
+  );
+}

src/components/admin/Pagination.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import Link from 'next/link';
+import { useSearchParams, usePathname } from 'next/navigation';
+
+type Props = {
+  page: number;
+  pageSize: number;
+  total: number;
+};
+
+export function Pagination({ page, pageSize, total }: Props) {
+  const sp = useSearchParams();
+  const pathname = usePathname();
+
+  const pages = Math.max(1, Math.ceil(total / pageSize));
+  const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
+  const to = Math.min(total, page * pageSize);
+
+  const link = (p: number) => {
+    const next = new URLSearchParams(sp.toString());
+    if (p <= 1) next.delete('page');
+    else next.set('page', String(p));
+    return `${pathname}?${next.toString()}`;
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-3 text-sm text-ink-600">
+      <div>
+        {from}–{to} / {total}
+      </div>
+      <div className="flex items-center gap-1">
+        <Link
+          href={link(Math.max(1, page - 1))}
+          aria-disabled={page <= 1}
+          tabIndex={page <= 1 ? -1 : undefined}
+          className={`btn-secondary !px-3 !py-1.5 text-xs ${page <= 1 ? 'pointer-events-none opacity-50' : ''}`}
+        >
+          ←
+        </Link>
+        <span className="px-2 tabular-nums">
+          {page} / {pages}
+        </span>
+        <Link
+          href={link(Math.min(pages, page + 1))}
+          aria-disabled={page >= pages}
+          tabIndex={page >= pages ? -1 : undefined}
+          className={`btn-secondary !px-3 !py-1.5 text-xs ${page >= pages ? 'pointer-events-none opacity-50' : ''}`}
+        >
+          →
+        </Link>
+      </div>
+    </div>
+  );
+}

src/components/admin/PickupSlotForm.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/routing';
+
+type Slot = {
+  id?: string;
+  labelSv: string;
+  labelEn: string;
+  startsAt: string; // "YYYY-MM-DDTHH:mm" local
+  endsAt: string;
+  capacity: number;
+  active: boolean;
+};
+
+export function PickupSlotForm({
+  mode,
+  slot,
+  action,
+}: {
+  mode: 'create' | 'edit';
+  slot?: Slot;
+  action: (fd: FormData) => Promise<void>;
+}) {
+  const t = useTranslations('admin.pickupSlots');
+  const c = useTranslations('common');
+
+  const s: Slot = slot ?? {
+    labelSv: '',
+    labelEn: '',
+    startsAt: defaultDateString(0, 9),
+    endsAt: defaultDateString(0, 12),
+    capacity: 50,
+    active: true,
+  };
+
+  return (
+    <form action={action} className="card space-y-5 p-5">
+      {s.id && <input type="hidden" name="id" value={s.id} />}
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <Field
+          name="labelSv"
+          label={t('fields.labelSv')}
+          hint={t('fields.labelHint')}
+          defaultValue={s.labelSv}
+          required
+          autoFocus={mode === 'create'}
+        />
+        <Field
+          name="labelEn"
+          label={t('fields.labelEn')}
+          defaultValue={s.labelEn}
+          required
+        />
+        <Field
+          name="startsAt"
+          label={t('fields.startsAt')}
+          type="datetime-local"
+          defaultValue={s.startsAt}
+          required
+        />
+        <Field
+          name="endsAt"
+          label={t('fields.endsAt')}
+          type="datetime-local"
+          defaultValue={s.endsAt}
+          required
+        />
+        <Field
+          name="capacity"
+          label={t('fields.capacity')}
+          hint={t('fields.capacityHint')}
+          type="number"
+          min={0}
+          defaultValue={String(s.capacity)}
+          required
+        />
+      </div>
+
+      <label className="flex items-center gap-2 text-sm">
+        <input
+          type="checkbox"
+          name="active"
+          defaultChecked={s.active}
+          className="h-4 w-4 rounded border-ink-300 text-accent-500 focus:ring-accent-400"
+        />
+        <span>{t('fields.active')}</span>
+      </label>
+
+      <div className="flex items-center justify-end gap-2 border-t border-ink-200 pt-4">
+        <Link href="/admin/pickup-slots" className="btn-secondary">
+          {c('cancel')}
+        </Link>
+        <button type="submit" className="btn-primary">
+          {mode === 'create' ? t('create') : t('save')}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function defaultDateString(daysAhead: number, hour: number): string {
+  const d = new Date();
+  d.setDate(d.getDate() + daysAhead);
+  d.setHours(hour, 0, 0, 0);
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+function Field({
+  name,
+  label,
+  hint,
+  type = 'text',
+  defaultValue,
+  required,
+  min,
+  autoFocus,
+}: {
+  name: string;
+  label: string;
+  hint?: string;
+  type?: string;
+  defaultValue?: string;
+  required?: boolean;
+  min?: number;
+  autoFocus?: boolean;
+}) {
+  return (
+    <div>
+      <label className="label" htmlFor={name}>
+        {label}
+        {required && <span className="ml-1 text-accent-600">*</span>}
+      </label>
+      <input
+        id={name}
+        name={name}
+        type={type}
+        defaultValue={defaultValue}
+        required={required}
+        min={min}
+        autoFocus={autoFocus}
+        className="input mt-1"
+      />
+      {hint && <p className="mt-1 text-xs text-ink-500">{hint}</p>}
+    </div>
+  );
+}

src/components/admin/ProductForm.tsx

@@ -0,0 +1,198 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/routing';
+
+type Product = {
+  id?: string;
+  sku: string;
+  nameSv: string;
+  nameEn: string;
+  descriptionSv: string;
+  descriptionEn: string;
+  priceOre: number;
+  vatBp: number;
+  sortOrder: number;
+  active: boolean;
+};
+
+export function ProductForm({
+  mode,
+  product,
+  action,
+}: {
+  mode: 'create' | 'edit';
+  product?: Product;
+  action: (fd: FormData) => Promise<void>;
+}) {
+  const t = useTranslations('admin.products');
+  const c = useTranslations('common');
+
+  const p: Product = product ?? {
+    sku: '',
+    nameSv: '',
+    nameEn: '',
+    descriptionSv: '',
+    descriptionEn: '',
+    priceOre: 0,
+    vatBp: 2500,
+    sortOrder: 100,
+    active: true,
+  };
+
+  return (
+    <form action={action} className="card space-y-5 p-5">
+      {p.id && <input type="hidden" name="id" value={p.id} />}
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <Field
+          name="sku"
+          label={t('fields.sku')}
+          hint={t('fields.skuHint')}
+          defaultValue={p.sku}
+          required
+          autoFocus={mode === 'create'}
+        />
+        <Field
+          name="sortOrder"
+          label={t('fields.sortOrder')}
+          hint={t('fields.sortOrderHint')}
+          type="number"
+          min={0}
+          defaultValue={String(p.sortOrder)}
+        />
+        <Field
+          name="nameSv"
+          label={t('fields.nameSv')}
+          defaultValue={p.nameSv}
+          required
+        />
+        <Field
+          name="nameEn"
+          label={t('fields.nameEn')}
+          defaultValue={p.nameEn}
+          required
+        />
+        <TextArea
+          name="descriptionSv"
+          label={t('fields.descriptionSv')}
+          defaultValue={p.descriptionSv}
+        />
+        <TextArea
+          name="descriptionEn"
+          label={t('fields.descriptionEn')}
+          defaultValue={p.descriptionEn}
+        />
+        <Field
+          name="priceSek"
+          label={t('fields.priceSek')}
+          type="number"
+          step="0.01"
+          min={0}
+          defaultValue={(p.priceOre / 100).toFixed(2)}
+          required
+        />
+        <Field
+          name="vatPct"
+          label={t('fields.vatPct')}
+          type="number"
+          step="0.01"
+          min={0}
+          max={100}
+          defaultValue={(p.vatBp / 100).toFixed(2)}
+          required
+        />
+      </div>
+
+      <label className="flex items-center gap-2 text-sm">
+        <input
+          type="checkbox"
+          name="active"
+          defaultChecked={p.active}
+          className="h-4 w-4 rounded border-ink-300 text-accent-500 focus:ring-accent-400"
+        />
+        <span>{t('fields.active')}</span>
+      </label>
+
+      <div className="flex items-center justify-end gap-2 border-t border-ink-200 pt-4">
+        <Link href="/admin/products" className="btn-secondary">
+          {c('cancel')}
+        </Link>
+        <button type="submit" className="btn-primary">
+          {mode === 'create' ? t('create') : t('save')}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function Field({
+  name,
+  label,
+  hint,
+  type = 'text',
+  defaultValue,
+  required,
+  step,
+  min,
+  max,
+  autoFocus,
+}: {
+  name: string;
+  label: string;
+  hint?: string;
+  type?: string;
+  defaultValue?: string;
+  required?: boolean;
+  step?: string;
+  min?: number;
+  max?: number;
+  autoFocus?: boolean;
+}) {
+  return (
+    <div>
+      <label className="label" htmlFor={name}>
+        {label}
+        {required && <span className="ml-1 text-accent-600">*</span>}
+      </label>
+      <input
+        id={name}
+        name={name}
+        type={type}
+        defaultValue={defaultValue}
+        required={required}
+        step={step}
+        min={min}
+        max={max}
+        autoFocus={autoFocus}
+        className="input mt-1"
+      />
+      {hint && <p className="mt-1 text-xs text-ink-500">{hint}</p>}
+    </div>
+  );
+}
+
+function TextArea({
+  name,
+  label,
+  defaultValue,
+}: {
+  name: string;
+  label: string;
+  defaultValue?: string;
+}) {
+  return (
+    <div className="sm:col-span-2">
+      <label className="label" htmlFor={name}>
+        {label}
+      </label>
+      <textarea
+        id={name}
+        name={name}
+        defaultValue={defaultValue}
+        rows={2}
+        className="input mt-1"
+      />
+    </div>
+  );
+}

src/components/admin/SortHeader.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useRouter, useSearchParams, usePathname } from 'next/navigation';
+
+type Props = {
+  field: string;
+  label: string;
+  align?: 'left' | 'right';
+};
+
+export function SortHeader({ field, label, align = 'left' }: Props) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const sp = useSearchParams();
+  const currentSort = sp.get('sort') ?? 'createdAt';
+  const currentDir = sp.get('dir') === 'asc' ? 'asc' : 'desc';
+  const active = currentSort === field;
+
+  const next = new URLSearchParams(sp.toString());
+  next.set('sort', field);
+  next.set('dir', active && currentDir === 'desc' ? 'asc' : 'desc');
+  // Keep page on column toggle — feels less jumpy than resetting.
+
+  const onClick = () => {
+    router.replace(`${pathname}?${next.toString()}`, { scroll: false });
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`flex items-center gap-1 text-xs font-medium uppercase tracking-wide ${
+        active ? 'text-brand-700' : 'text-ink-500 hover:text-ink-700'
+      } ${align === 'right' ? 'ml-auto flex-row-reverse' : ''}`}
+    >
+      <span>{label}</span>
+      <span aria-hidden className="inline-block w-2 text-[10px] leading-none">
+        {active ? (currentDir === 'asc' ? '▲' : '▼') : '↕'}
+      </span>
+    </button>
+  );
+}

src/i18n/request.ts

@@ -0,0 +1,13 @@
+import { getRequestConfig } from 'next-intl/server';
+import { routing } from './routing';
+
+export default getRequestConfig(async ({ requestLocale }) => {
+  let locale = await requestLocale;
+  if (!locale || !routing.locales.includes(locale as 'sv' | 'en')) {
+    locale = routing.defaultLocale;
+  }
+  return {
+    locale,
+    messages: (await import(`../../messages/${locale}.json`)).default,
+  };
+});

src/i18n/routing.ts

@@ -0,0 +1,13 @@
+import { defineRouting } from 'next-intl/routing';
+import { createNavigation } from 'next-intl/navigation';
+
+export const routing = defineRouting({
+  locales: ['sv', 'en'],
+  defaultLocale: 'sv',
+  localePrefix: 'as-needed',
+});
+
+export type Locale = (typeof routing.locales)[number];
+
+export const { Link, redirect, usePathname, useRouter, getPathname } =
+  createNavigation(routing);

src/lib/bookingNumber.ts

@@ -0,0 +1,14 @@
+// Booking number format: JAM-YY-XXXX
+// Two-letter event code + 2-digit year + 4 random base32 chars.
+// Easy to read over phone, hard to guess.
+
+const ALPHABET = 'ABCDEFGHJKMNPQRSTUVWXYZ23456789'; // skip I,O,0,1 to avoid confusion
+
+export function generateBookingNumber(prefix = 'JAM'): string {
+  const yy = String(new Date().getFullYear()).slice(2);
+  let suffix = '';
+  for (let i = 0; i < 4; i++) {
+    suffix += ALPHABET[Math.floor(Math.random() * ALPHABET.length)];
+  }
+  return `${prefix}-${yy}-${suffix}`;
+}

src/lib/bookingStatus.ts

@@ -0,0 +1,73 @@
+// Booking lifecycle helpers.
+
+export const BOOKING_STATUSES = [
+  'PENDING',
+  'CONFIRMED',
+  'DELIVERED_PARTIAL',
+  'DELIVERED',
+  'RETURNED_PARTIAL',
+  'RETURNED',
+  'INVOICED',
+  'CANCELLED',
+] as const;
+
+export type BookingStatus = (typeof BOOKING_STATUSES)[number];
+
+// Statuses where deriving from item counters is appropriate. INVOICED and
+// CANCELLED are sticky — admin sets them explicitly, we don't overwrite.
+const DERIVABLE: ReadonlySet<string> = new Set([
+  'PENDING',
+  'CONFIRMED',
+  'DELIVERED_PARTIAL',
+  'DELIVERED',
+  'RETURNED_PARTIAL',
+  'RETURNED',
+]);
+
+type ItemCounts = { quantity: number; deliveredQuantity: number; returnedQuantity: number };
+
+/**
+ * Compute the lifecycle status from per-line delivery/return counters.
+ * Does not touch INVOICED or CANCELLED — those are terminal admin choices.
+ */
+export function deriveBookingStatus(
+  current: string,
+  items: ItemCounts[],
+): BookingStatus {
+  if (current === 'INVOICED' || current === 'CANCELLED') {
+    return current as BookingStatus;
+  }
+  if (!DERIVABLE.has(current) && current !== '') {
+    // Unknown status — leave as-is, just narrow the type.
+    return (current as BookingStatus) ?? 'CONFIRMED';
+  }
+
+  const total = items.reduce((a, i) => a + i.quantity, 0);
+  const delivered = items.reduce((a, i) => a + i.deliveredQuantity, 0);
+  const returned = items.reduce((a, i) => a + i.returnedQuantity, 0);
+
+  if (delivered === 0) {
+    // Nothing handed out yet — booking is just confirmed.
+    return 'CONFIRMED';
+  }
+  if (returned === 0) {
+    return delivered < total ? 'DELIVERED_PARTIAL' : 'DELIVERED';
+  }
+  // Some returns started.
+  if (returned < delivered) {
+    return 'RETURNED_PARTIAL';
+  }
+  // All delivered items have come back.
+  return 'RETURNED';
+}
+
+/** Clamp delivered/returned to legal ranges relative to quantity. */
+export function clampFulfillment(
+  quantity: number,
+  delivered: number,
+  returned: number,
+): { delivered: number; returned: number } {
+  const d = Math.max(0, Math.min(quantity, Math.floor(delivered)));
+  const r = Math.max(0, Math.min(d, Math.floor(returned)));
+  return { delivered: d, returned: r };
+}

src/lib/bookingStore.ts

@@ -0,0 +1,102 @@
+'use client';
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+
+// Persist booking form state across page navigations (e.g. when the user
+// switches language mid-flow). sessionStorage so it's per-tab and cleared
+// when the tab closes. Bumping STORE_VERSION invalidates old persisted state.
+const STORE_VERSION = 1;
+
+export type Step = 'products' | 'details' | 'pickup' | 'review';
+
+export type BookingFormState = {
+  step: Step;
+  quantities: Record<string, number>;
+  contactName: string;
+  email: string;
+  phone: string;
+  orgName: string;
+  orgNumber: string;
+  address: string;
+  postalCode: string;
+  city: string;
+  country: string;
+  pickupSlotId: string | null;
+  notes: string;
+  confirm: boolean;
+};
+
+type BookingFormActions = {
+  setStep: (step: Step) => void;
+  setQuantity: (productId: string, qty: number) => void;
+  patch: (partial: Partial<BookingFormState>) => void;
+  reset: () => void;
+};
+
+const initial: BookingFormState = {
+  step: 'products',
+  quantities: {},
+  contactName: '',
+  email: '',
+  phone: '',
+  orgName: '',
+  orgNumber: '',
+  address: '',
+  postalCode: '',
+  city: '',
+  country: 'SE',
+  pickupSlotId: null,
+  notes: '',
+  confirm: false,
+};
+
+export const useBookingStore = create<BookingFormState & BookingFormActions>()(
+  persist(
+    (set) => ({
+      ...initial,
+      setStep: (step) => set({ step }),
+      setQuantity: (productId, qty) =>
+        set((s) => {
+          const q = { ...s.quantities };
+          if (qty <= 0) delete q[productId];
+          else q[productId] = Math.min(999, Math.floor(qty));
+          return { quantities: q };
+        }),
+      patch: (partial) => set(partial as BookingFormState),
+      reset: () => set({ ...initial }),
+    }),
+    {
+      name: 'boka-gasol247:booking-form',
+      version: STORE_VERSION,
+      storage: createJSONStorage(() =>
+        typeof window === 'undefined'
+          ? // SSR no-op
+            {
+              getItem: () => null,
+              setItem: () => {},
+              removeItem: () => {},
+            }
+          : window.sessionStorage,
+      ),
+      // Don't persist `confirm` (re-check each session) or `step` if user
+      // hasn't started filling anything. Keeps the experience clean if they
+      // close and reopen a tab with stale state.
+      partialize: (s) => ({
+        step: s.step,
+        quantities: s.quantities,
+        contactName: s.contactName,
+        email: s.email,
+        phone: s.phone,
+        orgName: s.orgName,
+        orgNumber: s.orgNumber,
+        address: s.address,
+        postalCode: s.postalCode,
+        city: s.city,
+        country: s.country,
+        pickupSlotId: s.pickupSlotId,
+        notes: s.notes,
+      }),
+    },
+  ),
+);

src/lib/mailjet.ts

@@ -0,0 +1,253 @@
+import Mailjet from 'node-mailjet';
+import { formatOre } from './money';
+import type { Booking, BookingItem, PickupSlot } from '@prisma/client';
+
+let client: Mailjet | null = null;
+
+function getClient(): Mailjet | null {
+  if (!process.env.MAILJET_API_KEY || !process.env.MAILJET_API_SECRET) {
+    return null;
+  }
+  if (!client) {
+    client = new Mailjet({
+      apiKey: process.env.MAILJET_API_KEY,
+      apiSecret: process.env.MAILJET_API_SECRET,
+    });
+  }
+  return client;
+}
+
+type BookingWithRels = Booking & {
+  items: BookingItem[];
+  pickupSlot: PickupSlot | null;
+};
+
+type EmailStrings = {
+  subject: string;
+  greeting: string;
+  intro: string;
+  bookingNumber: string;
+  orderSummary: string;
+  pickup: string;
+  invoiceInfo: string;
+  questions: string;
+  footer: string;
+  subtotal: string;
+  ofWhichVat: string;
+  total: string;
+  eventName: string;
+};
+
+function getStrings(locale: 'sv' | 'en', event: string): EmailStrings {
+  if (locale === 'sv') {
+    return {
+      subject: `Bokningsbekräftelse {number} — ${event}`,
+      greeting: 'Hej {name},',
+      intro: `Tack för din beställning av gasoltuber till ${event}. Här är din bokningsbekräftelse.`,
+      bookingNumber: 'Bokningsnummer',
+      orderSummary: 'Beställning',
+      pickup: 'Upphämtning',
+      invoiceInfo: 'Faktura skickas till organisationen efter eventet.',
+      questions: 'Har du frågor? Svara på detta mejl så hjälper vi dig.',
+      footer: 'Detta är en automatiserad bekräftelse från Gasol247.',
+      subtotal: 'Delsumma',
+      ofWhichVat: 'varav moms',
+      total: 'Totalt',
+      eventName: event,
+    };
+  }
+  return {
+    subject: `Booking confirmation {number} — ${event}`,
+    greeting: 'Hi {name},',
+    intro: `Thank you for ordering LPG cylinders for ${event}. Here is your booking confirmation.`,
+    bookingNumber: 'Booking number',
+    orderSummary: 'Order',
+    pickup: 'Pickup',
+    invoiceInfo: 'An invoice will be sent to your organization after the event.',
+    questions: 'Questions? Reply to this email and we will help you.',
+    footer: 'This is an automated confirmation from Gasol247.',
+    subtotal: 'Subtotal',
+    ofWhichVat: 'of which VAT',
+    total: 'Total',
+    eventName: event,
+  };
+}
+
+export function renderBookingEmail(
+  booking: BookingWithRels,
+  locale: 'sv' | 'en' = 'sv',
+): { subject: string; html: string; text: string } {
+  const event = process.env.NEXT_PUBLIC_EVENT_NAME ?? 'Jamboree';
+  const s = getStrings(locale, event);
+  const fmt = (ore: number) => formatOre(ore, locale);
+  const itemName = (it: BookingItem) =>
+    locale === 'sv' ? it.nameSv : it.nameEn;
+  const slotLabel = booking.pickupSlot
+    ? locale === 'sv'
+      ? booking.pickupSlot.labelSv
+      : booking.pickupSlot.labelEn
+    : null;
+  const slotTime = booking.pickupSlot
+    ? booking.pickupSlot.startsAt.toLocaleString(
+        locale === 'sv' ? 'sv-SE' : 'en-SE',
+        { dateStyle: 'medium', timeStyle: 'short' },
+      )
+    : null;
+
+  const subject = s.subject.replace('{number}', booking.bookingNumber);
+  const greeting = s.greeting.replace('{name}', booking.contactName);
+
+  const itemRowsHtml = booking.items
+    .map(
+      (it) => `
+        <tr>
+          <td style="padding:8px 0;border-bottom:1px solid #e2e8f0;font-size:14px;color:#0f172a;">
+            ${escapeHtml(itemName(it))} <span style="color:#94a3b8;">× ${it.quantity}</span>
+          </td>
+          <td style="padding:8px 0;border-bottom:1px solid #e2e8f0;font-size:14px;color:#0f172a;text-align:right;white-space:nowrap;">
+            ${fmt(it.lineTotalOre)}
+          </td>
+        </tr>`,
+    )
+    .join('');
+
+  const pickupHtml =
+    slotLabel && slotTime
+      ? `
+        <h2 style="font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:#64748b;margin:24px 0 8px;">${s.pickup}</h2>
+        <p style="font-size:14px;color:#0f172a;margin:0;">${escapeHtml(slotLabel)} · ${escapeHtml(slotTime)}</p>`
+      : '';
+
+  const html = `<!doctype html>
+<html lang="${locale}">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>${escapeHtml(subject)}</title>
+</head>
+<body style="margin:0;background:#f8fafc;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#0f172a;">
+  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background:#f8fafc;padding:24px 0;">
+    <tr>
+      <td align="center">
+        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="max-width:600px;width:100%;background:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.05);">
+          <tr>
+            <td style="background:#ea580c;color:#ffffff;padding:24px;">
+              <div style="font-size:12px;opacity:0.9;text-transform:uppercase;letter-spacing:0.05em;">${escapeHtml(s.bookingNumber)}</div>
+              <div style="font-size:24px;font-weight:600;margin-top:4px;">${escapeHtml(booking.bookingNumber)}</div>
+              <div style="font-size:12px;opacity:0.9;margin-top:8px;">${escapeHtml(s.eventName)}</div>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:24px;">
+              <p style="font-size:15px;margin:0 0 8px;">${escapeHtml(greeting)}</p>
+              <p style="font-size:14px;color:#475569;margin:0 0 16px;">${escapeHtml(s.intro)}</p>
+
+              <h2 style="font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:#64748b;margin:16px 0 8px;">${s.orderSummary}</h2>
+              <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
+                ${itemRowsHtml}
+                <tr>
+                  <td style="padding-top:12px;font-size:14px;color:#475569;">${s.subtotal}</td>
+                  <td style="padding-top:12px;font-size:14px;color:#0f172a;text-align:right;white-space:nowrap;">${fmt(booking.subtotalOre)}</td>
+                </tr>
+                <tr>
+                  <td style="font-size:13px;color:#64748b;">${s.ofWhichVat}</td>
+                  <td style="font-size:13px;color:#64748b;text-align:right;white-space:nowrap;">${fmt(booking.vatOre)}</td>
+                </tr>
+                <tr>
+                  <td style="padding-top:8px;font-size:15px;color:#0f172a;font-weight:600;border-top:1px solid #e2e8f0;">${s.total}</td>
+                  <td style="padding-top:8px;font-size:15px;color:#0f172a;font-weight:600;text-align:right;white-space:nowrap;border-top:1px solid #e2e8f0;">${fmt(booking.totalOre)}</td>
+                </tr>
+              </table>
+
+              ${pickupHtml}
+
+              <div style="margin-top:24px;padding:16px;background:#f1f5f9;border-radius:8px;font-size:13px;color:#475569;">
+                ${escapeHtml(s.invoiceInfo)}
+              </div>
+
+              <p style="font-size:13px;color:#64748b;margin:24px 0 0;">${escapeHtml(s.questions)}</p>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:16px 24px;border-top:1px solid #e2e8f0;font-size:12px;color:#94a3b8;text-align:center;">
+              ${escapeHtml(s.footer)}
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+
+  const text = [
+    greeting,
+    '',
+    s.intro,
+    '',
+    `${s.bookingNumber}: ${booking.bookingNumber}`,
+    '',
+    `${s.orderSummary}:`,
+    ...booking.items.map(
+      (it) => `  ${itemName(it)} × ${it.quantity}   ${fmt(it.lineTotalOre)}`,
+    ),
+    '',
+    `${s.subtotal}: ${fmt(booking.subtotalOre)}`,
+    `${s.ofWhichVat}: ${fmt(booking.vatOre)}`,
+    `${s.total}: ${fmt(booking.totalOre)}`,
+    ...(slotLabel ? ['', `${s.pickup}: ${slotLabel} – ${slotTime}`] : []),
+    '',
+    s.invoiceInfo,
+    '',
+    s.questions,
+    '',
+    '— ' + s.footer,
+  ].join('\n');
+
+  return { subject, html, text };
+}
+
+export async function sendBookingConfirmation(
+  booking: BookingWithRels,
+): Promise<{ ok: boolean; error?: string }> {
+  const c = getClient();
+  if (!c) {
+    console.warn('[mailjet] not configured — skipping email send');
+    return { ok: false, error: 'mailjet-not-configured' };
+  }
+
+  const locale = (booking.locale as 'sv' | 'en') ?? 'sv';
+  const { subject, html, text } = renderBookingEmail(booking, locale);
+
+  const fromEmail = process.env.MAIL_FROM_EMAIL ?? 'no-reply@example.com';
+  const fromName = process.env.MAIL_FROM_NAME ?? 'Gasol247 Bokning';
+
+  try {
+    await c.post('send', { version: 'v3.1' }).request({
+      Messages: [
+        {
+          From: { Email: fromEmail, Name: fromName },
+          To: [{ Email: booking.email, Name: booking.contactName }],
+          Subject: subject,
+          HTMLPart: html,
+          TextPart: text,
+          CustomID: booking.bookingNumber,
+        },
+      ],
+    });
+    return { ok: true };
+  } catch (err: unknown) {
+    const msg = err instanceof Error ? err.message : String(err);
+    console.error('[mailjet] send failed', msg);
+    return { ok: false, error: msg };
+  }
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}

src/lib/money.ts

@@ -0,0 +1,33 @@
+// Price math in öre (1 SEK = 100 öre) to avoid float drift.
+
+export function formatOre(ore: number, locale: 'sv' | 'en' = 'sv'): string {
+  const sek = ore / 100;
+  return new Intl.NumberFormat(locale === 'sv' ? 'sv-SE' : 'en-SE', {
+    style: 'currency',
+    currency: 'SEK',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(sek);
+}
+
+export function vatAmountOre(netOre: number, vatBp: number): number {
+  return Math.round((netOre * vatBp) / 10000);
+}
+
+/** Net price + VAT, rounded the same way as billing. */
+export function priceInclVatOre(netOre: number, vatBp: number): number {
+  return netOre + vatAmountOre(netOre, vatBp);
+}
+
+export function computeTotals(
+  items: Array<{ unitPriceOre: number; quantity: number; vatBp: number }>,
+) {
+  let subtotal = 0;
+  let vat = 0;
+  for (const i of items) {
+    const line = i.unitPriceOre * i.quantity;
+    subtotal += line;
+    vat += vatAmountOre(line, i.vatBp);
+  }
+  return { subtotalOre: subtotal, vatOre: vat, totalOre: subtotal + vat };
+}

src/lib/orgNumber.ts

@@ -0,0 +1,29 @@
+// Swedish organization number validation (Luhn over 10 digits).
+// Accepts "XXXXXX-XXXX" or "XXXXXXXXXX". Some non-SE orgs may have different formats;
+// we keep validation strict for SE and permit a relaxed form for orgs with country != SE.
+
+export function normalizeOrgNumber(input: string): string {
+  return input.replace(/[\s-]/g, '');
+}
+
+export function isValidSeOrgNumber(input: string): boolean {
+  const n = normalizeOrgNumber(input);
+  if (!/^\d{10}$/.test(n)) return false;
+  // Luhn
+  let sum = 0;
+  for (let i = 0; i < 10; i++) {
+    let d = parseInt(n[i], 10);
+    if (i % 2 === 0) {
+      d *= 2;
+      if (d > 9) d -= 9;
+    }
+    sum += d;
+  }
+  return sum % 10 === 0;
+}
+
+export function formatOrgNumber(input: string): string {
+  const n = normalizeOrgNumber(input);
+  if (n.length !== 10) return input;
+  return `${n.slice(0, 6)}-${n.slice(6)}`;
+}

src/lib/prisma.ts

@@ -0,0 +1,13 @@
+import { PrismaClient } from '@prisma/client';
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined;
+};
+
+export const prisma =
+  globalForPrisma.prisma ??
+  new PrismaClient({
+    log: process.env.NODE_ENV === 'development' ? ['error', 'warn'] : ['error'],
+  });
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;

src/lib/requireAdmin.ts

@@ -0,0 +1,10 @@
+import { redirect } from 'next/navigation';
+import { getSafeSession } from '@/lib/safeAuth';
+
+export async function requireAdmin() {
+  const session = await getSafeSession();
+  if (!session?.user) {
+    redirect('/admin/login');
+  }
+  return session;
+}

src/lib/safeAuth.ts

@@ -0,0 +1,24 @@
+import { auth } from '@/auth';
+import type { Session } from 'next-auth';
+
+// Wrap `auth()` so stale session cookies (e.g. AUTH_SECRET rotated, or default
+// dev secret swapped out) don't surface as scary JWTSessionError stacks in
+// every server log. We treat any decode failure as "not logged in" and let the
+// next request rewrite the cookie at next login.
+export async function getSafeSession(): Promise<Session | null> {
+  try {
+    return await auth();
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    if (
+      msg.includes('decryption') ||
+      msg.includes('JWTSessionError') ||
+      msg.includes('JWEDecryptionFailed')
+    ) {
+      // Stale or unreadable session cookie — treat as logged out silently.
+      return null;
+    }
+    // Re-throw anything unexpected so it's visible.
+    throw err;
+  }
+}

src/lib/settings.ts

@@ -0,0 +1,32 @@
+import { prisma } from './prisma';
+
+export type AppSettings = {
+  pickupEnabled: boolean;
+};
+
+const DEFAULTS: AppSettings = {
+  pickupEnabled: true,
+};
+
+const SINGLETON_ID = 'singleton';
+
+/** Returns the singleton settings row, creating it with defaults on first call. */
+export async function getSettings(): Promise<AppSettings> {
+  const row = await prisma.settings.upsert({
+    where: { id: SINGLETON_ID },
+    update: {},
+    create: { id: SINGLETON_ID, ...DEFAULTS },
+  });
+  return { pickupEnabled: row.pickupEnabled };
+}
+
+export async function updateSettings(
+  patch: Partial<AppSettings>,
+): Promise<AppSettings> {
+  const row = await prisma.settings.upsert({
+    where: { id: SINGLETON_ID },
+    update: patch,
+    create: { id: SINGLETON_ID, ...DEFAULTS, ...patch },
+  });
+  return { pickupEnabled: row.pickupEnabled };
+}

src/lib/validation.ts

@@ -0,0 +1,33 @@
+import { z } from 'zod';
+import { isValidSeOrgNumber, normalizeOrgNumber } from './orgNumber';
+
+export const bookingItemSchema = z.object({
+  productId: z.string().min(1),
+  quantity: z.number().int().min(1).max(999),
+});
+
+export const bookingSubmitSchema = z.object({
+  contactName: z.string().trim().min(2).max(120),
+  email: z.string().trim().email().max(200),
+  phone: z.string().trim().min(5).max(40),
+  orgName: z.string().trim().min(2).max(200),
+  orgNumber: z
+    .string()
+    .trim()
+    .min(10)
+    .max(13)
+    .refine((v) => isValidSeOrgNumber(v), {
+      message: 'invalidOrgNumber',
+    })
+    .transform((v) => normalizeOrgNumber(v)),
+  address: z.string().trim().min(2).max(200),
+  postalCode: z.string().trim().min(3).max(20),
+  city: z.string().trim().min(1).max(100),
+  country: z.string().trim().min(2).max(2).default('SE'),
+  pickupSlotId: z.string().min(1).nullable().optional(),
+  notes: z.string().trim().max(2000).optional().nullable(),
+  locale: z.enum(['sv', 'en']).default('sv'),
+  items: z.array(bookingItemSchema).min(1, 'selectProduct'),
+});
+
+export type BookingSubmitInput = z.infer<typeof bookingSubmitSchema>;

src/middleware.ts

@@ -0,0 +1,9 @@
+import createMiddleware from 'next-intl/middleware';
+import { routing } from './i18n/routing';
+
+export default createMiddleware(routing);
+
+export const config = {
+  // Match all paths except next internals, api, and static assets.
+  matcher: ['/((?!api|_next|_vercel|.*\\..*).*)'],
+};

src/types/css.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

src/types/next-auth.d.ts

@@ -0,0 +1,9 @@
+import { DefaultSession } from 'next-auth';
+
+declare module 'next-auth' {
+  interface Session {
+    user: {
+      id: string;
+    } & DefaultSession['user'];
+  }
+}

tailwind.config.ts

@@ -0,0 +1,65 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // gasol247 palette — primary blue with peach accent.
+        // Pulled from gasol247.com CSS: navy #26476c, light blue #7fcbf1, peach #f7a872.
+        brand: {
+          50: '#eef5fb',
+          100: '#d6e6f3',
+          200: '#aecde7',
+          300: '#7fcbf1',
+          400: '#5293c4',
+          500: '#3a749f',
+          600: '#26476c',
+          700: '#1f3a59',
+          800: '#172c43',
+          900: '#101f30',
+        },
+        accent: {
+          50: '#fff7ed',
+          100: '#ffead5',
+          200: '#fed3a7',
+          300: '#f7a872',
+          400: '#f4904f',
+          500: '#ea7a33',
+          600: '#c45f23',
+          700: '#9a4a1b',
+          800: '#723814',
+          900: '#4e260d',
+        },
+        cream: '#fffaf5',
+        ink: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          900: '#0f172a',
+          950: '#020617',
+        },
+      },
+      fontFamily: {
+        sans: ['system-ui', '-apple-system', 'Segoe UI', 'Roboto', 'sans-serif'],
+      },
+      boxShadow: {
+        card: '0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05)',
+        elevated: '0 10px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.05)',
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}