@escalated-dev/escalated 0.2.1

package/src/components/ReplyComposer.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { router } from '@inertiajs/vue3';
+import FileDropzone from './FileDropzone.vue';
+
+const props = defineProps({
+    action: { type: String, required: true },
+    cannedResponses: { type: Array, default: () => [] },
+    allowNotes: { type: Boolean, default: false },
+    placeholder: { type: String, default: 'Type your reply...' },
+    submitLabel: { type: String, default: null },
+});
+
+const emit = defineEmits(['submit']);
+
+const body = ref('');
+const isNote = ref(false);
+const files = ref([]);
+const submitting = ref(false);
+
+function insertCanned(response) {
+    body.value += response.body;
+}
+
+function handleFiles(newFiles) {
+    files.value = [...files.value, ...newFiles];
+}
+
+function removeFile(index) {
+    files.value.splice(index, 1);
+}
+
+function submit() {
+    if (!body.value.trim() || submitting.value) return;
+    submitting.value = true;
+
+    const payload = {
+        body: body.value,
+        is_internal_note: isNote.value,
+        attachments: files.value,
+    };
+
+    emit('submit', payload);
+
+    router.post(props.action, payload, {
+        preserveScroll: true,
+        onSuccess: () => {
+            body.value = '';
+            files.value = [];
+            isNote.value = false;
+        },
+        onFinish: () => {
+            submitting.value = false;
+        },
+    });
+}
+
+const buttonLabel = computed(() => {
+    if (props.submitLabel) return props.submitLabel;
+    return isNote.value ? 'Add Note' : 'Send Reply';
+});
+</script>
+
+<template>
+    <div class="rounded-lg border border-gray-200 bg-white p-4">
+        <div v-if="allowNotes" class="mb-3 flex gap-2">
+            <button @click="isNote = false"
+                    :class="['rounded-md px-3 py-1 text-sm font-medium', !isNote ? 'bg-blue-100 text-blue-700' : 'text-gray-500 hover:bg-gray-100']">
+                Reply
+            </button>
+            <button @click="isNote = true"
+                    :class="['rounded-md px-3 py-1 text-sm font-medium', isNote ? 'bg-yellow-100 text-yellow-700' : 'text-gray-500 hover:bg-gray-100']">
+                Internal Note
+            </button>
+        </div>
+
+        <div v-if="isNote" class="mb-2 rounded bg-yellow-50 px-3 py-1.5 text-xs text-yellow-700">
+            This note is only visible to agents.
+        </div>
+
+        <textarea v-model="body" rows="4" :placeholder="placeholder"
+                  class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"></textarea>
+
+        <FileDropzone @files="handleFiles" class="mt-2" />
+
+        <div v-if="files.length" class="mt-2 space-y-1">
+            <div v-for="(file, i) in files" :key="i" class="flex items-center gap-2 text-sm text-gray-600">
+                <span>{{ file.name }}</span>
+                <button @click="removeFile(i)" class="text-red-500 hover:text-red-700">&times;</button>
+            </div>
+        </div>
+
+        <div class="mt-3 flex items-center justify-between">
+            <div v-if="cannedResponses.length" class="relative">
+                <select @change="insertCanned(cannedResponses[$event.target.value]); $event.target.value = ''"
+                        class="rounded border border-gray-300 px-2 py-1 text-xs text-gray-600">
+                    <option value="">Canned responses...</option>
+                    <option v-for="(cr, i) in cannedResponses" :key="cr.id" :value="i">{{ cr.title }}</option>
+                </select>
+            </div>
+            <div v-else></div>
+            <button @click="submit" :disabled="!body.trim() || submitting"
+                    :class="['rounded-md px-4 py-2 text-sm font-medium text-white',
+                             isNote ? 'bg-yellow-500 hover:bg-yellow-600' : 'bg-blue-600 hover:bg-blue-700',
+                             (!body.trim() || submitting) && 'cursor-not-allowed opacity-50']">
+                {{ buttonLabel }}
+            </button>
+        </div>
+    </div>
+</template>

package/src/components/ReplyThread.vue

