HR Management System - Full Stack Assessment

A complete full-stack application built with Spring Boot, Angular 17, H2 Database, and JasperReports for employee and department management.

🏗️ Architecture

├── server/          # Spring Boot REST API
│   ├── src/main/java/com/assessment/hrapp/
│   │   ├── controller/     # REST Controllers
│   │   ├── service/        # Business Logic Layer
│   │   ├── repository/     # Data Access Layer
│   │   ├── domain/         # JPA Entities
│   │   ├── dto/            # Data Transfer Objects
│   │   ├── mapper/         # Entity-DTO Mappers
│   │   ├── config/         # Configuration Classes
│   │   └── exception/      # Exception Handling
│   └── src/main/resources/
│       ├── static/         # Static HTML/CSS Cards
│       └── reports/        # JasperReports Templates
└── client/         # Angular 17 Frontend
    ├── src/app/
    │   ├── components/     # UI Components
    │   └── services/       # HTTP Services
    └── proxy.conf.json     # Development Proxy

🚀 Features

Backend (Spring Boot 3.x + Java 17)

• ✅ RESTful APIs with proper HTTP status codes
• ✅ H2 in-memory database with sample data
• ✅ JPA entities with relationships
• ✅ DTO pattern with validation
• ✅ Service layer with @Transactional support
• ✅ Global exception handling with @ControllerAdvice
• ✅ CORS configuration for Angular development
• ✅ JasperReports PDF generation (one page per department)
• ✅ Maven wrapper for reproducible builds

Frontend (Angular 17 + Bootstrap 5)

• ✅ Department search with employee listing
• ✅ Employee detail view with edit/delete functionality
• ✅ Responsive design with Bootstrap 5
• ✅ Form validation with user feedback
• ✅ State management with BehaviorSubject
• ✅ HTTP proxy configuration for API calls
• ✅ Static cards showcase page

Static Content

• ✅ HTML/CSS cards page matching provided design
• ✅ Responsive layout with hover effects
• ✅ Available at both server and client locations

🛠️ Technology Stack

• Backend: Spring Boot 3.2.1, Java 17, Maven, H2 Database
• Frontend: Angular 17, Bootstrap 5, TypeScript
• Reports: JasperReports 6.20.6
• Testing: JUnit 5, MockMvc, Angular Testing Utilities

📊 Data Model

Entities

• Department: id (String), name, location, employees (OneToMany)
• Employee: id (String), name, email, position, salary (BigDecimal), department (ManyToOne)

Sample Data

• 4 Departments: Engineering, Marketing, HR, Finance
• 12 Employees across all departments
• Realistic salary ranges and positions

🔌 API Endpoints

Department APIs

GET    /api/departments                           # All departments
GET    /api/departments/{deptId}/employees        # Employees by department
POST   /api/departments/{deptId}/employees        # Add employee to department
DELETE /api/departments/{deptId}/employees/{empId} # Delete employee

Employee APIs

GET    /api/employees                             # All employees
GET    /api/employees/{id}                        # Employee by ID

Report APIs

GET    /api/reports/department-employees-map      # JSON map of dept->employees
GET    /api/reports/employees-by-department.pdf   # PDF report
GET    /api/reports/test-rollback                 # Transaction rollback demo

Static Content

GET    /cards.html                                # Static cards page

💻 Runtime Versions

Detected Environment:

• Java: OpenJDK 17.0.16 (Microsoft Build)
• Node.js: v22.16.0
• npm: 10.9.2
• Maven: 3.9.6 (via wrapper)
• Angular CLI: 17.3.17 (via npx)
• OS: Windows 11

🏃‍♂️ Quick Start

Prerequisites

• Windows: PowerShell 5.0+ (included in Windows 10/11)
• macOS/Linux: Bash shell
• Node.js 18+ and npm (for Angular) - Download here
• Java 17 - Download here or use scripts to auto-download

Option A: One-Click VS Code (Recommended)

1. Open project in VS Code
2. Press Ctrl+Shift+P → "Tasks: Run Task" → "Run All"
3. Wait for both servers to start automatically
4. Browser opens to http://localhost:4200

Option B: PowerShell Script (Windows)

# Simple version (recommended)
.\run-simple.ps1

# Advanced version with auto-download
.\run.ps1

Option C: Manual Commands

# Terminal 1 - Backend
cd server
.\mvnw.cmd spring-boot:run              # Windows
./mvnw spring-boot:run                  # macOS/Linux

# Terminal 2 - Frontend  
cd client
npm ci
npx ng serve --proxy-config proxy.conf.json --open

✅ Automated Verification

Quick Verification

# Run complete system verification
.\verify.ps1

This script automatically tests:

• ✅ All API endpoints (departments, employees, reports)
• ✅ PDF report generation and size validation
• ✅ CRUD operations (create, read, delete)
• ✅ Transaction rollback functionality
• ✅ Static content serving
• ✅ Frontend accessibility

Manual Testing URLs

Once both servers are running, test these URLs:

Backend APIs:

