cs transaction web

Experience · Frontend · Active

cs transaction web

React and Vite frontend for CS Transaction Manage, rendering a transaction-first ledger workspace with optional planning, agenda, series and investments through same-origin APIs.

• React 19
• Vite
• Redux Toolkit
• react-intl
• Recharts
• Tailwind 4

Spec sheet

Repository path

cs-transacion-manage/apps/web

Runtime

React 19 + Vite

Public host

http://transactions.cs.lvh.me:8080

Frontend rule

Same-origin /api only

Responsibilities

• Render Movimenti as the primary authenticated workspace and keep planning secondary under /planning.
• Allow the first transaction with inline relationship and counterparty creation without a planning gate.
• Consume only the local BFF through /api.
• Use access.capabilities from auth responses to hide unavailable navigation, actions and routes.
• Use the local shared package for API-facing types.
• Route local dev API calls through the Vite proxy configured by VITE_API_PROXY_TARGET.

Interfaces and contract surface

• GET / redirects to /transactions
• GET /planning for the optional strategic board
• Same-origin /api
• Vite dev server on 5179

Consumers

• Internal users via browser

Dependencies and external touchpoints

• cs transaction api
• cs transaction shared

Notes

• The frontend has no direct Core-service calls; capability checks are UX-only and backend guards remain authoritative.

Source references

• cs-transacion-manage/apps/web/package.json
• cs-transacion-manage/apps/web/vite.config.ts
• cs-transacion-manage/apps/web/src

Capability UI

Il frontend riceve access da /api/auth/me e usa access.capabilities per filtrare navigazione, azioni e route. Questo filtro e solo UX: la sicurezza resta nei guard del BFF.

Nel dettaglio /setup/users/:id, un admin vede il pannello capability utente. Il pannello legge e salva solo tramite /api/users/:id/capabilities; non chiama direttamente platform-auth-service.

Selezione e cancellazione bulk

La lista /transactions mostra i movimenti per scadenza in ordine decrescente, dal mese e giorno piu recenti ai piu vecchi. Espone inoltre una modalita di selezione esplicita per i movimenti reali eliminabili. L'utente puo selezionare righe singole, un intero mese o tutti i risultati filtrati; le voci virtuali e gli interessi investimento restano visibili ma non selezionabili.

Prima della cancellazione la UI mostra il conteggio esatto e richiede conferma. Un cambio dei filtri rimuove dalla selezione le righe non piu visibili, evitando cancellazioni nascoste. La conferma usa esclusivamente il BFF same-origin POST /api/transactions/bulk-delete.

Classificazione e pianificazione

I wizard di transazione e ricorrenza mostrano il campo Natura in modo contestuale alla direzione: entrate attive/passive oppure uscite di mantenimento/investimento. Le liste e i dettagli mostrano chip per natura e periodicità; la periodicità è Ricorrente per i flussi collegati a una serie e Straordinaria negli altri casi.

La Plancia, la configurazione iniziale e la Simulazione usano una matrice a otto celle (periodicità × natura). Il cash flow complessivo e i conteggi delle uscite includono entrambe le tipologie; il rimborso del capitale investimento resta escluso dalla copertura. La route legacy /expense-control, il relativo menu e i componenti non fanno più parte dell’applicazione.

Buone abitudini

La route /habits mostra una gamification personale derivata dai dati del ledger. Il backend espone GET /api/gamification/summary; il frontend legge punti, livello, streak, badge e attività recenti con un caricamento dedicato, senza aggiungerli al bootstrap globale della workspace.

Nel MVP vengono premiati soltanto il saldo puntuale di un movimento proprietario DEBT e il completamento mensile della routine “Paga prima te stesso”. Gli importi, i movimenti condivisi o collegati a una controparte utente e le classifiche non entrano nel punteggio; award e streak vengono ricalcolati o revocati quando la sorgente non è più eleggibile.