@escalated-dev/escalated 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Escalated Dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,190 @@
+<h1>
+  <img src="https://escalated.dev/apple-touch-icon.png" width="28" style="vertical-align:middle;" />
+  Escalated
+</h1>
+
+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](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](https://github.com/escalated-dev/escalated-laravel) | `composer require escalated-dev/escalated-laravel` |
+| **Rails** | [escalated-dev/escalated-rails](https://github.com/escalated-dev/escalated-rails) | `gem "escalated"` |
+| **Django** | [escalated-dev/escalated-django](https://github.com/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:
+
+```js
+// 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`:
+
+```js
+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:
+
+```vue
+<!-- 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):
+```js
+import { EscalatedPlugin } from '@escalated-dev/escalated'
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
+
+app.use(EscalatedPlugin, { layout: AuthenticatedLayout })
+```
+
+**Rails** (Inertia + Vue 3):
+```js
+import { EscalatedPlugin } from '@escalated-dev/escalated'
+import AppLayout from '@/layouts/AppLayout.vue'
+
+app.use(EscalatedPlugin, { layout: AppLayout })
+```
+
+**Django** (Inertia + Vue 3):
+```js
+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:
+
+```bash
+npm install @escalated-dev/escalated
+```
+
+```js
+// 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

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@escalated-dev/escalated",
+  "version": "0.2.1",
+  "description": "Vue 3 + Inertia.js UI components for Escalated — the embeddable support ticket system",
+  "author": "Escalated Dev <hello@escalated.dev>",
+  "license": "MIT",
+  "homepage": "https://github.com/escalated-dev/escalated",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/escalated-dev/escalated.git"
+  },
+  "keywords": [
+    "vue",
+    "inertia",
+    "support",
+    "tickets",
+    "helpdesk",
+    "escalated"
+  ],
+  "type": "module",
+  "exports": {
+    "./components/*": "./src/components/*",
+    "./pages/*": "./src/pages/*",
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "vue": "^3.3.0",
+    "@inertiajs/vue3": "^1.0.0 || ^2.0.0"
+  },
+  "devDependencies": {
+    "vue": "^3.5.0",
+    "@inertiajs/vue3": "^2.0.0"
+  }
+}

package/src/components/ActivityTimeline.vue

@@ -0,0 +1,62 @@
+<script setup>
+defineProps({
+    activities: { type: Array, required: true },
+});
+
+const typeLabels = {
+    status_changed: 'changed status',
+    assigned: 'assigned ticket',
+    unassigned: 'unassigned ticket',
+    priority_changed: 'changed priority',
+    tag_added: 'added tag',
+    tag_removed: 'removed tag',
+    escalated: 'escalated ticket',
+    sla_breached: 'SLA breached',
+    replied: 'replied',
+    note_added: 'added note',
+    department_changed: 'changed department',
+    reopened: 'reopened ticket',
+    resolved: 'resolved ticket',
+    closed: 'closed ticket',
+};
+
+function formatDate(date) {
+    return new Date(date).toLocaleString();
+}
+
+function describeActivity(activity) {
+    const label = typeLabels[activity.type] || activity.type;
+    const who = activity.causer?.name || 'System';
+    const props = activity.properties || {};
+
+    if (activity.type === 'status_changed' && props.to) {
+        return `${who} ${label} to ${props.to}`;
+    }
+    if (activity.type === 'assigned' && props.agent_name) {
+        return `${who} assigned to ${props.agent_name}`;
+    }
+    if (activity.type === 'priority_changed' && props.to) {
+        return `${who} ${label} to ${props.to}`;
+    }
+    if ((activity.type === 'tag_added' || activity.type === 'tag_removed') && props.tag) {
+        return `${who} ${label} "${props.tag}"`;
+    }
+    if (activity.type === 'department_changed' && props.department) {
+        return `${who} ${label} to ${props.department}`;
+    }
+    return `${who} ${label}`;
+}
+</script>
+
+<template>
+    <div class="space-y-3">
+        <div v-for="activity in activities" :key="activity.id" class="flex gap-3 text-sm">
+            <div class="mt-1 h-2 w-2 flex-shrink-0 rounded-full bg-gray-400"></div>
+            <div class="flex-1">
+                <p class="text-gray-700">{{ describeActivity(activity) }}</p>
+                <p class="text-xs text-gray-400">{{ formatDate(activity.created_at) }}</p>
+            </div>
+        </div>
+        <div v-if="!activities?.length" class="py-4 text-center text-sm text-gray-500">No activity yet.</div>
+    </div>
+</template>

