An Angular application for managing the business operations of flat-rate (paušal) entrepreneurs in Serbia.

• About the Project
• Technologies
• Project Structure
• Getting Started
• Environment Configuration
• Routing & Pages
• Authentication
• State Management (Stores)
• Services
• SignalR Chat Widget
• AI Assistant
• Internationalization (i18n)
• Shared Components
• Models
• Enums

The Paušalio frontend is an Angular 20 SPA (Single Page Application) that communicates with the .NET backend API. It is designed for flat-rate entrepreneurs in Serbia and provides: invoice management, tax obligation tracking, client records, real-time chat between company members, and an AI assistant with financial insights.

src/
├── index.html
├── main.ts
├── styles.css
│
└── app/
    ├── app.config.ts          → Global application configuration
    ├── app.routes.ts          → Route definitions
    ├── app.ts                 → Root component
    │
    ├── components/            → Presentational / layout components
    ├── enums/                 → TypeScript enums
    ├── guards/                → Route guards
    ├── interceptors/          → HTTP interceptors
    ├── models/                → TypeScript interfaces / models
    ├── pages/                 → Application pages (feature components)
    ├── pipes/                 → Custom Angular pipes
    ├── services/              → Angular services (HTTP + SignalR)
    ├── shared/                → Shared services
    └── stores/                → State management

• Node.js 18+
• Angular CLI: npm install -g @angular/cli

# 1. Clone the repository and navigate to the frontend folder
cd Pausalio

# 2. Install dependencies
npm install

# 3. Set up the environment file
cp src/environments/environment.example.ts src/environments/environment.ts
# Fill in apiUrl and other required values

# 4. Start the development server
ng serve

# Application is available at: http://localhost:4200

ng build --configuration production
# Output: dist/

Files are located in src/environments/:

// environment.example.ts
export const environment = {
  production: false,
  apiUrl: 'https://your-api-url',
  hubUrl: 'https://your-hub-url',
  googleClientId: 'your-google-client-id'
};

Routes are defined in app.routes.ts. Protected routes use AuthGuard.

Authentication relies on JWT tokens returned by the backend.

AuthGuard (guards/auth.guard.ts) protects all private routes — unauthorized users are redirected to /login.

AuthInterceptor (interceptors/auth.interceptor.ts) automatically attaches the JWT token to the Authorization header of every HTTP request:

Authorization: Bearer <token>

AuthService (services/auth.service.ts) handles:

• Login / Logout
• Owner and assistant registration
• Google OAuth2 sign-in
• Password reset and email verification
• Token persistence in local storage

The application uses a lightweight store pattern instead of NgRx.

Holds authentication state: whether the user is logged in, the JWT token, and the user's role.

Holds data about the currently logged-in user and their business profile. Used across multiple parts of the application without repeated HTTP calls.

All Angular services communicate with the backend API via HttpClient.

Real-time chat between the business owner and assistants is implemented as a floating widget available on every page of the application.

ChatWidgetComponent (components/chat-widget/) – UI for displaying and sending messages.

ChatSignalrService (services/chat-signalr.service.ts) – Manages the SignalR connection:

• Establishing a connection to /hubs/chat
• Sending and receiving messages in real time
• Tracking message status (Sent / Delivered / Read)
• Automatic reconnect on disconnection

Messages are encrypted on the backend — the frontend displays decrypted messages delivered through the hub.

AiAssistantComponent (pages/ai-assistant/) provides a chat interface for interacting with the AI assistant, which has access to the company's financial data.

AiAssistantService (services/ai-assistant.service.ts) sends user queries to the backend, which forwards them to the OpenRouter API with tool calling enabled.

Example queries:

• "Which client brought me the most revenue this year?"
• "How much tax have I paid in total over the last 6 months?"
• "Which country do my best clients come from?"

The application uses ngx-translate for multi-language support.

LanguageService (services/language.service.ts) manages the active language and switching between:

• Serbian Latin script (sr-Latn)
• Serbian Cyrillic script (sr-Cyrl)

Translation files are located in src/assets/i18n/ (JSON format).

A generic data table with support for sorting, pagination, and filtering. Used on most pages (invoices, clients, payments, etc.).

• MainLayoutComponent – Wrapper for all protected pages (sidebar + navbar + content area)
• NavbarComponent – Top navigation bar with user menu and language selector
• SidebarComponent – Side navigation with links to all pages

Manages the open/closed state of the sidebar across components.

• password-regex.ts – Password validation regex used in registration and password change forms.

TypeScript interfaces corresponding to backend DTOs:

activity-code, api-response, bank-account, business-invite, business-profile, chat, city, client, country, document, expense, invoice, invoice-item, item, payment, reminder, tax-obligation, user-business-profile, user-chat-message, user-profile

Enums are aligned with their backend counterparts:

ClientType, Currency, DocumentType, ExpenseStatus, InvoiceStatus, ItemType, PaymentStatus, PaymentType, ReminderType, TaxObligationStatus, TaxObligationType, UserBusinessRole, UserRole

Paušalio © 2026 – All rights reserved