# Project Architecture

### Directory Structure

```
src/
├── app/
│   ├── account-management/       # Account operations
│   ├── admin-menu/                # Admin navigation
│   ├── finance-management/        # Financial operations
│   ├── home/                      # Dashboard/home page
│   ├── incoming-scan/             # Incoming package scanning
│   ├── indopaket/                 # Regional package handling
│   ├── layouts/                   # Layout components (header, sidebar, breadcrumb)
│   ├── login/                     # Authentication
│   ├── manifest/                  # Manifest management
│   ├── manual-handling/           # Manual handling operations
│   ├── marketplace/               # Marketplace integration
│   ├── material-component/        # Material Design wrappers
│   ├── mitra-courier/             # Courier partner management
│   ├── modal/                     # Modal dialogs
│   ├── models/                    # Data models
│   ├── monitoring-booking/        # Booking monitoring
│   ├── monitoring-courier/        # Courier monitoring
│   ├── notification/              # Notification system
│   ├── outgoing-scan/             # Outgoing package scanning
│   ├── package-return/            # Package returns
│   ├── package-return-handling/   # Return processing
│   ├── pod-approval/              # Proof of Delivery approval
│   ├── profile/                   # User profile
│   ├── reports/                   # Standard reports
│   ├── reports-dc/                # Distribution center reports
│   ├── saldo/                     # Account balance
│   ├── services/                  # Business logic services
│   ├── shared/                    # Shared utilities and components
│   ├── tariff/                    # Pricing and tariff
│   ├── tracking/                  # Package tracking
│   ├── trucking/                  # Trucking operations
│   ├── user-manage/               # User management
│   ├── waybill/                   # Waybill management
│   ├── api.service.ts             # Main API service
│   ├── auth.guard.ts              # Authentication guard
│   ├── role.guard.ts              # Role-based authorization guard
│   ├── app.module.ts              # Root module
│   └── app.routing.ts             # Routing configuration
├── assets/                        # Static assets (images, icons)
├── environments/                  # Environment configurations
└── index.html                     # Main HTML file
```

### Architecture Pattern

The application follows Angular's **module-based architecture**:

1. **Root Module** (`app.module.ts`) - Core module with essential dependencies
2. **Feature Modules** - Lazy-loaded modules for each feature area
3. **Shared Module** - Reusable components and utilities
4. **Services** - Business logic and API communication
5. **Guards** - Route protection and authorization
6. **Models** - TypeScript interfaces for data structures

### Module Loading Strategy

- **Eager Loading**: Core components (layouts, login, profile)
- **Lazy Loading**: All feature modules for optimal performance
- Routes are protected by `AuthGuard` requiring authentication