package/src/components/AssigneeSelect.vue

@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+    agents: { type: Array, required: true },
+    modelValue: { type: [Number, String], default: null },
+});
+
+const emit = defineEmits(['update:modelValue']);
+</script>
+
+<template>
+    <div>
+        <label class="mb-1 block text-xs font-medium text-gray-600">Assigned To</label>
+        <select :value="modelValue" @change="emit('update:modelValue', $event.target.value || null)"
+                class="w-full rounded-md border border-gray-300 px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none">
+            <option value="">Unassigned</option>
+            <option v-for="agent in agents" :key="agent.id" :value="agent.id">{{ agent.name }}</option>
+        </select>
+    </div>
+</template>

package/src/components/AttachmentList.vue

@@ -0,0 +1,31 @@
+<script setup>
+defineProps({
+    attachments: { type: Array, required: true },
+});
+
+function formatSize(bytes) {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / 1048576).toFixed(1) + ' MB';
+}
+
+function iconForMime(mime) {
+    if (mime?.startsWith('image/')) return '🖼️';
+    if (mime?.startsWith('video/')) return '🎬';
+    if (mime === 'application/pdf') return '📄';
+    return '📎';
+}
+</script>
+
+<template>
+    <div class="space-y-1">
+        <div v-for="attachment in attachments" :key="attachment.id"
+             class="flex items-center gap-2 rounded border border-gray-200 bg-gray-50 px-3 py-2 text-sm">
+            <span>{{ iconForMime(attachment.mime_type) }}</span>
+            <a :href="attachment.url" target="_blank" class="flex-1 truncate font-medium text-blue-600 hover:underline">
+                {{ attachment.original_filename }}
+            </a>
+            <span class="text-xs text-gray-400">{{ formatSize(attachment.size) }}</span>
+        </div>
+    </div>
+</template>

package/src/components/EscalatedLayout.vue

