Skip to content

Frontend Deep Dive

Structure

The Vite React app uses page-level views for login, chat, grievances, tracking, dashboards, officer queues, administration, user management, and knowledge-base search. Shared layout, status/SLA badges, tables, charts, chat bubbles, and forms compose the role-specific experience.

React Query manages server state; frontend/src/lib/auth.tsx owns authentication context and Firebase integration. API modules isolate backend calls, while React Router protects and organizes screens.

User experience

The citizen path emphasizes conversational intake and tracking. Officers receive queues and detail views; administrators receive workload, user, category, and knowledge-base management. Recharts components visualize operational metrics and SLA health.

Quality

Strict TypeScript, Vite build/typecheck scripts, schema-aware forms, and shared UI primitives provide the main frontend quality boundary. Browser tests should cover SSE reconnect/error states, auth expiry, file upload limits, and role-based navigation.

API and streaming behavior

The frontend has dedicated API modules rather than embedding fetch calls in every page. Chat requires a start-session request, then sends messages to the SSE endpoint and incrementally appends assistant content. Uploads use multipart form data and retain the returned attachment metadata in the session view. RAG responses include both answer text and verified source names.

The important UI state categories are:

  • authentication/loading and unauthorized redirects;
  • query loading, empty, stale, and error states;
  • chat session status and streamed assistant content;
  • upload progress and parse/storage failures;
  • case status and SLA badges;
  • dashboard chart loading and no-data states.

Design-system responsibilities

Shared components such as AppLayout, Sidebar, Header, StatusBadge, PriorityBadge, SLABadge, GrievanceTable, ChatBubble, ChatInput, and chart components keep policy vocabulary consistent across roles. i18n.ts exposes the current English-only product language decision while leaving a future localization seam.

Frontend risks

SSE is a long-lived request and needs cleanup when navigating away or abandoning a session. Auth expiry during a stream must not leave the page in a permanent “thinking” state. File previews and markdown rendering should be treated as untrusted content. Role-based routes should be backed by server authorization rather than frontend hiding alone.