@@ -0,0 +1,30 @@
+<script setup>
+import AttachmentList from './AttachmentList.vue';
+
+defineProps({
+    replies: { type: Array, required: true },
+    currentUserId: { type: [Number, String], default: null },
+});
+
+function formatDate(date) {
+    return new Date(date).toLocaleString();
+}
+</script>
+
+<template>
+    <div class="space-y-4">
+        <div v-for="reply in replies" :key="reply.id"
+             :class="['rounded-lg border p-4', reply.is_internal_note ? 'border-yellow-200 bg-yellow-50' : 'border-gray-200 bg-white']">
+            <div class="mb-2 flex items-center justify-between">
+                <div class="flex items-center gap-2">
+                    <span class="font-medium text-gray-900">{{ reply.author?.name || 'Unknown' }}</span>
+                    <span v-if="reply.is_internal_note" class="rounded bg-yellow-200 px-1.5 py-0.5 text-xs font-medium text-yellow-800">Internal Note</span>
+                </div>
+                <span class="text-xs text-gray-500">{{ formatDate(reply.created_at) }}</span>
+            </div>
+            <div class="prose prose-sm max-w-none text-gray-700" v-html="reply.body"></div>
+            <AttachmentList v-if="reply.attachments?.length" :attachments="reply.attachments" class="mt-3" />
+        </div>
+        <div v-if="!replies?.length" class="py-8 text-center text-sm text-gray-500">No replies yet.</div>
+    </div>
+</template>

package/src/components/SlaTimer.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    dueAt: { type: String, default: null },
+    breached: { type: Boolean, default: false },
+    label: { type: String, default: 'Due' },
+});
+
+const timeRemaining = computed(() => {
+    if (!props.dueAt) return null;
+    const now = new Date();
+    const due = new Date(props.dueAt);
+    const diff = due - now;
+    if (diff <= 0) return { text: 'Overdue', overdue: true };
+
+    const hours = Math.floor(diff / 3600000);
+    const minutes = Math.floor((diff % 3600000) / 60000);
+    if (hours > 24) {
+        const days = Math.floor(hours / 24);
+        return { text: `${days}d ${hours % 24}h`, overdue: false };
+    }
+    return { text: `${hours}h ${minutes}m`, overdue: false };
+});
+
+const statusClass = computed(() => {
+    if (props.breached || timeRemaining.value?.overdue) return 'border-red-300 bg-red-50 text-red-700';
+    const due = new Date(props.dueAt);
+    const hoursLeft = (due - new Date()) / 3600000;
+    if (hoursLeft < 2) return 'border-yellow-300 bg-yellow-50 text-yellow-700';
+    return 'border-green-300 bg-green-50 text-green-700';
+});
+</script>
+
+<template>
+    <div v-if="dueAt" :class="['rounded-md border px-3 py-2 text-sm', statusClass]">
+        <div class="font-medium">{{ label }}</div>
+        <div class="text-xs">
+            <span v-if="breached">⚠ SLA Breached</span>
+            <span v-else>{{ timeRemaining?.text }}</span>
+        </div>
+    </div>
+</template>

package/src/components/StatsCard.vue

@@ -0,0 +1,26 @@
+<script setup>
+defineProps({
+    label: { type: String, required: true },
+    value: { type: [Number, String], required: true },
+    trend: { type: String, default: null },
+    color: { type: String, default: 'blue' },
+});
+
+const colorMap = {
+    blue: 'bg-blue-50 text-blue-700',
+    green: 'bg-green-50 text-green-700',
+    red: 'bg-red-50 text-red-700',
+    yellow: 'bg-yellow-50 text-yellow-700',
+    gray: 'bg-gray-50 text-gray-700',
+};
+</script>
+
+<template>
+    <div class="rounded-lg border border-gray-200 bg-white p-4">
+        <div class="text-sm text-gray-500">{{ label }}</div>
+        <div class="mt-1 text-2xl font-bold text-gray-900">{{ value }}</div>
+        <div v-if="trend" :class="['mt-1 inline-block rounded-full px-2 py-0.5 text-xs font-medium', colorMap[color] || colorMap.blue]">
+            {{ trend }}
+        </div>
+    </div>
+</template>

package/src/components/StatusBadge.vue

