production-ready Issue Tracking System (ITS)

You are a senior full-stack engineer.

Build a production-ready Issue Tracking System (ITS) as a web application with the following requirements:

TECH STACK:
- Frontend: React (with Tailwind CSS)
- Backend: Node.js (Express)
- Database: PostgreSQL
- Authentication: JWT-based login system
- Optional: WebSockets for real-time updates

CORE FEATURES:

1. USER SYSTEM
- Roles: Admin, Agent (Technician), Customer
- Secure login/signup
- Role-based access control

2. ISSUE / TICKET MODEL
Each ticket must include:
- Unique ID (auto-generated)
- Title
- Description
- Status (Open, Pending, In Progress, Resolved, Closed, Reopened)
- Priority (Low, Medium, High, Critical)
- Assigned To (Agent)
- Created By (Customer/Admin)
- Created At / Updated At timestamps
- SLA deadline
- Tags / Category
- History log (all changes tracked)

3. WORKFLOW LOGIC
- Tickets start as "Open"
- Can move to "In Progress" when assigned
- Can move to "Pending" if waiting for customer input
- Can be marked "Resolved" and later "Closed"
- Can be "Reopened" if issue persists
- Enforce valid transitions (no skipping logic)

4. COMMENTS & ACTIVITY
- Users can add comments
- Internal notes (Agent/Admin only)
- Track all actions in history (status change, assignment, edits)

5. DASHBOARD
- Ticket statistics (open, closed, SLA breaches)
- Filter by priority, status, assigned user
- Search functionality

6. SLA MANAGEMENT
- Track deadlines
- Highlight overdue tickets
- Optional: auto-escalation logic

7. NOTIFICATIONS
- Email or in-app notifications on:
  - Ticket creation
  - Assignment
  - Status updates

8. API DESIGN
- RESTful endpoints:
  - /auth
  - /tickets
  - /users
  - /comments

9. DATABASE DESIGN
Create normalized tables:
- users
- tickets
- comments
- ticket_history

10. SECURITY
- JWT authentication middleware
- Input validation
- Prevent unauthorized access

11. UI PAGES
- Login/Register
- Dashboard
- Ticket List
- Ticket Detail View
- Create Ticket Form

OUTPUT FORMAT:
- Step-by-step implementation
- Folder structure
- Backend code (Express)
- Database schema (SQL)
- Frontend components (React)
- Sample API calls

Focus on clean architecture, scalability, and real-world logic.

Database Schema (SQL)

CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    name VARCHAR(100),
    email VARCHAR(100) UNIQUE,
    password TEXT,
    role VARCHAR(20),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE tickets (
    id SERIAL PRIMARY KEY,
    title TEXT,
    description TEXT,
    status VARCHAR(20),
    priority VARCHAR(20),
    created_by INT,
    assigned_to INT,
    sla_deadline TIMESTAMP,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP,
    FOREIGN KEY (created_by) REFERENCES users(id),
    FOREIGN KEY (assigned_to) REFERENCES users(id)
);

CREATE TABLE comments (
    id SERIAL PRIMARY KEY,
    ticket_id INT,
    user_id INT,
    content TEXT,
    is_internal BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE ticket_history (
    id SERIAL PRIMARY KEY,
    ticket_id INT,
    action TEXT,
    old_value TEXT,
    new_value TEXT,
    changed_by INT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

BACKEND LOGIC (Express Example)

// Ticket status transition validation
const validTransitions = {
  Open: ["In Progress", "Closed"],
  "In Progress": ["Pending", "Resolved"],
  Pending: ["In Progress"],
  Resolved: ["Closed", "Reopened"],
  Closed: ["Reopened"],
  Reopened: ["In Progress"]
};

function canTransition(current, next) {
  return validTransitions[current]?.includes(next);
}


Create Ticket API


app.post("/tickets", authenticate, async (req, res) => {
  const { title, description, priority } = req.body;

  const ticket = await db.query(
    `INSERT INTO tickets (title, description, status, priority, created_by)
     VALUES ($1, $2, 'Open', $3, $4) RETURNING *`,
    [title, description, priority, req.user.id]
  );

  res.json(ticket.rows[0]);
});


FRONTEND STRUCTURE (React)

/src
 ├── components
 │   ├── TicketCard.jsx
 │   ├── CommentBox.jsx
 ├── pages
 │   ├── Dashboard.jsx
 │   ├── TicketList.jsx
 │   ├── TicketDetail.jsx
 │   ├── CreateTicket.jsx
 ├── services/api.js
 ├── App.jsx