@escalated-dev/escalated 0.2.1

package/src/pages/Customer/Create.vue

@@ -0,0 +1,66 @@
+<script setup>
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import FileDropzone from '../../components/FileDropzone.vue';
+import { useForm } from '@inertiajs/vue3';
+
+const props = defineProps({
+    departments: Array,
+    priorities: Array,
+});
+
+const form = useForm({
+    subject: '',
+    description: '',
+    priority: 'medium',
+    department_id: '',
+    attachments: [],
+});
+
+function submit() {
+    form.post(route('escalated.customer.tickets.store'));
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Create Ticket">
+        <form @submit.prevent="submit" class="mx-auto max-w-2xl space-y-6 rounded-lg border border-gray-200 bg-white p-6">
+            <div>
+                <label class="block text-sm font-medium text-gray-700">Subject</label>
+                <input v-model="form.subject" type="text" required
+                       class="mt-1 w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
+                <div v-if="form.errors.subject" class="mt-1 text-sm text-red-600">{{ form.errors.subject }}</div>
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700">Description</label>
+                <textarea v-model="form.description" rows="6" required
+                          class="mt-1 w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
+                <div v-if="form.errors.description" class="mt-1 text-sm text-red-600">{{ form.errors.description }}</div>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700">Priority</label>
+                    <select v-model="form.priority" class="mt-1 w-full rounded-lg border-gray-300 shadow-sm">
+                        <option v-for="p in priorities" :key="p" :value="p" class="capitalize">{{ p }}</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700">Department</label>
+                    <select v-model="form.department_id" class="mt-1 w-full rounded-lg border-gray-300 shadow-sm">
+                        <option value="">None</option>
+                        <option v-for="d in departments" :key="d.id" :value="d.id">{{ d.name }}</option>
+                    </select>
+                </div>
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Attachments</label>
+                <FileDropzone v-model="form.attachments" />
+            </div>
+            <div class="flex justify-end">
+                <button type="submit" :disabled="form.processing"
+                        class="rounded-lg bg-indigo-600 px-6 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50">
+                    {{ form.processing ? 'Creating...' : 'Create Ticket' }}
+                </button>
+            </div>
+        </form>
+    </EscalatedLayout>
+</template>

package/src/pages/Customer/Index.vue

@@ -0,0 +1,24 @@
+<script setup>
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import TicketList from '../../components/TicketList.vue';
+import TicketFilters from '../../components/TicketFilters.vue';
+import { Link } from '@inertiajs/vue3';
+
+defineProps({
+    tickets: Object,
+    filters: Object,
+});
+</script>
+
+<template>
+    <EscalatedLayout title="My Tickets">
+        <div class="mb-6 flex items-center justify-between">
+            <TicketFilters :filters="filters" :route="route('escalated.customer.tickets.index')" />
+            <Link :href="route('escalated.customer.tickets.create')"
+                  class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
+                New Ticket
+            </Link>
+        </div>
+        <TicketList :tickets="tickets" route-prefix="escalated.customer.tickets" />
+    </EscalatedLayout>
+</template>

package/src/pages/Customer/Show.vue

@@ -0,0 +1,55 @@
+<script setup>
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import StatusBadge from '../../components/StatusBadge.vue';
+import PriorityBadge from '../../components/PriorityBadge.vue';
+import ReplyThread from '../../components/ReplyThread.vue';
+import ReplyComposer from '../../components/ReplyComposer.vue';
+import AttachmentList from '../../components/AttachmentList.vue';
+import { router, usePage } from '@inertiajs/vue3';
+
+const props = defineProps({ ticket: Object });
+const page = usePage();
+
+function closeTicket() {
+    router.post(route('escalated.customer.tickets.close', props.ticket.reference));
+}
+
+function reopenTicket() {
+    router.post(route('escalated.customer.tickets.reopen', props.ticket.reference));
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="ticket.subject">
+        <div class="mb-4 flex flex-wrap items-center gap-3">
+            <span class="text-sm font-medium text-gray-500">{{ ticket.reference }}</span>
+            <StatusBadge :status="ticket.status" />
+            <PriorityBadge :priority="ticket.priority" />
+            <span v-if="ticket.department" class="text-sm text-gray-500">{{ ticket.department.name }}</span>
+            <div class="ml-auto flex gap-2">
+                <button v-if="ticket.status === 'resolved' || ticket.status === 'closed'"
+                        @click="reopenTicket"
+                        class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50">
+                    Reopen
+                </button>
+                <button v-if="ticket.status !== 'closed' && ticket.status !== 'resolved'"
+                        @click="closeTicket"
+                        class="rounded-lg border border-red-300 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50">
+                    Close Ticket
+                </button>
+            </div>
+        </div>
+        <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4">
+            <p class="whitespace-pre-wrap text-sm text-gray-700">{{ ticket.description }}</p>
+            <AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
+        </div>
+        <div class="mb-6">
+            <h2 class="mb-4 text-lg font-semibold text-gray-900">Replies</h2>
+            <ReplyThread :replies="ticket.replies || []" :current-user-id="page.props.auth?.user?.id" />
+        </div>
+        <div v-if="ticket.status !== 'closed'" class="rounded-lg border border-gray-200 bg-white p-4">
+            <h2 class="mb-4 text-lg font-semibold text-gray-900">Reply</h2>
+            <ReplyComposer :action="route('escalated.customer.tickets.reply', ticket.reference)" />
+        </div>
+    </EscalatedLayout>
+</template>

package/src/plugin.js

@@ -0,0 +1,65 @@
+import { markRaw } from 'vue';
+
+/**
+ * EscalatedPlugin — Vue plugin for integrating Escalated into your app's design system.
+ *
+ * Usage:
+ *   import { EscalatedPlugin } from '@escalated-dev/escalated'
+ *   import AppLayout from '@/Layouts/AppLayout.vue'
+ *
+ *   app.use(EscalatedPlugin, {
+ *       layout: AppLayout,
+ *       theme: {
+ *           primary: '#3b82f6',
+ *           radius: '0.75rem',
+ *       }
+ *   })
+ */
+export const EscalatedPlugin = {
+    install(app, options = {}) {
+        if (options.layout) {
+            app.provide('escalated-layout', markRaw(options.layout));
+        }
+
+        if (options.theme) {
+            app.provide('escalated-theme', options.theme);
+            applyTheme(options.theme);
+        }
+    },
+};
+
+const themeDefaults = {
+    primary: '#4f46e5',
+    primaryHover: null,
+    radius: '0.5rem',
+    radiusLg: null,
+    fontFamily: null,
+};
+
+function applyTheme(theme) {
+    const merged = { ...themeDefaults, ...theme };
+    const style = document.documentElement.style;
+
+    style.setProperty('--esc-primary', merged.primary);
+    style.setProperty('--esc-primary-hover', merged.primaryHover || darken(merged.primary, 10));
+    style.setProperty('--esc-radius', merged.radius);
+    style.setProperty('--esc-radius-lg', merged.radiusLg || scaleBorderRadius(merged.radius, 1.5));
+
+    if (merged.fontFamily) {
+        style.setProperty('--esc-font-family', merged.fontFamily);
+    }
+}
+
+function darken(hex, percent) {
+    const num = parseInt(hex.replace('#', ''), 16);
+    const r = Math.max(0, (num >> 16) - Math.round(2.55 * percent));
+    const g = Math.max(0, ((num >> 8) & 0x00ff) - Math.round(2.55 * percent));
+    const b = Math.max(0, (num & 0x0000ff) - Math.round(2.55 * percent));
+    return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, '0')}`;
+}
+
+function scaleBorderRadius(radius, factor) {
+    const match = radius.match(/^([\d.]+)(.*)$/);
+    if (!match) return radius;
+    return `${(parseFloat(match[1]) * factor).toFixed(2)}${match[2] || 'rem'}`;
+}