MSR Generator is a comprehensive full-stack web application that automates the monthly service review process for Nexon-Ausgrid operations. Built with modern web technologies and Eva/kawaii theming, it transforms manual Excel manipulation and PowerPoint creation into an streamlined automated workflow with editable commentary fields.
| Component | Technology | Purpose |
|---|---|---|
| Frontend | React 18 + TypeScript + Vite | Modern reactive UI with type safety |
| Styling | Tailwind CSS + Custom Eva Theme | Responsive design with anime aesthetics |
| Backend | Node.js + Express + TypeScript | RESTful API server with type validation |
| Database | PostgreSQL 15 + Redis | Relational data storage and caching |
| File Processing | Multer + Excel parsing libraries | Multipart upload and data extraction |
| Report Generation | Chromium + PDF libraries | Automated document creation |
| Authentication | Authelia Integration | Enterprise-grade access control |
| Deployment | Docker Compose + Traefik | Containerized microservices with SSL |
msr-frontend:
build: ./monthly-service-review/frontend
container_name: msr-frontend
restart: unless-stopped
networks:
- services-network
labels:
- traefik.http.routers.msr.rule=Host(`msr.playtopia.com.au`)
- traefik.http.routers.msr.middlewares=authelia-auth
msr-backend:
build: ./monthly-service-review/backend
container_name: msr-backend
restart: unless-stopped
networks:
- services-network
environment:
- DATABASE_URL=postgresql://msr_user:secure_password@postgres:5432/monthly_service_review
- REDIS_URL=redis://redis:6379
- NODE_ENV=production
postgres:
image: postgres:15-alpine
container_name: msr-postgres
environment:
- POSTGRES_DB=monthly_service_review
- POSTGRES_USER=msr_user
- POSTGRES_PASSWORD=secure_password
redis:
image: redis:7-alpine
container_name: msr-redis
restart: unless-stopped
/home/thrax/unified-services/monthly-service-review/
├── docker-compose.yml # Complete infrastructure setup
├── database/
│ └── init.sql # PostgreSQL schema and initial data
├── frontend/ # React TypeScript application
│ ├── package.json # Dependencies and build scripts
│ ├── vite.config.ts # Vite bundler configuration
│ ├── tailwind.config.js # Eva/kawaii theme configuration
│ ├── src/
│ │ ├── App.tsx # Main application component
│ │ ├── index.css # Eva theme styles and animations
│ │ ├── types/index.ts # Comprehensive TypeScript definitions
│ │ ├── hooks/useAuth.ts # Authentication state management
│ │ ├── services/
│ │ │ ├── apiClient.ts # Axios HTTP client with interceptors
│ │ │ └── authService.ts # Authelia integration
│ │ ├── components/
│ │ │ ├── Layout/ # Header, navigation, layout components
│ │ │ ├── ui/ # Reusable UI components
│ │ │ └── dashboard/ # Dashboard-specific components
│ │ └── pages/
│ │ ├── Dashboard.tsx # Main dashboard with analytics
│ │ ├── FileUpload.tsx # Drag-and-drop file interface
│ │ ├── ReportDetail.tsx # Report viewing and editing
│ │ ├── Settings.tsx # Application configuration
│ │ └── BusinessLogic.tsx # Data processing documentation
├── backend/ # Node.js TypeScript API
│ ├── package.json # Server dependencies
│ ├── tsconfig.json # TypeScript configuration
│ ├── src/
│ │ ├── index.ts # Express application setup
│ │ ├── config/
│ │ │ ├── database.ts # PostgreSQL and Redis connections
│ │ │ └── environment.ts # Environment variable handling
│ │ ├── middleware/
│ │ │ └── auth.ts # Authelia authentication middleware
│ │ ├── routes/
│ │ │ ├── auth.ts # Authentication endpoints
│ │ │ ├── files.ts # File upload and processing
│ │ │ ├── reports.ts # Report CRUD operations
│ │ │ ├── dashboard.ts # Analytics and metrics
│ │ │ └── settings.ts # Configuration management
│ │ └── controllers/
│ │ ├── FileController.ts # File processing logic
│ │ ├── ReportController.ts # Report generation
│ │ └── DashboardController.ts # Analytics computation
└── MSR_PROJECT_CONTEXT.md # Comprehensive project documentation
// Drag-and-drop with progress tracking
interface FileUploadState {
files: File[];
uploadProgress: Record<string, number>;
processingStatus: 'idle' | 'uploading' | 'processing' | 'complete';
errors: string[];
}
// Multi-format file handling
const fileProcessor = {
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': processExcel,
'text/csv': processCsv,
'application/vnd.ms-powerpoint': processPowerPoint,
'application/pdf': processPdf
};
/* Eva Unit-02 Primary Colors */
--eva-red: #ff0000;
--eva-purple: #9333ea;
--eva-orange: #ea580c;
/* Kawaii Soft Backgrounds */
--kawaii-pink: #FFB3E6;
--kawaii-lavender: #E6B3FF;
--kawaii-mint: #B3FFE6;
/* Hexagonal clips for buttons and cards */
.eva-hexagon {
clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
}
/* Octagonal sections for main content */
.eva-octagon {
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
/* Scanning line animations */
@keyframes eva-scan {
0% { transform: translateY(-100%); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateY(200%); opacity: 0; }
}
# Complete service stack
services:
msr-frontend:
labels:
- traefik.http.routers.msr.middlewares=authelia-auth
- traefik.http.routers.msr.rule=Host(`msr.playtopia.com.au`)
msr-backend:
labels:
- traefik.http.routers.msrapi.rule=Host(`msrapi.playtopia.com.au`)
- traefik.http.routers.msrapi.middlewares=authelia-auth
// Authelia header forwarding
interface AuthenticatedUser {
email: string;
name: string;
groups: string[];
remote_user: string;
remote_name: string;
}
# Production environment variables
DATABASE_URL=postgresql://msr_user:secure_password@postgres:5432/monthly_service_review
REDIS_URL=redis://redis:6379
NODE_ENV=production
PORT=3001
JWT_SECRET=secure-generated-key
MAX_FILE_SIZE=52428800 # 50MB
UPLOAD_PATH=/app/uploads
MSR Generator delivers a comprehensive automation platform with:
MSR Generator represents a complete business automation solution that successfully transforms manual monthly reporting into an efficient, secure, and visually appealing automated workflow with Eva-inspired aesthetics and enterprise-grade functionality.