@escalated-dev/escalated 0.6.0 → 0.7.1

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

@@ -0,0 +1,134 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import AgentLoadIndicator from '../../../components/AgentLoadIndicator.vue';
+import { useForm } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+defineProps({ capacities: Array });
+
+const editingId = ref(null);
+const editForm = useForm({ max_concurrent: 10 });
+
+function startEdit(cap) {
+    editingId.value = cap.id;
+    editForm.max_concurrent = cap.max_concurrent;
+}
+
+function saveEdit(id) {
+    editForm.put(route('escalated.admin.capacity.update', id), {
+        preserveScroll: true,
+        onSuccess: () => {
+            editingId.value = null;
+        },
+    });
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Agent Capacity">
+        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
+            <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
+                <thead>
+                    <tr class="bg-[var(--esc-panel-hover)]">
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Agent
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Channel
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Max Concurrent
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Current Load
+                        </th>
+                        <th
+                            class="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Actions
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                    <tr v-if="!capacities?.length">
+                        <td colspan="5" class="px-4 py-12 text-center">
+                            <svg
+                                class="mx-auto mb-3 h-8 w-8 text-[var(--esc-panel-text-muted)]"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+                                />
+                            </svg>
+                            <p class="text-sm text-[var(--esc-panel-text-muted)]">No capacity records yet</p>
+                            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                                Capacity records are created when agents are assigned tickets
+                            </p>
+                        </td>
+                    </tr>
+                    <tr
+                        v-for="cap in capacities"
+                        :key="cap.id"
+                        class="transition-colors hover:bg-[var(--esc-panel-hover)]"
+                    >
+                        <td class="px-4 py-3 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                            {{ cap.agent_name }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">{{ cap.channel }}</td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-secondary)]">
+                            <template v-if="editingId === cap.id">
+                                <form class="flex items-center gap-2" @submit.prevent="saveEdit(cap.id)">
+                                    <input
+                                        v-model.number="editForm.max_concurrent"
+                                        type="number"
+                                        min="1"
+                                        max="999"
+                                        class="w-20 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                                    />
+                                    <button
+                                        type="submit"
+                                        class="text-xs text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
+                                    >
+                                        Save
+                                    </button>
+                                    <button
+                                        type="button"
+                                        class="text-xs text-[var(--esc-panel-text-tertiary)] hover:text-[var(--esc-panel-text-secondary)]"
+                                        @click="editingId = null"
+                                    >
+                                        Cancel
+                                    </button>
+                                </form>
+                            </template>
+                            <template v-else>{{ cap.max_concurrent }}</template>
+                        </td>
+                        <td class="px-4 py-3">
+                            <AgentLoadIndicator :current="cap.current_count" :max="cap.max_concurrent" />
+                        </td>
+                        <td class="px-4 py-3 text-right text-sm">
+                            <button
+                                class="text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
+                                @click="startEdit(cap)"
+                            >
+                                Edit
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>

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

