Customer Support System – Multi-Channel Helpdesk Platform

Executive Summary

Service Desk is a high-throughput, multi-tenant customer support and helpdesk platform. Built full-stack, it provides a modern Vue 3 / Quasar SPA workbench for customer support teams and a scalable Laravel Backend-for-Frontend (BFF) handling automated email synchronization, queue workers, and public web form ingestion.

Support agents work inside a desktop SPA featuring a Gmail-style triage inbox with split-pane ticket inspection, advanced multi-attribute filtering (queues, tags, assignees, search), file attachments, and a dual-lane messaging interface offering Public Customer Replies alongside Private Internal Team Notes. Administrators manage support queues (stream assignment, routing rules, team permissions), inbox mailboxes (IMAP/SMTP connection wizard, health checks, manual sync), public web forms (visual drag-and-drop form builder, custom theme styling, reCAPTCHA anti-spam), and templated automated emails (auto-acknowledgements, ticket confirmation links).

External customers never need an account. They submit inquiries seamlessly via email (automated background IMAP parsing into structured tickets) or public web forms (lightweight server-rendered visitor pages with double opt-in verification). Inquiries persist with rich custom metadata in MongoDB, while core relational configurations, user roles, and mailbox credentials reside in MySQL.

Architecture

System Topology & Ingestion Pipeline

flowchart TB
    subgraph Customers["External Customers (Zero Account Overhead)"]
        EmailIn["Inbound Support Email"]
        WebForm["Public Embeddable Web Form"]
    end

    subgraph FrontendSPA["Agent Desktop SPA (Vue 3 / Quasar / TypeScript)"]
        Nav["Navigation & Route Guards"]
        Views["Agent Workbenches: Triage Inbox · Queues · Form Builder · Templates"]
        State["Modular State Composables & Service Client"]
        ThreadUI["Dual-Lane Message Thread (Customer Reply vs Internal Note)"]
    end

    subgraph BackendAPI["Backend-for-Frontend (Laravel REST API Host)"]
        BFF["REST API Gateway (/api/v1/support/*)"]
        VisitorRoutes["Lightweight Public Visitor Form Host"]
        AuthMW["Authentication & Tenant Isolation Middleware"]
        DomainServices["Domain Services: Ticket Manager · Ingestion · Form Engine · Mailer"]
        EventListeners["Event Listeners & Outbound SMTP Dispatcher"]
    end

    subgraph Workers["Background Asynchronous Workers"]
        Scheduler["Cron Task Scheduler"]
        PollWorker["Dedicated IMAP Polling Queue Worker"]
        MailWorker["Transactional Email Delivery Queue Worker"]
    end

    subgraph Persistence["Dual Database Layer"]
        Mongo[("MongoDB<br/>Rich Support Ticket Documents & Custom Fields")]
        MySQL[("MySQL<br/>Queues, Mailbox Auth, Forms, Templates & Audit Logs")]
        ExtMail["External IMAP Mail Servers"]
        SMTP["Outbound SMTP Gateways"]
    end

    EmailIn --> ExtMail
    WebForm --> VisitorRoutes

    Views --> State
    State --> ThreadUI
    Nav --> Views

    State --> AuthMW --> BFF
    BFF --> DomainServices
    VisitorRoutes --> DomainServices
    DomainServices --> Mongo
    DomainServices --> MySQL

    Scheduler --> PollWorker
    BFF -->|"Manual Sync Trigger"| PollWorker
    PollWorker --> ExtMail
    PollWorker --> DomainServices

    EventListeners --> MailWorker
    MailWorker --> SMTP
    EmailIn -.->|"Threaded Inbox View"| Customers
    MailWorker -.->|"Automated Notification"| Customers

Technical Architecture Breakdown

Frontend Engineering (Vue 3 / Quasar SPA)

Backend Engineering (Laravel BFF & Background Pipeline)

Channel → Ticket Ingestion Lifecycle

Visual Workflows & Production Interfaces

1. Split-Pane Agent Inbox & Threaded Detail View

2. Multi-Channel Ticket Queue & Filter View

3. Public Web Form Field Builder

4. Public Form Routing & Mailbox Settings

5. Multi-Channel Email Template & Auto-Ack Editor

Full-Stack Ownership Map