A production-style single-page application for help desk teams to submit, classify, and manage support tickets with AI-powered categorization and analytics dashboard.

• Ticket Management: Create, view, edit, and filter support tickets
• AI Classification: Automated ticket categorization using OpenAI GPT models
• Real-time Dashboard: Analytics with charts showing ticket statistics and trends
• Search & Filtering: Client-side search and filtering by status/category
• Export Functionality: CSV export of ticket data
• Dark/Light Theme: Toggle between themes with persistent preference
• Queue-based Processing: Background AI classification jobs
• Responsive Design: Mobile-friendly interface using BEM CSS methodology

• Laravel 11 (PHP 8.2) with kernel-less structure
• MySQL/PostgreSQL database
• Queue System for background job processing
• OpenAI PHP Laravel package for AI integration

• Vue 3 (Options API only, no Composition API)
• Vue Router 4 for client-side routing
• Chart.js for analytics visualizations
• Vite for asset bundling
• Pure CSS with BEM naming conventions (no frameworks)

    git clone https://github.com/Mikeltec/Ticket-Triage-App.git
    cd ticket-triage-app

composer install

npm install

cp .env.example .env
php artisan key:generate

# Configure database in .env file
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=ticket_triage
DB_USERNAME=root
DB_PASSWORD=

# Run migrations and seed data
php artisan migrate --seed

# Add to .env file
OPENAI_API_KEY=sk-your-openai-api-key-here
OPENAI_CLASSIFY_ENABLED=true

npm run dev

# Terminal 1: Laravel server
php artisan serve

# Terminal 2: Queue worker (for AI classification)
php artisan queue:work

# Terminal 3: Frontend dev server (if needed)
npm run dev

• Main App: http://localhost:8000
• API Health: http://localhost:8000/api/health

• Create tickets via "New Ticket" button
• Classify tickets using "Classify" button
• View analytics on Dashboard page
• Test search and filtering functionality

APP_NAME="Smart Ticket Triage"
APP_ENV=local
APP_KEY=base64:...
APP_DEBUG=true
APP_URL=http://localhost:8000

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=ticket_triage
DB_USERNAME=root
DB_PASSWORD=

QUEUE_CONNECTION=database

OPENAI_API_KEY=sk-...
OPENAI_CLASSIFY_ENABLED=true
CACHE_DRIVER=file
SESSION_DRIVER=file

• GET /api/tickets - List tickets (with filtering, search, pagination)
• POST /api/tickets - Create new ticket
• GET /api/tickets/{id} - Get ticket details
• PATCH /api/tickets/{id} - Update ticket (status, category, note)
• POST /api/tickets/{id}/classify - Queue AI classification job

• GET /api/stats - Dashboard statistics
• GET /api/meta - Available statuses and categories

• GET /api/health - Health check

# Classify all unclassified tickets
php artisan tickets:bulk-classify --unclassified

# Dry run to see what would be processed
php artisan tickets:bulk-classify --dry-run

# Limit number of tickets and add delay
php artisan tickets:bulk-classify --limit=10 --delay=2

# Fresh migration with sample data
php artisan migrate:fresh --seed

# Queue management
php artisan queue:work
php artisan queue:failed

smart-ticket-triage/
├── app/
│   ├── Http/Controllers/Api/     # API controllers
│   ├── Jobs/                     # Queue jobs
│   ├── Models/                   # Eloquent models
│   └── Services/                 # Business logic services
├── database/
│   ├── factories/                # Data factories
│   ├── migrations/               # Database schema
│   └── seeders/                  # Sample data
├── resources/
│   ├── css/app.css              # BEM-style CSS
│   ├── js/
│   │   ├── app.js               # Vue app entry point
│   │   ├── components/          # Reusable Vue components
│   │   ├── views/               # Page-level Vue components
│   │   └── utils/               # Helper functions
│   └── views/app.blade.php      # SPA container
├── routes/
│   ├── api.php                  # API routes
│   └── web.php                  # SPA fallback routes
└── public/                      # Static assets