@@ -0,0 +1,24 @@
+<script setup>
+const props = defineProps({
+    status: { type: String, required: true },
+});
+
+const statusConfig = {
+    open: { label: 'Open', color: 'bg-blue-100 text-blue-800' },
+    in_progress: { label: 'In Progress', color: 'bg-purple-100 text-purple-800' },
+    waiting_on_customer: { label: 'Waiting on Customer', color: 'bg-yellow-100 text-yellow-800' },
+    waiting_on_agent: { label: 'Waiting on Agent', color: 'bg-orange-100 text-orange-800' },
+    escalated: { label: 'Escalated', color: 'bg-red-100 text-red-800' },
+    resolved: { label: 'Resolved', color: 'bg-green-100 text-green-800' },
+    closed: { label: 'Closed', color: 'bg-gray-100 text-gray-800' },
+    reopened: { label: 'Reopened', color: 'bg-blue-100 text-blue-800' },
+};
+
+const config = statusConfig[props.status] || { label: props.status, 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>

package/src/components/TagSelect.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+    tags: { type: Array, required: true },
+    modelValue: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const search = ref('');
+
+const filteredTags = computed(() => {
+    if (!search.value) return props.tags;
+    const q = search.value.toLowerCase();
+    return props.tags.filter(t => t.name.toLowerCase().includes(q));
+});
+
+function toggle(tagId) {
+    const current = [...props.modelValue];
+    const index = current.indexOf(tagId);
+    if (index >= 0) {
+        current.splice(index, 1);
+    } else {
+        current.push(tagId);
+    }
+    emit('update:modelValue', current);
+}
+
+function isSelected(tagId) {
+    return props.modelValue.includes(tagId);
+}
+</script>
+
+<template>
+    <div>
+        <label class="mb-1 block text-xs font-medium text-gray-600">Tags</label>
+        <input v-model="search" type="text" placeholder="Filter tags..."
+               class="mb-2 w-full rounded-md border border-gray-300 px-2 py-1 text-xs focus:border-blue-500 focus:outline-none" />
+        <div class="flex flex-wrap gap-1">
+            <button v-for="tag in filteredTags" :key="tag.id" @click="toggle(tag.id)"
+                    :class="['rounded-full px-2 py-0.5 text-xs font-medium transition-colors',
+                             isSelected(tag.id) ? 'bg-blue-100 text-blue-700 ring-1 ring-blue-300' : 'bg-gray-100 text-gray-600 hover:bg-gray-200']"
+                    :style="tag.color ? { backgroundColor: isSelected(tag.id) ? tag.color + '33' : undefined, color: isSelected(tag.id) ? tag.color : undefined } : {}">
+                {{ tag.name }}
+            </button>
+        </div>
+    </div>
+</template>

