Escalated

Escalated is an embeddable support ticket system with SLA tracking, escalation rules, agent workflows, and a customer portal. This repo contains all the shared frontend assets (Vue 3 + Inertia.js) used across every supported backend framework.

👉 Learn more, view demos, and compare Cloud vs Self-Hosted options at https://escalated.dev

You don't install this package directly. Start with the backend package for your framework — it handles everything including pulling in these frontend assets.

Get Started

Pick your framework:

Framework	Repo	Install
Laravel	escalated-dev/escalated-laravel	composer require escalated-dev/escalated-laravel
Rails	escalated-dev/escalated-rails	gem "escalated"
Django	escalated-dev/escalated-django	pip install escalated-django

Each backend repo has full setup instructions — install command, migrations, config, and frontend integration.

Tailwind CSS

Escalated components use Tailwind CSS classes. You must add this package to your Tailwind content config so its classes aren't purged:

// tailwind.config.js
export default {
    content: [
        // ... your existing paths
        './node_modules/@escalated-dev/escalated/src/**/*.vue',
    ],
}

Without this, Escalated UI will render but styles like button backgrounds and badge colors will be missing.

Theming

Escalated renders inside a standalone layout by default. To integrate it into your app's design system, use the EscalatedPlugin:

import { createApp } from 'vue'
import { EscalatedPlugin } from '@escalated-dev/escalated'
import AppLayout from '@/Layouts/AppLayout.vue'

const app = createApp(...)

app.use(EscalatedPlugin, {
    layout: AppLayout,
    theme: {
        primary: '#3b82f6',
        radius: '0.75rem',
    }
})

Layout Integration

Pass your app's layout component and all Escalated pages render inside it automatically. The layout component must accept a #header slot and a default slot:

<!-- Your layout must support these slots -->
<template>
    <div>
        <nav>...</nav>
        <header><slot name="header" /></header>
        <main><slot /></main>
    </div>
</template>

When no layout is provided, Escalated uses its own built-in navigation bar.

CSS Custom Properties

The theme option sets CSS custom properties you can reference in your own styles:

Property	Default	Description
--esc-primary	#4f46e5	Primary action color
--esc-primary-hover	auto-darkened	Primary hover color
--esc-radius	0.5rem	Border radius for inputs and buttons
--esc-radius-lg	auto-scaled	Border radius for cards and panels
--esc-font-family	inherit	Font family override

Framework Examples

Laravel (Inertia + Vue 3):

import { EscalatedPlugin } from '@escalated-dev/escalated'
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'

app.use(EscalatedPlugin, { layout: AuthenticatedLayout })

Rails (Inertia + Vue 3):

import { EscalatedPlugin } from '@escalated-dev/escalated'
import AppLayout from '@/layouts/AppLayout.vue'

app.use(EscalatedPlugin, { layout: AppLayout })

Django (Inertia + Vue 3):

import { EscalatedPlugin } from '@escalated-dev/escalated'
import BaseLayout from '@/layouts/BaseLayout.vue'

app.use(EscalatedPlugin, { layout: BaseLayout })

What's in This Repo

All the Vue 3 + Inertia.js components that power the Escalated UI. These are identical across Laravel, Rails, and Django — the backend framework renders them via Inertia.

Pages

Customer Portal — Self-service ticket management

• pages/Customer/Index.vue — Ticket list with status filters and search
• pages/Customer/Create.vue — New ticket form with file attachments
• pages/Customer/Show.vue — Ticket detail with reply thread

Agent Dashboard — Ticket queue and workflows

• pages/Agent/Dashboard.vue — Stats overview and recent tickets
• pages/Agent/TicketIndex.vue — Filterable ticket queue
• pages/Agent/TicketShow.vue — Full ticket view with sidebar, internal notes, canned responses

Admin Panel — System configuration

• pages/Admin/Reports.vue — Analytics dashboard
• pages/Admin/Departments/ — Department CRUD
• pages/Admin/SlaPolicies/ — SLA policy management
• pages/Admin/EscalationRules/ — Escalation rule builder
• pages/Admin/Tags/ — Tag management
• pages/Admin/CannedResponses/ — Canned response templates

Shared Components

Reusable building blocks used across the pages above.

Component	Description
StatusBadge	Colored badge for ticket status
PriorityBadge	Colored badge for ticket priority
TicketList	Paginated ticket table
ReplyThread	Chronological reply display
ReplyComposer	Reply/note editor with file upload and canned response insertion
ActivityTimeline	Audit log of ticket events
SlaTimer	SLA countdown with breach/warning states
TicketFilters	Status, priority, agent, department filter bar
TicketSidebar	Ticket detail sidebar (status, SLA, tags, activity)
AssigneeSelect	Agent assignment dropdown
TagSelect	Multi-select tag picker
FileDropzone	Drag-and-drop file upload
AttachmentList	File attachment display with download links
StatsCard	Metric card with label, value, and trend
EscalatedLayout	Top-level layout with navigation (supports host layout injection)

Plugin

Export	Description
EscalatedPlugin	Vue plugin for layout injection and CSS theming

For Package Maintainers

If you're building a new backend integration, this package is available on npm:

npm install @escalated-dev/escalated

// Import the plugin
import { EscalatedPlugin } from '@escalated-dev/escalated'

// Import individual components
import { StatusBadge, SlaTimer } from '@escalated-dev/escalated'

// Or reference pages directly for Inertia resolution
import CustomerIndex from '@escalated-dev/escalated/pages/Customer/Index.vue'

Peer dependencies: vue ^3.3.0, @inertiajs/vue3 ^1.0.0 || ^2.0.0

License

MIT