1. Backend: Create models, controllers, routes in Laravel
2. Frontend: Add Vue components and views
3. Styling: Use BEM CSS conventions
4. Testing: Test API endpoints and UI functionality

1. Tickets are classified using OpenAI GPT models
2. Classification runs asynchronously via Laravel queues
3. Manual category overrides are preserved
4. Confidence scores and explanations are stored

• PHP: Laravel conventions, strict typing where reasonable
• JavaScript: ES6+ features, Vue 3 Options API only
• CSS: BEM methodology, no frameworks
• Database: Descriptive migrations, comprehensive seeding

npm run build
php artisan config:cache
php artisan route:cache
php artisan view:cache

• Point document root to /public
• Configure PHP-FPM for Laravel
• Set up process manager for queue workers
• Configure SSL certificates

# Use supervisor for production queue workers
sudo supervisorctl start laravel-queue:*

• Vue 3 Options API: Chosen per requirements instead of more modern Composition API
• No CSS Frameworks: Used pure CSS with BEM conventions as specified
• Database Queue Driver: Simpler setup for development; Redis recommended for production
• ULID Primary Keys: Better for distributed systems than auto-incrementing integers
• Single Build Process: Vite handles all asset compilation as required

• OpenAI Dependency: Classification requires external API; fallback provides dummy data
• Manual Override Protection: User category changes are preserved during re-classification
• Confidence Scoring: Helps users understand AI reliability but adds complexity
• Async Processing: Improves UX but requires queue worker management

• Simple Notifications: Console-based instead of toast system due to component architecture
• Basic Theming: Dark/light toggle without advanced customization
• Client-side Pagination: Simpler but less efficient for large datasets
• Modal-based Detail View: Chosen over dedicated routes for simplicity

• Eager Loading: Optimized database queries where possible
• Client-side Filtering: Reduces server requests but limited by page size
• Chart Re-rendering: Charts recreate on data changes rather than update
• Asset Bundling: Single bundle approach per requirements

• Real-time Updates: WebSocket integration for live ticket updates
• Advanced Search: Full-text search with Elasticsearch or similar
• File Attachments: Support for uploading ticket attachments
• Email Integration: Automatic ticket creation from emails
• SLA Management: Service level agreement tracking and alerts
• User Authentication: Multi-user system with role-based permissions

• TypeScript Migration: Better type safety and developer experience
• Composition API: More modern Vue 3 approach with better code reuse
• Test Coverage: Comprehensive PHPUnit and Jest test suites
• API Documentation: OpenAPI/Swagger documentation
• Error Monitoring: Integration with Sentry or similar service
• Performance Monitoring: Application performance monitoring

• Custom AI Training: Fine-tuned models for domain-specific classification
• Sentiment Analysis: Detect customer satisfaction in ticket content
• Priority Prediction: AI-powered ticket priority assignment
• Advanced Analytics: Predictive analytics for support trends
• Multi-language Support: Classification for international support
• Auto-responses: AI-generated response suggestions

• Microservices Architecture: Separate services for different domains
• Container Deployment: Docker and Kubernetes setup
• CDN Integration: Asset delivery optimization
• Database Optimization: Read replicas and query optimization
• Caching Strategy: Redis-based caching for improved performance
• API Rate Limiting: Advanced rate limiting and throttling

• Progressive Web App: Offline capability and mobile app features
• Advanced Theming: Custom color schemes and layouts
• Keyboard Shortcuts: Power user navigation improvements
• Bulk Operations: Multi-select for batch ticket operations
• Advanced Filtering: Saved filters and complex query building
• Accessibility: WCAG 2.1 AA compliance improvements

• OAuth Integration: Single sign-on with external providers
• API Security: Rate limiting, request validation, CORS hardening
• Data Encryption: At-rest encryption for sensitive ticket data
• Audit Logging: Comprehensive activity tracking
• Content Security Policy: XSS protection improvements
• Vulnerability Scanning: Automated security testing

This project demonstrates a production-ready foundation that could scale into a comprehensive enterprise support platform with these additional features and improvements.