package/src/components/TicketFilters.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { reactive, watch } from 'vue';
+
+const props = defineProps({
+    statuses: { type: Array, default: () => ['open', 'in_progress', 'waiting_on_customer', 'waiting_on_agent', 'escalated', 'resolved', 'closed'] },
+    priorities: { type: Array, default: () => ['low', 'medium', 'high', 'urgent', 'critical'] },
+    agents: { type: Array, default: () => [] },
+    departments: { type: Array, default: () => [] },
+    modelValue: { type: Object, default: () => ({}) },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const filters = reactive({
+    status: props.modelValue.status || '',
+    priority: props.modelValue.priority || '',
+    assigned_to: props.modelValue.assigned_to || '',
+    department_id: props.modelValue.department_id || '',
+    search: props.modelValue.search || '',
+});
+
+watch(filters, (val) => {
+    emit('update:modelValue', { ...val });
+}, { deep: true });
+</script>
+
+<template>
+    <div class="flex flex-wrap items-center gap-3">
+        <input v-model="filters.search" type="text" placeholder="Search tickets..."
+               class="rounded-md border border-gray-300 px-3 py-1.5 text-sm focus:border-blue-500 focus:outline-none" />
+
+        <select v-model="filters.status" class="rounded-md border border-gray-300 px-2 py-1.5 text-sm">
+            <option value="">All Statuses</option>
+            <option v-for="s in statuses" :key="s" :value="s">{{ s.replace(/_/g, ' ') }}</option>
+        </select>
+
+        <select v-model="filters.priority" class="rounded-md border border-gray-300 px-2 py-1.5 text-sm">
+            <option value="">All Priorities</option>
+            <option v-for="p in priorities" :key="p" :value="p">{{ p }}</option>
+        </select>
+
+        <select v-if="agents.length" v-model="filters.assigned_to" class="rounded-md border border-gray-300 px-2 py-1.5 text-sm">
+            <option value="">All Agents</option>
+            <option v-for="a in agents" :key="a.id" :value="a.id">{{ a.name }}</option>
+        </select>
+
+        <select v-if="departments.length" v-model="filters.department_id" class="rounded-md border border-gray-300 px-2 py-1.5 text-sm">
+            <option value="">All Departments</option>
+            <option v-for="d in departments" :key="d.id" :value="d.id">{{ d.name }}</option>
+        </select>
+    </div>
+</template>

package/src/components/TicketList.vue

@@ -0,0 +1,51 @@
+<script setup>
+import StatusBadge from './StatusBadge.vue';
+import PriorityBadge from './PriorityBadge.vue';
+import { Link } from '@inertiajs/vue3';
+
+defineProps({
+    tickets: { type: Object, required: true },
+    routePrefix: { type: String, default: 'escalated.customer.tickets' },
+    showAssignee: { type: Boolean, default: false },
+});
+</script>
+
+<template>
+    <div class="overflow-hidden rounded-lg border border-gray-200 bg-white">
+        <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Reference</th>
+                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Subject</th>
+                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Status</th>
+                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Priority</th>
+                    <th v-if="showAssignee" class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Assignee</th>
+                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Created</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200">
+                <tr v-for="ticket in tickets.data" :key="ticket.id" class="hover:bg-gray-50">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm font-medium text-gray-900">
+                        <Link :href="route(`.show`, ticket.reference)" class="text-indigo-600 hover:text-indigo-900">
+                            {{ ticket.reference }}
+                        </Link>
+                    </td>
+                    <td class="px-4 py-3 text-sm text-gray-900">{{ ticket.subject }}</td>
+                    <td class="px-4 py-3"><StatusBadge :status="ticket.status" /></td>
+                    <td class="px-4 py-3"><PriorityBadge :priority="ticket.priority" /></td>
+                    <td v-if="showAssignee" class="px-4 py-3 text-sm text-gray-500">
+                        {{ ticket.assignee?.name || 'Unassigned' }}
+                    </td>
+                    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500">
+                        {{ new Date(ticket.created_at).toLocaleDateString() }}
+                    </td>
+                </tr>
+                <tr v-if="!tickets.data?.length">
+                    <td :colspan="showAssignee ? 6 : 5" class="px-4 py-8 text-center text-sm text-gray-500">
+                        No tickets found.
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>

package/src/components/TicketSidebar.vue

@@ -0,0 +1,70 @@
+<script setup>
+import StatusBadge from './StatusBadge.vue';
+import PriorityBadge from './PriorityBadge.vue';
+import SlaTimer from './SlaTimer.vue';
+import AssigneeSelect from './AssigneeSelect.vue';
+import TagSelect from './TagSelect.vue';
+import ActivityTimeline from './ActivityTimeline.vue';
+
+defineProps({
+    ticket: { type: Object, required: true },
+    agents: { type: Array, default: () => [] },
+    tags: { type: Array, default: () => [] },
+    activities: { type: Array, default: () => [] },
+    editable: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['assign', 'tags', 'priority', 'department', 'status']);
+</script>
+
+<template>
+    <aside class="space-y-4">
+        <div class="rounded-lg border border-gray-200 bg-white p-4">
+            <h3 class="mb-3 text-sm font-semibold text-gray-900">Details</h3>
+            <dl class="space-y-2 text-sm">
+                <div class="flex justify-between">
+                    <dt class="text-gray-500">Status</dt>
+                    <dd><StatusBadge :status="ticket.status" /></dd>
+                </div>
+                <div class="flex justify-between">
+                    <dt class="text-gray-500">Priority</dt>
+                    <dd><PriorityBadge :priority="ticket.priority" /></dd>
+                </div>
+                <div class="flex justify-between">
+                    <dt class="text-gray-500">Reference</dt>
+                    <dd class="font-mono text-xs">{{ ticket.reference }}</dd>
+                </div>
+                <div v-if="ticket.department" class="flex justify-between">
+                    <dt class="text-gray-500">Department</dt>
+                    <dd>{{ ticket.department.name }}</dd>
+                </div>
+                <div class="flex justify-between">
+                    <dt class="text-gray-500">Created</dt>
+                    <dd>{{ new Date(ticket.created_at).toLocaleDateString() }}</dd>
+                </div>
+            </dl>
+        </div>
+
+        <div v-if="ticket.first_response_due_at || ticket.resolution_due_at" class="space-y-2">
+            <SlaTimer v-if="ticket.first_response_due_at" :due-at="ticket.first_response_due_at"
+                      :breached="ticket.sla_first_response_breached" label="First Response" />
+            <SlaTimer v-if="ticket.resolution_due_at" :due-at="ticket.resolution_due_at"
+                      :breached="ticket.sla_resolution_breached" label="Resolution" />
+        </div>
+
+        <div v-if="editable && agents.length" class="rounded-lg border border-gray-200 bg-white p-4">
+            <AssigneeSelect :agents="agents" :model-value="ticket.assigned_to"
+                            @update:model-value="emit('assign', $event)" />
+        </div>
+
+        <div v-if="editable && tags.length" class="rounded-lg border border-gray-200 bg-white p-4">
+            <TagSelect :tags="tags" :model-value="(ticket.tags || []).map(t => t.id)"
+                       @update:model-value="emit('tags', $event)" />
+        </div>
+
+        <div v-if="activities.length" class="rounded-lg border border-gray-200 bg-white p-4">
+            <h3 class="mb-3 text-sm font-semibold text-gray-900">Activity</h3>
+            <ActivityTimeline :activities="activities" />
+        </div>
+    </aside>
+</template>

package/src/index.js

@@ -0,0 +1,19 @@
+// Plugin
+export { EscalatedPlugin } from './plugin'
+
+// Components
+export { default as ActivityTimeline } from './components/ActivityTimeline.vue'
+export { default as AssigneeSelect } from './components/AssigneeSelect.vue'
+export { default as AttachmentList } from './components/AttachmentList.vue'
+export { default as EscalatedLayout } from './components/EscalatedLayout.vue'
+export { default as FileDropzone } from './components/FileDropzone.vue'
+export { default as PriorityBadge } from './components/PriorityBadge.vue'
+export { default as ReplyComposer } from './components/ReplyComposer.vue'
+export { default as ReplyThread } from './components/ReplyThread.vue'
+export { default as SlaTimer } from './components/SlaTimer.vue'
+export { default as StatsCard } from './components/StatsCard.vue'
+export { default as StatusBadge } from './components/StatusBadge.vue'
+export { default as TagSelect } from './components/TagSelect.vue'
+export { default as TicketFilters } from './components/TicketFilters.vue'
+export { default as TicketList } from './components/TicketList.vue'
+export { default as TicketSidebar } from './components/TicketSidebar.vue'

package/src/pages/Admin/CannedResponses/Index.vue

@@ -0,0 +1,58 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm, router } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+defineProps({ responses: Array });
+
+const showForm = ref(false);
+const form = useForm({ title: '', body: '', category: '', is_shared: true });
+
+function create() {
+    form.post(route('escalated.admin.canned-responses.store'), {
+        onSuccess: () => { form.reset(); showForm.value = false; },
+    });
+}
+
+function destroy(id) {
+    if (confirm('Delete this canned response?')) {
+        router.delete(route('escalated.admin.canned-responses.destroy', id));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Canned Responses">
+        <div class="mb-4 flex justify-end">
+            <button @click="showForm = !showForm" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
+                {{ showForm ? 'Cancel' : 'Add Response' }}
+            </button>
+        </div>
+        <form v-if="showForm" @submit.prevent="create" class="mb-6 space-y-3 rounded-lg border border-gray-200 bg-white p-4">
+            <input v-model="form.title" type="text" placeholder="Title" required class="w-full rounded-lg border-gray-300 shadow-sm" />
+            <textarea v-model="form.body" rows="4" placeholder="Response body..." required class="w-full rounded-lg border-gray-300 shadow-sm"></textarea>
+            <div class="flex gap-3">
+                <input v-model="form.category" type="text" placeholder="Category (optional)" class="rounded-lg border-gray-300 shadow-sm" />
+                <label class="flex items-center gap-2">
+                    <input v-model="form.is_shared" type="checkbox" class="rounded border-gray-300" />
+                    <span class="text-sm text-gray-700">Shared</span>
+                </label>
+                <button type="submit" :disabled="form.processing" class="ml-auto rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">Create</button>
+            </div>
+        </form>
+        <div class="space-y-3">
+            <div v-for="resp in responses" :key="resp.id" class="rounded-lg border border-gray-200 bg-white p-4">
+                <div class="mb-2 flex items-center justify-between">
+                    <div>
+                        <span class="font-medium text-gray-900">{{ resp.title }}</span>
+                        <span v-if="resp.category" class="ml-2 rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600">{{ resp.category }}</span>
+                    </div>
+                    <div>
+                        <button @click="destroy(resp.id)" class="text-sm text-red-600 hover:text-red-900">Delete</button>
+                    </div>
+                </div>
+                <p class="text-sm text-gray-600">{{ resp.body }}</p>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Departments/Form.vue

@@ -0,0 +1,50 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm } from '@inertiajs/vue3';
+
+const props = defineProps({ department: { type: Object, default: null } });
+
+const form = useForm({
+    name: props.department?.name || '',
+    slug: props.department?.slug || '',
+    description: props.department?.description || '',
+    is_active: props.department?.is_active ?? true,
+});
+
+function submit() {
+    if (props.department) {
+        form.put(route('escalated.admin.departments.update', props.department.id));
+    } else {
+        form.post(route('escalated.admin.departments.store'));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="department ? 'Edit Department' : 'New Department'">
+        <form @submit.prevent="submit" class="mx-auto max-w-lg space-y-4 rounded-lg border border-gray-200 bg-white p-6">
+            <div>
+                <label class="block text-sm font-medium text-gray-700">Name</label>
+                <input v-model="form.name" type="text" required class="mt-1 w-full rounded-lg border-gray-300 shadow-sm" />
+                <div v-if="form.errors.name" class="mt-1 text-sm text-red-600">{{ form.errors.name }}</div>
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700">Slug</label>
+                <input v-model="form.slug" type="text" class="mt-1 w-full rounded-lg border-gray-300 shadow-sm" placeholder="Auto-generated if empty" />
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700">Description</label>
+                <textarea v-model="form.description" rows="3" class="mt-1 w-full rounded-lg border-gray-300 shadow-sm"></textarea>
+            </div>
+            <label class="flex items-center gap-2">
+                <input v-model="form.is_active" type="checkbox" class="rounded border-gray-300" />
+                <span class="text-sm text-gray-700">Active</span>
+            </label>
+            <div class="flex justify-end">
+                <button type="submit" :disabled="form.processing" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50">
+                    {{ department ? 'Update' : 'Create' }}
+                </button>
+            </div>
+        </form>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Departments/Index.vue

@@ -0,0 +1,49 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+
+defineProps({ departments: Array });
+
+function destroy(id) {
+    if (confirm('Delete this department?')) {
+        router.delete(route('escalated.admin.departments.destroy', id));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Departments">
+        <div class="mb-4 flex justify-end">
+            <Link :href="route('escalated.admin.departments.create')" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
+                Add Department
+            </Link>
+        </div>
+        <div class="overflow-hidden rounded-lg border border-gray-200 bg-white">
+            <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
+                    <tr>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Name</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Tickets</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Agents</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Active</th>
+                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-200">
+                    <tr v-for="dept in departments" :key="dept.id">
+                        <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ dept.name }}</td>
+                        <td class="px-4 py-3 text-sm text-gray-500">{{ dept.tickets_count }}</td>
+                        <td class="px-4 py-3 text-sm text-gray-500">{{ dept.agents_count }}</td>
+                        <td class="px-4 py-3 text-sm">
+                            <span :class="dept.is_active ? 'text-green-600' : 'text-gray-400'">{{ dept.is_active ? 'Yes' : 'No' }}</span>
+                        </td>
+                        <td class="px-4 py-3 text-right text-sm">
+                            <Link :href="route('escalated.admin.departments.edit', dept.id)" class="text-indigo-600 hover:text-indigo-900">Edit</Link>
+                            <button @click="destroy(dept.id)" class="ml-3 text-red-600 hover:text-red-900">Delete</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>