# B2B Flight Ticketing UI - Frontend

This is the Angular-based frontend application for the B2B Flight Ticketing Platform.

## Project Setup

This project was created with Angular CLI version 16 and includes:

- **Angular 16+** with TypeScript strict mode
- **Angular Material** for UI components
- **SCSS** with a comprehensive design system
- **Lazy-loaded routing** for optimal performance
- **Environment configuration** for API endpoints
- **Testing frameworks**: Jasmine/Karma for unit tests, fast-check for property-based tests

## Design System

The application includes a complete design system with:

### Colors
- Primary Blue: `#1976d2`
- Secondary Blue: `#42a5f5`
- Success Green: `#4caf50`
- Warning Orange: `#ff9800`
- Error Red: `#f44336`
- Background Gray: `#f5f5f5`

### Typography
- Font Family: Roboto
- Font Sizes: 12px (small), 14px (base), 16px (large), 18-32px (headings)
- Font Weights: 300 (light), 400 (regular), 500 (medium), 700 (bold)

### Spacing
- XS: 4px
- SM: 8px
- MD: 16px
- LG: 24px
- XL: 32px
- XXL: 48px

### Responsive Breakpoints
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px

## Project Structure

```
src/
├── app/
│   ├── core/                 # Singleton services, guards, interceptors
│   ├── shared/               # Shared components, directives, pipes
│   ├── features/             # Feature modules (lazy-loaded)
│   │   ├── auth/
│   │   ├── dashboard/
│   │   ├── booking/
│   │   ├── wallet/
│   │   ├── reports/
│   │   ├── admin/
│   │   └── support/
│   └── layout/               # Layout components
├── environments/             # Environment configurations
└── styles/                   # Global styles and design system
    ├── _variables.scss
    ├── _mixins.scss
    └── _theme.scss
```

## Development Server

Run `npm start` or `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.

## Build

Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory.

### Production Build

Run `npm run build -- --configuration production` for a production build with optimizations.

## Running Tests

### Unit Tests

Run `npm test` to execute the unit tests via Karma.

### Property-Based Tests

Property-based tests use fast-check library and are integrated with Jasmine. Run with:

```bash
npm test
```

Property tests are identified by the comment format:
```typescript
// Feature: b2b-flight-ticketing-ui, Property X: Property Name
```

## Environment Configuration

The application supports multiple environments:

### Development (`environment.ts`)
- API URL: `http://localhost:8080/api`
- Keycloak URL: `http://localhost:8081`
- WebSocket URL: `ws://localhost:8080/ws`

### Production (`environment.prod.ts`)
- API URL: `/api` (relative)
- Keycloak URL: `https://keycloak.yourdomain.com`
- WebSocket URL: `wss://api.yourdomain.com/ws`

## Code Scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Lazy Loading

All feature modules are lazy-loaded for optimal performance:

- `/login` → AuthModule
- `/dashboard` → DashboardModule
- `/booking` → BookingModule
- `/wallet` → WalletModule
- `/reports` → ReportsModule
- `/admin` → AdminModule
- `/support` → SupportModule

## Angular Material

The application uses Angular Material with a custom theme based on the design system. All Material components are imported in the SharedModule for easy reuse.

## Further Help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

## Backend Integration

This frontend integrates with a Java Spring Boot backend API. Ensure the backend is running on `http://localhost:8080` for development.

## Authentication

Authentication is handled via Keycloak with JWT tokens. The application expects:
- Keycloak realm: `b2b-flight-platform`
- Client ID: `b2b-flight-ui`

## Next Steps

1. Implement core authentication service and guards (Task 2)
2. Set up HTTP interceptors and API service (Task 3)
3. Create shared components (Task 4)
4. Implement layout components with responsive design (Task 5)
5. Build feature modules incrementally