nngo/IT_Ticket_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
nngo
2026-03-25 11:37:46 -04:00
commit dfdbb54875
41 changed files with 5079 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+36
View File
@@ -0,0 +1,36 @@
# Flask Configuration
FLASK_APP=run.py
FLASK_ENV=production
SECRET_KEY=1da82c4604ae1d3c3a00f66d2e6aecc8d8f19a93756e7b4a7c114cc6e26eeccd
# Database Configuration
DB_HOST=localhost
DB_PORT=3306
DB_NAME=it_ticket
DB_USER=it_ticket
DB_PASSWORD=IT.t1ck3t.5ys
# Mail Configuration (SMTP)
MAIL_SERVER=mail.ltservicesinc.com
MAIL_PORT=465
MAIL_USE_TLS=True
MAIL_USERNAME=jqc.noreply@ltservicesinc.com
MAIL_PASSWORD=jQc.4utoMail$
MAIL_DEFAULT_SENDER=IT Helpdesk <jqc.noreply@ltservicesinc.com>
# IT Department Email (receives all new ticket notifications)
IT_DEPT_EMAIL=da.nguyen8744@gmail.com
# Application URL (used in email links)
APP_BASE_URL=https://tickets.ltservicesinc.com
# Anthropic API Key (for AI Chatbot)
ANTHROPIC_API_KEY=your-anthropic-api-key-here
# File Upload Configuration
UPLOAD_FOLDER=app/static/uploads
MAX_CONTENT_LENGTH=16777216
# Admin default credentials (change after first login)
ADMIN_EMAIL=admin@yourdomain.com
ADMIN_PASSWORD=Admin@123!
DEPLOYMENT_GUIDE.md
+632
View File
@@ -0,0 +1,632 @@
# TechDesk — IT Ticket System
## Complete Deployment & Implementation Guide
---
## Table of Contents
1. [Project Structure](#1-project-structure)
2. [Prerequisites](#2-prerequisites)
3. [Server Setup](#3-server-setup)
4. [MySQL Database Setup](#4-mysql-database-setup)
5. [Application Deployment](#5-application-deployment)
6. [Gunicorn Configuration](#6-gunicorn-configuration)
7. [Systemd Service](#7-systemd-service)
8. [Nginx Configuration](#8-nginx-configuration)
9. [SSL Certificate](#9-ssl-certificate)
10. [First Login & Admin Setup](#10-first-login--admin-setup)
11. [AI Chatbot Configuration](#11-ai-chatbot-configuration)
12. [Email Configuration](#12-email-configuration)
13. [Code Change Map](#13-code-change-map)
14. [Features Overview](#14-features-overview)
15. [Maintenance & Operations](#15-maintenance--operations)
---
## 1. Project Structure
```
it-ticket-system/
├── run.py ← Flask entry point
├── gunicorn.conf.py ← Gunicorn worker config
├── it-ticket-system.service ← Systemd unit file
├── nginx.conf ← Nginx site config
├── setup_db.sql ← MySQL DB + user creation
├── requirements.txt ← Python dependencies
├── .env.example ← Environment variable template
├── config/
│ └── config.py ← Flask config classes (Dev/Prod)
├── app/
│ ├── __init__.py ← App factory, extension init, seed admin
│ ├── models.py ← All SQLAlchemy models
│ ├── routes/
│ │ ├── __init__.py
│ │ ├── auth.py ← Login, register, logout, profile
│ │ ├── tickets.py ← Ticket CRUD, comments, attachments
│ │ ├── admin.py ← IT/admin management views
│ │ ├── api.py ← JSON API + WebSocket events
│ │ └── chatbot.py ← AI assistant endpoint
│ ├── services/
│ │ ├── __init__.py
│ │ ├── notification_service.py ← Email + in-app + WebSocket notifications
│ │ └── log_service.py ← Activity log + ticket history helpers
│ └── templates/
│ ├── base.html ← Sidebar, topbar, chat widget, JS
│ ├── auth/
│ │ ├── login.html
│ │ ├── register.html
│ │ └── profile.html
│ ├── tickets/
│ │ ├── dashboard_employee.html
│ │ ├── dashboard_it.html
│ │ ├── create.html
│ │ ├── list.html
│ │ ├── detail.html
│ │ ├── notifications.html
│ │ ├── knowledge_base.html
│ │ └── kb_article.html
│ └── admin/
│ ├── index.html
│ ├── tickets.html
│ ├── users.html
│ ├── edit_user.html
│ ├── kb_list.html
│ ├── kb_edit.html
│ └── activity_logs.html
└── logs/ ← Created automatically at runtime
```
---
## 2. Prerequisites
On your **Ubuntu 22.04** server, ensure the following are installed:
```bash
# Update system
sudo apt update && sudo apt upgrade -y
# Python 3.10+, pip, venv
sudo apt install -y python3 python3-pip python3-venv python3-dev
# MySQL Server
sudo apt install -y mysql-server libmysqlclient-dev
# Nginx
sudo apt install -y nginx
# Certbot (Let's Encrypt SSL)
sudo apt install -y certbot python3-certbot-nginx
# Build tools (needed for some pip packages)
sudo apt install -y build-essential libssl-dev libffi-dev
# (Optional) Git for deployment
sudo apt install -y git
```
---
## 3. Server Setup
### 3.1 Create Application User & Directory
```bash
# Create a dedicated system user
sudo useradd --system --no-create-home --shell /bin/false it-tickets
# Create application directory
sudo mkdir -p /var/www/it-ticket-system
sudo chown it-tickets:www-data /var/www/it-ticket-system
sudo chmod 755 /var/www/it-ticket-system
```
### 3.2 Deploy Application Files
```bash
# Option A: Clone from your Git repository
sudo -u it-tickets git clone https://your-repo-url.git /var/www/it-ticket-system
# Option B: Upload manually via scp
scp -r ./it-ticket-system/* user@your-server:/var/www/it-ticket-system/
```
### 3.3 Create Python Virtual Environment
```bash
cd /var/www/it-ticket-system
sudo -u it-tickets python3 -m venv venv
sudo -u it-tickets venv/bin/pip install --upgrade pip
sudo -u it-tickets venv/bin/pip install -r requirements.txt
```
### 3.4 Create Upload & Log Directories
```bash
sudo -u it-tickets mkdir -p /var/www/it-ticket-system/app/static/uploads
sudo -u it-tickets mkdir -p /var/www/it-ticket-system/logs
# Ensure www-data (nginx) can read uploads
sudo chown -R it-tickets:www-data /var/www/it-ticket-system/app/static/uploads
sudo chmod -R 775 /var/www/it-ticket-system/app/static/uploads
```
---
## 4. MySQL Database Setup
### 4.1 Secure MySQL Installation
```bash
sudo mysql_secure_installation
# Follow prompts: set root password, remove anonymous users,
# disallow remote root login, remove test database.
```
### 4.2 Create Database and User
```bash
# Run the provided SQL setup script
sudo mysql -u root -p < /var/www/it-ticket-system/setup_db.sql
# Or manually:
sudo mysql -u root -p <<'EOF'
CREATE DATABASE IF NOT EXISTS it_tickets CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER IF NOT EXISTS 'it_tickets_user'@'localhost' IDENTIFIED BY 'YOUR_SECURE_PASSWORD';
GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, INDEX, ALTER, REFERENCES
ON it_tickets.* TO 'it_tickets_user'@'localhost';
FLUSH PRIVILEGES;
EOF
```
### 4.3 Verify Connection
```bash
mysql -u it_tickets_user -p it_tickets
# Should connect without errors. Type \q to exit.
```
---
## 5. Application Deployment
### 5.1 Configure Environment Variables
```bash
# Copy the example env file
sudo -u it-tickets cp /var/www/it-ticket-system/.env.example /var/www/it-ticket-system/.env
# Edit with your actual values
sudo nano /var/www/it-ticket-system/.env
```
**Critical values to change in `.env`:**
```ini
# Generate a strong secret key:
# python3 -c "import secrets; print(secrets.token_hex(32))"
SECRET_KEY=your-generated-secret-key
# Database — match what you set in setup_db.sql
DB_PASSWORD=YOUR_SECURE_PASSWORD
# Mail — your SMTP server credentials
MAIL_SERVER=smtp.yourdomain.com
MAIL_USERNAME=ittickets@yourdomain.com
MAIL_PASSWORD=your-email-password
IT_DEPT_EMAIL=it-department@yourdomain.com
# Public URL of your app
APP_BASE_URL=https://tickets.yourdomain.com
# Anthropic API key for AI chatbot
ANTHROPIC_API_KEY=sk-ant-...
# Change default admin password
ADMIN_EMAIL=admin@yourdomain.com
ADMIN_PASSWORD=YourStrongAdminPassword!
```
### 5.2 Initialize the Database
The application automatically creates all tables and seeds the admin user on first startup. You can also trigger it manually:
```bash
cd /var/www/it-ticket-system
sudo -u it-tickets venv/bin/python -c "
from app import create_app, db
app = create_app('production')
with app.app_context():
db.create_all()
print('Database tables created successfully.')
"
```
### 5.3 Set File Permissions
```bash
# Application files: readable by the app user
sudo find /var/www/it-ticket-system -type f -exec chmod 644 {} \;
sudo find /var/www/it-ticket-system -type d -exec chmod 755 {} \;
sudo chmod 600 /var/www/it-ticket-system/.env
sudo chown it-tickets:it-tickets /var/www/it-ticket-system/.env
# Virtual environment executables
sudo chmod +x /var/www/it-ticket-system/venv/bin/gunicorn
sudo chmod +x /var/www/it-ticket-system/venv/bin/python
```
---
## 6. Gunicorn Configuration
The `gunicorn.conf.py` file at the project root controls the WSGI server.
**Key settings explained:**
| Setting | Value | Reason |
|---|---|---|
| `worker_class` | `eventlet` | Required for Flask-SocketIO WebSocket support |
| `workers` | `1` | eventlet mandates a single worker |
| `worker_connections` | `1000` | Max concurrent connections per worker |
| `timeout` | `120` | Seconds before killing an unresponsive worker |
| `bind` | `127.0.0.1:5000` | Internal only — nginx proxies publicly |
**Test Gunicorn manually before enabling the service:**
```bash
cd /var/www/it-ticket-system
sudo -u it-tickets venv/bin/gunicorn --config gunicorn.conf.py run:app
# You should see: [INFO] Listening at: http://127.0.0.1:5000
# Press Ctrl+C to stop.
```
---
## 7. Systemd Service
### 7.1 Install the Service
```bash
# Copy unit file to systemd
sudo cp /var/www/it-ticket-system/it-ticket-system.service /etc/systemd/system/
# Edit to confirm paths and user match your setup
sudo nano /etc/systemd/system/it-ticket-system.service
```
**Update these lines in the service file if needed:**
```ini
User=it-tickets
Group=www-data
WorkingDirectory=/var/www/it-ticket-system
EnvironmentFile=/var/www/it-ticket-system/.env
ExecStart=/var/www/it-ticket-system/venv/bin/gunicorn \
--config gunicorn.conf.py \
run:app
```
### 7.2 Enable and Start the Service
```bash
sudo systemctl daemon-reload
sudo systemctl enable it-ticket-system
sudo systemctl start it-ticket-system
# Verify it is running
sudo systemctl status it-ticket-system
```
### 7.3 Useful Service Commands
```bash
# View live logs
sudo journalctl -u it-ticket-system -f
# Restart after code changes
sudo systemctl restart it-ticket-system
# Stop the service
sudo systemctl stop it-ticket-system
```
---
## 8. Nginx Configuration
### 8.1 Install Site Configuration
```bash
# Copy nginx config
sudo cp /var/www/it-ticket-system/nginx.conf /etc/nginx/sites-available/it-ticket-system
# Edit: replace tickets.yourdomain.com with your actual domain
sudo nano /etc/nginx/sites-available/it-ticket-system
# Enable the site
sudo ln -s /etc/nginx/sites-available/it-ticket-system /etc/nginx/sites-enabled/
# Remove default nginx site (optional)
sudo rm -f /etc/nginx/sites-enabled/default
# Test configuration syntax
sudo nginx -t
# Reload nginx
sudo systemctl reload nginx
```
### 8.2 Nginx Tuning (Optional)
Add to `/etc/nginx/nginx.conf` inside the `http {}` block:
```nginx
# Increase for large file uploads
client_max_body_size 20M;
# Gzip compression
gzip on;
gzip_vary on;
gzip_min_length 1000;
gzip_types text/plain text/css application/json application/javascript text/xml;
# Rate limiting
limit_req_zone $binary_remote_addr zone=app:10m rate=30r/m;
```
---
## 9. SSL Certificate
```bash
# Obtain Let's Encrypt certificate
sudo certbot --nginx -d tickets.yourdomain.com
# Certbot will automatically update your nginx config with SSL settings.
# Verify auto-renewal:
sudo certbot renew --dry-run
# The nginx.conf provided already has the SSL block commented out.
# After certbot runs, it will populate the ssl_certificate paths automatically.
```
---
## 10. First Login & Admin Setup
1. Open your browser: `https://tickets.yourdomain.com`
2. Log in with the credentials you set in `.env`:
- **Email:** `admin@yourdomain.com`
- **Password:** `YourStrongAdminPassword!`
3. **Change the admin password immediately** via Profile → Change Password.
4. Navigate to **Admin → Users** to create IT Staff accounts.
5. Set their role to `it_staff` or `admin`.
### Default Roles
| Role | Capabilities |
|---|---|
| `employee` | Create tickets, add comments, view own tickets, use chatbot, read KB |
| `it_staff` | All employee permissions + view/update all tickets, assign tickets, internal notes, manage KB |
| `admin` | All IT staff permissions + manage users, view full activity logs, deactivate accounts |
---
## 11. AI Chatbot Configuration
The chatbot uses the **Anthropic Claude API** (`claude-sonnet-4-20250514`).
1. Obtain an API key from [console.anthropic.com](https://console.anthropic.com)
2. Add to `.env`:
```ini
ANTHROPIC_API_KEY=sk-ant-api03-...
```
3. Restart the service: `sudo systemctl restart it-ticket-system`
**Chatbot capabilities:**
- Conversationally gathers issue details from employees
- Automatically creates tickets with appropriate category and priority
- Notifies IT staff immediately upon ticket creation
- Answers general IT questions without creating tickets
- Detects critical/urgent language and escalates priority accordingly
If `ANTHROPIC_API_KEY` is not set, the chatbot gracefully informs users to contact IT directly — **the rest of the application continues to function normally.**
---
## 12. Email Configuration
### Gmail / Google Workspace
```ini
MAIL_SERVER=smtp.gmail.com
MAIL_PORT=587
MAIL_USE_TLS=True
MAIL_USERNAME=ittickets@yourdomain.com
MAIL_PASSWORD=your-app-password # Use App Password, not account password
```
### Microsoft 365 / Outlook
```ini
MAIL_SERVER=smtp.office365.com
MAIL_PORT=587
MAIL_USE_TLS=True
MAIL_USERNAME=ittickets@yourdomain.com
MAIL_PASSWORD=your-password
```
### Local Postfix (no external relay)
```ini
MAIL_SERVER=localhost
MAIL_PORT=25
MAIL_USE_TLS=False
MAIL_USERNAME=
MAIL_PASSWORD=
```
**Email notifications are sent for:**
- New ticket created → IT Department email + all IT staff (in-app)
- Ticket status changed → Ticket creator
- Ticket assigned → Assigned IT staff member
- New comment added → Ticket creator + assignee
If email fails (wrong credentials, network issue), errors are **logged silently** — the ticket operation still succeeds.
---
## 13. Code Change Map
This section documents every file and what was added/changed, as a reference for future modifications.
### New Files (All files are new — this is a greenfield application)
| File | Purpose | Key Functions/Routes |
|---|---|---|
| `run.py` | Entry point | Starts Flask + SocketIO |
| `config/config.py` | Environment config | `Config`, `DevelopmentConfig`, `ProductionConfig` |
| `app/__init__.py` | App factory | `create_app()`, `_seed_admin()` |
| `app/models.py` | Database models | `User`, `Ticket`, `Comment`, `Attachment`, `Notification`, `TicketHistory`, `ActivityLog`, `KnowledgeBase` |
| `app/routes/auth.py` | Authentication | `GET/POST /auth/login`, `GET/POST /auth/register`, `GET /auth/logout`, `GET/POST /auth/profile` |
| `app/routes/tickets.py` | Ticket management | `GET/POST /tickets/new`, `GET /tickets`, `GET/POST /tickets/<id>`, `POST /tickets/<id>/update`, `POST /comments/<id>/delete`, `GET /attachments/<id>`, `GET/POST /notifications`, `GET /kb`, `GET /kb/<id>` |
| `app/routes/admin.py` | Admin/IT views | `GET /admin/`, `GET /admin/tickets`, `GET /admin/users`, `GET/POST /admin/users/<id>/edit`, `POST /admin/users/<id>/delete`, KB CRUD, `GET /admin/logs` |
| `app/routes/api.py` | JSON API + WebSocket | `GET /api/notifications/unread-count`, `POST /api/notifications/<id>/read`, `POST /api/notifications/mark-all-read`, `GET /api/stats/tickets`, Socket events: `connect`, `disconnect`, `join_ticket`, `leave_ticket` |
| `app/routes/chatbot.py` | AI assistant | `POST /chatbot/message` |
| `app/services/notification_service.py` | Notification delivery | `create_notification()`, `send_email()`, `notify_new_ticket()`, `notify_status_change()`, `notify_comment_added()`, `notify_assignment()` |
| `app/services/log_service.py` | Audit logging | `log_action()`, `log_ticket_history()` |
| `gunicorn.conf.py` | WSGI server config | eventlet worker, bind address, log paths |
| `it-ticket-system.service` | Systemd unit | Auto-start, restart-on-failure |
| `nginx.conf` | Reverse proxy | SSL termination, WebSocket upgrade, static file serving |
| `setup_db.sql` | DB initialisation | Creates database, user, grants |
### Where Logging (`log_action`) Is Called
| Event | File | Function | Log Action String |
|---|---|---|---|
| User login | `auth.py` | `login()` | `user_login` |
| User registration | `auth.py` | `register()` | `user_register` |
| User logout | `auth.py` | `logout()` | `user_logout` |
| Profile update | `auth.py` | `profile()` | `user_profile_update` |
| Ticket created | `tickets.py` | `create_ticket()` | `ticket_create` |
| Ticket updated | `tickets.py` | `update_ticket()` | `ticket_update` |
| Comment created | `tickets.py` | `ticket_detail()` | `comment_create` |
| Comment deleted | `tickets.py` | `delete_comment()` | `comment_delete` |
| Ticket created via chatbot | `chatbot.py` | `chat()` | `ticket_create_chatbot` |
| Admin edits user | `admin.py` | `edit_user()` | `admin_user_edit` |
| Admin deactivates user | `admin.py` | `delete_user()` | `admin_user_deactivate` |
| KB article created | `admin.py` | `kb_new()` | `kb_create` |
| KB article edited | `admin.py` | `kb_edit()` | `kb_edit` |
| KB article deleted | `admin.py` | `kb_delete()` | `kb_delete` |
---
## 14. Features Overview
### Employee Features
- **Dashboard** — open/active/resolved ticket counts, recent tickets, top KB articles
- **Submit Ticket** — form with title, category, priority, location, asset tag, file attachments
- **AI Chatbot** — floating chat widget (🤖 button, bottom-right); conversationally creates tickets
- **Ticket Tracking** — full ticket detail with comment thread, change history, attachments
- **Notifications** — real-time bell (WebSocket) + notification centre page
- **Knowledge Base** — self-service articles before submitting a ticket
- **Profile** — update name/department/phone, toggle email/web notifications, change password
### IT Staff Features
- **IT Dashboard** — queue metrics (open/in-progress/pending/resolved), assigned tickets, recent activity
- **All Tickets View** — filterable by status, priority, assignment (mine/unassigned/all)
- **Ticket Update Panel** — change status, priority, assignee, due date, resolution notes, internal notes
- **Internal Notes** — IT-only comments not visible to the employee
- **Ticket History** — field-level change log on every ticket
- **Knowledge Base Management** — create, edit, publish/unpublish, delete articles
### Admin Features
- **User Management** — list all users, edit role/department/status, reset passwords, deactivate
- **Activity Log** — full audit trail of all create/update/delete actions with IP addresses
- **IT Overview** — aggregate stats across all tickets and users
### Technical Features
- **Real-time WebSocket** — notifications pushed instantly via Flask-SocketIO / eventlet
- **Email Notifications** — HTML emails for new tickets, status changes, comments, assignments
- **File Attachments** — on tickets and comments; UUID-stored filenames prevent collisions
- **Ticket Numbering** — sequential daily format: `TKT-20240315-0001`
- **Audit Trail** — every significant action persisted to `activity_logs` + `ticket_history`
- **AI Ticket Creation** — chatbot flags `ai_generated=True` on auto-created tickets
---
## 15. Maintenance & Operations
### Application Logs
```bash
# Application logs (Flask)
tail -f /var/www/it-ticket-system/logs/it_tickets.log
# Gunicorn access log
tail -f /var/www/it-ticket-system/logs/gunicorn_access.log
# Gunicorn error log
tail -f /var/www/it-ticket-system/logs/gunicorn_error.log
# Systemd journal
sudo journalctl -u it-ticket-system -f --since "1 hour ago"
# Nginx logs
sudo tail -f /var/log/nginx/it_tickets_access.log
sudo tail -f /var/log/nginx/it_tickets_error.log
```
### Deploying Code Updates
```bash
cd /var/www/it-ticket-system
# Pull latest code
sudo -u it-tickets git pull origin main
# Install any new dependencies
sudo -u it-tickets venv/bin/pip install -r requirements.txt
# Apply database migrations (if you add Flask-Migrate)
# sudo -u it-tickets venv/bin/flask db upgrade
# Restart the service
sudo systemctl restart it-ticket-system
sudo systemctl status it-ticket-system
```
### Database Backup
```bash
# Full backup
mysqldump -u it_tickets_user -p it_tickets > backup_$(date +%Y%m%d_%H%M%S).sql
# Automated daily backup via cron (add to root's crontab):
# 0 2 * * * mysqldump -u it_tickets_user -pPASSWORD it_tickets | gzip > /backups/it_tickets_$(date +\%Y\%m\%d).sql.gz
```
### Firewall Configuration
```bash
sudo ufw allow 22/tcp # SSH
sudo ufw allow 80/tcp # HTTP (redirects to HTTPS)
sudo ufw allow 443/tcp # HTTPS
sudo ufw deny 5000/tcp # Block direct Gunicorn access
sudo ufw enable
sudo ufw status
```
### Troubleshooting Quick Reference
| Symptom | Likely Cause | Fix |
|---|---|---|
| 502 Bad Gateway | Gunicorn not running | `sudo systemctl restart it-ticket-system` |
| WebSocket not connecting | nginx missing upgrade headers | Verify `/socket.io/` location block in nginx.conf |
| Emails not sending | SMTP credentials | Check `.env` MAIL_* values; test with `flask shell` |
| Chatbot not responding | Missing API key | Set `ANTHROPIC_API_KEY` in `.env` and restart |
| File uploads failing | Wrong permissions on uploads dir | `sudo chown -R it-tickets:www-data app/static/uploads` |
| DB connection error | Wrong credentials | Verify `DB_*` values in `.env` match `setup_db.sql` |
| Static files 404 | Wrong nginx alias | Check `alias` path in nginx `/static/` block |
app/__init__.py
+115
View File
@@ -0,0 +1,115 @@
import os
import logging
from logging.handlers import RotatingFileHandler
from flask import Flask
from werkzeug.middleware.proxy_fix import ProxyFix
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager
from flask_mail import Mail
from flask_migrate import Migrate
from flask_socketio import SocketIO
from config.config import config
db = SQLAlchemy()
login_manager= LoginManager()
mail = Mail()
migrate = Migrate()
socketio = SocketIO()
def create_app(config_name=None):
if config_name is None:
config_name = os.environ.get('FLASK_ENV', 'production')
app = Flask(__name__, template_folder='templates', static_folder='static')
app.config.from_object(config.get(config_name, config['default']))
# ── ProxyFix: trust one nginx proxy hop for real client IPs ───────────────
app.wsgi_app = ProxyFix(app.wsgi_app, x_for=1, x_proto=1, x_host=1)
# ── Extensions ────────────────────────────────────────────────────────────
db.init_app(app)
login_manager.init_app(app)
mail.init_app(app)
migrate.init_app(app, db)
socketio.init_app(app, async_mode='eventlet', cors_allowed_origins='*')
login_manager.login_view = 'auth.login'
login_manager.login_message = 'Please log in to access this page.'
login_manager.login_message_category = 'info'
# ── Upload directory ──────────────────────────────────────────────────────
upload_dir = app.config.get('UPLOAD_FOLDER', 'app/static/uploads')
os.makedirs(upload_dir, exist_ok=True)
# ── Logging ───────────────────────────────────────────────────────────────
if not app.debug:
os.makedirs('logs', exist_ok=True)
file_handler = RotatingFileHandler(
'logs/it_tickets.log', maxBytes=10_485_760, backupCount=10
)
file_handler.setFormatter(logging.Formatter(
'%(asctime)s %(levelname)s: %(message)s [in %(pathname)s:%(lineno)d]'
))
file_handler.setLevel(logging.INFO)
app.logger.addHandler(file_handler)
app.logger.setLevel(logging.INFO)
app.logger.info('IT Ticket System startup')
# ── Blueprints ────────────────────────────────────────────────────────────
from app.routes.auth import auth_bp
from app.routes.tickets import tickets_bp
from app.routes.admin import admin_bp
from app.routes.api import api_bp
from app.routes.chatbot import chatbot_bp
app.register_blueprint(auth_bp)
app.register_blueprint(tickets_bp)
app.register_blueprint(admin_bp)
app.register_blueprint(api_bp)
app.register_blueprint(chatbot_bp)
# ── User loader ───────────────────────────────────────────────────────────
from app.models import User
@login_manager.user_loader
def load_user(user_id):
return User.query.get(int(user_id))
# ── Context processors ────────────────────────────────────────────────────
@app.context_processor
def inject_globals():
from flask_login import current_user
unread = 0
if current_user.is_authenticated:
from app.models import Notification
unread = Notification.query.filter_by(
user_id=current_user.id, is_read=False
).count()
return dict(unread_notifications=unread)
# ── DB initialisation (first run) ─────────────────────────────────────────
with app.app_context():
db.create_all()
_seed_admin(app)
return app
def _seed_admin(app):
"""Create the default admin account if none exists."""
from app.models import User, UserRole
if User.query.filter_by(role=UserRole.ADMIN).first():
return
admin = User(
email = app.config['ADMIN_EMAIL'],
username = 'admin',
full_name = 'System Administrator',
role = UserRole.ADMIN,
department= 'IT',
is_active = True,
)
admin.set_password(app.config['ADMIN_PASSWORD'])
db.session.add(admin)
db.session.commit()
app.logger.info(f'[SEED] Default admin account created: {admin.email}')
app/models.py
+264
View File
@@ -0,0 +1,264 @@
from datetime import datetime
from flask_login import UserMixin
from werkzeug.security import generate_password_hash, check_password_hash
from app import db
# ─── Enumerations ────────────────────────────────────────────────────────────
class UserRole:
EMPLOYEE = 'employee'
IT_STAFF = 'it_staff'
ADMIN = 'admin'
class TicketStatus:
OPEN = 'open'
IN_PROGRESS = 'in_progress'
PENDING = 'pending'
RESOLVED = 'resolved'
CLOSED = 'closed'
class TicketPriority:
LOW = 'low'
MEDIUM = 'medium'
HIGH = 'high'
CRITICAL = 'critical'
class TicketCategory:
HARDWARE = 'hardware'
SOFTWARE = 'software'
NETWORK = 'network'
ACCESS = 'access'
EMAIL = 'email'
PRINTER = 'printer'
PHONE = 'phone'
SECURITY = 'security'
OTHER = 'other'
class NotificationType:
TICKET_CREATED = 'ticket_created'
TICKET_UPDATED = 'ticket_updated'
TICKET_ASSIGNED = 'ticket_assigned'
COMMENT_ADDED = 'comment_added'
STATUS_CHANGED = 'status_changed'
TICKET_RESOLVED = 'ticket_resolved'
TICKET_CLOSED = 'ticket_closed'
MENTION = 'mention'
# ─── Models ──────────────────────────────────────────────────────────────────
class User(UserMixin, db.Model):
__tablename__ = 'users'
id = db.Column(db.Integer, primary_key=True)
email = db.Column(db.String(120), unique=True, nullable=False, index=True)
username = db.Column(db.String(64), unique=True, nullable=False, index=True)
full_name = db.Column(db.String(128), nullable=False)
password_hash= db.Column(db.String(256), nullable=False)
role = db.Column(db.String(20), default=UserRole.EMPLOYEE, nullable=False)
department = db.Column(db.String(100))
phone = db.Column(db.String(20))
avatar_url = db.Column(db.String(256))
is_active = db.Column(db.Boolean, default=True, nullable=False)
email_notif = db.Column(db.Boolean, default=True, nullable=False)
web_notif = db.Column(db.Boolean, default=True, nullable=False)
created_at = db.Column(db.DateTime, default=datetime.utcnow)
last_login = db.Column(db.DateTime)
# Relationships
created_tickets = db.relationship('Ticket', foreign_keys='Ticket.created_by_id', backref='creator', lazy='dynamic')
assigned_tickets = db.relationship('Ticket', foreign_keys='Ticket.assigned_to_id', backref='assignee', lazy='dynamic')
comments = db.relationship('Comment', backref='author', lazy='dynamic')
notifications = db.relationship('Notification', backref='recipient', lazy='dynamic')
activity_logs = db.relationship('ActivityLog', backref='user', lazy='dynamic')
def set_password(self, password):
self.password_hash = generate_password_hash(password)
def check_password(self, password):
return check_password_hash(self.password_hash, password)
@property
def is_it_staff(self):
return self.role in (UserRole.IT_STAFF, UserRole.ADMIN)
@property
def is_admin(self):
return self.role == UserRole.ADMIN
def __repr__(self):
return f'<User {self.username}>'
class Ticket(db.Model):
__tablename__ = 'tickets'
id = db.Column(db.Integer, primary_key=True)
ticket_number = db.Column(db.String(20), unique=True, nullable=False, index=True)
title = db.Column(db.String(200), nullable=False)
description = db.Column(db.Text, nullable=False)
category = db.Column(db.String(50), default=TicketCategory.OTHER, nullable=False)
priority = db.Column(db.String(20), default=TicketPriority.MEDIUM, nullable=False)
status = db.Column(db.String(20), default=TicketStatus.OPEN, nullable=False, index=True)
location = db.Column(db.String(100))
asset_tag = db.Column(db.String(50))
created_by_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
assigned_to_id = db.Column(db.Integer, db.ForeignKey('users.id'))
created_at = db.Column(db.DateTime, default=datetime.utcnow, index=True)
updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
resolved_at = db.Column(db.DateTime)
closed_at = db.Column(db.DateTime)
due_date = db.Column(db.DateTime)
ai_generated = db.Column(db.Boolean, default=False)
internal_notes = db.Column(db.Text)
resolution_notes = db.Column(db.Text)
# Relationships
comments = db.relationship('Comment', backref='ticket', lazy='dynamic', cascade='all, delete-orphan')
attachments = db.relationship('Attachment', backref='ticket', lazy='dynamic', cascade='all, delete-orphan')
notifications= db.relationship('Notification', backref='ticket', lazy='dynamic', cascade='all, delete-orphan')
history = db.relationship('TicketHistory', backref='ticket', lazy='dynamic', cascade='all, delete-orphan')
def generate_ticket_number(self):
"""Generate unique ticket number like TKT-20240101-0001"""
date_str = datetime.utcnow().strftime('%Y%m%d')
last = Ticket.query.filter(
Ticket.ticket_number.like(f'TKT-{date_str}-%')
).order_by(Ticket.id.desc()).first()
if last:
seq = int(last.ticket_number.split('-')[-1]) + 1
else:
seq = 1
return f'TKT-{date_str}-{seq:04d}'
@property
def priority_color(self):
return {
TicketPriority.LOW: 'success',
TicketPriority.MEDIUM: 'warning',
TicketPriority.HIGH: 'danger',
TicketPriority.CRITICAL: 'dark',
}.get(self.priority, 'secondary')
@property
def status_color(self):
return {
TicketStatus.OPEN: 'primary',
TicketStatus.IN_PROGRESS: 'info',
TicketStatus.PENDING: 'warning',
TicketStatus.RESOLVED: 'success',
TicketStatus.CLOSED: 'secondary',
}.get(self.status, 'secondary')
def __repr__(self):
return f'<Ticket {self.ticket_number}>'
class Comment(db.Model):
__tablename__ = 'comments'
id = db.Column(db.Integer, primary_key=True)
ticket_id = db.Column(db.Integer, db.ForeignKey('tickets.id'), nullable=False)
author_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
body = db.Column(db.Text, nullable=False)
is_internal = db.Column(db.Boolean, default=False) # IT-only internal note
created_at = db.Column(db.DateTime, default=datetime.utcnow)
updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
attachments = db.relationship('Attachment', backref='comment', lazy='dynamic')
def __repr__(self):
return f'<Comment {self.id} on Ticket {self.ticket_id}>'
class Attachment(db.Model):
__tablename__ = 'attachments'
id = db.Column(db.Integer, primary_key=True)
ticket_id = db.Column(db.Integer, db.ForeignKey('tickets.id'))
comment_id = db.Column(db.Integer, db.ForeignKey('comments.id'))
filename = db.Column(db.String(256), nullable=False)
stored_name = db.Column(db.String(256), nullable=False)
file_size = db.Column(db.Integer)
mime_type = db.Column(db.String(100))
uploaded_by = db.Column(db.Integer, db.ForeignKey('users.id'))
uploaded_at = db.Column(db.DateTime, default=datetime.utcnow)
uploader = db.relationship('User', foreign_keys=[uploaded_by])
def __repr__(self):
return f'<Attachment {self.filename}>'
class Notification(db.Model):
__tablename__ = 'notifications'
id = db.Column(db.Integer, primary_key=True)
user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
ticket_id = db.Column(db.Integer, db.ForeignKey('tickets.id'))
type = db.Column(db.String(50), nullable=False)
title = db.Column(db.String(200), nullable=False)
message = db.Column(db.Text)
is_read = db.Column(db.Boolean, default=False, index=True)
created_at = db.Column(db.DateTime, default=datetime.utcnow, index=True)
link = db.Column(db.String(256))
def __repr__(self):
return f'<Notification {self.id} for User {self.user_id}>'
class TicketHistory(db.Model):
__tablename__ = 'ticket_history'
id = db.Column(db.Integer, primary_key=True)
ticket_id = db.Column(db.Integer, db.ForeignKey('tickets.id'), nullable=False)
changed_by = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
field_name = db.Column(db.String(50), nullable=False)
old_value = db.Column(db.String(200))
new_value = db.Column(db.String(200))
changed_at = db.Column(db.DateTime, default=datetime.utcnow)
changer = db.relationship('User', foreign_keys=[changed_by])
def __repr__(self):
return f'<TicketHistory {self.id}>'
class ActivityLog(db.Model):
__tablename__ = 'activity_logs'
id = db.Column(db.Integer, primary_key=True)
user_id = db.Column(db.Integer, db.ForeignKey('users.id'))
action = db.Column(db.String(100), nullable=False)
entity_type = db.Column(db.String(50))
entity_id = db.Column(db.Integer)
details = db.Column(db.Text)
ip_address = db.Column(db.String(45))
created_at = db.Column(db.DateTime, default=datetime.utcnow, index=True)
def __repr__(self):
return f'<ActivityLog {self.action} by User {self.user_id}>'
class KnowledgeBase(db.Model):
__tablename__ = 'knowledge_base'
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(200), nullable=False)
body = db.Column(db.Text, nullable=False)
category = db.Column(db.String(50))
tags = db.Column(db.String(256))
author_id = db.Column(db.Integer, db.ForeignKey('users.id'))
is_published= db.Column(db.Boolean, default=True)
view_count = db.Column(db.Integer, default=0)
created_at = db.Column(db.DateTime, default=datetime.utcnow)
updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
author = db.relationship('User', foreign_keys=[author_id])
def __repr__(self):
return f'<KnowledgeBase {self.title}>'
app/routes/__init__.py
View File
app/routes/admin.py
+265
View File
@@ -0,0 +1,265 @@
import logging
from functools import wraps
from flask import Blueprint, render_template, redirect, url_for, flash, request, abort
from flask_login import login_required, current_user
from app import db
from app.models import (User, Ticket, Comment, ActivityLog, KnowledgeBase,
UserRole, TicketStatus)
from app.services.log_service import log_action
admin_bp = Blueprint('admin', __name__, url_prefix='/admin')
logger = logging.getLogger(__name__)
def admin_required(f):
@wraps(f)
def decorated(*args, **kwargs):
if not current_user.is_authenticated or not current_user.is_admin:
abort(403)
return f(*args, **kwargs)
return decorated
def it_required(f):
@wraps(f)
def decorated(*args, **kwargs):
if not current_user.is_authenticated or not current_user.is_it_staff:
abort(403)
return f(*args, **kwargs)
return decorated
# ─── Admin Dashboard ──────────────────────────────────────────────────────────
@admin_bp.route('/')
@login_required
@it_required
def index():
stats = {
'total_tickets' : Ticket.query.count(),
'open' : Ticket.query.filter_by(status=TicketStatus.OPEN).count(),
'in_progress' : Ticket.query.filter_by(status=TicketStatus.IN_PROGRESS).count(),
'resolved' : Ticket.query.filter_by(status=TicketStatus.RESOLVED).count(),
'closed' : Ticket.query.filter_by(status=TicketStatus.CLOSED).count(),
'total_users' : User.query.filter_by(is_active=True).count(),
'employees' : User.query.filter_by(role=UserRole.EMPLOYEE, is_active=True).count(),
'it_staff' : User.query.filter(
User.role.in_([UserRole.IT_STAFF, UserRole.ADMIN]),
User.is_active == True).count(),
}
recent_logs = ActivityLog.query.order_by(ActivityLog.created_at.desc()).limit(20).all()
return render_template('admin/index.html', stats=stats, recent_logs=recent_logs)
# ─── User Management ─────────────────────────────────────────────────────────
@admin_bp.route('/users')
@login_required
@admin_required
def users():
all_users = User.query.order_by(User.created_at.desc()).all()
return render_template('admin/users.html', users=all_users)
@admin_bp.route('/users/new', methods=['GET', 'POST'])
@login_required
@admin_required
def create_user():
if request.method == 'POST':
email = request.form.get('email', '').strip().lower()
username = request.form.get('username', '').strip()
full_name = request.form.get('full_name', '').strip()
department = request.form.get('department', '').strip()
phone = request.form.get('phone', '').strip()
role = request.form.get('role', UserRole.EMPLOYEE)
password = request.form.get('password', '')
confirm = request.form.get('confirm_password', '')
is_active = bool(request.form.get('is_active'))
# ── Validation ────────────────────────────────────────────────────────
if not email or not username or not full_name or not password:
flash('Email, username, full name and password are all required.', 'danger')
return render_template('admin/create_user.html', roles=_roles(), form=request.form)
if User.query.filter_by(email=email).first():
flash('That email address is already registered.', 'danger')
return render_template('admin/create_user.html', roles=_roles(), form=request.form)
if User.query.filter_by(username=username).first():
flash('That username is already taken.', 'danger')
return render_template('admin/create_user.html', roles=_roles(), form=request.form)
if password != confirm:
flash('Passwords do not match.', 'danger')
return render_template('admin/create_user.html', roles=_roles(), form=request.form)
if len(password) < 8:
flash('Password must be at least 8 characters.', 'danger')
return render_template('admin/create_user.html', roles=_roles(), form=request.form)
# ── Create ────────────────────────────────────────────────────────────
user = User(
email = email,
username = username,
full_name = full_name,
department = department,
phone = phone,
role = role,
is_active = is_active,
)
user.set_password(password)
db.session.add(user)
db.session.commit()
log_action(current_user.id, 'admin_user_create', 'user', user.id,
f'email={email} role={role}')
logger.info(f'[ADMIN USER CREATE] user_id={user.id} email={email} role={role} by admin_id={current_user.id}')
flash(f'User {full_name} ({email}) created successfully.', 'success')
return redirect(url_for('admin.users'))
return render_template('admin/create_user.html', roles=_roles(), form={})
@admin_bp.route('/users/<int:user_id>/edit', methods=['GET', 'POST'])
@login_required
@admin_required
def edit_user(user_id):
user = User.query.get_or_404(user_id)
if request.method == 'POST':
old_role = user.role
user.full_name = request.form.get('full_name', user.full_name).strip()
user.department= request.form.get('department', user.department).strip()
user.phone = request.form.get('phone', user.phone or '').strip()
user.role = request.form.get('role', user.role)
user.is_active = bool(request.form.get('is_active'))
new_pw = request.form.get('new_password', '')
if new_pw:
user.set_password(new_pw)
logger.info(f'[ADMIN PASSWORD RESET] target_user_id={user.id} by admin_id={current_user.id}')
db.session.commit()
log_action(current_user.id, 'admin_user_edit', 'user', user.id,
f'role_change={old_role}->{user.role} active={user.is_active}')
logger.info(f'[ADMIN USER EDIT] user_id={user.id} by admin_id={current_user.id}')
flash('User updated.', 'success')
return redirect(url_for('admin.users'))
return render_template('admin/edit_user.html', user=user, roles=_roles())
@admin_bp.route('/users/<int:user_id>/delete', methods=['POST'])
@login_required
@admin_required
def delete_user(user_id):
user = User.query.get_or_404(user_id)
if user.id == current_user.id:
flash('You cannot delete your own account.', 'danger')
return redirect(url_for('admin.users'))
user.is_active = False
db.session.commit()
log_action(current_user.id, 'admin_user_deactivate', 'user', user.id)
logger.info(f'[ADMIN USER DEACTIVATE] user_id={user.id} by admin_id={current_user.id}')
flash('User deactivated.', 'success')
return redirect(url_for('admin.users'))
# ─── Ticket Management (IT) ───────────────────────────────────────────────────
@admin_bp.route('/tickets')
@login_required
@it_required
def all_tickets():
page = request.args.get('page', 1, type=int)
status = request.args.get('status', '')
priority = request.args.get('priority', '')
assigned = request.args.get('assigned', '')
q = Ticket.query
if status: q = q.filter_by(status=status)
if priority: q = q.filter_by(priority=priority)
if assigned == 'me': q = q.filter_by(assigned_to_id=current_user.id)
elif assigned == 'unassigned': q = q.filter_by(assigned_to_id=None)
tickets = q.order_by(Ticket.created_at.desc()).paginate(page=page, per_page=25)
return render_template('admin/tickets.html', tickets=tickets,
status=status, priority=priority, assigned=assigned)
# ─── Knowledge Base Management ────────────────────────────────────────────────
@admin_bp.route('/kb')
@login_required
@it_required
def kb_list():
articles = KnowledgeBase.query.order_by(KnowledgeBase.created_at.desc()).all()
return render_template('admin/kb_list.html', articles=articles)
@admin_bp.route('/kb/new', methods=['GET', 'POST'])
@login_required
@it_required
def kb_new():
if request.method == 'POST':
article = KnowledgeBase(
title = request.form.get('title', '').strip(),
body = request.form.get('body', '').strip(),
category = request.form.get('category', ''),
tags = request.form.get('tags', ''),
author_id = current_user.id,
is_published= bool(request.form.get('is_published')),
)
db.session.add(article)
db.session.commit()
log_action(current_user.id, 'kb_create', 'knowledge_base', article.id,
f'title={article.title}')
logger.info(f'[KB CREATE] article_id={article.id} by user_id={current_user.id}')
flash('Article created.', 'success')
return redirect(url_for('admin.kb_list'))
return render_template('admin/kb_edit.html', article=None)
@admin_bp.route('/kb/<int:article_id>/edit', methods=['GET', 'POST'])
@login_required
@it_required
def kb_edit(article_id):
article = KnowledgeBase.query.get_or_404(article_id)
if request.method == 'POST':
article.title = request.form.get('title', article.title).strip()
article.body = request.form.get('body', article.body).strip()
article.category = request.form.get('category', article.category)
article.tags = request.form.get('tags', article.tags)
article.is_published= bool(request.form.get('is_published'))
db.session.commit()
log_action(current_user.id, 'kb_edit', 'knowledge_base', article.id)
logger.info(f'[KB EDIT] article_id={article.id} by user_id={current_user.id}')
flash('Article updated.', 'success')
return redirect(url_for('admin.kb_list'))
return render_template('admin/kb_edit.html', article=article)
@admin_bp.route('/kb/<int:article_id>/delete', methods=['POST'])
@login_required
@it_required
def kb_delete(article_id):
article = KnowledgeBase.query.get_or_404(article_id)
log_action(current_user.id, 'kb_delete', 'knowledge_base', article.id,
f'title={article.title}')
logger.info(f'[KB DELETE] article_id={article.id} by user_id={current_user.id}')
db.session.delete(article)
db.session.commit()
flash('Article deleted.', 'success')
return redirect(url_for('admin.kb_list'))
# ─── Activity Log ─────────────────────────────────────────────────────────────
@admin_bp.route('/logs')
@login_required
@admin_required
def activity_logs():
page = request.args.get('page', 1, type=int)
logs = ActivityLog.query.order_by(ActivityLog.created_at.desc()).paginate(
page=page, per_page=50)
return render_template('admin/activity_logs.html', logs=logs)
def _roles():
return [UserRole.EMPLOYEE, UserRole.IT_STAFF, UserRole.ADMIN]
app/routes/api.py
+83
View File
@@ -0,0 +1,83 @@
import logging
from flask import Blueprint, jsonify, request
from flask_login import login_required, current_user
from flask_socketio import emit, join_room, leave_room
from app import db, socketio
from app.models import Notification, Ticket, TicketStatus, TicketPriority
from app.services.log_service import log_action
api_bp = Blueprint('api', __name__, url_prefix='/api')
logger = logging.getLogger(__name__)
# ─── Notifications API ────────────────────────────────────────────────────────
@api_bp.route('/notifications/unread-count')
@login_required
def unread_count():
count = Notification.query.filter_by(user_id=current_user.id, is_read=False).count()
return jsonify({'count': count})
@api_bp.route('/notifications/<int:notif_id>/read', methods=['POST'])
@login_required
def mark_read(notif_id):
notif = Notification.query.filter_by(id=notif_id, user_id=current_user.id).first_or_404()
notif.is_read = True
db.session.commit()
return jsonify({'ok': True})
@api_bp.route('/notifications/mark-all-read', methods=['POST'])
@login_required
def mark_all_read():
Notification.query.filter_by(user_id=current_user.id, is_read=False).update({'is_read': True})
db.session.commit()
return jsonify({'ok': True})
# ─── Ticket Stats API (IT) ────────────────────────────────────────────────────
@api_bp.route('/stats/tickets')
@login_required
def ticket_stats():
if not current_user.is_it_staff:
return jsonify({'error': 'Forbidden'}), 403
stats = {
'open' : Ticket.query.filter_by(status=TicketStatus.OPEN).count(),
'in_progress' : Ticket.query.filter_by(status=TicketStatus.IN_PROGRESS).count(),
'pending' : Ticket.query.filter_by(status=TicketStatus.PENDING).count(),
'resolved' : Ticket.query.filter_by(status=TicketStatus.RESOLVED).count(),
'closed' : Ticket.query.filter_by(status=TicketStatus.CLOSED).count(),
}
return jsonify(stats)
# ─── WebSocket Events ─────────────────────────────────────────────────────────
@socketio.on('connect')
def on_connect():
if current_user.is_authenticated:
join_room(f'user_{current_user.id}')
logger.info(f'[SOCKET CONNECT] user_id={current_user.id}')
@socketio.on('disconnect')
def on_disconnect():
if current_user.is_authenticated:
leave_room(f'user_{current_user.id}')
logger.info(f'[SOCKET DISCONNECT] user_id={current_user.id}')
@socketio.on('join_ticket')
def on_join_ticket(data):
if current_user.is_authenticated:
ticket_id = data.get('ticket_id')
join_room(f'ticket_{ticket_id}')
@socketio.on('leave_ticket')
def on_leave_ticket(data):
if current_user.is_authenticated:
ticket_id = data.get('ticket_id')
leave_room(f'ticket_{ticket_id}')
app/routes/auth.py
+124
View File
@@ -0,0 +1,124 @@
import logging
from datetime import datetime
from flask import Blueprint, render_template, redirect, url_for, flash, request
from flask_login import login_user, logout_user, login_required, current_user
from app import db
from app.models import User, UserRole
from app.services.log_service import log_action
auth_bp = Blueprint('auth', __name__, url_prefix='/auth')
logger = logging.getLogger(__name__)
@auth_bp.route('/login', methods=['GET', 'POST'])
def login():
if current_user.is_authenticated:
return redirect(url_for('tickets.dashboard'))
if request.method == 'POST':
email = request.form.get('email', '').strip().lower()
password = request.form.get('password', '')
remember = bool(request.form.get('remember'))
user = User.query.filter_by(email=email).first()
if user and user.check_password(password) and user.is_active:
login_user(user, remember=remember)
user.last_login = datetime.utcnow()
db.session.commit()
log_action(user.id, 'user_login', 'user', user.id, f'email={email}')
logger.info(f'[AUTH LOGIN] user_id={user.id} email={email}')
next_page = request.args.get('next')
return redirect(next_page or url_for('tickets.dashboard'))
else:
logger.warning(f'[AUTH FAILED] email={email} ip={request.remote_addr}')
flash('Invalid credentials or account disabled.', 'danger')
return render_template('auth/login.html')
@auth_bp.route('/register', methods=['GET', 'POST'])
def register():
if current_user.is_authenticated:
return redirect(url_for('tickets.dashboard'))
if request.method == 'POST':
email = request.form.get('email', '').strip().lower()
username = request.form.get('username', '').strip()
full_name = request.form.get('full_name', '').strip()
department = request.form.get('department', '').strip()
phone = request.form.get('phone', '').strip()
password = request.form.get('password', '')
confirm = request.form.get('confirm_password', '')
if User.query.filter_by(email=email).first():
flash('Email already registered.', 'danger')
elif User.query.filter_by(username=username).first():
flash('Username already taken.', 'danger')
elif password != confirm:
flash('Passwords do not match.', 'danger')
elif len(password) < 8:
flash('Password must be at least 8 characters.', 'danger')
else:
user = User(
email = email,
username = username,
full_name = full_name,
department = department,
phone = phone,
role = UserRole.EMPLOYEE,
)
user.set_password(password)
db.session.add(user)
db.session.commit()
log_action(user.id, 'user_register', 'user', user.id, f'email={email}')
logger.info(f'[AUTH REGISTER] user_id={user.id} email={email}')
flash('Account created! You may now log in.', 'success')
return redirect(url_for('auth.login'))
return render_template('auth/register.html')
@auth_bp.route('/logout')
@login_required
def logout():
log_action(current_user.id, 'user_logout', 'user', current_user.id)
logger.info(f'[AUTH LOGOUT] user_id={current_user.id}')
logout_user()
flash('You have been logged out.', 'info')
return redirect(url_for('auth.login'))
@auth_bp.route('/profile', methods=['GET', 'POST'])
@login_required
def profile():
if request.method == 'POST':
full_name = request.form.get('full_name', '').strip()
department = request.form.get('department', '').strip()
phone = request.form.get('phone', '').strip()
email_notif= bool(request.form.get('email_notif'))
web_notif = bool(request.form.get('web_notif'))
new_pw = request.form.get('new_password', '')
confirm_pw = request.form.get('confirm_password', '')
current_user.full_name = full_name
current_user.department = department
current_user.phone = phone
current_user.email_notif= email_notif
current_user.web_notif = web_notif
if new_pw:
if new_pw != confirm_pw:
flash('Passwords do not match.', 'danger')
return render_template('auth/profile.html')
if len(new_pw) < 8:
flash('Password must be at least 8 characters.', 'danger')
return render_template('auth/profile.html')
current_user.set_password(new_pw)
logger.info(f'[AUTH PASSWORD CHANGE] user_id={current_user.id}')
db.session.commit()
log_action(current_user.id, 'user_profile_update', 'user', current_user.id)
logger.info(f'[AUTH PROFILE UPDATE] user_id={current_user.id}')
flash('Profile updated successfully.', 'success')
return render_template('auth/profile.html')
app/routes/chatbot.py
+114
View File
@@ -0,0 +1,114 @@
import json
import logging
import requests
from flask import Blueprint, request, jsonify, current_app
from flask_login import login_required, current_user
from app import db
from app.models import Ticket, TicketStatus, TicketPriority, TicketCategory
from app.services.notification_service import notify_new_ticket
from app.services.log_service import log_action
chatbot_bp = Blueprint('chatbot', __name__, url_prefix='/chatbot')
logger = logging.getLogger(__name__)
_SYSTEM_PROMPT = """You are an IT Helpdesk Assistant for an internal IT ticket system.
Your job is to:
1. Help employees report IT issues conversationally.
2. Gather all required information to create a support ticket:
- Issue title (short summary)
- Detailed description
- Category (hardware, software, network, access, email, printer, phone, security, other)
- Priority (low, medium, high, critical)
- Location (optional)
- Asset tag (optional – device serial / asset number)
3. When you have enough information, respond with a JSON block like this (and ONLY this, no extra text):
{"action": "create_ticket", "title": "...", "description": "...", "category": "...", "priority": "...", "location": "...", "asset_tag": "..."}
4. For general IT questions, answer helpfully but briefly.
5. If the user seems frustrated or has a critical outage, set priority to "critical".
6. Keep your tone professional, friendly, and concise.
7. Always ask clarifying questions if you need more detail before creating a ticket.
"""
@chatbot_bp.route('/message', methods=['POST'])
@login_required
def chat():
data = request.get_json(force=True)
history = data.get('history', []) # [{role, content}, ...]
user_msg = data.get('message', '').strip()
if not user_msg:
return jsonify({'error': 'Empty message'}), 400
api_key = current_app.config.get('ANTHROPIC_API_KEY', '')
if not api_key:
return jsonify({'reply': "The AI assistant is not configured yet. Please contact your IT administrator.", 'ticket': None})
messages = history + [{'role': 'user', 'content': user_msg}]
try:
resp = requests.post(
'https://api.anthropic.com/v1/messages',
headers={
'x-api-key' : api_key,
'anthropic-version': '2023-06-01',
'content-type' : 'application/json',
},
json={
'model' : 'claude-sonnet-4-20250514',
'max_tokens': 1024,
'system' : _SYSTEM_PROMPT,
'messages' : messages,
},
timeout=30,
)
resp.raise_for_status()
reply_text = resp.json()['content'][0]['text'].strip()
except Exception as exc:
logger.error(f'[CHATBOT API ERROR] {exc}')
return jsonify({'reply': 'Sorry, I encountered an error. Please try again or submit a ticket manually.', 'ticket': None})
# Check if the AI wants to create a ticket
ticket_data = None
if '"action": "create_ticket"' in reply_text or "'action': 'create_ticket'" in reply_text:
try:
start = reply_text.find('{')
end = reply_text.rfind('}') + 1
parsed = json.loads(reply_text[start:end])
if parsed.get('action') == 'create_ticket':
ticket = Ticket(
title = parsed.get('title', 'Untitled Issue'),
description = parsed.get('description', ''),
category = parsed.get('category', TicketCategory.OTHER),
priority = parsed.get('priority', TicketPriority.MEDIUM),
location = parsed.get('location', ''),
asset_tag = parsed.get('asset_tag', ''),
created_by_id = current_user.id,
status = TicketStatus.OPEN,
ai_generated = True,
)
ticket.ticket_number = ticket.generate_ticket_number()
db.session.add(ticket)
db.session.commit()
log_action(current_user.id, 'ticket_create_chatbot', 'ticket', ticket.id,
f'ticket_number={ticket.ticket_number} ai_generated=True')
logger.info(f'[CHATBOT TICKET CREATE] ticket_id={ticket.id} number={ticket.ticket_number} user_id={current_user.id}')
notify_new_ticket(ticket)
ticket_data = {
'id' : ticket.id,
'ticket_number' : ticket.ticket_number,
'title' : ticket.title,
'url' : f'/tickets/{ticket.id}',
}
reply_text = (
f"✅ **Ticket Created!**\n\n"
f"I've submitted your ticket **{ticket.ticket_number}**: _{ticket.title}_\n\n"
f"Our IT team has been notified and will get back to you shortly. "
f"You can track your ticket [here](/tickets/{ticket.id})."
)
except (json.JSONDecodeError, KeyError) as exc:
logger.warning(f'[CHATBOT PARSE ERROR] Could not parse ticket JSON: {exc}')
return jsonify({'reply': reply_text, 'ticket': ticket_data})
app/routes/tickets.py
+370
View File
@@ -0,0 +1,370 @@
import os
import logging
import uuid
from datetime import datetime
from flask import (Blueprint, render_template, redirect, url_for,
flash, request, current_app, send_from_directory, abort)
from flask_login import login_required, current_user
from werkzeug.utils import secure_filename
from app import db
from app.models import (Ticket, Comment, Attachment, Notification,
TicketStatus, TicketPriority, TicketCategory,
User, UserRole, KnowledgeBase)
from app.services.notification_service import (
notify_new_ticket, notify_status_change,
notify_comment_added, notify_assignment,
)
from app.services.log_service import log_action, log_ticket_history
tickets_bp = Blueprint('tickets', __name__)
logger = logging.getLogger(__name__)
ALLOWED_EXT = {'png', 'jpg', 'jpeg', 'gif', 'pdf', 'doc', 'docx', 'txt', 'zip', 'log'}
def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXT
def save_attachment(file, ticket_id=None, comment_id=None, uploader_id=None):
filename = secure_filename(file.filename)
ext = filename.rsplit('.', 1)[1].lower() if '.' in filename else ''
stored_name = f"{uuid.uuid4().hex}.{ext}"
upload_dir = current_app.config['UPLOAD_FOLDER']
file.save(os.path.join(upload_dir, stored_name))
att = Attachment(
ticket_id = ticket_id,
comment_id = comment_id,
filename = filename,
stored_name= stored_name,
file_size = os.path.getsize(os.path.join(upload_dir, stored_name)),
mime_type = file.content_type,
uploaded_by= uploader_id,
)
db.session.add(att)
return att
# ─── Dashboard ────────────────────────────────────────────────────────────────
@tickets_bp.route('/')
@tickets_bp.route('/dashboard')
@login_required
def dashboard():
if current_user.is_it_staff:
open_count = Ticket.query.filter_by(status=TicketStatus.OPEN).count()
in_progress_count= Ticket.query.filter_by(status=TicketStatus.IN_PROGRESS).count()
pending_count = Ticket.query.filter_by(status=TicketStatus.PENDING).count()
resolved_count = Ticket.query.filter_by(status=TicketStatus.RESOLVED).count()
my_tickets = Ticket.query.filter_by(assigned_to_id=current_user.id).filter(
Ticket.status.notin_([TicketStatus.CLOSED])
).order_by(Ticket.created_at.desc()).limit(10).all()
recent_tickets = Ticket.query.order_by(Ticket.created_at.desc()).limit(15).all()
return render_template('tickets/dashboard_it.html',
open_count=open_count, in_progress_count=in_progress_count,
pending_count=pending_count, resolved_count=resolved_count,
my_tickets=my_tickets, recent_tickets=recent_tickets,
)
else:
my_tickets = Ticket.query.filter_by(created_by_id=current_user.id).order_by(
Ticket.created_at.desc()).limit(20).all()
open_count = sum(1 for t in my_tickets if t.status == TicketStatus.OPEN)
active_count = sum(1 for t in my_tickets if t.status == TicketStatus.IN_PROGRESS)
resolved_count = sum(1 for t in my_tickets if t.status == TicketStatus.RESOLVED)
articles = KnowledgeBase.query.filter_by(is_published=True).order_by(
KnowledgeBase.view_count.desc()).limit(5).all()
return render_template('tickets/dashboard_employee.html',
my_tickets=my_tickets, open_count=open_count,
active_count=active_count, resolved_count=resolved_count,
articles=articles,
)
# ─── Create Ticket ────────────────────────────────────────────────────────────
@tickets_bp.route('/tickets/new', methods=['GET', 'POST'])
@login_required
def create_ticket():
if request.method == 'POST':
title = request.form.get('title', '').strip()
description = request.form.get('description', '').strip()
category = request.form.get('category', TicketCategory.OTHER)
priority = request.form.get('priority', TicketPriority.MEDIUM)
location = request.form.get('location', '').strip()
asset_tag = request.form.get('asset_tag', '').strip()
if not title or not description:
flash('Title and description are required.', 'danger')
return render_template('tickets/create.html',
categories=_categories(), priorities=_priorities())
ticket = Ticket(
title = title,
description = description,
category = category,
priority = priority,
location = location,
asset_tag = asset_tag,
created_by_id = current_user.id,
status = TicketStatus.OPEN,
)
ticket.ticket_number = ticket.generate_ticket_number()
db.session.add(ticket)
db.session.flush() # get ticket.id before attachments
# Handle file uploads
for f in request.files.getlist('attachments'):
if f and f.filename and allowed_file(f.filename):
save_attachment(f, ticket_id=ticket.id, uploader_id=current_user.id)
db.session.commit()
log_action(current_user.id, 'ticket_create', 'ticket', ticket.id,
f'ticket_number={ticket.ticket_number} priority={priority} category={category}')
logger.info(f'[TICKET CREATE] ticket_id={ticket.id} number={ticket.ticket_number} by user_id={current_user.id}')
notify_new_ticket(ticket)
flash(f'Ticket {ticket.ticket_number} created successfully!', 'success')
return redirect(url_for('tickets.ticket_detail', ticket_id=ticket.id))
return render_template('tickets/create.html',
categories=_categories(), priorities=_priorities())
# ─── Ticket List ──────────────────────────────────────────────────────────────
@tickets_bp.route('/tickets')
@login_required
def ticket_list():
page = request.args.get('page', 1, type=int)
status = request.args.get('status', '')
priority = request.args.get('priority', '')
category = request.args.get('category', '')
search = request.args.get('q', '')
query = Ticket.query
if not current_user.is_it_staff:
query = query.filter_by(created_by_id=current_user.id)
if status:
query = query.filter_by(status=status)
if priority:
query = query.filter_by(priority=priority)
if category:
query = query.filter_by(category=category)
if search:
query = query.filter(
Ticket.title.ilike(f'%{search}%') |
Ticket.ticket_number.ilike(f'%{search}%') |
Ticket.description.ilike(f'%{search}%')
)
tickets = query.order_by(Ticket.created_at.desc()).paginate(page=page, per_page=20)
return render_template('tickets/list.html',
tickets=tickets, status=status, priority=priority,
category=category, search=search,
statuses=_statuses(), priorities=_priorities(), categories=_categories(),
)
# ─── Ticket Detail ────────────────────────────────────────────────────────────
@tickets_bp.route('/tickets/<int:ticket_id>', methods=['GET', 'POST'])
@login_required
def ticket_detail(ticket_id):
ticket = Ticket.query.get_or_404(ticket_id)
# Employees can only view their own tickets
if not current_user.is_it_staff and ticket.created_by_id != current_user.id:
abort(403)
if request.method == 'POST':
body = request.form.get('body', '').strip()
is_internal = bool(request.form.get('is_internal')) and current_user.is_it_staff
if not body:
flash('Comment cannot be empty.', 'danger')
else:
comment = Comment(
ticket_id = ticket.id,
author_id = current_user.id,
body = body,
is_internal= is_internal,
)
db.session.add(comment)
db.session.flush()
for f in request.files.getlist('attachments'):
if f and f.filename and allowed_file(f.filename):
save_attachment(f, ticket_id=ticket.id,
comment_id=comment.id, uploader_id=current_user.id)
db.session.commit()
log_action(current_user.id, 'comment_create', 'comment', comment.id,
f'ticket_id={ticket.id} internal={is_internal}')
logger.info(f'[COMMENT CREATE] comment_id={comment.id} ticket_id={ticket.id} by user_id={current_user.id}')
notify_comment_added(comment)
flash('Comment added.', 'success')
return redirect(url_for('tickets.ticket_detail', ticket_id=ticket.id))
comments = Comment.query.filter_by(ticket_id=ticket.id)
if not current_user.is_it_staff:
comments = comments.filter_by(is_internal=False)
comments = comments.order_by(Comment.created_at.asc()).all()
it_staff = User.query.filter(
User.role.in_([UserRole.IT_STAFF, UserRole.ADMIN]),
User.is_active == True,
).all() if current_user.is_it_staff else []
history = ticket.history.order_by('changed_at').all()
return render_template('tickets/detail.html',
ticket=ticket, comments=comments,
it_staff=it_staff, history=history,
statuses=_statuses(), priorities=_priorities(),
)
# ─── Update Ticket (IT Only) ──────────────────────────────────────────────────
@tickets_bp.route('/tickets/<int:ticket_id>/update', methods=['POST'])
@login_required
def update_ticket(ticket_id):
if not current_user.is_it_staff:
abort(403)
ticket = Ticket.query.get_or_404(ticket_id)
old_status = ticket.status
old_priority = ticket.priority
old_assigned = ticket.assigned_to_id
new_status = request.form.get('status', ticket.status)
new_priority = request.form.get('priority', ticket.priority)
new_assigned = request.form.get('assigned_to_id', type=int)
internal_notes= request.form.get('internal_notes', ticket.internal_notes)
resolution = request.form.get('resolution_notes', ticket.resolution_notes)
due_date_str = request.form.get('due_date', '')
changes = []
if new_status != old_status:
ticket.status = new_status
log_ticket_history(ticket, 'status', old_status, new_status, current_user.id)
changes.append(f'status: {old_status} → {new_status}')
if new_status == TicketStatus.RESOLVED:
ticket.resolved_at = datetime.utcnow()
elif new_status == TicketStatus.CLOSED:
ticket.closed_at = datetime.utcnow()
if new_priority != old_priority:
ticket.priority = new_priority
log_ticket_history(ticket, 'priority', old_priority, new_priority, current_user.id)
changes.append(f'priority: {old_priority} → {new_priority}')
if new_assigned != old_assigned:
ticket.assigned_to_id = new_assigned
log_ticket_history(ticket, 'assigned_to', str(old_assigned), str(new_assigned), current_user.id)
changes.append(f'assigned_to: {old_assigned} → {new_assigned}')
notify_assignment(ticket, current_user)
ticket.internal_notes = internal_notes
ticket.resolution_notes = resolution
if due_date_str:
try:
ticket.due_date = datetime.strptime(due_date_str, '%Y-%m-%d')
except ValueError:
pass
db.session.commit()
log_action(current_user.id, 'ticket_update', 'ticket', ticket.id,
f'changes=[{"; ".join(changes)}]')
logger.info(f'[TICKET UPDATE] ticket_id={ticket.id} changes={changes} by user_id={current_user.id}')
if new_status != old_status:
notify_status_change(ticket, old_status, current_user)
flash('Ticket updated successfully.', 'success')
return redirect(url_for('tickets.ticket_detail', ticket_id=ticket.id))
# ─── Delete Comment (IT Only) ─────────────────────────────────────────────────
@tickets_bp.route('/comments/<int:comment_id>/delete', methods=['POST'])
@login_required
def delete_comment(comment_id):
comment = Comment.query.get_or_404(comment_id)
if not current_user.is_it_staff and comment.author_id != current_user.id:
abort(403)
ticket_id = comment.ticket_id
log_action(current_user.id, 'comment_delete', 'comment', comment.id,
f'ticket_id={ticket_id}')
logger.info(f'[COMMENT DELETE] comment_id={comment.id} ticket_id={ticket_id} by user_id={current_user.id}')
db.session.delete(comment)
db.session.commit()
flash('Comment deleted.', 'success')
return redirect(url_for('tickets.ticket_detail', ticket_id=ticket_id))
# ─── Attachment Download ──────────────────────────────────────────────────────
@tickets_bp.route('/attachments/<int:att_id>')
@login_required
def download_attachment(att_id):
att = Attachment.query.get_or_404(att_id)
upload_dir = current_app.config['UPLOAD_FOLDER']
return send_from_directory(upload_dir, att.stored_name, as_attachment=True,
download_name=att.filename)
# ─── Notifications ────────────────────────────────────────────────────────────
@tickets_bp.route('/notifications')
@login_required
def notifications():
notifs = Notification.query.filter_by(user_id=current_user.id).order_by(
Notification.created_at.desc()).paginate(page=request.args.get('page', 1, type=int), per_page=30)
return render_template('tickets/notifications.html', notifs=notifs)
@tickets_bp.route('/notifications/mark-read', methods=['POST'])
@login_required
def mark_notifications_read():
Notification.query.filter_by(user_id=current_user.id, is_read=False).update({'is_read': True})
db.session.commit()
return redirect(request.referrer or url_for('tickets.notifications'))
# ─── Knowledge Base ───────────────────────────────────────────────────────────
@tickets_bp.route('/kb')
@login_required
def knowledge_base():
articles = KnowledgeBase.query.filter_by(is_published=True).order_by(
KnowledgeBase.view_count.desc()).all()
return render_template('tickets/knowledge_base.html', articles=articles)
@tickets_bp.route('/kb/<int:article_id>')
@login_required
def kb_article(article_id):
article = KnowledgeBase.query.get_or_404(article_id)
article.view_count += 1
db.session.commit()
return render_template('tickets/kb_article.html', article=article)
# ─── Helpers ─────────────────────────────────────────────────────────────────
def _statuses():
return [TicketStatus.OPEN, TicketStatus.IN_PROGRESS,
TicketStatus.PENDING, TicketStatus.RESOLVED, TicketStatus.CLOSED]
def _priorities():
return [TicketPriority.LOW, TicketPriority.MEDIUM,
TicketPriority.HIGH, TicketPriority.CRITICAL]
def _categories():
return [TicketCategory.HARDWARE, TicketCategory.SOFTWARE,
TicketCategory.NETWORK, TicketCategory.ACCESS,
TicketCategory.EMAIL, TicketCategory.PRINTER,
TicketCategory.PHONE, TicketCategory.SECURITY, TicketCategory.OTHER]
app/services/__init__.py
View File
app/services/log_service.py
+91
View File
@@ -0,0 +1,91 @@
import logging
from flask import request
from app import db
from app.models import ActivityLog
logger = logging.getLogger(__name__)
def _get_real_ip():
"""
Return the genuine client IP address when Flask sits behind an nginx
reverse proxy.
nginx forwards the original client IP in two headers:
- X-Forwarded-For: <client>, <proxy1>, <proxy2>, ...
- X-Real-IP: <client>
request.remote_addr is always 127.0.0.1 in a proxied setup, so we
must read the headers instead. We take the leftmost (first) value in
X-Forwarded-For because that is the original client; subsequent values
are intermediate proxies appended by each hop.
Falls back to X-Real-IP, then remote_addr as a last resort.
"""
try:
xff = request.headers.get('X-Forwarded-For')
if xff:
# Strip any port appended by some proxies and take first entry
return xff.split(',')[0].strip()
xri = request.headers.get('X-Real-IP')
if xri:
return xri.strip()
return request.remote_addr
except RuntimeError:
return None
def log_action(user_id, action, entity_type=None, entity_id=None, details=None):
"""
Persist an activity log entry for create / edit / delete actions.
Parameters
----------
user_id : int | None – the acting user (None for system actions)
action : str – e.g. 'ticket_create', 'ticket_update', 'comment_delete'
entity_type : str | None – 'ticket', 'comment', 'user', etc.
entity_id : int | None – primary key of the affected entity
details : str | None – free-form JSON or human-readable details
"""
ip = _get_real_ip()
try:
entry = ActivityLog(
user_id = user_id,
action = action,
entity_type = entity_type,
entity_id = entity_id,
details = details,
ip_address = ip,
)
db.session.add(entry)
db.session.commit()
logger.info(
f'[ACTIVITY] action={action} entity={entity_type}:{entity_id} '
f'user_id={user_id} ip={ip}'
)
except Exception as exc:
db.session.rollback()
logger.error(f'[ACTIVITY LOG ERROR] {exc}')
def log_ticket_history(ticket, field_name, old_value, new_value, changed_by_id):
"""Record a granular field-level change on a ticket."""
from app.models import TicketHistory
try:
entry = TicketHistory(
ticket_id = ticket.id,
changed_by = changed_by_id,
field_name = field_name,
old_value = str(old_value) if old_value is not None else None,
new_value = str(new_value) if new_value is not None else None,
)
db.session.add(entry)
db.session.commit()
logger.info(
f'[TICKET HISTORY] ticket_id={ticket.id} field={field_name} '
f'"{old_value}" -> "{new_value}" by user_id={changed_by_id}'
)
except Exception as exc:
db.session.rollback()
logger.error(f'[TICKET HISTORY ERROR] {exc}')
app/services/notification_service.py
+255
View File
@@ -0,0 +1,255 @@
import logging
from flask import current_app, render_template_string
from flask_mail import Message
from app import db, mail, socketio
from app.models import Notification, NotificationType, User, UserRole
logger = logging.getLogger(__name__)
# ─── Email Templates ──────────────────────────────────────────────────────────
_NEW_TICKET_EMAIL = """
<html><body style="font-family:Arial,sans-serif;background:#f4f4f4;padding:20px;">
<div style="max-width:600px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1);">
<div style="background:#1a1a2e;padding:24px 32px;">
<h1 style="color:#e94560;margin:0;font-size:22px;">🎫 New IT Ticket Created</h1>
</div>
<div style="padding:32px;">
<p style="color:#555;margin-top:0;">A new support ticket has been submitted.</p>
<table style="width:100%;border-collapse:collapse;margin:16px 0;">
<tr><td style="padding:8px;color:#888;width:140px;">Ticket #</td><td style="padding:8px;font-weight:bold;">{{ ticket_number }}</td></tr>
<tr style="background:#f9f9f9;"><td style="padding:8px;color:#888;">Title</td><td style="padding:8px;">{{ title }}</td></tr>
<tr><td style="padding:8px;color:#888;">Category</td><td style="padding:8px;">{{ category }}</td></tr>
<tr style="background:#f9f9f9;"><td style="padding:8px;color:#888;">Priority</td><td style="padding:8px;"><span style="background:{{ priority_color }};color:#fff;padding:2px 8px;border-radius:4px;">{{ priority }}</span></td></tr>
<tr><td style="padding:8px;color:#888;">Submitted by</td><td style="padding:8px;">{{ submitted_by }}</td></tr>
</table>
<div style="background:#f9f9f9;border-left:4px solid #e94560;padding:16px;margin:16px 0;border-radius:0 4px 4px 0;">
<p style="margin:0;color:#333;">{{ description }}</p>
</div>
<a href="{{ ticket_url }}" style="display:inline-block;background:#e94560;color:#fff;padding:12px 24px;border-radius:6px;text-decoration:none;margin-top:8px;">View Ticket</a>
</div>
<div style="background:#f4f4f4;padding:16px 32px;text-align:center;color:#999;font-size:12px;">
IT Helpdesk System &bull; This is an automated notification.
</div>
</div>
</body></html>
"""
_STATUS_UPDATE_EMAIL = """
<html><body style="font-family:Arial,sans-serif;background:#f4f4f4;padding:20px;">
<div style="max-width:600px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1);">
<div style="background:#1a1a2e;padding:24px 32px;">
<h1 style="color:#e94560;margin:0;font-size:22px;">🔄 Ticket Update</h1>
</div>
<div style="padding:32px;">
<p style="color:#555;margin-top:0;">Your ticket <strong>{{ ticket_number }}</strong> has been updated.</p>
<p><strong>{{ title }}</strong></p>
<p style="color:#555;">{{ message }}</p>
<a href="{{ ticket_url }}" style="display:inline-block;background:#e94560;color:#fff;padding:12px 24px;border-radius:6px;text-decoration:none;margin-top:8px;">View Ticket</a>
</div>
<div style="background:#f4f4f4;padding:16px 32px;text-align:center;color:#999;font-size:12px;">
IT Helpdesk System &bull; This is an automated notification.
</div>
</div>
</body></html>
"""
def _priority_badge_color(priority):
return {'low': '#28a745', 'medium': '#ffc107', 'high': '#dc3545', 'critical': '#343a40'}.get(priority, '#6c757d')
# ─── In-App Notification ──────────────────────────────────────────────────────
def create_notification(user_id, notif_type, title, message, ticket_id=None, link=None):
"""Persist an in-app notification and push via WebSocket."""
try:
notif = Notification(
user_id = user_id,
ticket_id= ticket_id,
type = notif_type,
title = title,
message = message,
link = link,
)
db.session.add(notif)
db.session.commit()
logger.info(f'[NOTIFICATION CREATE] user_id={user_id} type={notif_type} ticket_id={ticket_id}')
# Real-time push
socketio.emit('new_notification', {
'id' : notif.id,
'type' : notif_type,
'title' : title,
'message' : message,
'link' : link,
'created_at': notif.created_at.isoformat(),
}, room=f'user_{user_id}')
except Exception as exc:
db.session.rollback()
logger.error(f'[NOTIFICATION ERROR] Failed to create notification: {exc}')
# ─── Email Notification ───────────────────────────────────────────────────────
def send_email(subject, recipients, html_body):
"""Send an email; silently log errors so it never blocks the main flow."""
try:
msg = Message(subject=subject, recipients=recipients, html=html_body)
mail.send(msg)
logger.info(f'[EMAIL SENT] subject="{subject}" to={recipients}')
except Exception as exc:
logger.error(f'[EMAIL ERROR] Failed to send "{subject}" to {recipients}: {exc}')
# ─── Ticket Event Helpers ─────────────────────────────────────────────────────
def notify_new_ticket(ticket):
"""Notify IT staff (email + in-app) and confirm receipt to the creator."""
base_url = current_app.config.get('APP_BASE_URL', '')
ticket_url = f"{base_url}/tickets/{ticket.id}"
# Email IT staff
html = render_template_string(_NEW_TICKET_EMAIL,
ticket_number = ticket.ticket_number,
title = ticket.title,
description = ticket.description[:500],
category = ticket.category.replace('_', ' ').title(),
priority = ticket.priority.upper(),
priority_color= _priority_badge_color(ticket.priority),
submitted_by = ticket.creator.full_name,
ticket_url = ticket_url,
)
it_email = current_app.config.get('IT_DEPT_EMAIL')
send_email(f'[New Ticket] {ticket.ticket_number} – {ticket.title}', [it_email], html)
# In-app: all IT staff
it_users = User.query.filter(
User.role.in_([UserRole.IT_STAFF, UserRole.ADMIN]),
User.is_active == True,
).all()
for staff in it_users:
create_notification(
user_id = staff.id,
notif_type= NotificationType.TICKET_CREATED,
title = f'New Ticket: {ticket.ticket_number}',
message = f'{ticket.creator.full_name} submitted: {ticket.title}',
ticket_id = ticket.id,
link = f'/tickets/{ticket.id}',
)
# Confirm to creator
create_notification(
user_id = ticket.created_by_id,
notif_type= NotificationType.TICKET_CREATED,
title = f'Ticket {ticket.ticket_number} Created',
message = 'Your ticket has been received. Our IT team will review it shortly.',
ticket_id = ticket.id,
link = f'/tickets/{ticket.id}',
)
def notify_status_change(ticket, old_status, changed_by):
"""Notify ticket creator of status change."""
base_url = current_app.config.get('APP_BASE_URL', '')
ticket_url = f"{base_url}/tickets/{ticket.id}"
msg_text = f'Status changed from {old_status.replace("_"," ").title()} to {ticket.status.replace("_"," ").title()} by {changed_by.full_name}.'
html = render_template_string(_STATUS_UPDATE_EMAIL,
ticket_number = ticket.ticket_number,
title = ticket.title,
message = msg_text,
ticket_url = ticket_url,
)
if ticket.creator.email_notif:
send_email(
f'[Ticket Update] {ticket.ticket_number} – Status Changed',
[ticket.creator.email],
html,
)
create_notification(
user_id = ticket.created_by_id,
notif_type= NotificationType.STATUS_CHANGED,
title = f'Ticket {ticket.ticket_number} Updated',
message = msg_text,
ticket_id = ticket.id,
link = f'/tickets/{ticket.id}',
)
logger.info(f'[TICKET STATUS] ticket_id={ticket.id} {old_status} -> {ticket.status} by user_id={changed_by.id}')
def notify_comment_added(comment):
"""Notify relevant parties when a comment is added."""
ticket = comment.ticket
base_url = current_app.config.get('APP_BASE_URL', '')
ticket_url = f"{base_url}/tickets/{ticket.id}"
notified = set()
def _notify(user_id, is_internal=False):
if user_id in notified:
return
notified.add(user_id)
create_notification(
user_id = user_id,
notif_type= NotificationType.COMMENT_ADDED,
title = f'New Comment on {ticket.ticket_number}',
message = f'{comment.author.full_name} commented: {comment.body[:100]}',
ticket_id = ticket.id,
link = f'/tickets/{ticket.id}#comment-{comment.id}',
)
user = User.query.get(user_id)
if user and user.email_notif and not is_internal:
html = render_template_string(_STATUS_UPDATE_EMAIL,
ticket_number = ticket.ticket_number,
title = ticket.title,
message = f'{comment.author.full_name} added a comment: {comment.body[:300]}',
ticket_url = ticket_url,
)
send_email(
f'[Ticket Comment] {ticket.ticket_number}',
[user.email],
html,
)
# Notify creator (skip if internal-only comment)
if not comment.is_internal:
_notify(ticket.created_by_id)
# Notify assignee
if ticket.assigned_to_id and ticket.assigned_to_id != comment.author_id:
_notify(ticket.assigned_to_id, is_internal=comment.is_internal)
logger.info(f'[COMMENT ADD] comment_id={comment.id} ticket_id={ticket.id} author_id={comment.author_id} internal={comment.is_internal}')
def notify_assignment(ticket, assigned_by):
"""Notify newly assigned IT staff member."""
if not ticket.assigned_to_id:
return
base_url = current_app.config.get('APP_BASE_URL', '')
ticket_url = f"{base_url}/tickets/{ticket.id}"
create_notification(
user_id = ticket.assigned_to_id,
notif_type= NotificationType.TICKET_ASSIGNED,
title = f'Ticket Assigned: {ticket.ticket_number}',
message = f'You have been assigned ticket "{ticket.title}" by {assigned_by.full_name}.',
ticket_id = ticket.id,
link = f'/tickets/{ticket.id}',
)
if ticket.assignee and ticket.assignee.email_notif:
html = render_template_string(_STATUS_UPDATE_EMAIL,
ticket_number = ticket.ticket_number,
title = ticket.title,
message = f'This ticket has been assigned to you by {assigned_by.full_name}.',
ticket_url = ticket_url,
)
send_email(
f'[Ticket Assigned] {ticket.ticket_number}',
[ticket.assignee.email],
html,
)
logger.info(f'[TICKET ASSIGN] ticket_id={ticket.id} assigned_to={ticket.assigned_to_id} by={assigned_by.id}')
app/templates/admin/activity_logs.html
+67
View File
@@ -0,0 +1,67 @@
{% extends "base.html" %}
{% block title %}Activity Logs{% endblock %}
{% block page_title %}Activity Logs{% endblock %}
{% block content %}
<div class="card">
<div class="card-header"><i class="bi bi-list-ul me-2"></i>System Activity Log</div>
<div class="card-body p-0">
<table class="table mb-0">
<thead>
<tr>
<th>Timestamp</th>
<th>Action</th>
<th>User</th>
<th>Entity</th>
<th>Details</th>
<th>IP Address</th>
</tr>
</thead>
<tbody>
{% for log in logs.items %}
<tr>
<td style="font-size:11px;color:var(--muted);font-family:'Space Mono',monospace;white-space:nowrap;">
{{ log.created_at.strftime('%Y-%m-%d %H:%M:%S') }}
</td>
<td>
<span class="mono" style="font-size:11px;
color:{% if 'create' in log.action %}var(--success){% elif 'delete' in log.action or 'deactivate' in log.action %}var(--danger){% elif 'update' in log.action or 'edit' in log.action or 'change' in log.action %}var(--warning){% elif 'login' in log.action %}var(--accent3){% else %}var(--muted){% endif %};">
{{ log.action }}
</span>
</td>
<td style="font-size:13px;">
{% if log.user %}{{ log.user.full_name }}<br><span style="font-size:11px;color:var(--muted);">{{ log.user.email }}</span>{% else %}<span style="color:var(--muted);">System</span>{% endif %}
</td>
<td style="font-size:12px;color:var(--muted);">
{{ log.entity_type or '—' }}{% if log.entity_id %} <span class="mono">#{{ log.entity_id }}</span>{% endif %}
</td>
<td style="font-size:12px;color:var(--muted);max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
{{ log.details or '—' }}
</td>
<td style="font-size:11px;color:var(--muted);font-family:'Space Mono',monospace;">
{{ log.ip_address or '—' }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% if logs.pages > 1 %}
<div class="d-flex justify-content-center py-3">
<nav><ul class="pagination mb-0">
{% if logs.has_prev %}
<li class="page-item"><a class="page-link" href="{{ url_for('admin.activity_logs', page=logs.prev_num) }}">‹ Prev</a></li>
{% endif %}
{% for p in logs.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
{% if p %}<li class="page-item {% if p==logs.page %}active{% endif %}"><a class="page-link" href="{{ url_for('admin.activity_logs', page=p) }}">{{ p }}</a></li>
{% else %}<li class="page-item disabled"><span class="page-link">…</span></li>{% endif %}
{% endfor %}
{% if logs.has_next %}
<li class="page-item"><a class="page-link" href="{{ url_for('admin.activity_logs', page=logs.next_num) }}">Next ›</a></li>
{% endif %}
</ul></nav>
</div>
{% endif %}
</div>
</div>
{% endblock %}
app/templates/admin/create_user.html
+215
View File
@@ -0,0 +1,215 @@
{% extends "base.html" %}
{% block title %}Create User{% endblock %}
{% block page_title %}User Management{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-lg-7">
<div class="mb-3">
<a href="{{ url_for('admin.users') }}" style="font-size:13px;color:var(--accent);">
<i class="bi bi-arrow-left me-1"></i>Back to Users
</a>
</div>
<div class="card">
<div class="card-header">
<i class="bi bi-person-plus me-2"></i>Create New User
</div>
<div class="card-body">
<form method="POST" novalidate>
<!-- ── Identity ─────────────────────────────────────────────────── -->
<div style="font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:14px;">
Identity
</div>
<div class="row g-3 mb-4">
<div class="col-md-6">
<label class="form-label">Full Name *</label>
<input type="text" class="form-control" name="full_name"
value="{{ form.get('full_name', '') }}" required
placeholder="Jane Smith"/>
</div>
<div class="col-md-6">
<label class="form-label">Username *</label>
<input type="text" class="form-control" name="username"
value="{{ form.get('username', '') }}" required
placeholder="jsmith"
pattern="[a-zA-Z0-9_\-]+"
title="Letters, numbers, underscores and hyphens only"/>
</div>
<div class="col-12">
<label class="form-label">Work Email *</label>
<input type="email" class="form-control" name="email"
value="{{ form.get('email', '') }}" required
placeholder="jane.smith@company.com"/>
</div>
<div class="col-md-6">
<label class="form-label">Department</label>
<input type="text" class="form-control" name="department"
value="{{ form.get('department', '') }}"
placeholder="Finance"/>
</div>
<div class="col-md-6">
<label class="form-label">Phone</label>
<input type="text" class="form-control" name="phone"
value="{{ form.get('phone', '') }}"
placeholder="+1 555 000 0000"/>
</div>
</div>
<!-- ── Role & Status ────────────────────────────────────────────── -->
<div style="font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:14px;padding-top:4px;border-top:1px solid var(--border);">
Role &amp; Status
</div>
<div class="row g-3 mb-4">
<div class="col-md-6">
<label class="form-label">Role *</label>
<select class="form-select" name="role">
{% for r in roles %}
<option value="{{ r }}"
{% if form.get('role', 'employee') == r %}selected{% endif %}>
{{ r.replace('_', ' ').title() }}
</option>
{% endfor %}
</select>
<div style="font-size:11px;color:var(--muted);margin-top:5px;">
<strong>Employee</strong> — can submit &amp; track own tickets.<br>
<strong>IT Staff</strong> — can manage all tickets and KB.<br>
<strong>Admin</strong> — full access including user management.
</div>
</div>
<div class="col-md-6 d-flex align-items-start pt-4">
<label style="display:flex;align-items:center;gap:10px;cursor:pointer;margin-top:10px;">
<input type="checkbox" name="is_active" value="1"
style="accent-color:var(--accent);width:17px;height:17px;"
{% if form.get('is_active', '1') != '0' %}checked{% endif %}/>
<span style="font-size:14px;font-weight:500;">Account Active</span>
</label>
</div>
</div>
<!-- ── Password ─────────────────────────────────────────────────── -->
<div style="font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:14px;padding-top:4px;border-top:1px solid var(--border);">
Password
</div>
<div class="row g-3 mb-4">
<div class="col-md-6">
<label class="form-label">Password *</label>
<div style="position:relative;">
<input type="password" class="form-control" name="password"
id="pw-field" required minlength="8"
placeholder="Min. 8 characters"
style="padding-right:44px;"/>
<button type="button" onclick="togglePw('pw-field','eye1')"
style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;">
<i class="bi bi-eye" id="eye1"></i>
</button>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Confirm Password *</label>
<div style="position:relative;">
<input type="password" class="form-control" name="confirm_password"
id="pw-field2" required minlength="8"
placeholder="Repeat password"
style="padding-right:44px;"/>
<button type="button" onclick="togglePw('pw-field2','eye2')"
style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;">
<i class="bi bi-eye" id="eye2"></i>
</button>
</div>
</div>
<div class="col-12">
<!-- Password strength bar -->
<div style="height:4px;background:var(--border);border-radius:2px;margin-top:4px;">
<div id="pw-strength-bar" style="height:100%;border-radius:2px;width:0%;transition:width .3s,background .3s;"></div>
</div>
<div id="pw-strength-label" style="font-size:11px;color:var(--muted);margin-top:4px;"></div>
</div>
</div>
<!-- ── Actions ──────────────────────────────────────────────────── -->
<div class="d-flex gap-2 pt-2" style="border-top:1px solid var(--border);">
<button type="submit" class="btn btn-primary">
<i class="bi bi-person-check me-2"></i>Create User
</button>
<a href="{{ url_for('admin.users') }}" class="btn btn-secondary">Cancel</a>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
// ── Show/hide password ────────────────────────────────────────────────────────
function togglePw(fieldId, iconId) {
const field = document.getElementById(fieldId);
const icon = document.getElementById(iconId);
if (field.type === 'password') {
field.type = 'text';
icon.className = 'bi bi-eye-slash';
} else {
field.type = 'password';
icon.className = 'bi bi-eye';
}
}
// ── Password strength indicator ───────────────────────────────────────────────
document.getElementById('pw-field').addEventListener('input', function () {
const val = this.value;
let score = 0;
if (val.length >= 8) score++;
if (val.length >= 12) score++;
if (/[A-Z]/.test(val) && /[a-z]/.test(val))score++;
if (/[0-9]/.test(val)) score++;
if (/[^A-Za-z0-9]/.test(val)) score++;
const bar = document.getElementById('pw-strength-bar');
const label = document.getElementById('pw-strength-label');
const levels = [
{ pct: '20%', bg: '#dc2626', text: 'Very weak' },
{ pct: '40%', bg: '#d97706', text: 'Weak' },
{ pct: '60%', bg: '#ca8a04', text: 'Fair' },
{ pct: '80%', bg: '#16a34a', text: 'Strong' },
{ pct: '100%', bg: '#059669', text: 'Very strong' },
];
if (val.length === 0) {
bar.style.width = '0%';
label.textContent = '';
return;
}
const lvl = levels[Math.min(score - 1, 4)] || levels[0];
bar.style.width = lvl.pct;
bar.style.background = lvl.bg;
label.textContent = lvl.text;
label.style.color = lvl.bg;
});
// ── Client-side password match check before submit ────────────────────────────
document.querySelector('form').addEventListener('submit', function (e) {
const pw = document.getElementById('pw-field').value;
const pw2 = document.getElementById('pw-field2').value;
if (pw !== pw2) {
e.preventDefault();
document.getElementById('pw-field2').style.borderColor = 'var(--danger)';
const msg = document.createElement('div');
msg.style.cssText = 'font-size:12px;color:var(--danger);margin-top:4px;';
msg.textContent = 'Passwords do not match.';
const existing = document.getElementById('pw-match-msg');
if (existing) existing.remove();
msg.id = 'pw-match-msg';
document.getElementById('pw-field2').insertAdjacentElement('afterend', msg);
}
});
document.getElementById('pw-field2').addEventListener('input', function () {
this.style.borderColor = '';
const msg = document.getElementById('pw-match-msg');
if (msg) msg.remove();
});
</script>
{% endblock %}
app/templates/admin/edit_user.html
+58
View File
@@ -0,0 +1,58 @@
{% extends "base.html" %}
{% block title %}Edit User{% endblock %}
{% block page_title %}Edit User{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="mb-3"><a href="{{ url_for('admin.users') }}" style="font-size:13px;color:var(--accent3);">← Back to Users</a></div>
<div class="card">
<div class="card-header"><i class="bi bi-person-gear me-2"></i>Edit: {{ user.full_name }}</div>
<div class="card-body">
<form method="POST">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Full Name</label>
<input type="text" class="form-control" name="full_name" value="{{ user.full_name }}" required/>
</div>
<div class="col-md-6">
<label class="form-label">Department</label>
<input type="text" class="form-control" name="department" value="{{ user.department or '' }}"/>
</div>
<div class="col-md-6">
<label class="form-label">Phone</label>
<input type="text" class="form-control" name="phone" value="{{ user.phone or '' }}"/>
</div>
<div class="col-md-6">
<label class="form-label">Role</label>
<select class="form-select" name="role">
{% for r in roles %}
<option value="{{ r }}" {% if r == user.role %}selected{% endif %}>{{ r.replace('_',' ').title() }}</option>
{% endfor %}
</select>
</div>
<div class="col-12">
<div class="d-flex align-items-center gap-3">
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;margin:0;">
<input type="checkbox" name="is_active" {% if user.is_active %}checked{% endif %}
style="accent-color:var(--success);width:16px;height:16px;"/>
<span style="font-size:14px;">Account Active</span>
</label>
</div>
</div>
<div class="col-12"><hr style="border-color:var(--border);"/></div>
<div class="col-md-6">
<label class="form-label">New Password <span style="color:var(--muted);font-weight:400;">(optional)</span></label>
<input type="password" class="form-control" name="new_password" placeholder="Leave blank to keep current"/>
</div>
</div>
<div class="d-flex gap-2 mt-4">
<button type="submit" class="btn btn-primary"><i class="bi bi-check2 me-2"></i>Save</button>
<a href="{{ url_for('admin.users') }}" class="btn btn-secondary">Cancel</a>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
app/templates/admin/index.html
+68
View File
@@ -0,0 +1,68 @@
{% extends "base.html" %}
{% block title %}IT Overview{% endblock %}
{% block page_title %}IT Operations Overview{% endblock %}
{% block content %}
<!-- Stats grid -->
<div class="row g-3 mb-4">
{% for label, value, icon, color, bg in [
('Total Tickets', stats.total_tickets, 'bi-collection', 'var(--text)', 'rgba(255,255,255,.05)'),
('Open', stats.open, 'bi-circle', 'var(--info)', 'rgba(96,165,250,.1)'),
('In Progress', stats.in_progress, 'bi-arrow-repeat', 'var(--accent3)', 'rgba(0,180,216,.1)'),
('Resolved', stats.resolved, 'bi-check-circle', 'var(--success)', 'rgba(45,212,191,.1)'),
('Closed', stats.closed, 'bi-archive', 'var(--muted)', 'rgba(112,112,160,.1)'),
('Active Users', stats.total_users, 'bi-people', 'var(--accent2)', 'rgba(123,94,167,.1)'),
] %}
<div class="col-6 col-xl-2">
<div class="stat-card">
<div class="stat-icon" style="background:{{ bg }};color:{{ color }};"><i class="bi {{ icon }}"></i></div>
<div>
<div class="stat-value" style="color:{{ color }};">{{ value }}</div>
<div class="stat-label">{{ label }}</div>
</div>
</div>
</div>
{% endfor %}
</div>
<!-- Activity log -->
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<span><i class="bi bi-activity me-2"></i>Recent Activity</span>
{% if current_user.is_admin %}
<a href="{{ url_for('admin.activity_logs') }}" style="font-size:12px;color:var(--accent3);">Full log →</a>
{% endif %}
</div>
<div class="card-body p-0">
<table class="table mb-0">
<thead>
<tr>
<th>Action</th>
<th>User</th>
<th>Entity</th>
<th>Details</th>
<th>Time</th>
</tr>
</thead>
<tbody>
{% for log in recent_logs %}
<tr>
<td>
<span class="mono" style="font-size:11px;
color:{% if 'create' in log.action %}var(--success){% elif 'delete' in log.action %}var(--danger){% elif 'update' in log.action or 'edit' in log.action %}var(--warning){% else %}var(--muted){% endif %};">
{{ log.action }}
</span>
</td>
<td style="font-size:13px;">
{% if log.user %}{{ log.user.full_name }}{% else %}<span style="color:var(--muted);">System</span>{% endif %}
</td>
<td style="font-size:12px;color:var(--muted);">{{ log.entity_type or '—' }} {% if log.entity_id %}#{{ log.entity_id }}{% endif %}</td>
<td style="font-size:12px;color:var(--muted);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ log.details or '—' }}</td>
<td style="font-size:11px;color:var(--muted);font-family:'Space Mono',monospace;">{{ log.created_at.strftime('%b %d %H:%M') }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endblock %}
app/templates/admin/kb_edit.html
+64
View File
@@ -0,0 +1,64 @@
{% extends "base.html" %}
{% block title %}{% if article %}Edit Article{% else %}New Article{% endif %}{% endblock %}
{% block page_title %}{% if article %}Edit Article{% else %}New KB Article{% endif %}{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="mb-3"><a href="{{ url_for('admin.kb_list') }}" style="font-size:13px;color:var(--accent3);">← Back to Knowledge Base</a></div>
<div class="card">
<div class="card-header">
<i class="bi bi-{% if article %}pencil{% else %}plus-circle{% endif %} me-2"></i>
{% if article %}Edit: {{ article.title[:40] }}{% else %}Create New Article{% endif %}
</div>
<div class="card-body">
<form method="POST">
<div class="row g-3">
<div class="col-12">
<label class="form-label">Title *</label>
<input type="text" class="form-control" name="title" required
value="{{ article.title if article else '' }}"
placeholder="e.g. How to connect to the VPN"/>
</div>
<div class="col-md-6">
<label class="form-label">Category</label>
<select class="form-select" name="category">
<option value="">— Select Category —</option>
{% for cat in ['hardware','software','network','access','email','printer','phone','security','other'] %}
<option value="{{ cat }}" {% if article and article.category == cat %}selected{% endif %}>
{{ cat.replace('_',' ').title() }}
</option>
{% endfor %}
</select>
</div>
<div class="col-md-6">
<label class="form-label">Tags <span style="color:var(--muted);font-weight:400;">(comma-separated)</span></label>
<input type="text" class="form-control" name="tags"
value="{{ article.tags if article else '' }}"
placeholder="vpn, remote, access"/>
</div>
<div class="col-12">
<label class="form-label">Content *</label>
<textarea class="form-control" name="body" rows="16" required
placeholder="Write the article content here. You can use plain text with line breaks.">{{ article.body if article else '' }}</textarea>
</div>
<div class="col-12">
<label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
<input type="checkbox" name="is_published" style="accent-color:var(--accent3);width:16px;height:16px;"
{% if not article or article.is_published %}checked{% endif %}/>
<span style="font-size:14px;">Publish immediately (visible to all employees)</span>
</label>
</div>
</div>
<div class="d-flex gap-2 mt-4">
<button type="submit" class="btn btn-primary">
<i class="bi bi-check2 me-2"></i>{% if article %}Save Changes{% else %}Publish Article{% endif %}
</button>
<a href="{{ url_for('admin.kb_list') }}" class="btn btn-secondary">Cancel</a>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
app/templates/admin/kb_list.html
+55
View File
@@ -0,0 +1,55 @@
{% extends "base.html" %}
{% block title %}Manage Knowledge Base{% endblock %}
{% block page_title %}Knowledge Base Management{% endblock %}
{% block content %}
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<span><i class="bi bi-journal-text me-2"></i>Articles <span style="font-size:12px;color:var(--muted);">({{ articles|length }})</span></span>
<a href="{{ url_for('admin.kb_new') }}" class="btn btn-primary btn-sm">
<i class="bi bi-plus-lg me-1"></i>New Article
</a>
</div>
<div class="card-body p-0">
{% if articles %}
<table class="table mb-0">
<thead>
<tr><th>Title</th><th>Category</th><th>Author</th><th>Published</th><th>Views</th><th>Updated</th><th>Actions</th></tr>
</thead>
<tbody>
{% for art in articles %}
<tr>
<td style="font-size:14px;">{{ art.title[:60] }}</td>
<td style="font-size:12px;color:var(--muted);">{{ art.category or '—' }}</td>
<td style="font-size:13px;">{{ art.author.full_name if art.author else '—' }}</td>
<td>
{% if art.is_published %}
<span style="color:var(--success);font-size:12px;"><i class="bi bi-check-circle-fill"></i> Yes</span>
{% else %}
<span style="color:var(--muted);font-size:12px;"><i class="bi bi-dash-circle"></i> Draft</span>
{% endif %}
</td>
<td style="font-size:12px;color:var(--muted);">{{ art.view_count }}</td>
<td style="font-size:12px;color:var(--muted);">{{ art.updated_at.strftime('%b %d, %Y') }}</td>
<td>
<div class="d-flex gap-1">
<a href="{{ url_for('tickets.kb_article', article_id=art.id) }}" class="btn btn-secondary btn-sm" title="Preview"><i class="bi bi-eye"></i></a>
<a href="{{ url_for('admin.kb_edit', article_id=art.id) }}" class="btn btn-secondary btn-sm" title="Edit"><i class="bi bi-pencil"></i></a>
<form method="POST" action="{{ url_for('admin.kb_delete', article_id=art.id) }}" onsubmit="return confirm('Delete this article?');">
<button type="submit" class="btn btn-sm" style="background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.2);color:var(--danger);" title="Delete"><i class="bi bi-trash"></i></button>
</form>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<div class="p-5 text-center" style="color:var(--muted);">
<i class="bi bi-journal-x" style="font-size:40px;display:block;margin-bottom:12px;"></i>
No articles yet. <a href="{{ url_for('admin.kb_new') }}" style="color:var(--accent3);">Create your first article →</a>
</div>
{% endif %}
</div>
</div>
{% endblock %}
app/templates/admin/tickets.html
+110
View File
@@ -0,0 +1,110 @@
{% extends "base.html" %}
{% block title %}All Tickets{% endblock %}
{% block page_title %}All Tickets{% endblock %}
{% block content %}
<!-- Filters -->
<div class="card mb-4">
<div class="card-body">
<form method="GET" class="row g-2 align-items-end">
<div class="col-md-3">
<label class="form-label">Status</label>
<select class="form-select" name="status">
<option value="">All Statuses</option>
{% for s in ['open','in_progress','pending','resolved','closed'] %}
<option value="{{ s }}" {% if s == status %}selected{% endif %}>{{ s.replace('_',' ').title() }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-3">
<label class="form-label">Priority</label>
<select class="form-select" name="priority">
<option value="">All Priorities</option>
{% for p in ['low','medium','high','critical'] %}
<option value="{{ p }}" {% if p == priority %}selected{% endif %}>{{ p.title() }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-3">
<label class="form-label">Assignment</label>
<select class="form-select" name="assigned">
<option value="">All</option>
<option value="me" {% if assigned == 'me' %}selected{% endif %}>Assigned to Me</option>
<option value="unassigned" {% if assigned == 'unassigned' %}selected{% endif %}>Unassigned</option>
</select>
</div>
<div class="col-md-3 d-flex gap-2">
<button type="submit" class="btn btn-primary flex-fill"><i class="bi bi-search me-1"></i>Filter</button>
<a href="{{ url_for('admin.all_tickets') }}" class="btn btn-secondary"><i class="bi bi-x-lg"></i></a>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header">
<i class="bi bi-collection me-2"></i>Tickets
<span style="font-size:12px;color:var(--muted);font-family:'Space Mono',monospace;">({{ tickets.total }})</span>
</div>
<div class="card-body p-0">
{% if tickets.items %}
<table class="table mb-0">
<thead>
<tr>
<th>Ticket #</th>
<th>Title</th>
<th>Category</th>
<th>Status</th>
<th>Priority</th>
<th>Submitted By</th>
<th>Assigned To</th>
<th>Date</th>
<th></th>
</tr>
</thead>
<tbody>
{% for t in tickets.items %}
<tr>
<td><a href="{{ url_for('tickets.ticket_detail', ticket_id=t.id) }}" class="mono" style="font-size:11px;color:var(--accent3);">{{ t.ticket_number }}</a></td>
<td style="font-size:13px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ t.title }}</td>
<td style="font-size:12px;color:var(--muted);">{{ t.category.replace('_',' ').title() }}</td>
<td><span class="badge badge-{{ t.status }}">{{ t.status.replace('_',' ').upper() }}</span></td>
<td><span class="badge badge-{{ t.priority }}">{{ t.priority.upper() }}</span></td>
<td style="font-size:13px;">{{ t.creator.full_name }}</td>
<td style="font-size:13px;color:var(--muted);">{{ t.assignee.full_name if t.assignee else '—' }}</td>
<td style="font-size:11px;color:var(--muted);">{{ t.created_at.strftime('%b %d') }}</td>
<td><a href="{{ url_for('tickets.ticket_detail', ticket_id=t.id) }}" class="btn btn-secondary btn-sm"><i class="bi bi-eye"></i></a></td>
</tr>
{% endfor %}
</tbody>
</table>
{% if tickets.pages > 1 %}
<div class="d-flex justify-content-center py-3">
<nav><ul class="pagination mb-0">
{% if tickets.has_prev %}
<li class="page-item"><a class="page-link" href="{{ url_for('admin.all_tickets', page=tickets.prev_num, status=status, priority=priority, assigned=assigned) }}">‹</a></li>
{% endif %}
{% for p in tickets.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
{% if p %}
<li class="page-item {% if p==tickets.page %}active{% endif %}">
<a class="page-link" href="{{ url_for('admin.all_tickets', page=p, status=status, priority=priority, assigned=assigned) }}">{{ p }}</a>
</li>
{% else %}
<li class="page-item disabled"><span class="page-link">…</span></li>
{% endif %}
{% endfor %}
{% if tickets.has_next %}
<li class="page-item"><a class="page-link" href="{{ url_for('admin.all_tickets', page=tickets.next_num, status=status, priority=priority, assigned=assigned) }}">›</a></li>
{% endif %}
</ul></nav>
</div>
{% endif %}
{% else %}
<div class="p-5 text-center" style="color:var(--muted);">
<i class="bi bi-inbox" style="font-size:40px;display:block;margin-bottom:12px;"></i>No tickets match the current filters.
</div>
{% endif %}
</div>
</div>
{% endblock %}
app/templates/admin/users.html
+77
View File
@@ -0,0 +1,77 @@
{% extends "base.html" %}
{% block title %}User Management{% endblock %}
{% block page_title %}User Management{% endblock %}
{% block content %}
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<span><i class="bi bi-people me-2"></i>All Users <span style="font-size:12px;color:var(--muted);">({{ users|length }})</span></span>
<a href="{{ url_for('admin.create_user') }}" class="btn btn-primary btn-sm">
<i class="bi bi-person-plus me-1"></i>Add User
</a>
</div>
<div class="card-body p-0">
<table class="table mb-0">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Department</th>
<th>Role</th>
<th>Status</th>
<th>Last Login</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for u in users %}
<tr>
<td>
<div style="display:flex;align-items:center;gap:10px;">
<div style="width:30px;height:30px;border-radius:50%;background:var(--accent2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;">
{{ u.full_name[0].upper() }}
</div>
<span style="font-size:14px;">{{ u.full_name }}</span>
</div>
</td>
<td style="font-size:13px;color:var(--muted);">{{ u.email }}</td>
<td style="font-size:13px;color:var(--muted);">{{ u.department or '—' }}</td>
<td>
<span style="font-size:11px;padding:2px 8px;border-radius:4px;
background:{% if u.role == 'admin' %}rgba(233,69,96,.15){% elif u.role == 'it_staff' %}rgba(0,180,216,.15){% else %}rgba(112,112,160,.15){% endif %};
color:{% if u.role == 'admin' %}var(--accent){% elif u.role == 'it_staff' %}var(--accent3){% else %}var(--muted){% endif %};">
{{ u.role.replace('_',' ').upper() }}
</span>
</td>
<td>
{% if u.is_active %}
<span style="color:var(--success);font-size:12px;"><i class="bi bi-circle-fill" style="font-size:8px;"></i> Active</span>
{% else %}
<span style="color:var(--muted);font-size:12px;"><i class="bi bi-circle" style="font-size:8px;"></i> Inactive</span>
{% endif %}
</td>
<td style="font-size:12px;color:var(--muted);">
{{ u.last_login.strftime('%b %d, %Y') if u.last_login else 'Never' }}
</td>
<td>
<div class="d-flex gap-1">
<a href="{{ url_for('admin.edit_user', user_id=u.id) }}" class="btn btn-secondary btn-sm">
<i class="bi bi-pencil"></i>
</a>
{% if u.id != current_user.id and u.is_active %}
<form method="POST" action="{{ url_for('admin.delete_user', user_id=u.id) }}"
onsubmit="return confirm('Deactivate {{ u.full_name }}?');">
<button type="submit" class="btn btn-sm" style="background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.2);color:var(--danger);">
<i class="bi bi-person-dash"></i>
</button>
</form>
{% endif %}
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endblock %}
app/templates/auth/login.html
+76
View File
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Login — TechDesk</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet"/>
<style>
:root{--bg:#f0f4f8;--surface:#ffffff;--border:#e2e8f0;--border2:#cbd5e1;--accent:#2563eb;--accent-h:#1d4ed8;--text:#0f172a;--text2:#334155;--muted:#64748b;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.bg-grid{position:fixed;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:48px 48px;opacity:.6;pointer-events:none;}
.bg-glow{position:fixed;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.06) 0%,transparent 70%);top:-300px;right:-200px;pointer-events:none;}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:40px;width:100%;max-width:420px;position:relative;z-index:1;box-shadow:0 4px 24px rgba(0,0,0,.08);}
.brand{text-align:center;margin-bottom:32px;}
.logo{width:52px;height:52px;background:var(--accent);border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-weight:700;font-size:17px;color:#fff;margin:0 auto 12px;box-shadow:0 2px 10px rgba(37,99,235,.35);}
h1{font-size:21px;font-weight:700;color:var(--text);}
.subtitle{font-size:13px;color:var(--muted);margin-top:4px;}
.form-group{margin-bottom:18px;}
label{display:block;font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--text2);text-transform:uppercase;margin-bottom:7px;}
input{width:100%;background:#fff;border:1px solid var(--border);color:var(--text);border-radius:9px;padding:11px 14px;font-size:14px;font-family:inherit;transition:border-color .15s,box-shadow .15s;box-shadow:0 1px 3px rgba(0,0,0,.06);}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
input::placeholder{color:#94a3b8;}
.btn{width:100%;background:var(--accent);border:none;color:#fff;border-radius:9px;padding:12px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s;font-family:inherit;margin-top:4px;box-shadow:0 2px 6px rgba(37,99,235,.3);}
.btn:hover{background:var(--accent-h);}
.links{text-align:center;margin-top:20px;font-size:13px;color:var(--muted);}
.links a{color:var(--accent);}
.checkbox-row{display:flex;align-items:center;gap:8px;margin-bottom:20px;}
.checkbox-row input[type=checkbox]{width:auto;accent-color:var(--accent);}
.checkbox-row label{margin:0;font-size:13px;text-transform:none;letter-spacing:0;color:var(--text2);}
.alert{border-radius:8px;padding:11px 14px;font-size:13px;margin-bottom:18px;}
.alert-danger{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;}
.alert-success{background:#ecfdf5;color:#059669;border:1px solid #a7f3d0;}
.alert-info{background:#f0f9ff;color:#0284c7;border:1px solid #bae6fd;}
</style>
</head>
<body>
<div class="bg-grid"></div>
<div class="bg-glow"></div>
<div class="card">
<div class="brand">
<div class="logo">TD</div>
<h1>TechDesk</h1>
<p class="subtitle">IT Helpdesk Portal — Sign in to continue</p>
</div>
{% with messages = get_flashed_messages(with_categories=true) %}
{% for cat, msg in messages %}
<div class="alert alert-{{ cat }}"><i class="bi bi-exclamation-circle me-2"></i>{{ msg }}</div>
{% endfor %}
{% endwith %}
<form method="POST">
<div class="form-group">
<label>Email Address</label>
<input type="email" name="email" required placeholder="you@company.com" autofocus/>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" required placeholder="••••••••"/>
</div>
<div class="checkbox-row">
<input type="checkbox" name="remember" id="remember"/>
<label for="remember">Keep me signed in</label>
</div>
<button type="submit" class="btn"><i class="bi bi-box-arrow-in-right me-2"></i>Sign In</button>
</form>
<div class="links">
Don't have an account? <a href="{{ url_for('auth.register') }}">Register here</a>
</div>
</div>
</body>
</html>
app/templates/auth/profile.html
+79
View File
@@ -0,0 +1,79 @@
{% extends "base.html" %}
{% block title %}My Profile{% endblock %}
{% block page_title %}My Profile{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-lg-7">
<div class="card">
<div class="card-header"><i class="bi bi-person-circle me-2"></i>Account Settings</div>
<div class="card-body">
<form method="POST">
<!-- Avatar placeholder -->
<div class="text-center mb-4">
<div style="width:80px;height:80px;border-radius:50%;background:var(--accent2);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#fff;margin:0 auto 10px;">
{{ current_user.full_name[0].upper() }}
</div>
<div style="font-size:12px;color:var(--muted);">{{ current_user.email }}</div>
<div style="font-size:11px;background:rgba(0,180,216,.1);color:var(--accent3);display:inline-block;padding:2px 10px;border-radius:12px;margin-top:4px;">
{{ current_user.role.replace('_',' ').upper() }}
</div>
</div>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Full Name</label>
<input type="text" class="form-control" name="full_name" value="{{ current_user.full_name }}" required/>
</div>
<div class="col-md-6">
<label class="form-label">Department</label>
<input type="text" class="form-control" name="department" value="{{ current_user.department or '' }}"/>
</div>
<div class="col-md-6">
<label class="form-label">Phone</label>
<input type="text" class="form-control" name="phone" value="{{ current_user.phone or '' }}"/>
</div>
<div class="col-md-6">
<label class="form-label">Username</label>
<input type="text" class="form-control" value="{{ current_user.username }}" disabled/>
</div>
</div>
<hr style="border-color:var(--border);margin:24px 0;"/>
<h6 style="font-size:14px;font-weight:700;margin-bottom:16px;">Notification Preferences</h6>
<div class="d-flex flex-column gap-2 mb-4">
<label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
<input type="checkbox" name="email_notif" {% if current_user.email_notif %}checked{% endif %}
style="accent-color:var(--accent3);width:16px;height:16px;"/>
<span style="font-size:14px;"><i class="bi bi-envelope me-2" style="color:var(--accent3);"></i>Email Notifications</span>
</label>
<label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
<input type="checkbox" name="web_notif" {% if current_user.web_notif %}checked{% endif %}
style="accent-color:var(--accent3);width:16px;height:16px;"/>
<span style="font-size:14px;"><i class="bi bi-bell me-2" style="color:var(--accent3);"></i>In-App Notifications</span>
</label>
</div>
<hr style="border-color:var(--border);margin:24px 0;"/>
<h6 style="font-size:14px;font-weight:700;margin-bottom:16px;">Change Password <span style="font-size:12px;color:var(--muted);font-weight:400;">(leave blank to keep current)</span></h6>
<div class="row g-3 mb-4">
<div class="col-md-6">
<label class="form-label">New Password</label>
<input type="password" class="form-control" name="new_password" placeholder="Min. 8 characters"/>
</div>
<div class="col-md-6">
<label class="form-label">Confirm Password</label>
<input type="password" class="form-control" name="confirm_password" placeholder="Repeat password"/>
</div>
</div>
<div class="d-flex gap-2">
<button type="submit" class="btn btn-primary"><i class="bi bi-check2 me-2"></i>Save Changes</button>
<a href="{{ url_for('tickets.dashboard') }}" class="btn btn-secondary">Cancel</a>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
app/templates/auth/register.html
+87
View File
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Register — TechDesk</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet"/>
<style>
:root{--bg:#f0f4f8;--surface:#ffffff;--border:#e2e8f0;--border2:#cbd5e1;--accent:#2563eb;--accent-h:#1d4ed8;--text:#0f172a;--text2:#334155;--muted:#64748b;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.bg-grid{position:fixed;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:48px 48px;opacity:.6;pointer-events:none;}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:40px;width:100%;max-width:500px;position:relative;z-index:1;box-shadow:0 4px 24px rgba(0,0,0,.08);}
.brand{text-align:center;margin-bottom:28px;}
.logo{width:46px;height:46px;background:var(--accent);border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-weight:700;font-size:15px;color:#fff;margin:0 auto 10px;box-shadow:0 2px 10px rgba(37,99,235,.3);}
h1{font-size:20px;font-weight:700;color:var(--text);}
.subtitle{font-size:13px;color:var(--muted);margin-top:4px;}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-group{margin-bottom:16px;}
label{display:block;font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--text2);text-transform:uppercase;margin-bottom:6px;}
input,select{width:100%;background:#fff;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:10px 13px;font-size:14px;font-family:inherit;transition:border-color .15s,box-shadow .15s;box-shadow:0 1px 3px rgba(0,0,0,.05);}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
input::placeholder{color:#94a3b8;}
.btn{width:100%;background:var(--accent);border:none;color:#fff;border-radius:9px;padding:12px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s;font-family:inherit;margin-top:4px;box-shadow:0 2px 6px rgba(37,99,235,.3);}
.btn:hover{background:var(--accent-h);}
.links{text-align:center;margin-top:18px;font-size:13px;color:var(--muted);}
.links a{color:var(--accent);}
.alert{border-radius:8px;padding:10px 13px;font-size:13px;margin-bottom:16px;}
.alert-danger{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;}
</style>
</head>
<body>
<div class="bg-grid"></div>
<div class="card">
<div class="brand">
<div class="logo">TD</div>
<h1>Create Account</h1>
<p class="subtitle">Join TechDesk to submit IT support requests</p>
</div>
{% with messages = get_flashed_messages(with_categories=true) %}
{% for cat, msg in messages %}
<div class="alert alert-{{ cat }}">{{ msg }}</div>
{% endfor %}
{% endwith %}
<form method="POST">
<div class="row">
<div class="form-group">
<label>Full Name *</label>
<input type="text" name="full_name" required placeholder="Jane Smith"/>
</div>
<div class="form-group">
<label>Username *</label>
<input type="text" name="username" required placeholder="jsmith"/>
</div>
</div>
<div class="form-group">
<label>Work Email *</label>
<input type="email" name="email" required placeholder="jane.smith@company.com"/>
</div>
<div class="row">
<div class="form-group">
<label>Department</label>
<input type="text" name="department" placeholder="Finance"/>
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" name="phone" placeholder="+1 555 000 0000"/>
</div>
</div>
<div class="row">
<div class="form-group">
<label>Password *</label>
<input type="password" name="password" required placeholder="Min. 8 characters"/>
</div>
<div class="form-group">
<label>Confirm Password *</label>
<input type="password" name="confirm_password" required placeholder="Repeat password"/>
</div>
</div>
<button type="submit" class="btn"><i class="bi bi-person-plus me-2"></i>Create Account</button>
</form>
<div class="links">Already have an account? <a href="{{ url_for('auth.login') }}">Sign in</a></div>
</div>
</body>
</html>
app/templates/base.html
+588
View File
@@ -0,0 +1,588 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>{% block title %}IT Helpdesk{% endblock %} — TechDesk</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet"/>
<style>
:root {
--bg: #f0f4f8;
--surface: #ffffff;
--surface2: #f8fafc;
--border: #e2e8f0;
--border2: #cbd5e1;
--accent: #2563eb;
--accent-h: #1d4ed8;
--accent2: #7c3aed;
--accent3: #0891b2;
--text: #0f172a;
--text2: #334155;
--muted: #64748b;
--muted2: #94a3b8;
--success: #059669;
--success-bg:#ecfdf5;
--warning: #d97706;
--warning-bg:#fffbeb;
--danger: #dc2626;
--danger-bg: #fef2f2;
--info: #0284c7;
--info-bg: #f0f9ff;
--sidebar-w: 260px;
--sidebar-bg:#1e293b;
--sidebar-text:#94a3b8;
--sidebar-active:#ffffff;
--radius: 10px;
--shadow-sm: 0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
--shadow: 0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.05);
--shadow-lg: 0 10px 25px rgba(0,0,0,.1),0 4px 10px rgba(0,0,0,.06);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-h);}
code,pre,.mono{font-family:'Space Mono',monospace;}
/* ── Scrollbar ── */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}
/* ── Sidebar — dark panel on light page ── */
#sidebar{
position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;
background:var(--sidebar-bg);
display:flex;flex-direction:column;z-index:100;
transition:transform .25s ease;
box-shadow:2px 0 8px rgba(0,0,0,.12);
}
#sidebar .brand{
padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.07);
display:flex;align-items:center;gap:12px;
}
#sidebar .brand .logo{
width:36px;height:36px;background:var(--accent);border-radius:8px;
display:flex;align-items:center;justify-content:center;
font-family:'Space Mono',monospace;font-weight:700;font-size:13px;color:#fff;
flex-shrink:0;box-shadow:0 2px 8px rgba(37,99,235,.4);
}
#sidebar .brand h1{font-size:15px;font-weight:700;color:#fff;letter-spacing:.2px;}
#sidebar .brand small{font-size:10px;color:rgba(255,255,255,.35);display:block;margin-top:1px;}
.nav-section{padding:20px 16px 6px;font-size:9px;font-weight:700;letter-spacing:1.8px;color:rgba(255,255,255,.3);text-transform:uppercase;}
.sidebar-nav{list-style:none;padding:0 10px;}
.sidebar-nav li a{
display:flex;align-items:center;gap:10px;padding:9px 12px;
border-radius:8px;color:var(--sidebar-text);font-size:13.5px;font-weight:500;
transition:all .15s;
}
.sidebar-nav li a:hover{background:rgba(255,255,255,.07);color:#fff;}
.sidebar-nav li a.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.35);}
.sidebar-nav li a .bi{font-size:15px;width:18px;text-align:center;}
.sidebar-footer{margin-top:auto;padding:14px;border-top:1px solid rgba(255,255,255,.07);}
.sidebar-footer .user-card{display:flex;align-items:center;gap:10px;}
.sidebar-footer .avatar{width:32px;height:32px;border-radius:50%;background:var(--accent2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;}
.sidebar-footer .user-name{font-size:13px;font-weight:600;color:#fff;}
.sidebar-footer .user-role{font-size:10px;color:rgba(255,255,255,.4);text-transform:capitalize;}
/* ── Main ── */
#main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;}
/* ── Topbar ── */
#topbar{
position:sticky;top:0;z-index:50;
background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
padding:11px 28px;display:flex;align-items:center;gap:14px;
box-shadow:var(--shadow-sm);
}
#topbar .page-title{font-size:17px;font-weight:700;flex:1;color:var(--text);}
.notif-btn{position:relative;background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:color .15s;}
.notif-btn:hover{color:var(--accent);background:var(--info-bg);}
.notif-badge{
position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;
background:var(--danger);color:#fff;font-size:9px;font-weight:700;
border-radius:9px;display:flex;align-items:center;justify-content:center;
padding:0 4px;display:none;
}
.notif-badge.show{display:flex;}
/* ── Page content ── */
.page-body{padding:28px;flex:1;}
/* ── Cards ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.card-header{background:var(--surface2);border-bottom:1px solid var(--border);padding:13px 20px;font-weight:600;font-size:14px;color:var(--text2);border-radius:var(--radius) var(--radius) 0 0;}
.card-body{padding:20px;}
/* ── Stat cards ── */
.stat-card{
background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
padding:20px;display:flex;align-items:center;gap:16px;
transition:all .2s;box-shadow:var(--shadow-sm);
}
.stat-card:hover{box-shadow:var(--shadow);border-color:var(--border2);transform:translateY(-1px);}
.stat-icon{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;}
.stat-value{font-size:26px;font-weight:700;font-family:'Space Mono',monospace;line-height:1;color:var(--text);}
.stat-label{font-size:12px;color:var(--muted);margin-top:4px;}
/* ── Badges ── */
.badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;font-family:'Space Mono',monospace;letter-spacing:.2px;}
.badge-open{background:var(--info-bg);color:var(--info);border:1px solid #bae6fd;}
.badge-in_progress{background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;}
.badge-pending{background:var(--warning-bg);color:var(--warning);border:1px solid #fde68a;}
.badge-resolved{background:var(--success-bg);color:var(--success);border:1px solid #a7f3d0;}
.badge-closed{background:#f1f5f9;color:var(--muted);border:1px solid var(--border);}
.badge-low{background:var(--success-bg);color:var(--success);border:1px solid #a7f3d0;}
.badge-medium{background:var(--warning-bg);color:var(--warning);border:1px solid #fde68a;}
.badge-high{background:var(--danger-bg);color:var(--danger);border:1px solid #fecaca;}
.badge-critical{background:#fff1f2;color:#be123c;border:1px solid #fecdd3;animation:pulse-badge 2s infinite;}
@keyframes pulse-badge{0%,100%{opacity:1;}50%{opacity:.65;}}
/* ── Buttons ── */
.btn{border-radius:8px;font-size:13px;font-weight:500;padding:8px 16px;transition:all .15s;}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 1px 3px rgba(37,99,235,.3);}
.btn-primary:hover{background:var(--accent-h);border-color:var(--accent-h);box-shadow:0 2px 6px rgba(37,99,235,.4);}
.btn-outline-primary{border-color:var(--accent);color:var(--accent);background:transparent;}
.btn-outline-primary:hover{background:var(--accent);color:#fff;}
.btn-secondary{background:#fff;border-color:var(--border);color:var(--text2);box-shadow:var(--shadow-sm);}
.btn-secondary:hover{background:var(--surface2);border-color:var(--border2);color:var(--text);}
.btn-sm{padding:5px 12px;font-size:12px;}
/* ── Form controls ── */
.form-control,.form-select{
background:#fff;border:1px solid var(--border);color:var(--text);
border-radius:8px;padding:9px 14px;font-size:14px;
transition:border-color .15s,box-shadow .15s;
box-shadow:var(--shadow-sm);
}
.form-control:focus,.form-select:focus{
background:#fff;border-color:var(--accent);
color:var(--text);box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.form-control::placeholder{color:var(--muted2);}
.form-label{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:6px;}
textarea.form-control{resize:vertical;}
/* ── Tables ── */
.table{color:var(--text);--bs-table-bg:transparent;}
.table thead th{background:var(--surface2);color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;border-bottom:1px solid var(--border);padding:11px 16px;}
.table tbody td{border-bottom:1px solid var(--border);padding:11px 16px;vertical-align:middle;font-size:14px;}
.table tbody tr:hover td{background:#f8fafc;}
.table-hover>tbody>tr:hover>*{background:#f8fafc;}
/* ── Alerts / flashes ── */
.alert{border-radius:8px;font-size:14px;padding:12px 16px;}
.alert-success{background:var(--success-bg);color:var(--success);border:1px solid #a7f3d0;}
.alert-danger{background:var(--danger-bg);color:var(--danger);border:1px solid #fecaca;}
.alert-info{background:var(--info-bg);color:var(--info);border:1px solid #bae6fd;}
.alert-warning{background:var(--warning-bg);color:var(--warning);border:1px solid #fde68a;}
/* ── Dropdown ── */
.dropdown-menu{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);}
.dropdown-item{color:var(--text2);font-size:13.5px;padding:8px 16px;}
.dropdown-item:hover{background:var(--surface2);color:var(--text);}
.dropdown-divider{border-color:var(--border);}
/* ── Notification panel ── */
#notif-panel{
position:fixed;top:58px;right:16px;width:360px;max-height:480px;
background:#fff;border:1px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow-lg);z-index:1000;
display:none;overflow:hidden;flex-direction:column;
}
#notif-panel.show{display:flex;}
#notif-panel .notif-head{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--surface2);}
#notif-panel .notif-head h6{font-size:13px;font-weight:700;margin:0;color:var(--text);}
#notif-panel .notif-list{overflow-y:auto;flex:1;}
.notif-item{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;gap:12px;cursor:pointer;transition:background .12s;}
.notif-item:hover{background:var(--surface2);}
.notif-item.unread{border-left:3px solid var(--accent);background:#eff6ff;}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:5px;flex-shrink:0;}
.notif-title{font-size:13px;font-weight:600;margin-bottom:2px;color:var(--text);}
.notif-msg{font-size:12px;color:var(--muted);}
.notif-time{font-size:11px;color:var(--muted2);margin-top:2px;font-family:'Space Mono',monospace;}
/* ── Chat widget ── */
#chat-fab{
position:fixed;bottom:28px;right:28px;width:52px;height:52px;
background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;
cursor:pointer;box-shadow:0 4px 16px rgba(37,99,235,.4);z-index:200;
transition:transform .2s,box-shadow .2s;
}
#chat-fab:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(37,99,235,.5);}
#chat-fab .bi{font-size:22px;color:#fff;}
#chat-window{
position:fixed;bottom:90px;right:28px;width:380px;height:520px;
background:#fff;border:1px solid var(--border);border-radius:16px;
box-shadow:var(--shadow-lg);z-index:200;
display:none;flex-direction:column;overflow:hidden;
}
#chat-window.show{display:flex;}
.chat-head{background:var(--accent);padding:14px 18px;display:flex;align-items:center;gap:12px;}
.chat-head .bot-avatar{width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;}
.chat-head .bot-name{font-size:14px;font-weight:600;color:#fff;}
.chat-head .bot-status{font-size:11px;color:rgba(255,255,255,.75);}
.chat-head .close-chat{margin-left:auto;background:none;border:none;color:rgba(255,255,255,.8);font-size:18px;cursor:pointer;}
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg);}
.chat-bubble{max-width:85%;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.55;}
.chat-bubble.bot{background:#fff;border:1px solid var(--border);border-radius:4px 12px 12px 12px;align-self:flex-start;color:var(--text);box-shadow:var(--shadow-sm);}
.chat-bubble.user{background:var(--accent);color:#fff;border-radius:12px 4px 12px 12px;align-self:flex-end;}
.chat-bubble a{color:var(--accent3);}
.chat-input-area{padding:12px;border-top:1px solid var(--border);display:flex;gap:8px;background:#fff;}
.chat-input-area input{flex:1;background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:9px 14px;font-size:13px;}
.chat-input-area input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.chat-send{background:var(--accent);border:none;color:#fff;padding:9px 14px;border-radius:8px;cursor:pointer;transition:background .15s;}
.chat-send:hover{background:var(--accent-h);}
.typing-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--muted2);animation:typing 1.2s infinite;}
.typing-dot:nth-child(2){animation-delay:.2s;}
.typing-dot:nth-child(3){animation-delay:.4s;}
@keyframes typing{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-5px);}}
/* ── Pagination ── */
.pagination .page-link{background:#fff;border-color:var(--border);color:var(--text2);}
.pagination .page-link:hover{background:var(--surface2);border-color:var(--border2);color:var(--text);}
.pagination .active .page-link{background:var(--accent);border-color:var(--accent);color:#fff;}
/* ── Ticket detail ── */
.ticket-header{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:20px;box-shadow:var(--shadow-sm);}
.comment-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--shadow-sm);}
.comment-card.internal{border-left:3px solid var(--warning);background:var(--warning-bg);}
.comment-author{font-size:13px;font-weight:600;color:var(--text);}
.comment-time{font-size:11px;color:var(--muted);font-family:'Space Mono',monospace;}
.comment-body{font-size:14px;margin-top:8px;white-space:pre-wrap;color:var(--text2);}
.history-item{font-size:12px;color:var(--muted);padding:6px 0;border-bottom:1px solid var(--border);}
/* ── Responsive ── */
@media(max-width:768px){
#sidebar{transform:translateX(-100%);}
#sidebar.open{transform:translateX(0);}
#main{margin-left:0;}
#chat-window{width:calc(100vw - 16px);right:8px;}
}
</style>
{% block head %}{% endblock %}
</head>
<body>
{% if current_user.is_authenticated %}
<!-- ── Sidebar ── -->
<nav id="sidebar">
<div class="brand">
<div class="logo">TD</div>
<div>
<h1>TechDesk</h1>
<small>IT Helpdesk System</small>
</div>
</div>
<p class="nav-section">Main</p>
<ul class="sidebar-nav">
<li><a href="{{ url_for('tickets.dashboard') }}" class="{{ 'active' if request.endpoint == 'tickets.dashboard' }}">
<i class="bi bi-speedometer2"></i> Dashboard
</a></li>
<li><a href="{{ url_for('tickets.ticket_list') }}" class="{{ 'active' if request.endpoint == 'tickets.ticket_list' }}">
<i class="bi bi-ticket-detailed"></i> My Tickets
</a></li>
<li><a href="{{ url_for('tickets.create_ticket') }}" class="{{ 'active' if request.endpoint == 'tickets.create_ticket' }}">
<i class="bi bi-plus-circle"></i> New Ticket
</a></li>
</ul>
<p class="nav-section">Resources</p>
<ul class="sidebar-nav">
<li><a href="{{ url_for('tickets.knowledge_base') }}" class="{{ 'active' if 'knowledge_base' in request.endpoint }}">
<i class="bi bi-book"></i> Knowledge Base
</a></li>
<li><a href="{{ url_for('tickets.notifications') }}" class="{{ 'active' if request.endpoint == 'tickets.notifications' }}">
<i class="bi bi-bell"></i> Notifications
{% if unread_notifications > 0 %}<span class="badge badge-open ms-auto">{{ unread_notifications }}</span>{% endif %}
</a></li>
</ul>
{% if current_user.is_it_staff %}
<p class="nav-section">IT Management</p>
<ul class="sidebar-nav">
<li><a href="{{ url_for('admin.index') }}" class="{{ 'active' if request.endpoint == 'admin.index' }}">
<i class="bi bi-bar-chart-line"></i> IT Overview
</a></li>
<li><a href="{{ url_for('admin.all_tickets') }}" class="{{ 'active' if request.endpoint == 'admin.all_tickets' }}">
<i class="bi bi-collection"></i> All Tickets
</a></li>
<li><a href="{{ url_for('admin.kb_list') }}" class="{{ 'active' if 'admin.kb' in request.endpoint }}">
<i class="bi bi-journal-text"></i> Manage KB
</a></li>
{% if current_user.is_admin %}
<li><a href="{{ url_for('admin.users') }}" class="{{ 'active' if request.endpoint == 'admin.users' }}">
<i class="bi bi-people"></i> Users
</a></li>
<li><a href="{{ url_for('admin.activity_logs') }}" class="{{ 'active' if request.endpoint == 'admin.activity_logs' }}">
<i class="bi bi-list-ul"></i> Activity Logs
</a></li>
{% endif %}
</ul>
{% endif %}
<div class="sidebar-footer">
<div class="user-card">
<div class="avatar">{{ current_user.full_name[0].upper() }}</div>
<div>
<div class="user-name">{{ current_user.full_name }}</div>
<div class="user-role">{{ current_user.role.replace('_',' ') }}</div>
</div>
<div class="ms-auto dropdown">
<button class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown" style="padding:5px 8px;">
<i class="bi bi-three-dots-vertical"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="{{ url_for('auth.profile') }}"><i class="bi bi-person me-2"></i>Profile</a></li>
<li><hr class="dropdown-divider"/></li>
<li><a class="dropdown-item" href="{{ url_for('auth.logout') }}"><i class="bi bi-box-arrow-right me-2"></i>Logout</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- ── Main ── -->
<div id="main">
<header id="topbar">
<button class="btn btn-sm btn-secondary d-md-none" onclick="document.getElementById('sidebar').classList.toggle('open')">
<i class="bi bi-list"></i>
</button>
<div class="page-title">{% block page_title %}{% endblock %}</div>
<!-- Notification bell -->
<button class="notif-btn" onclick="toggleNotifPanel()">
<i class="bi bi-bell"></i>
<span class="notif-badge {% if unread_notifications > 0 %}show{% endif %}" id="notif-badge-count">
{{ unread_notifications if unread_notifications > 0 }}
</span>
</button>
<a href="{{ url_for('auth.profile') }}" class="btn btn-sm btn-secondary">
<i class="bi bi-person-circle me-1"></i>{{ current_user.full_name.split()[0] }}
</a>
</header>
<div class="page-body">
{% with messages = get_flashed_messages(with_categories=true) %}
{% for cat, msg in messages %}
<div class="alert alert-{{ cat }} alert-dismissible mb-3" role="alert">
{{ msg }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
{% endwith %}
{% block content %}{% endblock %}
</div>
</div>
<!-- ── Notification Panel ── -->
<div id="notif-panel">
<div class="notif-head">
<h6><i class="bi bi-bell me-2"></i>Notifications</h6>
<button class="btn btn-sm btn-secondary" onclick="markAllRead()">Mark all read</button>
</div>
<div class="notif-list" id="notif-list">
<div class="p-3 text-center" style="color:var(--muted);font-size:13px;">Loading...</div>
</div>
<div style="padding:10px 16px;border-top:1px solid var(--border);">
<a href="{{ url_for('tickets.notifications') }}" style="font-size:12px;color:var(--accent3);">View all notifications →</a>
</div>
</div>
<!-- ── Chat FAB ── -->
<div id="chat-fab" onclick="toggleChat()" title="IT Assistant">
<i class="bi bi-robot"></i>
</div>
<div id="chat-window">
<div class="chat-head">
<div class="bot-avatar">🤖</div>
<div>
<div class="bot-name">IT Assistant</div>
<div class="bot-status">● Online</div>
</div>
<button class="close-chat" onclick="toggleChat()"><i class="bi bi-x-lg"></i></button>
</div>
<div class="chat-messages" id="chat-messages">
<div class="chat-bubble bot">
Hi! I'm your IT Assistant 👋 I can help you report issues, create tickets, or answer IT questions.<br><br>
What can I help you with today?
</div>
</div>
<div class="chat-input-area">
<input type="text" id="chat-input" placeholder="Describe your issue..." onkeydown="if(event.key==='Enter')sendChat()"/>
<button class="chat-send" onclick="sendChat()"><i class="bi bi-send-fill"></i></button>
</div>
</div>
{% else %}
<!-- Not authenticated — minimal layout -->
<div id="main" style="margin-left:0;">
<div class="page-body">
{% with messages = get_flashed_messages(with_categories=true) %}
{% for cat, msg in messages %}
<div class="alert alert-{{ cat }} alert-dismissible mb-3" role="alert">
{{ msg }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
{% endwith %}
{{ self.content() }}
</div>
</div>
{% endif %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<script>
// ── WebSocket ────────────────────────────────────────────────────────────────
{% if current_user.is_authenticated %}
const socket = io({
path: '/socket.io/',
transports: ['polling', 'websocket'], // polling first → upgrade to WS after handshake
upgrade: true,
reconnection: true,
reconnectionAttempts: 5,
reconnectionDelay: 2000,
});
socket.on('connect',()=>{console.log('[Socket] connected');});
socket.on('new_notification',(n)=>{
updateBadge(1, true);
prependNotif(n);
showToast(n.title, n.message);
});
function updateBadge(delta, increment=false){
const el = document.getElementById('notif-badge-count');
if(!el) return;
let cur = parseInt(el.textContent)||0;
const next = increment ? cur+delta : delta;
el.textContent = next>0?next:'';
el.classList.toggle('show', next>0);
}
// ── Notification panel ────────────────────────────────────────────────────────
let panelOpen = false;
function toggleNotifPanel(){
const panel = document.getElementById('notif-panel');
panelOpen = !panelOpen;
panel.classList.toggle('show', panelOpen);
if(panelOpen) loadNotifications();
}
document.addEventListener('click',(e)=>{
if(panelOpen && !e.target.closest('#notif-panel') && !e.target.closest('.notif-btn')){
panelOpen=false;
document.getElementById('notif-panel').classList.remove('show');
}
});
async function loadNotifications(){
try{
const r = await fetch('/api/notifications/unread-count');
const d = await r.json();
updateBadge(d.count);
}catch(e){}
const list = document.getElementById('notif-list');
try{
const r = await fetch('/notifications?json=1');
// Fallback: show link
list.innerHTML='<div class="p-3 text-center" style="color:var(--muted);font-size:13px;">'+
'<a href="/notifications" style="color:var(--accent3)">View all notifications</a></div>';
}catch(e){
list.innerHTML='<div class="p-3 text-center" style="color:var(--muted);font-size:13px;">Unable to load</div>';
}
}
function prependNotif(n){
const list = document.getElementById('notif-list');
const item = document.createElement('div');
item.className='notif-item unread';
item.innerHTML=`<div class="notif-dot"></div><div><div class="notif-title">${n.title}</div><div class="notif-msg">${n.message||''}</div><div class="notif-time">Just now</div></div>`;
if(n.link) item.onclick=()=>{ window.location=n.link; };
list.prepend(item);
}
async function markAllRead(){
await fetch('/api/notifications/mark-all-read',{method:'POST'});
updateBadge(0);
document.querySelectorAll('.notif-item.unread').forEach(el=>{
el.classList.remove('unread');
const dot=el.querySelector('.notif-dot');
if(dot) dot.remove();
});
}
function showToast(title, msg){
const t = document.createElement('div');
t.style.cssText='position:fixed;bottom:90px;right:28px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent3);border-radius:8px;padding:12px 16px;z-index:300;max-width:300px;box-shadow:0 4px 16px rgba(0,0,0,.4);animation:slideIn .25s ease;';
t.innerHTML=`<div style="font-size:13px;font-weight:600;margin-bottom:4px;">${title}</div><div style="font-size:12px;color:var(--muted);">${msg||''}</div>`;
document.body.appendChild(t);
setTimeout(()=>t.remove(),5000);
}
// ── Chatbot ───────────────────────────────────────────────────────────────────
let chatHistory = [];
let chatOpen = false;
function toggleChat(){
chatOpen=!chatOpen;
document.getElementById('chat-window').classList.toggle('show',chatOpen);
if(chatOpen) document.getElementById('chat-input').focus();
}
async function sendChat(){
const input = document.getElementById('chat-input');
const msg = input.value.trim();
if(!msg) return;
input.value='';
appendBubble(msg,'user');
chatHistory.push({role:'user',content:msg});
const typing = appendTyping();
try{
const r = await fetch('/chatbot/message',{
method:'POST',headers:{'Content-Type':'application/json'},
body:JSON.stringify({message:msg,history:chatHistory})
});
const d = await r.json();
typing.remove();
const reply = d.reply || 'Sorry, I encountered an error.';
appendBubble(reply,'bot');
chatHistory.push({role:'assistant',content:reply});
if(d.ticket){
const notif=document.createElement('div');
notif.className='chat-bubble bot';
notif.style.cssText='background:rgba(45,212,191,.1);border:1px solid rgba(45,212,191,.3);';
notif.innerHTML=`🎫 <strong>${d.ticket.ticket_number}</strong> — <a href="${d.ticket.url}">View Ticket</a>`;
document.getElementById('chat-messages').appendChild(notif);
}
}catch(e){typing.remove();appendBubble('Sorry, something went wrong.','bot');}
scrollChat();
}
function appendBubble(text, role){
const el=document.createElement('div');
el.className=`chat-bubble ${role}`;
el.innerHTML=text.replace(/\*\*(.*?)\*\*/g,'<strong>$1</strong>').replace(/\n/g,'<br>');
document.getElementById('chat-messages').appendChild(el);
scrollChat();
return el;
}
function appendTyping(){
const el=document.createElement('div');
el.className='chat-bubble bot';
el.innerHTML='<span class="typing-dot"></span><span class="typing-dot"></span><span class="typing-dot"></span>';
document.getElementById('chat-messages').appendChild(el);
scrollChat();
return el;
}
function scrollChat(){
const m=document.getElementById('chat-messages');
m.scrollTop=m.scrollHeight;
}
{% endif %}
</script>
<style>@keyframes slideIn{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}</style>
{% block scripts %}{% endblock %}
</body>
</html>
app/templates/tickets/create.html
+110
View File
@@ -0,0 +1,110 @@
{% extends "base.html" %}
{% block title %}New Ticket{% endblock %}
{% block page_title %}Submit a New Ticket{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card">
<div class="card-header">
<i class="bi bi-plus-circle me-2"></i>New Support Request
</div>
<div class="card-body">
<form method="POST" enctype="multipart/form-data">
<div class="row g-3">
<div class="col-12">
<label class="form-label">Issue Title *</label>
<input type="text" class="form-control" name="title" required
placeholder="Brief description of the issue (e.g. 'Cannot connect to VPN')"/>
</div>
<div class="col-md-6">
<label class="form-label">Category *</label>
<select class="form-select" name="category" required>
{% for cat in categories %}
<option value="{{ cat }}">{{ cat.replace('_',' ').title() }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-6">
<label class="form-label">Priority *</label>
<select class="form-select" name="priority" required>
{% for p in priorities %}
<option value="{{ p }}" {% if p == 'medium' %}selected{% endif %}>{{ p.upper() }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-6">
<label class="form-label">Location / Floor</label>
<input type="text" class="form-control" name="location" placeholder="e.g. 3rd Floor, Room 302"/>
</div>
<div class="col-md-6">
<label class="form-label">Asset Tag / Device Serial</label>
<input type="text" class="form-control" name="asset_tag" placeholder="e.g. ASSET-1234"/>
</div>
<div class="col-12">
<label class="form-label">Detailed Description *</label>
<textarea class="form-control" name="description" rows="6" required
placeholder="Please describe the issue in detail:&#10;- What were you trying to do?&#10;- What happened?&#10;- Any error messages?&#10;- When did it start?"></textarea>
</div>
<div class="col-12">
<label class="form-label">Attachments (screenshots, logs, etc.)</label>
<input type="file" class="form-control" name="attachments" multiple
accept=".png,.jpg,.jpeg,.gif,.pdf,.doc,.docx,.txt,.zip,.log"/>
<div style="font-size:11px;color:var(--muted);margin-top:5px;">
Accepted: PNG, JPG, PDF, DOC, DOCX, TXT, ZIP, LOG. Max 16 MB per file.
</div>
</div>
<!-- Priority guide -->
<div class="col-12">
<div style="background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:14px 16px;">
<div style="font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;">Priority Guide</div>
<div class="row g-2" style="font-size:12px;">
<div class="col-sm-3"><span class="badge badge-low me-1">LOW</span> Minor inconvenience, no work stoppage</div>
<div class="col-sm-3"><span class="badge badge-medium me-1">MEDIUM</span> Impacting productivity, workaround available</div>
<div class="col-sm-3"><span class="badge badge-high me-1">HIGH</span> Significant impact, no workaround</div>
<div class="col-sm-3"><span class="badge badge-critical me-1">CRITICAL</span> Complete outage or security incident</div>
</div>
</div>
</div>
</div>
<div class="d-flex gap-2 mt-4">
<button type="submit" class="btn btn-primary">
<i class="bi bi-send me-2"></i>Submit Ticket
</button>
<a href="{{ url_for('tickets.dashboard') }}" class="btn btn-secondary">Cancel</a>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card mb-3">
<div class="card-header"><i class="bi bi-robot me-2"></i>Prefer Chatting?</div>
<div class="card-body">
<p style="font-size:13px;color:var(--muted);">Let our AI assistant guide you through reporting your issue conversationally.</p>
<button class="btn btn-outline-primary w-100" onclick="toggleChat()">
<i class="bi bi-chat-dots me-2"></i>Open IT Assistant
</button>
</div>
</div>
<div class="card">
<div class="card-header"><i class="bi bi-lightbulb me-2"></i>Tips</div>
<div class="card-body" style="font-size:13px;color:var(--muted);">
<p>✅ Include error messages exactly as shown</p>
<p>✅ Mention what changed recently</p>
<p>✅ List affected users or devices</p>
<p>✅ Attach relevant screenshots or logs</p>
</div>
</div>
</div>
</div>
{% endblock %}
app/templates/tickets/dashboard_employee.html
+125
View File
@@ -0,0 +1,125 @@
{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block page_title %}Dashboard{% endblock %}
{% block content %}
<!-- Stats Row -->
<div class="row g-3 mb-4">
<div class="col-sm-4">
<div class="stat-card">
<div class="stat-icon" style="background:rgba(96,165,250,.1);color:var(--info);">
<i class="bi bi-ticket-detailed"></i>
</div>
<div>
<div class="stat-value">{{ open_count }}</div>
<div class="stat-label">Open Tickets</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="stat-card">
<div class="stat-icon" style="background:rgba(0,180,216,.1);color:var(--accent3);">
<i class="bi bi-arrow-repeat"></i>
</div>
<div>
<div class="stat-value">{{ active_count }}</div>
<div class="stat-label">In Progress</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="stat-card">
<div class="stat-icon" style="background:rgba(45,212,191,.1);color:var(--success);">
<i class="bi bi-check-circle"></i>
</div>
<div>
<div class="stat-value">{{ resolved_count }}</div>
<div class="stat-label">Resolved</div>
</div>
</div>
</div>
</div>
<div class="row g-4">
<!-- My Tickets -->
<div class="col-lg-7">
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<span><i class="bi bi-ticket-detailed me-2"></i>My Recent Tickets</span>
<a href="{{ url_for('tickets.create_ticket') }}" class="btn btn-primary btn-sm">
<i class="bi bi-plus-lg me-1"></i>New Ticket
</a>
</div>
<div class="card-body p-0">
{% if my_tickets %}
<table class="table mb-0">
<thead>
<tr>
<th>Ticket #</th>
<th>Title</th>
<th>Status</th>
<th>Priority</th>
<th>Date</th>
</tr>
</thead>
<tbody>
{% for t in my_tickets %}
<tr style="cursor:pointer;" onclick="window.location='/tickets/{{ t.id }}'">
<td><span class="mono" style="font-size:12px;color:var(--accent3);">{{ t.ticket_number }}</span></td>
<td>{{ t.title[:45] }}{% if t.title|length > 45 %}…{% endif %}</td>
<td><span class="badge badge-{{ t.status }}">{{ t.status.replace('_',' ').upper() }}</span></td>
<td><span class="badge badge-{{ t.priority }}">{{ t.priority.upper() }}</span></td>
<td style="font-size:12px;color:var(--muted);">{{ t.created_at.strftime('%b %d') }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<div class="p-5 text-center" style="color:var(--muted);">
<i class="bi bi-inbox" style="font-size:36px;display:block;margin-bottom:12px;"></i>
No tickets yet. <a href="{{ url_for('tickets.create_ticket') }}">Submit your first ticket →</a>
</div>
{% endif %}
</div>
</div>
</div>
<!-- Quick Actions + KB -->
<div class="col-lg-5">
<div class="card mb-3">
<div class="card-header"><i class="bi bi-lightning-charge me-2"></i>Quick Actions</div>
<div class="card-body d-grid gap-2">
<a href="{{ url_for('tickets.create_ticket') }}" class="btn btn-primary">
<i class="bi bi-plus-circle me-2"></i>Report New Issue
</a>
<a href="{{ url_for('tickets.ticket_list') }}" class="btn btn-secondary">
<i class="bi bi-list-ul me-2"></i>View All My Tickets
</a>
<button class="btn btn-secondary" onclick="toggleChat()">
<i class="bi bi-robot me-2"></i>Ask IT Assistant
</button>
</div>
</div>
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<span><i class="bi bi-book me-2"></i>Knowledge Base</span>
<a href="{{ url_for('tickets.knowledge_base') }}" style="font-size:12px;color:var(--accent3);">View all →</a>
</div>
<div class="card-body p-0">
{% if articles %}
{% for art in articles %}
<a href="{{ url_for('tickets.kb_article', article_id=art.id) }}" style="display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border);color:var(--text);">
<i class="bi bi-file-earmark-text" style="color:var(--accent3);font-size:16px;flex-shrink:0;"></i>
<span style="font-size:13px;">{{ art.title[:55] }}</span>
<span style="margin-left:auto;font-size:11px;color:var(--muted);">{{ art.view_count }} views</span>
</a>
{% endfor %}
{% else %}
<div class="p-3 text-center" style="font-size:13px;color:var(--muted);">No articles yet.</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}
app/templates/tickets/dashboard_it.html
+104
View File
@@ -0,0 +1,104 @@
{% extends "base.html" %}
{% block title %}IT Dashboard{% endblock %}
{% block page_title %}IT Operations Dashboard{% endblock %}
{% block content %}
<!-- Stats -->
<div class="row g-3 mb-4">
{% set stat_items = [
('open', open_count, 'bi-circle', 'var(--info)', 'rgba(96,165,250,.1)', 'Open'),
('in_progress', in_progress_count, 'bi-arrow-repeat', 'var(--accent3)', 'rgba(0,180,216,.1)', 'In Progress'),
('pending', pending_count, 'bi-hourglass-split', 'var(--warning)', 'rgba(251,191,36,.1)', 'Pending'),
('resolved', resolved_count, 'bi-check2-circle', 'var(--success)', 'rgba(45,212,191,.1)', 'Resolved'),
] %}
{% for status, count, icon, color, bg, label in stat_items %}
<div class="col-6 col-xl-3">
<a href="{{ url_for('admin.all_tickets', status=status) }}" style="text-decoration:none;">
<div class="stat-card">
<div class="stat-icon" style="background:{{ bg }};color:{{ color }};">
<i class="bi {{ icon }}"></i>
</div>
<div>
<div class="stat-value" style="color:{{ color }};">{{ count }}</div>
<div class="stat-label">{{ label }}</div>
</div>
</div>
</a>
</div>
{% endfor %}
</div>
<div class="row g-4">
<!-- Assigned to me -->
<div class="col-lg-6">
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<span><i class="bi bi-person-check me-2"></i>Assigned to Me</span>
<a href="{{ url_for('admin.all_tickets', assigned='me') }}" style="font-size:12px;color:var(--accent3);">View all →</a>
</div>
<div class="card-body p-0">
{% if my_tickets %}
<table class="table mb-0">
<thead><tr><th>Ticket #</th><th>Title</th><th>Priority</th><th>Status</th></tr></thead>
<tbody>
{% for t in my_tickets %}
<tr style="cursor:pointer;" onclick="window.location='/tickets/{{ t.id }}'">
<td><span class="mono" style="font-size:11px;color:var(--accent3);">{{ t.ticket_number }}</span></td>
<td style="font-size:13px;">{{ t.title[:40] }}{% if t.title|length>40 %}…{% endif %}</td>
<td><span class="badge badge-{{ t.priority }}">{{ t.priority.upper() }}</span></td>
<td><span class="badge badge-{{ t.status }}">{{ t.status.replace('_',' ').upper() }}</span></td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<div class="p-4 text-center" style="color:var(--muted);font-size:13px;"><i class="bi bi-inbox" style="font-size:28px;display:block;margin-bottom:8px;"></i>No tickets assigned to you.</div>
{% endif %}
</div>
</div>
</div>
<!-- Recent tickets -->
<div class="col-lg-6">
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<span><i class="bi bi-clock-history me-2"></i>Recent Tickets</span>
<a href="{{ url_for('admin.all_tickets') }}" style="font-size:12px;color:var(--accent3);">All tickets →</a>
</div>
<div class="card-body p-0">
<table class="table mb-0">
<thead><tr><th>Ticket #</th><th>User</th><th>Category</th><th>Priority</th></tr></thead>
<tbody>
{% for t in recent_tickets %}
<tr style="cursor:pointer;" onclick="window.location='/tickets/{{ t.id }}'">
<td><span class="mono" style="font-size:11px;color:var(--accent3);">{{ t.ticket_number }}</span></td>
<td style="font-size:13px;">{{ t.creator.full_name.split()[0] }}</td>
<td style="font-size:12px;color:var(--muted);">{{ t.category.replace('_',' ').title() }}</td>
<td><span class="badge badge-{{ t.priority }}">{{ t.priority.upper() }}</span></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Quick links -->
<div class="row g-3 mt-1">
<div class="col-12">
<div class="card">
<div class="card-header"><i class="bi bi-lightning-charge me-2"></i>Quick Actions</div>
<div class="card-body d-flex flex-wrap gap-2">
<a href="{{ url_for('admin.all_tickets', status='open') }}" class="btn btn-outline-primary btn-sm"><i class="bi bi-circle me-1"></i>Open Queue</a>
<a href="{{ url_for('admin.all_tickets', assigned='unassigned') }}" class="btn btn-secondary btn-sm"><i class="bi bi-person-x me-1"></i>Unassigned</a>
<a href="{{ url_for('admin.kb_new') }}" class="btn btn-secondary btn-sm"><i class="bi bi-plus-circle me-1"></i>New KB Article</a>
{% if current_user.is_admin %}
<a href="{{ url_for('admin.users') }}" class="btn btn-secondary btn-sm"><i class="bi bi-people me-1"></i>Manage Users</a>
<a href="{{ url_for('admin.activity_logs') }}" class="btn btn-secondary btn-sm"><i class="bi bi-list-ul me-1"></i>Activity Logs</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}
app/templates/tickets/detail.html
+250
View File
@@ -0,0 +1,250 @@
{% extends "base.html" %}
{% block title %}{{ ticket.ticket_number }}{% endblock %}
{% block page_title %}{{ ticket.ticket_number }}{% endblock %}
{% block content %}
<div class="row g-4">
<!-- Main column -->
<div class="col-lg-8">
<!-- Ticket header -->
<div class="ticket-header mb-4">
<div class="d-flex align-items-start justify-content-between gap-3 mb-3">
<h2 style="font-size:20px;font-weight:700;line-height:1.3;margin:0;">{{ ticket.title }}</h2>
<div class="d-flex gap-2 flex-shrink-0">
<span class="badge badge-{{ ticket.priority }}">{{ ticket.priority.upper() }}</span>
<span class="badge badge-{{ ticket.status }}">{{ ticket.status.replace('_',' ').upper() }}</span>
</div>
</div>
<div class="d-flex flex-wrap gap-3" style="font-size:12px;color:var(--muted);">
<span><i class="bi bi-hash me-1"></i><span class="mono">{{ ticket.ticket_number }}</span></span>
<span><i class="bi bi-person me-1"></i>{{ ticket.creator.full_name }}</span>
<span><i class="bi bi-tag me-1"></i>{{ ticket.category.replace('_',' ').title() }}</span>
<span><i class="bi bi-calendar3 me-1"></i>{{ ticket.created_at.strftime('%b %d, %Y %H:%M') }}</span>
{% if ticket.location %}<span><i class="bi bi-geo-alt me-1"></i>{{ ticket.location }}</span>{% endif %}
{% if ticket.asset_tag %}<span><i class="bi bi-cpu me-1"></i>{{ ticket.asset_tag }}</span>{% endif %}
{% if ticket.ai_generated %}<span style="color:var(--accent3);"><i class="bi bi-robot me-1"></i>AI-generated</span>{% endif %}
</div>
</div>
<!-- Description -->
<div class="card mb-4">
<div class="card-header"><i class="bi bi-file-text me-2"></i>Description</div>
<div class="card-body" style="white-space:pre-wrap;font-size:14px;line-height:1.7;">{{ ticket.description }}</div>
</div>
<!-- Attachments on ticket -->
{% set ticket_atts = ticket.attachments.filter_by(comment_id=None).all() %}
{% if ticket_atts %}
<div class="card mb-4">
<div class="card-header"><i class="bi bi-paperclip me-2"></i>Attachments</div>
<div class="card-body d-flex flex-wrap gap-2">
{% for att in ticket_atts %}
<a href="{{ url_for('tickets.download_attachment', att_id=att.id) }}"
class="btn btn-secondary btn-sm">
<i class="bi bi-download me-1"></i>{{ att.filename }}
<span style="font-size:10px;color:var(--muted);">({{ (att.file_size/1024)|int }}KB)</span>
</a>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Resolution notes (IT only, or if resolved) -->
{% if ticket.resolution_notes %}
<div class="card mb-4" style="border-color:var(--success);">
<div class="card-header" style="background:rgba(45,212,191,.08);color:var(--success);">
<i class="bi bi-check-circle me-2"></i>Resolution Notes
</div>
<div class="card-body" style="white-space:pre-wrap;font-size:14px;">{{ ticket.resolution_notes }}</div>
</div>
{% endif %}
<!-- Comments -->
<div class="mb-3 d-flex align-items-center justify-content-between">
<h5 style="font-size:16px;font-weight:700;margin:0;">
<i class="bi bi-chat-dots me-2"></i>Comments
<span style="font-size:13px;color:var(--muted);">({{ comments|length }})</span>
</h5>
</div>
{% for comment in comments %}
<div class="comment-card {% if comment.is_internal %}internal{% endif %}" id="comment-{{ comment.id }}">
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="d-flex align-items-center gap-2">
<div style="width:28px;height:28px;border-radius:50%;background:var(--accent2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;">
{{ comment.author.full_name[0].upper() }}
</div>
<span class="comment-author">{{ comment.author.full_name }}</span>
{% if comment.author.is_it_staff %}
<span style="font-size:10px;background:rgba(0,180,216,.15);color:var(--accent3);padding:1px 7px;border-radius:4px;font-weight:600;">IT STAFF</span>
{% endif %}
{% if comment.is_internal %}
<span style="font-size:10px;background:rgba(251,191,36,.15);color:var(--warning);padding:1px 7px;border-radius:4px;font-weight:600;">INTERNAL NOTE</span>
{% endif %}
</div>
<div class="d-flex align-items-center gap-2">
<span class="comment-time">{{ comment.created_at.strftime('%b %d, %Y %H:%M') }}</span>
{% if current_user.is_it_staff or comment.author_id == current_user.id %}
<form method="POST" action="{{ url_for('tickets.delete_comment', comment_id=comment.id) }}"
onsubmit="return confirm('Delete this comment?');">
<button type="submit" class="btn btn-sm" style="background:none;border:none;color:var(--muted);padding:2px 6px;"
title="Delete comment">
<i class="bi bi-trash"></i>
</button>
</form>
{% endif %}
</div>
</div>
<div class="comment-body">{{ comment.body }}</div>
<!-- Comment attachments -->
{% set c_atts = comment.attachments.all() %}
{% if c_atts %}
<div class="mt-2 d-flex flex-wrap gap-2">
{% for att in c_atts %}
<a href="{{ url_for('tickets.download_attachment', att_id=att.id) }}" class="btn btn-secondary btn-sm">
<i class="bi bi-download me-1"></i>{{ att.filename }}
</a>
{% endfor %}
</div>
{% endif %}
</div>
{% else %}
<div class="p-4 text-center" style="color:var(--muted);font-size:13px;">
<i class="bi bi-chat" style="font-size:28px;display:block;margin-bottom:8px;"></i>
No comments yet. Be the first to add an update.
</div>
{% endfor %}
<!-- Add comment -->
{% if ticket.status not in ('closed',) %}
<div class="card mt-4">
<div class="card-header"><i class="bi bi-chat-plus me-2"></i>Add Comment</div>
<div class="card-body">
<form method="POST" enctype="multipart/form-data">
<div class="mb-3">
<textarea class="form-control" name="body" rows="4" required
placeholder="Add your update, follow-up, or response here…"></textarea>
</div>
<div class="mb-3">
<label class="form-label">Attachments</label>
<input type="file" class="form-control" name="attachments" multiple
accept=".png,.jpg,.jpeg,.gif,.pdf,.doc,.docx,.txt,.zip,.log"/>
</div>
{% if current_user.is_it_staff %}
<div class="mb-3 d-flex align-items-center gap-2">
<input type="checkbox" id="is_internal" name="is_internal" style="accent-color:var(--warning);"/>
<label for="is_internal" style="font-size:13px;color:var(--warning);margin:0;cursor:pointer;">
<i class="bi bi-lock me-1"></i>Internal note (IT staff only)
</label>
</div>
{% endif %}
<button type="submit" class="btn btn-primary">
<i class="bi bi-send me-2"></i>Post Comment
</button>
</form>
</div>
</div>
{% endif %}
</div>
<!-- Sidebar column -->
<div class="col-lg-4">
<!-- IT Update Panel -->
{% if current_user.is_it_staff %}
<div class="card mb-3">
<div class="card-header"><i class="bi bi-pencil-square me-2"></i>Update Ticket</div>
<div class="card-body">
<form method="POST" action="{{ url_for('tickets.update_ticket', ticket_id=ticket.id) }}">
<div class="mb-3">
<label class="form-label">Status</label>
<select class="form-select" name="status">
{% for s in statuses %}
<option value="{{ s }}" {% if s == ticket.status %}selected{% endif %}>{{ s.replace('_',' ').title() }}</option>
{% endfor %}
</select>
</div>
<div class="mb-3">
<label class="form-label">Priority</label>
<select class="form-select" name="priority">
{% for p in priorities %}
<option value="{{ p }}" {% if p == ticket.priority %}selected{% endif %}>{{ p.title() }}</option>
{% endfor %}
</select>
</div>
<div class="mb-3">
<label class="form-label">Assign To</label>
<select class="form-select" name="assigned_to_id">
<option value="">— Unassigned —</option>
{% for staff in it_staff %}
<option value="{{ staff.id }}" {% if ticket.assigned_to_id == staff.id %}selected{% endif %}>
{{ staff.full_name }}
</option>
{% endfor %}
</select>
</div>
<div class="mb-3">
<label class="form-label">Due Date</label>
<input type="date" class="form-control" name="due_date"
value="{{ ticket.due_date.strftime('%Y-%m-%d') if ticket.due_date else '' }}"/>
</div>
<div class="mb-3">
<label class="form-label">Resolution Notes</label>
<textarea class="form-control" name="resolution_notes" rows="3"
placeholder="Describe how the issue was resolved…">{{ ticket.resolution_notes or '' }}</textarea>
</div>
<div class="mb-3">
<label class="form-label">Internal Notes <span style="color:var(--warning);">(IT only)</span></label>
<textarea class="form-control" name="internal_notes" rows="2"
placeholder="Private notes for IT team…">{{ ticket.internal_notes or '' }}</textarea>
</div>
<button type="submit" class="btn btn-primary w-100">
<i class="bi bi-check2 me-2"></i>Save Changes
</button>
</form>
</div>
</div>
{% endif %}
<!-- Ticket Info -->
<div class="card mb-3">
<div class="card-header"><i class="bi bi-info-circle me-2"></i>Ticket Details</div>
<div class="card-body" style="font-size:13px;">
{% macro info_row(icon, label, value) %}
<div style="display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);">
<i class="bi {{ icon }}" style="color:var(--muted);width:16px;text-align:center;margin-top:1px;flex-shrink:0;"></i>
<div style="color:var(--muted);">{{ label }}</div>
<div style="margin-left:auto;text-align:right;max-width:55%;">{{ value }}</div>
</div>
{% endmacro %}
{{ info_row('bi-hash', 'Number', '<span class="mono" style="font-size:11px;color:var(--accent3);">'~ticket.ticket_number~'</span>') }}
{{ info_row('bi-tag', 'Category', ticket.category.replace('_',' ').title()) }}
{{ info_row('bi-person', 'Submitted by', ticket.creator.full_name) }}
{{ info_row('bi-person-check', 'Assigned to', ticket.assignee.full_name if ticket.assignee else '—') }}
{{ info_row('bi-calendar3', 'Created', ticket.created_at.strftime('%b %d, %Y')) }}
{{ info_row('bi-calendar-check', 'Updated', ticket.updated_at.strftime('%b %d, %Y')) }}
{% if ticket.due_date %}{{ info_row('bi-alarm', 'Due Date', ticket.due_date.strftime('%b %d, %Y')) }}{% endif %}
{% if ticket.resolved_at %}{{ info_row('bi-check-circle', 'Resolved', ticket.resolved_at.strftime('%b %d, %Y')) }}{% endif %}
</div>
</div>
<!-- History -->
{% if history %}
<div class="card">
<div class="card-header"><i class="bi bi-clock-history me-2"></i>Change History</div>
<div class="card-body p-2">
{% for h in history %}
<div class="history-item">
<strong>{{ h.field_name.replace('_',' ').title() }}</strong>
changed from <em>{{ h.old_value or '—' }}</em> to <em>{{ h.new_value or '—' }}</em>
<br>
<span style="font-size:10px;">by {{ h.changer.full_name }} · {{ h.changed_at.strftime('%b %d %H:%M') }}</span>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
{% endblock %}
app/templates/tickets/kb_article.html
+55
View File
@@ -0,0 +1,55 @@
{% extends "base.html" %}
{% block title %}{{ article.title }}{% endblock %}
{% block page_title %}Knowledge Base{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="mb-3">
<a href="{{ url_for('tickets.knowledge_base') }}" style="font-size:13px;color:var(--accent3);">
← Back to Knowledge Base
</a>
</div>
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<span><i class="bi bi-file-earmark-text me-2"></i>Article</span>
{% if current_user.is_it_staff %}
<a href="{{ url_for('admin.kb_edit', article_id=article.id) }}" class="btn btn-secondary btn-sm">
<i class="bi bi-pencil me-1"></i>Edit
</a>
{% endif %}
</div>
<div class="card-body">
<h1 style="font-size:22px;font-weight:700;margin-bottom:12px;">{{ article.title }}</h1>
<div style="font-size:12px;color:var(--muted);margin-bottom:24px;display:flex;gap:16px;">
{% if article.category %}<span><i class="bi bi-tag me-1"></i>{{ article.category.replace('_',' ').title() }}</span>{% endif %}
<span><i class="bi bi-person me-1"></i>{{ article.author.full_name if article.author else 'IT Team' }}</span>
<span><i class="bi bi-calendar3 me-1"></i>{{ article.updated_at.strftime('%B %d, %Y') }}</span>
<span><i class="bi bi-eye me-1"></i>{{ article.view_count }} views</span>
</div>
{% if article.tags %}
<div class="mb-3">
{% for tag in article.tags.split(',') %}
<span style="background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:2px 10px;font-size:11px;color:var(--muted);margin-right:4px;">{{ tag.strip() }}</span>
{% endfor %}
</div>
{% endif %}
<div style="white-space:pre-wrap;font-size:14px;line-height:1.8;color:var(--text);">{{ article.body }}</div>
</div>
</div>
<div class="card mt-3">
<div class="card-body d-flex align-items-center justify-content-between">
<span style="font-size:13px;color:var(--muted);">Did this article solve your issue?</span>
<div class="d-flex gap-2">
<a href="{{ url_for('tickets.knowledge_base') }}" class="btn btn-secondary btn-sm">
<i class="bi bi-arrow-left me-1"></i>Back
</a>
<a href="{{ url_for('tickets.create_ticket') }}" class="btn btn-primary btn-sm">
<i class="bi bi-ticket me-1"></i>Still need help
</a>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
app/templates/tickets/knowledge_base.html
+60
View File
@@ -0,0 +1,60 @@
{% extends "base.html" %}
{% block title %}Knowledge Base{% endblock %}
{% block page_title %}Knowledge Base{% endblock %}
{% block content %}
<div class="row g-4">
<div class="col-lg-8">
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<span><i class="bi bi-book me-2"></i>Self-Service Articles</span>
{% if current_user.is_it_staff %}
<a href="{{ url_for('admin.kb_new') }}" class="btn btn-primary btn-sm">
<i class="bi bi-plus-lg me-1"></i>New Article
</a>
{% endif %}
</div>
<div class="card-body p-0">
{% if articles %}
{% for art in articles %}
<a href="{{ url_for('tickets.kb_article', article_id=art.id) }}"
style="display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--border);color:var(--text);">
<div style="width:40px;height:40px;background:rgba(0,180,216,.1);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
<i class="bi bi-file-earmark-text" style="color:var(--accent3);font-size:18px;"></i>
</div>
<div style="flex:1;">
<div style="font-size:14px;font-weight:600;">{{ art.title }}</div>
<div style="font-size:12px;color:var(--muted);margin-top:2px;">
{% if art.category %}{{ art.category.replace('_',' ').title() }} · {% endif %}
{{ art.updated_at.strftime('%b %d, %Y') }}
</div>
</div>
<div style="font-size:12px;color:var(--muted);flex-shrink:0;">
<i class="bi bi-eye me-1"></i>{{ art.view_count }}
</div>
</a>
{% endfor %}
{% else %}
<div class="p-5 text-center" style="color:var(--muted);">
<i class="bi bi-journal-x" style="font-size:40px;display:block;margin-bottom:12px;"></i>
No articles published yet.
</div>
{% endif %}
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header"><i class="bi bi-lightbulb me-2"></i>Can't find an answer?</div>
<div class="card-body d-grid gap-2">
<a href="{{ url_for('tickets.create_ticket') }}" class="btn btn-primary">
<i class="bi bi-ticket me-2"></i>Submit a Ticket
</a>
<button class="btn btn-secondary" onclick="toggleChat()">
<i class="bi bi-robot me-2"></i>Ask IT Assistant
</button>
</div>
</div>
</div>
</div>
{% endblock %}
app/templates/tickets/list.html
+149
View File
@@ -0,0 +1,149 @@
{% extends "base.html" %}
{% block title %}My Tickets{% endblock %}
{% block page_title %}Tickets{% endblock %}
{% block content %}
<!-- Filters -->
<div class="card mb-4">
<div class="card-body">
<form method="GET" class="row g-2 align-items-end">
<div class="col-md-4">
<label class="form-label">Search</label>
<input type="text" class="form-control" name="q" value="{{ search }}" placeholder="Search by title, ticket #, description…"/>
</div>
<div class="col-md-2">
<label class="form-label">Status</label>
<select class="form-select" name="status">
<option value="">All Statuses</option>
{% for s in statuses %}
<option value="{{ s }}" {% if s == status %}selected{% endif %}>{{ s.replace('_',' ').title() }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-2">
<label class="form-label">Priority</label>
<select class="form-select" name="priority">
<option value="">All Priorities</option>
{% for p in priorities %}
<option value="{{ p }}" {% if p == priority %}selected{% endif %}>{{ p.title() }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-2">
<label class="form-label">Category</label>
<select class="form-select" name="category">
<option value="">All Categories</option>
{% for c in categories %}
<option value="{{ c }}" {% if c == category %}selected{% endif %}>{{ c.replace('_',' ').title() }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-2 d-flex gap-2">
<button type="submit" class="btn btn-primary flex-fill"><i class="bi bi-search me-1"></i>Filter</button>
<a href="{{ url_for('tickets.ticket_list') }}" class="btn btn-secondary"><i class="bi bi-x-lg"></i></a>
</div>
</form>
</div>
</div>
<!-- Ticket table -->
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<span><i class="bi bi-ticket-detailed me-2"></i>
Tickets
<span style="font-size:12px;color:var(--muted);font-family:'Space Mono',monospace;">({{ tickets.total }})</span>
</span>
<a href="{{ url_for('tickets.create_ticket') }}" class="btn btn-primary btn-sm">
<i class="bi bi-plus-lg me-1"></i>New Ticket
</a>
</div>
<div class="card-body p-0">
{% if tickets.items %}
<table class="table mb-0">
<thead>
<tr>
<th>Ticket #</th>
<th>Title</th>
<th>Category</th>
<th>Status</th>
<th>Priority</th>
{% if current_user.is_it_staff %}<th>Submitted By</th>{% endif %}
<th>Date</th>
<th></th>
</tr>
</thead>
<tbody>
{% for t in tickets.items %}
<tr>
<td>
<a href="{{ url_for('tickets.ticket_detail', ticket_id=t.id) }}"
class="mono" style="font-size:12px;color:var(--accent3);">{{ t.ticket_number }}</a>
{% if t.ai_generated %}
<i class="bi bi-robot" style="font-size:11px;color:var(--muted);" title="Created via AI Assistant"></i>
{% endif %}
</td>
<td>
<a href="{{ url_for('tickets.ticket_detail', ticket_id=t.id) }}" style="color:var(--text);font-size:14px;">
{{ t.title[:55] }}{% if t.title|length > 55 %}…{% endif %}
</a>
</td>
<td style="font-size:12px;color:var(--muted);">{{ t.category.replace('_',' ').title() }}</td>
<td><span class="badge badge-{{ t.status }}">{{ t.status.replace('_',' ').upper() }}</span></td>
<td><span class="badge badge-{{ t.priority }}">{{ t.priority.upper() }}</span></td>
{% if current_user.is_it_staff %}
<td style="font-size:13px;">{{ t.creator.full_name }}</td>
{% endif %}
<td style="font-size:12px;color:var(--muted);">{{ t.created_at.strftime('%b %d, %Y') }}</td>
<td>
<a href="{{ url_for('tickets.ticket_detail', ticket_id=t.id) }}" class="btn btn-secondary btn-sm">
<i class="bi bi-eye"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<!-- Pagination -->
{% if tickets.pages > 1 %}
<div class="d-flex justify-content-center py-3">
<nav>
<ul class="pagination mb-0">
{% if tickets.has_prev %}
<li class="page-item">
<a class="page-link" href="{{ url_for('tickets.ticket_list', page=tickets.prev_num, status=status, priority=priority, category=category, q=search) }}">‹ Prev</a>
</li>
{% endif %}
{% for p in tickets.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
{% if p %}
<li class="page-item {% if p == tickets.page %}active{% endif %}">
<a class="page-link" href="{{ url_for('tickets.ticket_list', page=p, status=status, priority=priority, category=category, q=search) }}">{{ p }}</a>
</li>
{% else %}
<li class="page-item disabled"><span class="page-link">…</span></li>
{% endif %}
{% endfor %}
{% if tickets.has_next %}
<li class="page-item">
<a class="page-link" href="{{ url_for('tickets.ticket_list', page=tickets.next_num, status=status, priority=priority, category=category, q=search) }}">Next ›</a>
</li>
{% endif %}
</ul>
</nav>
</div>
{% endif %}
{% else %}
<div class="p-5 text-center" style="color:var(--muted);">
<i class="bi bi-inbox" style="font-size:40px;display:block;margin-bottom:12px;"></i>
No tickets found.
{% if search or status or priority or category %}
<a href="{{ url_for('tickets.ticket_list') }}" style="color:var(--accent3);">Clear filters</a>
{% else %}
<a href="{{ url_for('tickets.create_ticket') }}" style="color:var(--accent3);">Submit your first ticket →</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% endblock %}
app/templates/tickets/notifications.html
+80
View File
@@ -0,0 +1,80 @@
{% extends "base.html" %}
{% block title %}Notifications{% endblock %}
{% block page_title %}Notifications{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<span><i class="bi bi-bell me-2"></i>All Notifications</span>
<form method="POST" action="{{ url_for('tickets.mark_notifications_read') }}">
<button type="submit" class="btn btn-secondary btn-sm">
<i class="bi bi-check2-all me-1"></i>Mark All Read
</button>
</form>
</div>
<div class="card-body p-0">
{% if notifs.items %}
{% for n in notifs.items %}
<a href="{{ n.link or '#' }}"
style="display:flex;gap:14px;padding:16px 20px;border-bottom:1px solid var(--border);color:var(--text);
{% if not n.is_read %}border-left:3px solid var(--accent3);background:rgba(0,180,216,.03);{% endif %}">
<div style="margin-top:2px;flex-shrink:0;">
{% if not n.is_read %}
<div style="width:8px;height:8px;border-radius:50%;background:var(--accent3);margin-top:3px;"></div>
{% else %}
<i class="bi bi-check2" style="color:var(--muted);font-size:14px;"></i>
{% endif %}
</div>
<div style="flex:1;">
<div style="font-size:14px;font-weight:{% if not n.is_read %}600{% else %}400{% endif %};">
{{ n.title }}
</div>
{% if n.message %}
<div style="font-size:12px;color:var(--muted);margin-top:3px;">{{ n.message[:120] }}</div>
{% endif %}
<div style="font-size:11px;color:var(--muted);margin-top:5px;font-family:'Space Mono',monospace;">
{{ n.created_at.strftime('%b %d, %Y at %H:%M') }}
</div>
</div>
<div style="flex-shrink:0;align-self:center;">
<i class="bi bi-chevron-right" style="color:var(--muted);font-size:12px;"></i>
</div>
</a>
{% endfor %}
<!-- Pagination -->
{% if notifs.pages > 1 %}
<div class="d-flex justify-content-center py-3">
<nav><ul class="pagination mb-0">
{% if notifs.has_prev %}
<li class="page-item"><a class="page-link" href="{{ url_for('tickets.notifications', page=notifs.prev_num) }}">‹</a></li>
{% endif %}
{% for p in notifs.iter_pages() %}
{% if p %}
<li class="page-item {% if p==notifs.page %}active{% endif %}">
<a class="page-link" href="{{ url_for('tickets.notifications', page=p) }}">{{ p }}</a>
</li>
{% else %}
<li class="page-item disabled"><span class="page-link">…</span></li>
{% endif %}
{% endfor %}
{% if notifs.has_next %}
<li class="page-item"><a class="page-link" href="{{ url_for('tickets.notifications', page=notifs.next_num) }}">›</a></li>
{% endif %}
</ul></nav>
</div>
{% endif %}
{% else %}
<div class="p-5 text-center" style="color:var(--muted);">
<i class="bi bi-bell-slash" style="font-size:40px;display:block;margin-bottom:12px;"></i>
No notifications yet.
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}
config/config.py
+59
View File
@@ -0,0 +1,59 @@
import os
from dotenv import load_dotenv
load_dotenv()
class Config:
SECRET_KEY = os.environ.get('SECRET_KEY') or 'dev-secret-key-change-in-production'
SQLALCHEMY_DATABASE_URI = (
f"mysql+pymysql://{os.environ.get('DB_USER', 'root')}:"
f"{os.environ.get('DB_PASSWORD', '')}@"
f"{os.environ.get('DB_HOST', 'localhost')}:"
f"{os.environ.get('DB_PORT', '3306')}/"
f"{os.environ.get('DB_NAME', 'it_tickets')}"
)
SQLALCHEMY_TRACK_MODIFICATIONS = False
SQLALCHEMY_ENGINE_OPTIONS = {
'pool_recycle': 300,
'pool_pre_ping': True,
}
# Mail
MAIL_SERVER = os.environ.get('MAIL_SERVER', 'localhost')
MAIL_PORT = int(os.environ.get('MAIL_PORT', 587))
MAIL_USE_TLS = os.environ.get('MAIL_USE_TLS', 'True').lower() == 'true'
MAIL_USERNAME = os.environ.get('MAIL_USERNAME')
MAIL_PASSWORD = os.environ.get('MAIL_PASSWORD')
MAIL_DEFAULT_SENDER = os.environ.get('MAIL_DEFAULT_SENDER', 'IT Helpdesk <noreply@yourdomain.com>')
# IT Department
IT_DEPT_EMAIL = os.environ.get('IT_DEPT_EMAIL', 'it@yourdomain.com')
APP_BASE_URL = os.environ.get('APP_BASE_URL', 'http://localhost:5000')
# Uploads
UPLOAD_FOLDER = os.environ.get('UPLOAD_FOLDER', 'app/static/uploads')
MAX_CONTENT_LENGTH = int(os.environ.get('MAX_CONTENT_LENGTH', 16 * 1024 * 1024))
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'pdf', 'doc', 'docx', 'txt', 'zip', 'log'}
# Anthropic AI
ANTHROPIC_API_KEY = os.environ.get('ANTHROPIC_API_KEY', '')
# Admin
ADMIN_EMAIL = os.environ.get('ADMIN_EMAIL', 'admin@yourdomain.com')
ADMIN_PASSWORD = os.environ.get('ADMIN_PASSWORD', 'Admin@123!')
class DevelopmentConfig(Config):
DEBUG = True
SQLALCHEMY_ECHO = False
class ProductionConfig(Config):
DEBUG = False
config = {
'development': DevelopmentConfig,
'production': ProductionConfig,
'default': ProductionConfig
}
gunicorn.conf.py
+36
View File
@@ -0,0 +1,36 @@
# gunicorn.conf.py
import multiprocessing
# Server socket
bind = "127.0.0.1:7000"
backlog = 2048
# Worker processes
worker_class = "eventlet" # Required for Flask-SocketIO
workers = 1 # eventlet requires exactly 1 worker
worker_connections = 1000
timeout = 120
keepalive = 5
# Application
module = "run:app"
# Logging
accesslog = "logs/gunicorn_access.log"
errorlog = "logs/gunicorn_error.log"
loglevel = "info"
access_log_format = '%(h)s %(l)s %(u)s %(t)s "%(r)s" %(s)s %(b)s "%(f)s" "%(a)s" %(D)sµs'
# Process naming
proc_name = "it_ticket_system"
# Server mechanics
daemon = False
pidfile = "/tmp/it_tickets.pid"
user = None # Set to your app user, e.g. "www-data"
group = None
tmp_upload_dir = None
# SSL (configure if not using nginx for SSL termination)
# keyfile = "/etc/ssl/private/your.key"
# certfile = "/etc/ssl/certs/your.crt"
it-ticket-system.service
+29
View File
@@ -0,0 +1,29 @@
[Unit]
Description=TechDesk IT Ticket System (Gunicorn + SocketIO)
After=network.target mysql.service
Wants=mysql.service
[Service]
Type=notify
User=www-data
Group=www-data
WorkingDirectory=/var/www/it-ticket-system
Environment="FLASK_ENV=production"
EnvironmentFile=/var/www/it-ticket-system/.env
ExecStart=/var/www/it-ticket-system/venv/bin/gunicorn \
--config gunicorn.conf.py \
run:app
ExecReload=/bin/kill -s HUP $MAINPID
KillMode=mixed
TimeoutStopSec=5
PrivateTmp=true
Restart=on-failure
RestartSec=10
# Logging
StandardOutput=journal
StandardError=journal
SyslogIdentifier=it-ticket-system
[Install]
WantedBy=multi-user.target
it-ticket-system.zip
BIN
View File
Binary file not shown.
nginx.conf
+79
View File
@@ -0,0 +1,79 @@
# /etc/nginx/sites-available/it-ticket-system
# Symlink to sites-enabled:
# sudo ln -s /etc/nginx/sites-available/it-ticket-system /etc/nginx/sites-enabled/
upstream it_ticket_app {
server 127.0.0.1:5000 fail_timeout=0;
}
# Redirect HTTP → HTTPS
server {
listen 80;
server_name tickets.yourdomain.com;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl http2;
server_name tickets.yourdomain.com;
# ── SSL Certificates (Let's Encrypt / certbot) ──────────────────────────
ssl_certificate /etc/letsencrypt/live/tickets.yourdomain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/tickets.yourdomain.com/privkey.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 10m;
# ── Security Headers ────────────────────────────────────────────────────
add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload";
add_header X-Frame-Options SAMEORIGIN;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header Referrer-Policy "strict-origin-when-cross-origin";
# ── Logging ─────────────────────────────────────────────────────────────
access_log /var/log/nginx/it_tickets_access.log;
error_log /var/log/nginx/it_tickets_error.log warn;
# ── Client limits ───────────────────────────────────────────────────────
client_max_body_size 20M;
# ── Static files (served directly by nginx) ─────────────────────────────
location /static/ {
alias /var/www/it-ticket-system/app/static/;
expires 7d;
add_header Cache-Control "public, immutable";
access_log off;
}
# ── WebSocket (Socket.IO) ───────────────────────────────────────────────
location /socket.io/ {
proxy_pass http://it_ticket_app;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_read_timeout 86400;
}
# ── Application ─────────────────────────────────────────────────────────
location / {
proxy_pass http://it_ticket_app;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_connect_timeout 60s;
proxy_send_timeout 60s;
proxy_read_timeout 60s;
proxy_buffering on;
proxy_buffer_size 8k;
proxy_buffers 8 8k;
}
}
requirements.txt
+19
View File
@@ -0,0 +1,19 @@
Flask==3.0.3
Flask-SQLAlchemy==3.1.1
Flask-Login==0.6.3
Flask-Mail==0.10.0
Flask-Migrate==4.0.7
Flask-WTF==1.2.1
Flask-SocketIO==5.3.6
PyMySQL==1.1.1
cryptography==42.0.8
Werkzeug==3.0.3
gunicorn==22.0.0
eventlet==0.36.1
python-dotenv==1.0.1
Pillow==10.4.0
WTForms==3.1.2
email-validator==2.2.0
requests==2.32.3
APScheduler==3.10.4
marshmallow==3.21.3
run.py
+7
View File
@@ -0,0 +1,7 @@
import os
from app import create_app, socketio
app = create_app(os.environ.get('FLASK_ENV', 'production'))
if __name__ == '__main__':
socketio.run(app, host='0.0.0.0', port=5000, debug=app.debug)
setup_db.sql
+24
View File
@@ -0,0 +1,24 @@
-- ============================================================
-- TechDesk IT Ticket System — MySQL Database Setup
-- Run as root: mysql -u root -p < setup_db.sql
-- ============================================================
-- Create database
CREATE DATABASE IF NOT EXISTS it_tickets
CHARACTER SET utf8mb4
COLLATE utf8mb4_unicode_ci;
-- Create dedicated application user
CREATE USER IF NOT EXISTS 'it_tickets_user'@'localhost'
IDENTIFIED BY 'CHANGE_THIS_PASSWORD';
-- Grant privileges
GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, INDEX, ALTER, REFERENCES
ON it_tickets.*
TO 'it_tickets_user'@'localhost';
FLUSH PRIVILEGES;
-- Verify
SELECT User, Host FROM mysql.user WHERE User = 'it_tickets_user';
SHOW GRANTS FOR 'it_tickets_user'@'localhost';