# Verkstan – köra och bygga vidare själv

Det här är en vanlig webbsida byggd med TanStack Start (React + TypeScript + Tailwind).
Den behöver ingen speciell plattform – den kan köras på vilken server som helst som har Node.js.

## 1. Förutsättningar

- **Node.js 22** – enklast att installera med [nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
- **npm** (följer med Node) eller **bun**

Kontrollera med `node -v` att det står något i stil med `v22.x`.

## 2. Köra lokalt på din egen dator

```sh
npm install
npm run dev
```

Öppna adressen som skrivs ut i terminalen. Då ser du sidorna med exempeluppgifter.

## 3. Tester

```sh
npm test
```

Etikettlogiken (serienummer, BarTender-anrop, modellnummer) ligger i `src/lib/labels.ts`
och testas i `src/lib/labels.test.ts`. Lägg gärna ett test där varje gång du ändrar reglerna.

## 4. Bygga och köra på din egen server

```sh
NITRO_PRESET=node-server npm run build
node .output/server/index.mjs
```

- Bygget skapar mappen `.output` – den är fristående och kan kopieras till servern.
- Servern lyssnar på port **3000**. Ändra med miljövariablerna `PORT` och `HOST`.
- Lägg en omvänd proxy (Nginx, Apache eller Caddy) framför servern som sköter HTTPS.
- **Använd inte** en fallback till `index.html` – servern sköter själv routing av alla sidor.
- Kör den som en tjänst med systemd, så startar den om igen vid omstart.

Enkel systemd-tjänst (`/etc/systemd/system/verkstan.service`):

```ini
[Unit]
Description=Verkstan
After=network.target

[Service]
WorkingDirectory=/opt/verkstan
ExecStart=/usr/bin/node .output/server/index.mjs
Environment=PORT=3000
Environment=HOST=127.0.0.1
Restart=always
User=www-data

[Install]
WantedBy=multi-user.target
```

## 5. Var saker ligger

| Vad | Fil |
| --- | --- |
| En sida per verktyg | `src/routes/etiketter.tsx`, `sms.tsx`, `swish.tsx`, `frakt.tsx`, `fordon.tsx`, `certifikat.tsx` |
| Översiktsidan | `src/routes/index.tsx` |
| Innehåll i sidomenyn | `src/components/nav.ts` |
| Etikettlogik + tester | `src/lib/labels.ts`, `src/lib/labels.test.ts` |
| Beställnings- och inköpslogik + tester | `src/lib/orders.ts`, `src/lib/purchases.ts` |
| Färger, mörkt/ljust läge, typsnitt | `src/styles.css` |
| Knappar, kort, fält (färdiga komponenter) | `src/components/ui/` |
| Att göra | `roadmap.md` |

**Nytt verktyg:** lägg till en rad i `src/components/nav.ts` och skapa en ny fil i `src/routes/`
– sidomenyn och översikten uppdateras av sig själva.

## 6. Vad som är på riktigt och vad som är exempel

Just nu är all data **exempeluppgifter**. Inget skrivs ut, skickas eller sparas.

- Ingen databas och inga inloggningar finns ännu.
- BarTender-anropen räknas ut men skickas inte. Adressen ligger i `BARTENDER_URL`
  i `src/lib/labels.ts` – dit pekar den riktiga utskriften när den kopplas in.
- Fordonssidan har en plats för bilregistret men ingen nyckel till det.
- SMS, Swish och frakt är tomma sidor som visar hur ett verktyg kan se ut.
- Beställningar och Inköp visar påhittade order och leverantörsorder – ingen shop eller
  leverantör är kopplad ännu.

För att göra något på riktigt behövs alltså: databas och inloggning, tillgång till BarTender,
nyckel till bilregistret, val av SMS-leverantör, fraktbolag och Swish-kortifikat.

## 7. Fortsätta i Lovable och på egen server samtidigt

Koden är din. Vill du både kunna be Lovable om ändringar och köra på egen server,
knyt projektet till ett Git-arkiv (GitHub/GitLab/Bitbucket). Ändringar i Lovable hamnar
i arkivet, och dina egna commitar syns tillbaka i Lovable.