KAOS/TASKS/review/T09.md
djuka 3302f83cff T09: Dashboard — Kanban board sa Go templates
- html/template sistem: layout, dashboard, column, task-card, task-detail
- Dark tema CSS, responsive grid (5→3→2→1 kolona)
- HTMX: klik→detalj panel, move dugmad, auto-refresh active kolone
- /report/:id za prikaz izveštaja
- Slide-in animacija za detalj panel
- 16 server testova, 83 ukupno — svi prolaze
- T08 premešten u done/

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-20 12:14:31 +00:00

3.8 KiB

T09: Dashboard — Kanban board sa taskovima

Kreirao: planer Datum: 2026-02-20 Agent: coder Model: Sonnet Zavisi od: T08


Opis

HTML dashboard sa Kanban prikazom — kolone po stanju (backlog, ready, active, review, done). HTMX za interaktivnost.

Fajlovi za kreiranje

code/web/
├── templates/
│   ├── layout.html            ← osnovna struktura (head, body, footer)
│   ├── dashboard.html         ← kanban board
│   ├── partials/
│   │   ├── column.html        ← jedna kolona (HTMX fragment)
│   │   ├── task-card.html     ← kartica taska
│   │   └── task-detail.html   ← detalj taska (klik → prikaz sadržaja)
└── static/
    └── style.css              ← stilovi za dashboard

Izgled

┌─────────────────────────────────────────────────────────┐
│  🔧 KAOS Dashboard                          v0.1.7     │
├──────────┬──────────┬──────────┬──────────┬─────────────┤
│ BACKLOG  │  READY   │  ACTIVE  │  REVIEW  │    DONE     │
│    2     │    1     │    -     │    -     │      7      │
├──────────┼──────────┼──────────┼──────────┼─────────────┤
│┌────────┐│┌────────┐│          │          │┌───────────┐│
││ T08    │││ T10    ││          │          ││ T01 ✅    ││
││ Server │││ Drag   ││          │          ││ Go init   ││
││ Sonnet │││ & Drop ││          │          ││ v0.1.1    ││
│└────────┘│└────────┘│          │          │└───────────┘│
│┌────────┐│          │          │          │┌───────────┐│
││ T09    ││          │          │          ││ T02 ✅    ││
││ Dashb. ││          │          │          ││ Loader    ││
│└────────┘│          │          │          ││ v0.1.2    ││
│          │          │          │          │└───────────┘│
│          │          │          │          │ ...         │
└──────────┴──────────┴──────────┴──────────┴─────────────┘

Kartica taska

Prikazuje:

  • ID (T01, T02...)
  • Naslov
  • Agent + Model
  • Tag verzije (ako je done)
  • Zavisnosti

Klik na karticu → HTMX učita detalj:

<div class="task-card" hx-get="/task/T01" hx-target="#task-detail">

Task detalj panel

Desna strana ili modal — prikazuje ceo sadržaj task fajla:

  • Markdown renderovan kao HTML
  • Dugme za premestanje u sledeći folder
  • Link do izveštaja (ako postoji)

HTMX interakcije

  • Klik na task → hx-get="/task/{id}" → prikaz detalja
  • Dugme "Premesti" → hx-post="/task/{id}/move?to=ready" → ažurira kolonu
  • Auto-refresh → hx-trigger="every 5s" na active koloni

Pravila

  • Go html/template za renderovanje
  • Mobilno responsive
  • Poruke na srpskom
  • Nema JS osim htmx.min.js
  • CSS grid za kolone

Testovi

  • GET / → vraća HTML sa svim kolonama
  • Proveri da su taskovi u pravim kolonama
  • HTMX fragment: GET /task/T01 → vraća HTML fragment

Očekivani izlaz

Otvori http://localhost:8080 → vidi kanban board sa taskovima. Klikni na task → vidi detalj.


Pitanja


Odgovori