Claim Management System

A production-style proof-of-concept Claim Management application with enterprise-grade architecture.

🏗️ Architecture

• Frontend: Angular 16 with standalone components, Angular Material UI
• Backend: NestJS with TypeScript, REST API, in-memory storage
• Authentication: JWT-based with mock credentials

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• Angular CLI 16

Backend Setup

cd backend
npm install
npm run start:dev

• Backend runs on http://localhost:3000
• Swagger documentation available at http://localhost:3000/api

Frontend Setup

cd frontend
npm install
ng serve

• Frontend runs on http://localhost:4200

🔐 Sample Credentials

• Username: admin
• Password: password

📡 API Endpoints

Authentication

• POST /auth/login - Login with credentials

Claims Management

• GET /claims - Get all claims
• POST /claims - Create new claim
• GET /claims/:id - Get claim by ID
• PUT /claims/:id/status - Update claim status

Dashboard

• GET /dashboard/metrics - Get dashboard KPIs

📁 Project Structure

claim-management/
├── backend/                    # NestJS Backend
│   ├── src/
│   │   ├── auth/              # Authentication module
│   │   │   ├── auth.controller.ts
│   │   │   ├── auth.service.ts
│   │   │   ├── jwt.strategy.ts
│   │   │   └── dto/
│   │   ├── claims/            # Claims management
│   │   │   ├── claims.controller.ts
│   │   │   ├── claims.service.ts
│   │   │   └── dto/
│   │   ├── dashboard/         # Dashboard metrics
│   │   │   ├── dashboard.controller.ts
│   │   │   ├── dashboard.service.ts
│   │   │   └── dto/
│   │   ├── app.module.ts
│   │   └── main.ts
│   ├── package.json
│   └── tsconfig.json
├── frontend/                   # Angular 16 Frontend
│   ├── src/
│   │   ├── app/
│   │   │   ├── core/          # Core services, guards, interceptors
│   │   │   │   ├── auth/
│   │   │   │   ├── guards/
│   │   │   │   └── interceptors/
│   │   │   ├── features/      # Feature modules
│   │   │   │   ├── login/
│   │   │   │   ├── dashboard/
│   │   │   │   └── claims/
│   │   │   └── shared/        # Shared components and services
│   │   │       ├── models/
│   │   │       └── services/
│   │   ├── environments/
│   │   └── styles.scss
│   ├── angular.json
│   ├── package.json
│   └── tsconfig.json
└── README.md

✨ Features

Frontend Features

• ✅ JWT Authentication with route guards and HTTP interceptors
• ✅ Enterprise-themed Angular Material UI with blue/gray palette
• ✅ Responsive Dashboard with KPI cards and interactive charts
• ✅ Multi-step Claim Creation with form validation and review
• ✅ Claims Management with list view, filtering, and detail pages
• ✅ Status Tracking with visual timeline and progress indicators
• ✅ Professional UI/UX with loading states and error handling

Backend Features

• ✅ RESTful API with NestJS framework
• ✅ JWT Authentication with Passport strategy
• ✅ In-memory Data Storage with seeded sample data
• ✅ Swagger/OpenAPI Documentation with interactive API explorer
• ✅ CORS Configuration for frontend integration
• ✅ DTO Validation with class-validator
• ✅ Clean Architecture with controller/service/DTO pattern

🎯 Key Components

Authentication System

• Login page with form validation
• JWT token storage in localStorage
• HTTP interceptor for automatic token attachment
• Route guards for protected pages
• Logout functionality

Dashboard

• Total Claims KPI card
• Pending Claims counter
• Approved Claims metrics
• Rejected Claims tracking
• Interactive Doughnut Chart showing claims by status
• Financial Summary with total and average amounts

Claims Management

• Claims List with sortable Material table
• Create Claim with 3-step wizard:
  1. Claim details entry
  2. Review and confirmation
  3. Final submission
• Claim Detail View with status timeline
• Status Tracking with visual progress indicators

🛠️ Technical Implementation

Frontend Architecture

• Standalone Components (no NgModules)
• Reactive Forms with validation
• RxJS for state management
• Angular Material for UI components
• SCSS for styling with enterprise theme
• Chart.js integration for data visualization

Backend Architecture

• Modular Structure with feature-based modules
• Dependency Injection with NestJS
• Guard-based Authentication with JWT strategy
• DTO Pattern for request/response validation
• Service Layer for business logic
• Controller Layer for HTTP handling

🔧 Development Notes

Sample Data

The backend includes pre-seeded sample claims with different statuses:

• Health insurance claim (Approved)
• Auto insurance claim (Pending)
• Home insurance claim (Under Review)
• Life insurance claim (Rejected)

Environment Configuration

• Backend API URL configurable in frontend/src/environments/environment.ts
• JWT secret configurable in backend (change for production)
• CORS settings configured for local development

Production Considerations

• Replace in-memory storage with database (PostgreSQL, MongoDB)
• Implement proper user management and roles
• Add file upload for claim documents
• Implement email notifications
• Add audit logging
• Configure proper JWT secrets and expiration
• Set up proper error handling and monitoring

🚀 Getting Started Guide

1. Clone the repository
2. Install backend dependencies: cd backend && npm install
3. Start backend server: npm run start:dev
4. Install frontend dependencies: cd frontend && npm install
5. Start frontend application: ng serve
6. Open browser to http://localhost:4200
7. Login with username: admin, password: password
8. Explore the dashboard, create claims, and view details

📊 Demo Workflow

1. Login with provided credentials
2. View Dashboard to see KPI metrics and charts
3. Navigate to Claims to see existing claims
4. Create New Claim using the multi-step wizard
5. View Claim Details to see status timeline
6. Explore API using Swagger documentation at /api

This application demonstrates enterprise-grade development practices with clean architecture, proper separation of concerns, and production-ready code structure.