Înapoi la portofoliu
ToolStudiu / personal

Time Tracker

Aplicație React + Express care centralizează date de time tracking importate, completează ore manuale, aplică reguli de raportare și generează filtre, grafice, rapoarte de ore și calcule de facturare pe grupuri de proiecte.

Time Tracker

Stack principal

JavaScript
React 19
React DOM 19
Vite 7
Tailwind CSS 4Express 4JSON Web TokenRechartsdate-fnsvite-plugin-pwaWorkboxPM2Node.jsBNR XML exchange-rate feedJSON file storage

Provocarea

Provocarea a fost transformarea unor intrări tehnice de time tracking într-un instrument practic pentru verificarea muncii și pregătirea rapoartelor: agregare pe proiect și limbaj, completarea timpului lipsă, excluderea proiectelor nerelevante, filtrare pe perioade și calcul de facturare pentru grupuri cu tarife diferite.

Soluția

Soluția separă UI-ul React de un API Express simplu și folosește un pipeline de normalizare/agregare în frontend. Datele principale și orele suplimentare sunt combinate, ordonate și îmbogățite cu regula de overhead pentru testare, apoi aceleași intrări filtrate alimentează statisticile, graficele, raportul de ore și raportul de facturare. Grupurile și tarifele sunt administrabile, cursul EUR este citit de backend din feed-ul XML BNR, iar exportul CSV și layout-urile de print transformă analiza în livrabile reutilizabile.

Complexitate notabilă

Time Tracker este un proiect personal construit ca instrument intern de analiză peste date de time tracking deja colectate. Frontend-ul React 19 încarcă prin API setul principal de intrări și un set separat de ore suplimentare, le combină cronologic și calculează statistici pe proiect, limbaj și zi. Dacă API-ul nu este disponibil, citirea are fallback către fișierele JSON statice incluse în aplicație.

Pipeline-ul de raportare nu folosește doar timpul brut. Pentru fiecare proiect, cu excepția intrărilor marcate Unknown Project, utilitarul de calcul adaugă un overhead fix de 50% pentru testare/procesare și îl distribuie între intrările proiectului, păstrând separat timpul original și timpul adăugat. Proiectele configurate ca excluse sunt apoi eliminate din statistici și rapoarte. Aceasta este o regulă explicită a snapshotului analizat, nu un model configurabil din UI.

Dashboard-ul oferă filtre rapide pentru ziua curentă, săptămână, lună, luna anterioară, ultimele 7 sau 30 de zile, interval custom, proiecte, limbaje și căutare text. Datele filtrate pot fi exportate CSV. Recharts este folosit pentru topul proiectelor, distribuția pe limbaje și activitatea zilnică, iar o componentă tabelară cu sortare și paginare există în cod, deși este dezactivată în ecranul principal.

Pentru raportare financiară, proiectele pot fi grupate și asociate cu un tarif orar. Raportul de grup identifică intrările proiectelor, calculează orele și valoarea rezultată, apoi cere cursul EUR de la BNR prin backend pentru o conversie orientativă în RON. Atât raportul de facturare pe grupuri, cât și raportul de ore au layout-uri dedicate pentru printare.

Zona administrativă include adăugare manuală de intrări, CRUD pentru grupuri de proiecte, import JSON în masă care înlocuiește dataset-ul principal, administrarea proiectelor excluse și editarea sau ștergerea orelor suplimentare. O parte dintre aceste operații sunt accesate prin shortcut-uri de tastatură, ca interfață internă, nu ca admin separat cu autorizare pe roluri.

Backend-ul Express persistă datele direct în fișiere JSON din public/, fără ORM sau bază de date. Autentificarea folosește JWT cu expirare la 24 de ore și un registru in-memory pentru tokenurile active. Deployment-ul este pregătit pentru un singur proces PM2 cu restart automat și loguri pe fișiere. PWA-ul este configurat prin vite-plugin-pwa cu auto-update și cache pentru resurse statice/fonturi, dar codul nu implementează Background Sync sau o coadă de scrieri offline.

Snapshotul trebuie tratat ca tool personal/prototip operațional, nu ca produs multi-user hardenat. O extindere către utilizare multi-user ar necesita hardening suplimentar pentru stocarea credentialelor, autorizare per rol și resursă, persistență concurentă/atomică și validare automată prin teste și CI/CD.

Rezultate cheie

  • Dashboard autentificat care combină datele principale de time tracking cu ore suplimentare persistate separat
  • Agregări pe proiect, limbaj și zi, cu totaluri, medii și distribuții vizuale prin Recharts
  • Regulă de raportare care păstrează timpul original și adaugă separat un overhead fix de testare/procesare
  • Filtrare după interval de date, proiect, limbaj și căutare text, plus preseturi rapide pentru perioade uzuale
  • Export CSV pentru setul de intrări filtrate
  • Administrare CRUD pentru grupuri de proiecte cu tarif orar și monedă
  • Raport de facturare pe grupuri cu calcul pe proiect și conversie EUR/RON folosind cursul BNR
  • Raport de ore și raport de facturare cu stiluri dedicate pentru printare
  • Import JSON bulk pentru înlocuirea dataset-ului principal și fallback de citire din fișiere statice
  • Adăugare manuală de intrări și administrare separată pentru ore suplimentare
  • Configurare PWA instalabilă și deployment al API-ului prin PM2

Proiecte asemănătoare

Vrei ceva similar?

Începe cu wizard-ul de estimare — răspunzi la câteva întrebări și primești un range de preț + timeline realist.