Tidigare - visualisering av tidrapporter

18 oktober 2025Erik Ehnsiö1 min läsning

Många tidrapporteringssystem hanterar personlig tidsregistrering och uppföljning av enskilda projekt väl, men saknar bredare analysmöjligheter. På mitt jobb var det inte annorlunda - vi har ett bra verktyg för att rapportera tid och följa upp projektspecifika detaljer, men inget sätt att se individuella bidrag över flera projekt. Frågor som "Hur fördelas tiden mellan kunder?" eller "Vad arbetar teamet med just nu?" krävde manuella exporter och sammanställningar.

Möjligheten: Bygga ett analyslager ovanpå systemets REST API som möjliggör projektövergripande spårning, teaminsikter och flexibla datumjämförelser.

Lösningen

Jag byggde en snabb MVP som single-page app i Next.js som hämtar data från tidrapporteringssystemets REST API och visualiserar det vi behövde se. Jag använde ett komponentbibliotek för att spara tid på UI.

Dubbla vyer: medarbetarfokuserade vyer som visar projektfördelning över tid, och projektfokuserade vyer som bryter ner tid per teammedlem
Synkade interaktioner: klick på diagramsegment filtrerar datatabellen, och val av tabellrader markerar motsvarande diagramelement
Delbara URLs: URL-baserad state management så att filtrerade vyer kan bokmärkas och delas
Flexibla datumintervall: fördefinierade intervall (senaste 7 dagarna, denna månad, förra månaden) samt anpassat intervall

Filtergränssnitt med datumintervallväljare, personrullgardin och projektväljare — Filterkontroller i ljust läge

Filtergränssnitt med datumintervallväljare, personrullgardin och projektväljare i mörkt tema — Filterkontroller i mörkt läge

Tomt tillstånd som visar platshållarmeddelande och filterkontroller — Initial vy redo för datafråga i ljust läge

Tomt tillstånd som visar platshållarmeddelande och filterkontroller i mörkt tema — Initial vy redo för datafråga i mörkt läge

Staplat stapeldiagram som visar tidsfördelning med expanderbar datatabell nedan — Projektvy med interaktiva visualiseringar i ljust läge (klientdata suddig för integritet)

Staplat stapeldiagram som visar tidsfördelning med expanderbar datatabell nedan i mörkt tema — Projektvy med interaktiva visualiseringar i mörkt läge (klientdata suddig för integritet)