@escalated-dev/escalated 0.8.0 → 0.11.1

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

@@ -0,0 +1,280 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link, useForm } from '@inertiajs/vue3';
+
+/**
+ * Create and edit a time-based automation.
+ *
+ * The vocabulary here is the runner's: every field, operator and action type
+ * below is one the backend actually evaluates. Offering anything else would
+ * produce a rule that saves cleanly and then silently never matches.
+ */
+const props = defineProps({
+    automation: { type: Object, default: null },
+});
+
+/** Fields that count hours take an operator and a number; the rest take a value. */
+const TIME_FIELDS = ['hours_since_created', 'hours_since_updated', 'hours_since_assigned'];
+
+const FIELDS = [
+    { value: 'hours_since_created', label: 'Hours since created' },
+    { value: 'hours_since_updated', label: 'Hours since last update' },
+    { value: 'hours_since_assigned', label: 'Hours since assigned' },
+    { value: 'status', label: 'Status' },
+    { value: 'priority', label: 'Priority' },
+    { value: 'assigned', label: 'Assignment' },
+    { value: 'ticket_type', label: 'Ticket type' },
+    { value: 'subject_contains', label: 'Subject contains' },
+];
+
+const OPERATORS = [
+    { value: '>', label: 'more than' },
+    { value: '>=', label: 'at least' },
+    { value: '<', label: 'fewer than' },
+    { value: '<=', label: 'at most' },
+    { value: '=', label: 'exactly' },
+];
+
+const ACTIONS = [
+    { value: 'change_status', label: 'Change status' },
+    { value: 'change_priority', label: 'Change priority' },
+    { value: 'assign', label: 'Assign to agent' },
+    { value: 'add_tag', label: 'Add tag' },
+    { value: 'set_ticket_type', label: 'Set ticket type' },
+    { value: 'add_note', label: 'Add internal note' },
+];
+
+const ASSIGNMENT_VALUES = [
+    { value: 'assigned', label: 'Assigned' },
+    { value: 'unassigned', label: 'Unassigned' },
+];
+
+const form = useForm({
+    name: props.automation?.name ?? '',
+    conditions: (props.automation?.conditions ?? []).map((c) => ({
+        field: c.field ?? 'hours_since_updated',
+        operator: c.operator ?? '>',
+        value: c.value ?? '',
+    })),
+    actions: (props.automation?.actions ?? []).map((a) => ({
+        type: a.type ?? 'change_status',
+        value: a.value ?? '',
+    })),
+    active: props.automation?.active ?? true,
+});
+
+// A new automation starts with one of each, because an empty one cannot be
+// saved: the backend requires at least one condition and one action.
+if (!form.conditions.length) {
+    form.conditions.push({ field: 'hours_since_updated', operator: '>', value: 24 });
+}
+
+if (!form.actions.length) {
+    form.actions.push({ type: 'change_status', value: '' });
+}
+
+function isTimeField(field) {
+    return TIME_FIELDS.includes(field);
+}
+
+function addCondition() {
+    form.conditions.push({ field: 'hours_since_updated', operator: '>', value: 24 });
+}
+
+function removeCondition(index) {
+    form.conditions.splice(index, 1);
+}
+
+function addAction() {
+    form.actions.push({ type: 'change_status', value: '' });
+}
+
+function removeAction(index) {
+    form.actions.splice(index, 1);
+}
+
+function submit() {
+    if (props.automation?.id) {
+        form.put(route('escalated.admin.automations.update', props.automation.id));
+    } else {
+        form.post(route('escalated.admin.automations.store'));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="automation ? 'Edit Automation' : 'Create Automation'">
+        <div class="mb-4">
+            <Link
+                :href="route('escalated.admin.automations.index')"
+                class="text-xs text-[var(--esc-panel-text-muted)] transition-colors hover:text-[var(--esc-panel-accent)]"
+            >
+                &larr; Back to automations
+            </Link>
+            <h2 class="mt-2 text-lg font-semibold text-[var(--esc-panel-text-secondary)]">
+                {{ automation ? 'Edit Automation' : 'Create Automation' }}
+            </h2>
+            <p class="text-xs text-[var(--esc-panel-text-muted)]">
+                Runs on a schedule against open tickets. Every condition must match for the actions to apply.
+            </p>
+        </div>
+
+        <form class="space-y-6" @submit.prevent="submit">
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-4">
+                <label class="block text-xs font-medium text-[var(--esc-panel-text-muted)]" for="automation-name">
+                    Name
+                </label>
+                <input
+                    id="automation-name"
+                    v-model="form.name"
+                    type="text"
+                    required
+                    maxlength="255"
+                    placeholder="Escalate tickets untouched for a day"
+                    class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-bg)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-accent)] focus:outline-none"
+                />
+                <p v-if="form.errors.name" class="mt-1 text-xs text-red-400">{{ form.errors.name }}</p>
+
+                <label class="mt-4 flex items-center gap-2 text-sm text-[var(--esc-panel-text-secondary)]">
+                    <input v-model="form.active" type="checkbox" class="rounded border-[var(--esc-panel-border)]" />
+                    Active
+                </label>
+            </div>
+
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-4">
+                <div class="mb-3 flex items-center justify-between">
+                    <div>
+                        <h3 class="text-sm font-semibold text-[var(--esc-panel-text-secondary)]">When</h3>
+                        <p class="text-xs text-[var(--esc-panel-text-muted)]">All conditions must match</p>
+                    </div>
+                    <button
+                        type="button"
+                        class="rounded-lg border border-[var(--esc-panel-border)] px-3 py-1.5 text-xs font-medium text-[var(--esc-panel-text-secondary)] transition-colors hover:bg-[var(--esc-panel-hover)]"
+                        @click="addCondition"
+                    >
+                        Add condition
+                    </button>
+                </div>
+
+                <div v-for="(condition, i) in form.conditions" :key="`condition-${i}`" class="mb-2 flex gap-2">
+                    <select
+                        v-model="condition.field"
+                        :aria-label="`Condition ${i + 1} field`"
+                        class="rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-bg)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)]"
+                    >
+                        <option v-for="field in FIELDS" :key="field.value" :value="field.value">
+                            {{ field.label }}
+                        </option>
+                    </select>
+
+                    <select
+                        v-if="isTimeField(condition.field)"
+                        v-model="condition.operator"
+                        :aria-label="`Condition ${i + 1} operator`"
+                        class="rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-bg)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)]"
+                    >
+                        <option v-for="operator in OPERATORS" :key="operator.value" :value="operator.value">
+                            {{ operator.label }}
+                        </option>
+                    </select>
+
+                    <select
+                        v-if="condition.field === 'assigned'"
+                        v-model="condition.value"
+                        :aria-label="`Condition ${i + 1} value`"
+                        class="flex-1 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-bg)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)]"
+                    >
+                        <option v-for="option in ASSIGNMENT_VALUES" :key="option.value" :value="option.value">
+                            {{ option.label }}
+                        </option>
+                    </select>
+                    <input
+                        v-else
+                        v-model="condition.value"
+                        :type="isTimeField(condition.field) ? 'number' : 'text'"
+                        :min="isTimeField(condition.field) ? 0 : undefined"
+                        :aria-label="`Condition ${i + 1} value`"
+                        :placeholder="isTimeField(condition.field) ? 'hours' : 'value'"
+                        class="flex-1 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-bg)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)]"
+                    />
+
+                    <button
+                        type="button"
+                        :aria-label="`Remove condition ${i + 1}`"
+                        class="rounded-lg px-2 text-xs text-[var(--esc-panel-text-muted)] transition-colors hover:text-red-400"
+                        :disabled="form.conditions.length === 1"
+                        @click="removeCondition(i)"
+                    >
+                        Remove
+                    </button>
+                </div>
+
+                <p v-if="form.errors.conditions" class="mt-1 text-xs text-red-400">{{ form.errors.conditions }}</p>
+            </div>
+
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-4">
+                <div class="mb-3 flex items-center justify-between">
+                    <div>
+                        <h3 class="text-sm font-semibold text-[var(--esc-panel-text-secondary)]">Then</h3>
+                        <p class="text-xs text-[var(--esc-panel-text-muted)]">Applied to every matching ticket</p>
+                    </div>
+                    <button
+                        type="button"
+                        class="rounded-lg border border-[var(--esc-panel-border)] px-3 py-1.5 text-xs font-medium text-[var(--esc-panel-text-secondary)] transition-colors hover:bg-[var(--esc-panel-hover)]"
+                        @click="addAction"
+                    >
+                        Add action
+                    </button>
+                </div>
+
+                <div v-for="(action, i) in form.actions" :key="`action-${i}`" class="mb-2 flex gap-2">
+                    <select
+                        v-model="action.type"
+                        :aria-label="`Action ${i + 1} type`"
+                        class="rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-bg)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)]"
+                    >
+                        <option v-for="option in ACTIONS" :key="option.value" :value="option.value">
+                            {{ option.label }}
+                        </option>
+                    </select>
+
+                    <input
+                        v-model="action.value"
+                        type="text"
+                        :aria-label="`Action ${i + 1} value`"
+                        placeholder="value"
+                        class="flex-1 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-bg)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)]"
+                    />
+
+                    <button
+                        type="button"
+                        :aria-label="`Remove action ${i + 1}`"
+                        class="rounded-lg px-2 text-xs text-[var(--esc-panel-text-muted)] transition-colors hover:text-red-400"
+                        :disabled="form.actions.length === 1"
+                        @click="removeAction(i)"
+                    >
+                        Remove
+                    </button>
+                </div>
+
+                <p v-if="form.errors.actions" class="mt-1 text-xs text-red-400">{{ form.errors.actions }}</p>
+            </div>
+
+            <div class="flex items-center gap-3">
+                <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-4 py-2 text-sm font-medium text-white transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)] disabled:opacity-50"
+                >
+                    {{ automation ? 'Save changes' : 'Create automation' }}
+                </button>
+                <Link
+                    :href="route('escalated.admin.automations.index')"
+                    class="text-sm text-[var(--esc-panel-text-muted)] transition-colors hover:text-[var(--esc-panel-text-secondary)]"
+                >
+                    Cancel
+                </Link>
+            </div>
+        </form>
+    </EscalatedLayout>
+</template>

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