• http://localhost:8080/api/departments
• http://localhost:8080/api/employees
• http://localhost:8080/api/departments/dept01/employees
• http://localhost:8080/api/reports/employees-by-department.pdf
• http://localhost:8080/cards.html
• http://localhost:8080/h2-console (JDBC: jdbc:h2:mem:hrdb, User: sa)

Frontend App:

• http://localhost:4200 (Main application)
• http://localhost:4200/cards (Cards showcase)

PowerShell API Testing

# Test departments API
Invoke-RestMethod http://localhost:8080/api/departments

# Test employees API
Invoke-RestMethod http://localhost:8080/api/employees

# Create test employee
$employee = @{id="emp999"; name="Test"; email="test@test.com"; position="Tester"; salary=50000} | ConvertTo-Json
Invoke-RestMethod -Uri http://localhost:8080/api/departments/dept01/employees -Method POST -Body $employee -ContentType "application/json"

# Delete test employee  
Invoke-RestMethod -Uri http://localhost:8080/api/departments/dept01/employees/emp999 -Method DELETE

🧪 Testing Instructions

Backend Tests

cd server
./mvnw test                           # Run all tests
./mvnw test -Dtest=EmployeeControllerTest  # Run specific test class

Frontend Testing

1. Open http://localhost:4200
2. Type dept01 in the search box and click "Search"
3. Verify employee table appears with 4 employees
4. Click "View" on any employee to see details
5. Click "Edit" to modify employee information
6. Click "Delete" to remove an employee
7. Navigate to "Cards Showcase" to see static cards

End-to-End Verification

1. Start both server (port 8080) and client (port 4200)
2. Open http://localhost:4200
3. Search for department dept01
4. View employee emp001 (John Doe)
5. Edit and save employee details
6. Download PDF report from navigation
7. Visit http://localhost:4200/cards for cards showcase

📸 Screenshots Checklist

• H2 Console showing populated tables
• Department search page with results
• Employee detail page in view mode
• Employee detail page in edit mode
• PDF report downloaded and opened
• Static cards page in browser
• Angular app running on localhost:4200
• API responses in browser network tab

🔧 Configuration Files

Server Configuration

• application.yaml: Database, JPA, and server settings
• pom.xml: Maven dependencies and build configuration
• proxy.conf.json: Angular development proxy settings

Client Configuration

• angular.json: Angular CLI configuration
• package.json: Node.js dependencies
• tsconfig.json: TypeScript compiler settings

🐛 Troubleshooting

Common Issues

1. Java not found / JAVA_HOME not set

   # Option A: Install Java 17 from https://adoptium.net/temurin/releases/?version=17
   # Option B: Use auto-download script
   .\run.ps1  # This will download portable JDK automatically

2. Port 8080 or 4200 already in use

   # Kill processes using the ports
   Get-Process | Where-Object {$_.ProcessName -match "java|node"} | Stop-Process -Force
   # Or use netstat to find specific process
   netstat -ano | findstr :8080
   taskkill /PID <PID> /F

3. Maven wrapper fails

   # Ensure JAVA_HOME is set
   $env:JAVA_HOME = "C:\path\to\jdk-17"
   $env:PATH = "$env:JAVA_HOME\bin;$env:PATH"
   cd server
   .\mvnw.cmd --version

4. Angular CLI not found

   # Use npx instead of global install
   cd client
   npx ng serve --proxy-config proxy.conf.json

5. CORS errors in browser

   • Ensure Angular dev server uses proxy configuration
   • Verify CORS configuration in Spring Boot
   • Check that both servers are running

6. PDF download fails

   • Check JasperReports template compilation
   • Verify sample data is loaded in H2 database
   • Ensure server has been running for at least 30 seconds

PowerShell Execution Policy

If scripts won't run:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Development Tips

• Use H2 console to inspect database state
• Check browser network tab for API call details
• Use Angular DevTools for component debugging
• Monitor server logs for transaction rollback tests
• Use .\verify.ps1 to test all functionality automatically

📈 Performance Notes

• H2 database runs in-memory for fast development
• JasperReports compiles templates at runtime
• Angular serves static assets through development proxy
• Bootstrap CSS loaded from node_modules for optimal caching

🏆 Assessment Completion

This implementation satisfies all requirements:

• ✅ Spring Boot 3.x with Java 17 and Maven
• ✅ H2 embedded database with sample data
• ✅ JPA entities with proper relationships
• ✅ DTO pattern with validation
• ✅ Service layer with transaction management
• ✅ REST APIs returning DTOs (not entities)
• ✅ JasperReports PDF with one page per department
• ✅ Angular 17 with Bootstrap 5
• ✅ Responsive UI with CRUD operations
• ✅ Static HTML/CSS cards page
• ✅ Comprehensive error handling
• ✅ Zero lint errors
• ✅ Working unit tests
• ✅ Complete documentation

📞 Support

For questions or issues:

1. Check the troubleshooting section above
2. Verify all commands run successfully
3. Ensure prerequisites are installed correctly
4. Review server and client logs for error details

---

Demo Ready! 🎉 Start with the department search page, try dept01, and explore the full functionality.