@@ -0,0 +1,213 @@
+<script setup>
+import { computed, inject } from 'vue';
+import { usePage, Link } from '@inertiajs/vue3';
+
+const props = defineProps({
+    title: { type: String, default: 'Support' },
+});
+
+const page = usePage();
+const staticLayout = inject('escalated-layout', null);
+const layoutResolver = inject('escalated-layout-resolver', null);
+
+const hostLayout = computed(() => {
+    if (layoutResolver) return layoutResolver();
+    return staticLayout;
+});
+
+const isAgent = computed(() => page.props.escalated?.is_agent);
+const isAdmin = computed(() => page.props.escalated?.is_admin);
+const prefix = computed(() => {
+    const p = page.props.escalated?.prefix || 'support';
+    return p.startsWith('/') ? p : `/${p}`;
+});
+
+const currentUrl = computed(() => page.url);
+const isAdminSection = computed(() => currentUrl.value?.includes('/admin'));
+const isAgentSection = computed(() => currentUrl.value?.includes('/agent'));
+
+const adminLinks = computed(() => [
+    { href: `${prefix.value}/admin/reports`, label: 'Reports', icon: 'chart' },
+    { href: `${prefix.value}/admin/departments`, label: 'Departments', icon: 'grid' },
+    { href: `${prefix.value}/admin/sla-policies`, label: 'SLA Policies', icon: 'clock' },
+    { href: `${prefix.value}/admin/escalation-rules`, label: 'Escalation Rules', icon: 'arrow' },
+    { href: `${prefix.value}/admin/tags`, label: 'Tags', icon: 'tag' },
+    { href: `${prefix.value}/admin/canned-responses`, label: 'Canned Responses', icon: 'message' },
+]);
+
+const agentLinks = computed(() => [
+    { href: `${prefix.value}/agent`, label: 'Dashboard' },
+    { href: `${prefix.value}/agent/tickets`, label: 'Tickets' },
+]);
+
+const userName = computed(() => page.props.auth?.user?.name || 'User');
+const userInitial = computed(() => userName.value.charAt(0).toUpperCase());
+
+function isActive(href) {
+    if (!currentUrl.value) return false;
+    return currentUrl.value === href || currentUrl.value.startsWith(href + '/');
+}
+</script>
+
+<template>
+    <!-- MODE 1: Host layout provided (customer pages within host app) -->
+    <component :is="hostLayout" v-if="hostLayout">
+        <template #header>
+            <div class="flex items-center justify-between">
+                <h2 class="esc-heading text-xl font-semibold leading-tight text-gray-800">{{ title }}</h2>
+                <nav class="flex items-center gap-4 text-sm">
+                    <Link :href="prefix" class="text-gray-600 hover:text-gray-900">My Tickets</Link>
+                    <Link v-if="isAgent" :href="`${prefix}/agent`" class="text-gray-600 hover:text-gray-900">Agent Panel</Link>
+                    <Link v-if="isAdmin" :href="`${prefix}/admin/reports`" class="text-gray-600 hover:text-gray-900">Admin</Link>
+                </nav>
+            </div>
+        </template>
+
+        <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+            <slot />
+        </div>
+    </component>
+
+    <!-- MODE 2: Admin standalone — dark sidebar layout -->
+    <div v-else-if="isAdminSection" class="esc-root flex min-h-screen bg-gray-950">
+        <!-- Sidebar -->
+        <aside class="fixed inset-y-0 left-0 z-30 flex w-64 flex-col border-r border-white/10 bg-gray-900">
+            <!-- Logo -->
+            <div class="flex h-16 items-center gap-3 px-6">
+                <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 via-cyan-500 to-violet-500">
+                    <svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+                    </svg>
+                </div>
+                <span class="text-lg font-bold text-white">Escalated</span>
+                <span class="rounded bg-white/10 px-1.5 py-0.5 text-[10px] font-medium text-gray-400">Admin</span>
+            </div>
+
+            <!-- Nav -->
+            <nav class="mt-2 flex-1 space-y-1 px-3">
+                <Link v-for="link in adminLinks" :key="link.href" :href="link.href"
+                      :class="['group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all',
+                               isActive(link.href)
+                                   ? 'bg-gradient-to-r from-orange-500/20 via-cyan-500/20 to-violet-500/20 text-white ring-1 ring-white/10'
+                                   : 'text-gray-400 hover:bg-white/5 hover:text-white']">
+                    {{ link.label }}
+                </Link>
+            </nav>
+
+            <!-- Bottom -->
+            <div class="border-t border-white/10 p-4">
+                <Link v-if="isAgent" :href="`${prefix}/agent`"
+                      class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-gray-400 transition-colors hover:bg-white/5 hover:text-white">
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" /></svg>
+                    Agent Panel
+                </Link>
+                <Link :href="prefix"
+                      class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-gray-400 transition-colors hover:bg-white/5 hover:text-white">
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" /></svg>
+                    Back to App
+                </Link>
+            </div>
+        </aside>
+
+        <!-- Main content -->
+        <div class="flex flex-1 flex-col pl-64">
+            <!-- Top bar -->
+            <header class="sticky top-0 z-20 flex h-16 items-center justify-between border-b border-white/10 bg-gray-900/80 px-6 backdrop-blur-xl">
+                <h1 class="text-lg font-semibold text-white">{{ title }}</h1>
+                <div class="flex items-center gap-3">
+                    <div class="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-cyan-500 to-violet-500 text-xs font-bold text-white">
+                        {{ userInitial }}
+                    </div>
+                    <span class="text-sm text-gray-300">{{ userName }}</span>
+                </div>
+            </header>
+
+            <!-- Page content -->
+            <main class="flex-1 p-4">
+                <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-950/5">
+                    <slot />
+                </div>
+            </main>
+        </div>
+    </div>
+
+    <!-- MODE 3: Agent standalone — dark top-nav layout -->
+    <div v-else-if="isAgentSection" class="esc-root min-h-screen bg-gray-950">
+        <!-- Top nav -->
+        <nav class="sticky top-0 z-30 border-b border-white/10 bg-gray-900">
+            <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+                <!-- Left: branding -->
+                <div class="flex items-center gap-3">
+                    <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 via-cyan-500 to-violet-500">
+                        <svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+                        </svg>
+                    </div>
+                    <span class="text-lg font-bold text-white">Escalated</span>
+                </div>
+
+                <!-- Center: nav links -->
+                <div class="flex items-center gap-1">
+                    <Link v-for="link in agentLinks" :key="link.href" :href="link.href"
+                          :class="['rounded-lg px-4 py-2 text-sm font-medium transition-all',
+                                   isActive(link.href)
+                                       ? 'bg-gradient-to-r from-orange-500/20 via-cyan-500/20 to-violet-500/20 text-white ring-1 ring-white/10'
+                                       : 'text-gray-400 hover:bg-white/5 hover:text-white']">
+                        {{ link.label }}
+                    </Link>
+                </div>
+
+                <!-- Right: user + back -->
+                <div class="flex items-center gap-4">
+                    <div class="flex items-center gap-2">
+                        <div class="flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-cyan-500 to-violet-500 text-xs font-bold text-white">
+                            {{ userInitial }}
+                        </div>
+                        <span class="text-sm text-gray-300">{{ userName }}</span>
+                    </div>
+                    <div class="h-5 w-px bg-white/10"></div>
+                    <Link v-if="isAdmin" :href="`${prefix}/admin/reports`"
+                          class="text-sm text-gray-400 transition-colors hover:text-white">
+                        Admin
+                    </Link>
+                    <Link :href="prefix"
+                          class="text-sm text-gray-400 transition-colors hover:text-white">
+                        Back to App
+                    </Link>
+                </div>
+            </div>
+            <!-- Rainbow accent line -->
+            <div class="h-px bg-gradient-to-r from-orange-500 via-cyan-500 to-violet-500"></div>
+        </nav>
+
+        <!-- Page content -->
+        <main class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+            <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-950/5">
+                <slot />
+            </div>
+        </main>
+    </div>
+
+    <!-- MODE 4: Customer standalone fallback (no host layout, not admin/agent) -->
+    <div v-else class="esc-root min-h-screen bg-gray-50">
+        <nav class="border-b border-gray-200 bg-white">
+            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+                <div class="flex h-14 items-center justify-between">
+                    <div class="flex items-center gap-6">
+                        <span class="text-lg font-bold text-gray-900">{{ title }}</span>
+                        <div class="flex items-center gap-4 text-sm">
+                            <Link :href="prefix" class="text-gray-600 hover:text-gray-900">My Tickets</Link>
+                            <Link v-if="isAgent" :href="`${prefix}/agent`" class="text-gray-600 hover:text-gray-900">Agent Panel</Link>
+                            <Link v-if="isAdmin" :href="`${prefix}/admin/reports`" class="text-gray-600 hover:text-gray-900">Admin</Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </nav>
+        <main class="flex-1">
+            <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+                <slot />
+            </div>
+        </main>
+    </div>
+</template>