@@ -0,0 +1,195 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm } from '@inertiajs/vue3';
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+    field: { type: Object, default: null },
+    contexts: { type: Array, default: () => ['ticket', 'user', 'organization'] },
+});
+
+const form = useForm({
+    name: props.field?.name || '',
+    type: props.field?.type || 'text',
+    context: props.field?.context || 'ticket',
+    options: props.field?.options || [],
+    required: props.field?.required ?? false,
+    placeholder: props.field?.placeholder || '',
+    description: props.field?.description || '',
+    position: props.field?.position ?? 0,
+    active: props.field?.active ?? true,
+});
+
+const newOption = ref('');
+
+const showOptionsEditor = computed(() => ['select', 'multi_select'].includes(form.type));
+
+function addOption() {
+    const val = newOption.value.trim();
+    if (val && !form.options.includes(val)) {
+        form.options.push(val);
+        newOption.value = '';
+    }
+}
+
+function removeOption(index) {
+    form.options.splice(index, 1);
+}
+
+function submit() {
+    if (props.field) {
+        form.put(route('escalated.admin.custom-fields.update', props.field.id));
+    } else {
+        form.post(route('escalated.admin.custom-fields.store'));
+    }
+}
+
+const fieldTypes = [
+    { value: 'text', label: 'Text' },
+    { value: 'textarea', label: 'Textarea' },
+    { value: 'select', label: 'Select' },
+    { value: 'multi_select', label: 'Multi-Select' },
+    { value: 'checkbox', label: 'Checkbox' },
+    { value: 'date', label: 'Date' },
+    { value: 'number', label: 'Number' },
+];
+</script>
+
+<template>
+    <EscalatedLayout :title="field ? 'Edit Custom Field' : 'New Custom Field'">
+        <form
+            class="mx-auto max-w-lg space-y-5 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6"
+            @submit.prevent="submit"
+        >
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Name</label>
+                <input
+                    v-model="form.name"
+                    type="text"
+                    required
+                    class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                />
+                <div v-if="form.errors.name" class="mt-1 text-sm text-rose-400">{{ form.errors.name }}</div>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Type</label>
+                <select
+                    v-model="form.type"
+                    required
+                    class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                >
+                    <option v-for="ft in fieldTypes" :key="ft.value" :value="ft.value">{{ ft.label }}</option>
+                </select>
+                <div v-if="form.errors.type" class="mt-1 text-sm text-rose-400">{{ form.errors.type }}</div>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Context</label>
+                <select
+                    v-model="form.context"
+                    required
+                    class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                >
+                    <option v-for="ctx in contexts" :key="ctx" :value="ctx">
+                        {{ ctx.charAt(0).toUpperCase() + ctx.slice(1) }}
+                    </option>
+                </select>
+                <div v-if="form.errors.context" class="mt-1 text-sm text-rose-400">{{ form.errors.context }}</div>
+            </div>
+
+            <!-- Options editor for select/multi_select -->
+            <div v-if="showOptionsEditor">
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Options</label>
+                <div class="mt-1 space-y-2">
+                    <div v-for="(opt, idx) in form.options" :key="idx" class="flex items-center gap-2">
+                        <span
+                            class="flex-1 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-1.5 text-sm text-[var(--esc-panel-text-secondary)]"
+                            >{{ opt }}</span
+                        >
+                        <button
+                            type="button"
+                            class="text-rose-400 hover:text-rose-300 text-sm"
+                            @click="removeOption(idx)"
+                        >
+                            Remove
+                        </button>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <input
+                            v-model="newOption"
+                            type="text"
+                            placeholder="Add option..."
+                            class="flex-1 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                            @keydown.enter.prevent="addOption"
+                        />
+                        <button
+                            type="button"
+                            class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-3 py-1.5 text-sm font-medium text-[var(--esc-panel-text-secondary)] transition-colors hover:bg-[var(--esc-panel-hover)]"
+                            @click="addOption"
+                        >
+                            Add
+                        </button>
+                    </div>
+                </div>
+                <div v-if="form.errors.options" class="mt-1 text-sm text-rose-400">{{ form.errors.options }}</div>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Placeholder</label>
+                <input
+                    v-model="form.placeholder"
+                    type="text"
+                    class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                />
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Description</label>
+                <textarea
+                    v-model="form.description"
+                    rows="2"
+                    class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                ></textarea>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Position</label>
+                <input
+                    v-model.number="form.position"
+                    type="number"
+                    min="0"
+                    class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                />
+            </div>
+
+            <label class="flex items-center gap-2">
+                <input
+                    v-model="form.required"
+                    type="checkbox"
+                    class="rounded border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] text-cyan-500 focus:ring-[var(--esc-panel-border-input)]"
+                />
+                <span class="text-sm text-[var(--esc-panel-text-secondary)]">Required</span>
+            </label>
+
+            <label class="flex items-center gap-2">
+                <input
+                    v-model="form.active"
+                    type="checkbox"
+                    class="rounded border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] text-cyan-500 focus:ring-[var(--esc-panel-border-input)]"
+                />
+                <span class="text-sm text-[var(--esc-panel-text-secondary)]">Active</span>
+            </label>
+
+            <div class="flex justify-end">
+                <button
+                    type="submit"
+                    :disabled="form.processing"
+                    class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-5 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)] disabled:opacity-50"
+                >
+                    {{ field ? 'Update' : 'Create' }}
+                </button>
+            </div>
+        </form>
+    </EscalatedLayout>
+</template>

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

@@ -0,0 +1,134 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+
+defineProps({ fields: Array });
+
+const typeLabels = {
+    text: 'Text',
+    textarea: 'Textarea',
+    select: 'Select',
+    multi_select: 'Multi-Select',
+    checkbox: 'Checkbox',
+    date: 'Date',
+    number: 'Number',
+};
+
+function destroy(id) {
+    if (confirm('Delete this custom field?')) {
+        router.delete(route('escalated.admin.custom-fields.destroy', id));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Custom Fields">
+        <div class="mb-4 flex justify-end">
+            <Link
+                :href="route('escalated.admin.custom-fields.create')"
+                class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)]"
+            >
+                Add Field
+            </Link>
+        </div>
+        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
+            <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
+                <thead>
+                    <tr class="bg-[var(--esc-panel-hover)]">
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Name
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Type
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Context
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Required
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Position
+                        </th>
+                        <th
+                            class="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Actions
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                    <tr v-if="!fields?.length">
+                        <td colspan="6" class="px-4 py-12 text-center">
+                            <svg
+                                class="mx-auto mb-3 h-8 w-8 text-[var(--esc-panel-text-muted)]"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75"
+                                />
+                            </svg>
+                            <p class="text-sm text-[var(--esc-panel-text-muted)]">No custom fields yet</p>
+                            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                                Create custom fields to capture additional data on tickets, users, and organizations
+                            </p>
+                        </td>
+                    </tr>
+                    <tr
+                        v-for="field in fields"
+                        :key="field.id"
+                        class="transition-colors hover:bg-[var(--esc-panel-hover)]"
+                    >
+                        <td class="px-4 py-3 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                            {{ field.name }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ typeLabels[field.type] || field.type }}
+                        </td>
+                        <td class="px-4 py-3 text-sm">
+                            <span
+                                class="inline-flex items-center rounded-full bg-[var(--esc-panel-hover)] px-2 py-0.5 text-xs font-medium text-[var(--esc-panel-text-secondary)]"
+                                >{{ field.context }}</span
+                            >
+                        </td>
+                        <td class="px-4 py-3 text-sm">
+                            <span
+                                v-if="field.required"
+                                class="inline-flex items-center rounded-full bg-cyan-500/10 px-2 py-0.5 text-xs font-medium text-[var(--esc-panel-accent)] ring-1 ring-cyan-500/20"
+                                >Required</span
+                            >
+                            <span v-else class="text-[var(--esc-panel-text-muted)]">-</span>
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">{{ field.position }}</td>
+                        <td class="px-4 py-3 text-right text-sm">
+                            <Link
+                                :href="route('escalated.admin.custom-fields.edit', field.id)"
+                                class="text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
+                            >
+                                Edit
+                            </Link>
+                            <button class="ml-3 text-rose-400 hover:text-rose-300" @click="destroy(field.id)">
+                                Delete
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>