@@ -0,0 +1,230 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+
+/**
+ * Automations are the time-based half of the admin automation surface: a cron
+ * scan matches open tickets on how long they have been sitting and applies
+ * actions. Workflows are the event-driven half, and Macros are the agent's
+ * manual one. The three co-exist; none subsumes the others.
+ */
+defineProps({
+    automations: { type: Array, default: () => [] },
+});
+
+const FIELD_LABELS = {
+    hours_since_created: 'Hours since created',
+    hours_since_updated: 'Hours since updated',
+    hours_since_assigned: 'Hours since assigned',
+    status: 'Status',
+    priority: 'Priority',
+    assigned: 'Assignment',
+    ticket_type: 'Type',
+    subject_contains: 'Subject contains',
+};
+
+const ACTION_LABELS = {
+    change_status: 'Change status',
+    assign: 'Assign to',
+    add_tag: 'Add tag',
+    change_priority: 'Change priority',
+    add_note: 'Add internal note',
+    set_ticket_type: 'Set type',
+};
+
+function destroy(id) {
+    if (confirm('Delete this automation? This cannot be undone.')) {
+        router.delete(route('escalated.admin.automations.destroy', id));
+    }
+}
+
+function toggleActive(automation) {
+    router.put(route('escalated.admin.automations.update', automation.id), {
+        name: automation.name,
+        conditions: automation.conditions ?? [],
+        actions: automation.actions ?? [],
+        active: !automation.active,
+    });
+}
+
+/** A condition in the words an admin would use, not the words it is stored in. */
+function conditionSummary(condition) {
+    const label = FIELD_LABELS[condition?.field] ?? condition?.field ?? '';
+
+    if (!label) {
+        return '';
+    }
+
+    if (String(condition.field ?? '').startsWith('hours_since_')) {
+        return `${label} ${condition.operator ?? '>'} ${condition.value}`;
+    }
+
+    return `${label} is ${condition.value}`;
+}
+
+function actionSummary(action) {
+    const label = ACTION_LABELS[action?.type] ?? action?.type ?? '';
+
+    if (!label) {
+        return '';
+    }
+
+    return action.value === undefined || action.value === null || action.value === ''
+        ? label
+        : `${label}: ${action.value}`;
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Automations">
+        <div class="mb-4 flex items-center justify-between">
+            <div>
+                <h2 class="text-lg font-semibold text-[var(--esc-panel-text-secondary)]">Automations</h2>
+                <p class="text-xs text-[var(--esc-panel-text-muted)]">
+                    Time-based rules. A scheduled scan matches open tickets on how long they have been waiting and
+                    applies actions — for events as they happen, use Workflows.
+                </p>
+            </div>
+            <Link
+                :href="route('escalated.admin.automations.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)]"
+            >
+                Create Automation
+            </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)]"
+                        >
+                            When
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Then
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Status
+                        </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="!automations?.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="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                                />
+                            </svg>
+                            <p class="text-sm text-[var(--esc-panel-text-muted)]">No automations yet</p>
+                            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                                Chase tickets that have gone quiet — escalate after 24 hours, close after a week
+                            </p>
+                        </td>
+                    </tr>
+                    <tr
+                        v-for="automation in automations"
+                        :key="automation.id"
+                        class="transition-colors hover:bg-[var(--esc-panel-hover)]"
+                    >
+                        <td class="px-4 py-3">
+                            <Link
+                                :href="route('escalated.admin.automations.edit', automation.id)"
+                                class="text-sm font-medium text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-accent)]"
+                            >
+                                {{ automation.name }}
+                            </Link>
+                        </td>
+                        <td class="px-4 py-3">
+                            <div class="flex flex-wrap gap-1">
+                                <span
+                                    v-for="(condition, i) in automation.conditions ?? []"
+                                    :key="i"
+                                    class="rounded bg-[var(--esc-panel-hover)] px-2 py-0.5 text-[11px] text-[var(--esc-panel-text-muted)]"
+                                >
+                                    {{ conditionSummary(condition) }}
+                                </span>
+                                <span
+                                    v-if="!(automation.conditions ?? []).length"
+                                    class="text-[11px] text-[var(--esc-panel-text-muted)]"
+                                >
+                                    —
+                                </span>
+                            </div>
+                        </td>
+                        <td class="px-4 py-3">
+                            <div class="flex flex-wrap gap-1">
+                                <span
+                                    v-for="(action, i) in automation.actions ?? []"
+                                    :key="i"
+                                    class="rounded bg-[var(--esc-panel-accent)]/10 px-2 py-0.5 text-[11px] text-[var(--esc-panel-accent)]"
+                                >
+                                    {{ actionSummary(action) }}
+                                </span>
+                                <span
+                                    v-if="!(automation.actions ?? []).length"
+                                    class="text-[11px] text-[var(--esc-panel-text-muted)]"
+                                >
+                                    —
+                                </span>
+                            </div>
+                        </td>
+                        <td class="px-4 py-3">
+                            <button
+                                type="button"
+                                class="rounded px-2 py-0.5 text-[11px] font-medium transition-colors"
+                                :class="
+                                    automation.active
+                                        ? 'bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20'
+                                        : 'bg-gray-500/10 text-gray-400 hover:bg-gray-500/20'
+                                "
+                                @click="toggleActive(automation)"
+                            >
+                                {{ automation.active ? 'Active' : 'Paused' }}
+                            </button>
+                        </td>
+                        <td class="px-4 py-3 text-right">
+                            <Link
+                                :href="route('escalated.admin.automations.edit', automation.id)"
+                                class="text-xs font-medium text-[var(--esc-panel-text-muted)] transition-colors hover:text-[var(--esc-panel-accent)]"
+                            >
+                                Edit
+                            </Link>
+                            <button
+                                type="button"
+                                class="ml-3 text-xs font-medium text-[var(--esc-panel-text-muted)] transition-colors hover:text-red-400"
+                                @click="destroy(automation.id)"
+                            >
+                                Delete
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>