package/src/components/FileDropzone.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { ref } from 'vue';
+
+const emit = defineEmits(['files']);
+
+const dragging = ref(false);
+const fileInput = ref(null);
+
+function onDrop(e) {
+    dragging.value = false;
+    if (e.dataTransfer?.files?.length) {
+        emit('files', Array.from(e.dataTransfer.files));
+    }
+}
+
+function onFileSelect(e) {
+    if (e.target.files?.length) {
+        emit('files', Array.from(e.target.files));
+        e.target.value = '';
+    }
+}
+
+function browse() {
+    fileInput.value?.click();
+}
+</script>
+
+<template>
+    <div @dragover.prevent="dragging = true" @dragleave="dragging = false" @drop.prevent="onDrop"
+         :class="['cursor-pointer rounded-md border-2 border-dashed px-4 py-3 text-center text-xs transition-colors',
+                  dragging ? 'border-blue-400 bg-blue-50' : 'border-gray-300 hover:border-gray-400']"
+         @click="browse">
+        <p class="text-gray-500">Drop files here or <span class="font-medium text-blue-600">browse</span></p>
+        <input ref="fileInput" type="file" multiple class="hidden" @change="onFileSelect" />
+    </div>
+</template>

package/src/components/PriorityBadge.vue

@@ -0,0 +1,21 @@
+<script setup>
+const props = defineProps({
+    priority: { type: String, required: true },
+});
+
+const priorityConfig = {
+    low: { label: 'Low', color: 'bg-gray-100 text-gray-800' },
+    medium: { label: 'Medium', color: 'bg-blue-100 text-blue-800' },
+    high: { label: 'High', color: 'bg-yellow-100 text-yellow-800' },
+    urgent: { label: 'Urgent', color: 'bg-orange-100 text-orange-800' },
+    critical: { label: 'Critical', color: 'bg-red-100 text-red-800' },
+};
+
+const config = priorityConfig[props.priority] || { label: props.priority, color: 'bg-gray-100 text-gray-800' };
+</script>
+
+<template>
+    <span :class="['inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', config.color]">
+        {{ config.label }}
+    </span>
+</template>