@escalated-dev/escalated 0.7.1 → 0.9.0

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

@@ -0,0 +1,145 @@
+<script setup>
+import { ref } from 'vue';
+import { router } from '@inertiajs/vue3';
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+
+const props = defineProps({
+    users: Object,
+    filters: { type: Object, default: () => ({}) },
+    currentUserId: { type: [Number, String], default: null },
+});
+
+const search = ref(props.filters?.search ?? '');
+
+function applySearch() {
+    router.get(
+        route('escalated.admin.users.index'),
+        { search: search.value },
+        { preserveState: true, preserveScroll: true },
+    );
+}
+
+function toggleRole(user, role) {
+    const value = role === 'admin' ? !user.is_admin : !user.is_agent;
+    router.patch(route('escalated.admin.users.role', user.id), { role, value }, { preserveScroll: true });
+}
+
+function isSelf(user) {
+    return props.currentUserId !== null && String(user.id) === String(props.currentUserId);
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Users">
+        <div class="mb-4 flex items-center justify-between gap-4">
+            <form class="flex-1 max-w-sm" @submit.prevent="applySearch">
+                <input
+                    v-model="search"
+                    type="search"
+                    placeholder="Search by name or email"
+                    class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] px-3 py-2 text-sm text-[var(--esc-panel-text)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-accent)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-accent)]"
+                />
+            </form>
+        </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)]"
+                        >
+                            User
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Email
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Admin
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Agent
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                    <tr v-if="!users?.data?.length">
+                        <td colspan="4" class="px-4 py-12 text-center text-sm text-[var(--esc-panel-text-muted)]">
+                            No users found.
+                        </td>
+                    </tr>
+                    <tr v-for="user in users?.data || []" :key="user.id" class="hover:bg-[var(--esc-panel-hover)]">
+                        <td class="whitespace-nowrap px-4 py-3 text-sm text-[var(--esc-panel-text)]">
+                            <span>{{ user.name || '—' }}</span>
+                            <span
+                                v-if="isSelf(user)"
+                                class="ml-2 rounded-full bg-[var(--esc-panel-accent)]/15 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-[var(--esc-panel-accent)]"
+                            >
+                                You
+                            </span>
+                        </td>
+                        <td class="whitespace-nowrap px-4 py-3 text-sm text-[var(--esc-panel-text-muted)]">
+                            {{ user.email }}
+                        </td>
+                        <td class="px-4 py-3">
+                            <button
+                                type="button"
+                                :disabled="isSelf(user) && user.is_admin"
+                                :title="isSelf(user) && user.is_admin ? 'You cannot remove your own admin role.' : ''"
+                                class="inline-flex h-6 w-11 items-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+                                :class="user.is_admin ? 'bg-indigo-600' : 'bg-gray-300'"
+                                @click="toggleRole(user, 'admin')"
+                            >
+                                <span
+                                    class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"
+                                    :class="user.is_admin ? 'translate-x-6' : 'translate-x-1'"
+                                />
+                            </button>
+                        </td>
+                        <td class="px-4 py-3">
+                            <button
+                                type="button"
+                                class="inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                                :class="user.is_agent ? 'bg-indigo-600' : 'bg-gray-300'"
+                                @click="toggleRole(user, 'agent')"
+                            >
+                                <span
+                                    class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"
+                                    :class="user.is_agent ? 'translate-x-6' : 'translate-x-1'"
+                                />
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div v-if="users?.links?.length > 3" class="mt-4 flex items-center justify-end gap-1">
+            <template v-for="(link, idx) in users.links" :key="idx">
+                <button
+                    v-if="link.url"
+                    type="button"
+                    class="rounded-md px-3 py-1 text-sm"
+                    :class="
+                        link.active
+                            ? 'bg-[var(--esc-panel-accent)] text-white'
+                            : 'text-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-hover)]'
+                    "
+                    @click="router.get(link.url, {}, { preserveState: true, preserveScroll: true })"
+                    v-html="link.label"
+                />
+                <span
+                    v-else
+                    class="rounded-md px-3 py-1 text-sm text-[var(--esc-panel-text-muted)]/40"
+                    v-html="link.label"
+                />
+            </template>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Workflows/Builder.vue

@@ -1,207 +1,207 @@
-<script setup>
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import WorkflowTriggerSelector from '../../../components/WorkflowTriggerSelector.vue';
-import WorkflowConditionBuilder from '../../../components/WorkflowConditionBuilder.vue';
-import WorkflowActionList from '../../../components/WorkflowActionList.vue';
-import { useForm } from '@inertiajs/vue3';
-import { ref, computed } from 'vue';
-
-const props = defineProps({
-    workflow: { type: Object, default: null },
-});
-
-const form = useForm({
-    name: props.workflow?.name || '',
-    description: props.workflow?.description || '',
-    trigger: props.workflow?.trigger || '',
-    conditions: props.workflow?.conditions || { match: 'all', conditions: [] },
-    actions: props.workflow?.actions || [],
-    active: props.workflow?.active ?? true,
-});
-
-const expandedStep = ref(props.workflow ? null : 1);
-
-function toggleStep(step) {
-    expandedStep.value = expandedStep.value === step ? null : step;
-}
-
-function submit() {
-    if (props.workflow) {
-        form.put(route('escalated.admin.workflows.update', props.workflow.id));
-    } else {
-        form.post(route('escalated.admin.workflows.store'));
-    }
-}
-
-const isValid = computed(() => {
-    return form.name && form.trigger && form.actions.length > 0;
-});
-
-const stepBorderColors = {
-    1: 'border-l-blue-500',
-    2: 'border-l-amber-500',
-    3: 'border-l-emerald-500',
-};
-
-const stepDotColors = {
-    1: 'bg-blue-500',
-    2: 'bg-amber-500',
-    3: 'bg-emerald-500',
-};
-
-const stepLabels = {
-    1: 'Trigger Event',
-    2: 'Conditions',
-    3: 'Actions',
-};
-
-const stepDescriptions = {
-    1: 'When this happens...',
-    2: 'Only if these conditions are met...',
-    3: 'Then do this...',
-};
-
-function stepHasData(step) {
-    switch (step) {
-        case 1:
-            return !!form.trigger;
-        case 2:
-            return form.conditions?.conditions?.length > 0;
-        case 3:
-            return form.actions?.length > 0;
-        default:
-            return false;
-    }
-}
-</script>
-
-<template>
-    <EscalatedLayout :title="workflow ? 'Edit Workflow' : 'Create Workflow'">
-        <form class="mx-auto max-w-3xl space-y-6" @submit.prevent="submit">
-            <!-- Header -->
-            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
-                <div class="space-y-4">
-                    <div>
-                        <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
-                            >Workflow Name</label
-                        >
-                        <input
-                            v-model="form.name"
-                            type="text"
-                            required
-                            placeholder="e.g. Auto-assign urgent tickets"
-                            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)]"
-                        />
-                        <p v-if="form.errors.name" class="mt-1 text-xs text-rose-400">{{ form.errors.name }}</p>
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
-                            >Description</label
-                        >
-                        <textarea
-                            v-model="form.description"
-                            rows="2"
-                            placeholder="What does this workflow do?"
-                            class="mt-1 w-full resize-y 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>
-                    <div>
-                        <label class="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-input)] bg-[var(--esc-panel-surface-alt)] text-cyan-500 focus:ring-cyan-500/20"
-                            />
-                            Active
-                        </label>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Steps -->
-            <div class="relative space-y-4">
-                <!-- Vertical connector line -->
-                <div class="absolute top-0 bottom-0 left-6 w-px bg-[var(--esc-panel-border)]" />
-
-                <!-- Step 1: Trigger -->
-                <div
-                    v-for="step in [1, 2, 3]"
-                    :key="step"
-                    class="relative rounded-xl border border-[var(--esc-panel-border)] border-l-4 bg-[var(--esc-panel-surface)] transition-all"
-                    :class="stepBorderColors[step]"
-                >
-                    <!-- Step dot -->
-                    <div
-                        class="absolute -left-[11px] top-4 flex h-5 w-5 items-center justify-center rounded-full"
-                        :class="stepDotColors[step]"
-                    >
-                        <span v-if="stepHasData(step)" class="text-[10px] font-bold text-white">
-                            <svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-                            </svg>
-                        </span>
-                        <span v-else class="text-[10px] font-bold text-white">{{ step }}</span>
-                    </div>
-
-                    <!-- Step header -->
-                    <button
-                        type="button"
-                        class="flex w-full items-center gap-3 px-6 py-4 text-left"
-                        @click="toggleStep(step)"
-                    >
-                        <div class="flex-1">
-                            <h3 class="text-sm font-semibold text-[var(--esc-panel-text-secondary)]">
-                                {{ stepLabels[step] }}
-                                <span
-                                    v-if="step === 2"
-                                    class="ml-1 text-xs font-normal text-[var(--esc-panel-text-muted)]"
-                                    >(optional)</span
-                                >
-                            </h3>
-                            <p class="text-xs text-[var(--esc-panel-text-muted)]">{{ stepDescriptions[step] }}</p>
-                        </div>
-                        <svg
-                            class="h-4 w-4 text-[var(--esc-panel-text-muted)] transition-transform"
-                            :class="expandedStep === step ? 'rotate-180' : ''"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            viewBox="0 0 24 24"
-                        >
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-                        </svg>
-                    </button>
-
-                    <!-- Step content -->
-                    <div v-if="expandedStep === step" class="border-t border-[var(--esc-panel-border)] px-6 py-4">
-                        <!-- Trigger selector -->
-                        <WorkflowTriggerSelector v-if="step === 1" v-model="form.trigger" />
-
-                        <!-- Condition builder -->
-                        <WorkflowConditionBuilder v-if="step === 2" v-model="form.conditions" />
-
-                        <!-- Action list -->
-                        <WorkflowActionList v-if="step === 3" v-model="form.actions" />
-                    </div>
-                </div>
-            </div>
-
-            <!-- Footer buttons -->
-            <div class="flex items-center gap-3 pt-2">
-                <button
-                    type="submit"
-                    :disabled="form.processing || !isValid"
-                    class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-6 py-2.5 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"
-                >
-                    {{ form.processing ? 'Saving...' : workflow ? 'Update Workflow' : 'Create Workflow' }}
-                </button>
-                <a
-                    :href="route('escalated.admin.workflows.index')"
-                    class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-4 py-2.5 text-sm font-medium text-[var(--esc-panel-text-secondary)] transition-colors hover:bg-[var(--esc-panel-hover)]"
-                >
-                    Cancel
-                </a>
-            </div>
-        </form>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import WorkflowTriggerSelector from '../../../components/WorkflowTriggerSelector.vue';
+import WorkflowConditionBuilder from '../../../components/WorkflowConditionBuilder.vue';
+import WorkflowActionList from '../../../components/WorkflowActionList.vue';
+import { useForm } from '@inertiajs/vue3';
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+    workflow: { type: Object, default: null },
+});
+
+const form = useForm({
+    name: props.workflow?.name || '',
+    description: props.workflow?.description || '',
+    trigger: props.workflow?.trigger || '',
+    conditions: props.workflow?.conditions || { match: 'all', conditions: [] },
+    actions: props.workflow?.actions || [],
+    active: props.workflow?.active ?? true,
+});
+
+const expandedStep = ref(props.workflow ? null : 1);
+
+function toggleStep(step) {
+    expandedStep.value = expandedStep.value === step ? null : step;
+}
+
+function submit() {
+    if (props.workflow) {
+        form.put(route('escalated.admin.workflows.update', props.workflow.id));
+    } else {
+        form.post(route('escalated.admin.workflows.store'));
+    }
+}
+
+const isValid = computed(() => {
+    return form.name && form.trigger && form.actions.length > 0;
+});
+
+const stepBorderColors = {
+    1: 'border-l-blue-500',
+    2: 'border-l-amber-500',
+    3: 'border-l-emerald-500',
+};
+
+const stepDotColors = {
+    1: 'bg-blue-500',
+    2: 'bg-amber-500',
+    3: 'bg-emerald-500',
+};
+
+const stepLabels = {
+    1: 'Trigger Event',
+    2: 'Conditions',
+    3: 'Actions',
+};
+
+const stepDescriptions = {
+    1: 'When this happens...',
+    2: 'Only if these conditions are met...',
+    3: 'Then do this...',
+};
+
+function stepHasData(step) {
+    switch (step) {
+        case 1:
+            return !!form.trigger;
+        case 2:
+            return form.conditions?.conditions?.length > 0;
+        case 3:
+            return form.actions?.length > 0;
+        default:
+            return false;
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="workflow ? 'Edit Workflow' : 'Create Workflow'">
+        <form class="mx-auto max-w-3xl space-y-6" @submit.prevent="submit">
+            <!-- Header -->
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            >Workflow Name</label
+                        >
+                        <input
+                            v-model="form.name"
+                            type="text"
+                            required
+                            placeholder="e.g. Auto-assign urgent tickets"
+                            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)]"
+                        />
+                        <p v-if="form.errors.name" class="mt-1 text-xs text-rose-400">{{ form.errors.name }}</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            >Description</label
+                        >
+                        <textarea
+                            v-model="form.description"
+                            rows="2"
+                            placeholder="What does this workflow do?"
+                            class="mt-1 w-full resize-y 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>
+                    <div>
+                        <label class="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-input)] bg-[var(--esc-panel-surface-alt)] text-cyan-500 focus:ring-cyan-500/20"
+                            />
+                            Active
+                        </label>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Steps -->
+            <div class="relative space-y-4">
+                <!-- Vertical connector line -->
+                <div class="absolute top-0 bottom-0 left-6 w-px bg-[var(--esc-panel-border)]" />
+
+                <!-- Step 1: Trigger -->
+                <div
+                    v-for="step in [1, 2, 3]"
+                    :key="step"
+                    class="relative rounded-xl border border-[var(--esc-panel-border)] border-l-4 bg-[var(--esc-panel-surface)] transition-all"
+                    :class="stepBorderColors[step]"
+                >
+                    <!-- Step dot -->
+                    <div
+                        class="absolute -left-[11px] top-4 flex h-5 w-5 items-center justify-center rounded-full"
+                        :class="stepDotColors[step]"
+                    >
+                        <span v-if="stepHasData(step)" class="text-[10px] font-bold text-white">
+                            <svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+                            </svg>
+                        </span>
+                        <span v-else class="text-[10px] font-bold text-white">{{ step }}</span>
+                    </div>
+
+                    <!-- Step header -->
+                    <button
+                        type="button"
+                        class="flex w-full items-center gap-3 px-6 py-4 text-left"
+                        @click="toggleStep(step)"
+                    >
+                        <div class="flex-1">
+                            <h3 class="text-sm font-semibold text-[var(--esc-panel-text-secondary)]">
+                                {{ stepLabels[step] }}
+                                <span
+                                    v-if="step === 2"
+                                    class="ml-1 text-xs font-normal text-[var(--esc-panel-text-muted)]"
+                                    >(optional)</span
+                                >
+                            </h3>
+                            <p class="text-xs text-[var(--esc-panel-text-muted)]">{{ stepDescriptions[step] }}</p>
+                        </div>
+                        <svg
+                            class="h-4 w-4 text-[var(--esc-panel-text-muted)] transition-transform"
+                            :class="expandedStep === step ? 'rotate-180' : ''"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            viewBox="0 0 24 24"
+                        >
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                        </svg>
+                    </button>
+
+                    <!-- Step content -->
+                    <div v-if="expandedStep === step" class="border-t border-[var(--esc-panel-border)] px-6 py-4">
+                        <!-- Trigger selector -->
+                        <WorkflowTriggerSelector v-if="step === 1" v-model="form.trigger" />
+
+                        <!-- Condition builder -->
+                        <WorkflowConditionBuilder v-if="step === 2" v-model="form.conditions" />
+
+                        <!-- Action list -->
+                        <WorkflowActionList v-if="step === 3" v-model="form.actions" />
+                    </div>
+                </div>
+            </div>
+
+            <!-- Footer buttons -->
+            <div class="flex items-center gap-3 pt-2">
+                <button
+                    type="submit"
+                    :disabled="form.processing || !isValid"
+                    class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-6 py-2.5 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"
+                >
+                    {{ form.processing ? 'Saving...' : workflow ? 'Update Workflow' : 'Create Workflow' }}
+                </button>
+                <a
+                    :href="route('escalated.admin.workflows.index')"
+                    class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-4 py-2.5 text-sm font-medium text-[var(--esc-panel-text-secondary)] transition-colors hover:bg-[var(--esc-panel-hover)]"
+                >
+                    Cancel
+                </a>
+            </div>
+        </form>
+    </EscalatedLayout>
+</template>