@escalated-dev/escalated 0.5.0 → 0.7.0

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

@@ -0,0 +1,102 @@
+<script setup>
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    adapters: { type: Array, default: () => [] },
+    jobs: { type: Array, default: () => [] },
+});
+
+function selectPlatform(platform) {
+    router.get(route('escalated.admin.import.connect', platform));
+}
+
+function viewJob(jobId) {
+    router.get(route('escalated.admin.import.progress', jobId));
+}
+
+const statusColors = {
+    pending: 'text-gray-400',
+    importing: 'text-blue-400',
+    paused: 'text-yellow-400',
+    completed: 'text-green-400',
+    failed: 'text-red-400',
+};
+</script>
+
+<template>
+    <div class="space-y-8">
+        <div>
+            <h2 class="text-lg font-semibold text-[var(--esc-panel-text)]">Import Data</h2>
+            <p class="mt-1 text-sm text-[var(--esc-panel-text-secondary)]">
+                Migrate tickets, contacts, and history from another helpdesk platform.
+            </p>
+        </div>
+
+        <!-- Platform cards -->
+        <div v-if="adapters.length" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <button
+                v-for="adapter in adapters"
+                :key="adapter.name"
+                class="flex flex-col items-start rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6 text-left transition hover:border-[var(--esc-panel-accent)] hover:bg-[var(--esc-panel-hover)]"
+                @click="selectPlatform(adapter.name)"
+            >
+                <span class="text-base font-medium text-[var(--esc-panel-text)]">{{ adapter.display_name }}</span>
+                <span class="mt-1 text-sm text-[var(--esc-panel-text-secondary)]"
+                    >Import from {{ adapter.display_name }}</span
+                >
+            </button>
+        </div>
+
+        <div
+            v-else
+            class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-8 text-center"
+        >
+            <p class="text-sm text-[var(--esc-panel-text-secondary)]">
+                No import adapters installed. Install an import plugin (e.g., escalated-plugin-import-zendesk) to get
+                started.
+            </p>
+        </div>
+
+        <!-- Import history -->
+        <div v-if="jobs.length">
+            <h3 class="mb-3 text-sm font-semibold text-[var(--esc-panel-text)]">Import History</h3>
+            <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)]">
+                <table class="w-full text-sm">
+                    <thead class="bg-[var(--esc-panel-surface-alt)]">
+                        <tr>
+                            <th class="px-4 py-3 text-left font-medium text-[var(--esc-panel-text-secondary)]">
+                                Platform
+                            </th>
+                            <th class="px-4 py-3 text-left font-medium text-[var(--esc-panel-text-secondary)]">
+                                Status
+                            </th>
+                            <th class="px-4 py-3 text-left font-medium text-[var(--esc-panel-text-secondary)]">Date</th>
+                            <th class="px-4 py-3 text-left font-medium text-[var(--esc-panel-text-secondary)]"></th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                        <tr
+                            v-for="job in jobs"
+                            :key="job.id"
+                            class="bg-[var(--esc-panel-surface)] hover:bg-[var(--esc-panel-hover)]"
+                        >
+                            <td class="px-4 py-3 text-[var(--esc-panel-text)]">{{ job.platform }}</td>
+                            <td class="px-4 py-3">
+                                <span :class="statusColors[job.status]" class="capitalize">{{ job.status }}</span>
+                            </td>
+                            <td class="px-4 py-3 text-[var(--esc-panel-text-secondary)]">{{ job.created_at }}</td>
+                            <td class="px-4 py-3 text-right">
+                                <button
+                                    class="text-sm text-[var(--esc-panel-accent)] hover:underline"
+                                    @click="viewJob(job.id)"
+                                >
+                                    View
+                                </button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</template>

package/src/pages/Admin/Import/Mapping.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { useForm } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+const props = defineProps({
+    platform: String,
+    display_name: String,
+    entity_types: { type: Array, default: () => [] },
+    mappings: { type: Object, default: () => ({}) },
+    credentials: { type: Object, default: () => ({}) },
+});
+
+const activeEntity = ref(props.entity_types[0] || '');
+const fieldMappings = ref({});
+const skippedEntities = ref({});
+
+// Initialize mappings from defaults
+props.entity_types.forEach((type) => {
+    fieldMappings.value[type] = { ...(props.mappings[type]?.defaults || {}) };
+    skippedEntities.value[type] = false;
+});
+
+const form = useForm({
+    credentials: props.credentials,
+    field_mappings: {},
+    entity_types: [],
+});
+
+function proceed() {
+    form.field_mappings = fieldMappings.value;
+    form.entity_types = props.entity_types.filter((t) => !skippedEntities.value[t]);
+    form.post(route('escalated.admin.import.review', props.platform));
+}
+</script>
+
+<template>
+    <div class="space-y-6">
+        <div>
+            <h2 class="text-lg font-semibold text-[var(--esc-panel-text)]">Field Mapping</h2>
+            <p class="mt-1 text-sm text-[var(--esc-panel-text-secondary)]">
+                Configure how {{ display_name }} fields map to Escalated. Defaults are pre-filled.
+            </p>
+        </div>
+
+        <!-- Entity type tabs -->
+        <div
+            class="flex gap-1 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface-alt)] p-1"
+        >
+            <button
+                v-for="type in entity_types"
+                :key="type"
+                :class="[
+                    'rounded-md px-3 py-1.5 text-sm font-medium transition',
+                    activeEntity === type
+                        ? 'bg-[var(--esc-panel-surface)] text-[var(--esc-panel-text)]'
+                        : 'text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]',
+                ]"
+                @click="activeEntity = type"
+            >
+                {{ type }}
+            </button>
+        </div>
+
+        <!-- Active entity mapping -->
+        <div v-for="type in entity_types" v-show="activeEntity === type" :key="type">
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
+                <!-- Skip toggle -->
+                <label class="mb-4 flex items-center gap-2">
+                    <input
+                        v-model="skippedEntities[type]"
+                        type="checkbox"
+                        class="rounded border-[var(--esc-panel-border)]"
+                    />
+                    <span class="text-sm text-[var(--esc-panel-text-secondary)]">Skip importing {{ type }}</span>
+                </label>
+
+                <div v-if="!skippedEntities[type]" class="space-y-3">
+                    <div
+                        v-for="(sourceFields, idx) in mappings[type]?.source_fields || []"
+                        :key="idx"
+                        class="flex items-center gap-4"
+                    >
+                        <span class="w-1/3 text-sm text-[var(--esc-panel-text)]">{{
+                            sourceFields.label || sourceFields.name
+                        }}</span>
+                        <span class="text-[var(--esc-panel-text-muted)]">&rarr;</span>
+                        <select
+                            v-model="fieldMappings[type][sourceFields.name]"
+                            class="w-1/3 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)]"
+                        >
+                            <option value="">Skip field</option>
+                            <option v-for="opt in sourceFields.escalated_options || []" :key="opt" :value="opt">
+                                {{ opt }}
+                            </option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex justify-end">
+            <button
+                class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-6 py-2 text-sm font-medium text-white"
+                @click="proceed"
+            >
+                Next: Review
+            </button>
+        </div>
+    </div>
+</template>

package/src/pages/Admin/Import/Progress.vue

@@ -0,0 +1,153 @@
+<script setup>
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    job: { type: Object, required: true },
+});
+
+const jobData = ref({ ...props.job });
+const polling = ref(null);
+
+const isActive = computed(() => ['importing', 'authenticating', 'mapping'].includes(jobData.value.status));
+const isFinished = computed(() => ['completed', 'failed'].includes(jobData.value.status));
+
+async function pollStatus() {
+    try {
+        const response = await fetch(route('escalated.admin.import.status', jobData.value.id));
+        const data = await response.json();
+        Object.assign(jobData.value, data);
+
+        if (isFinished.value && polling.value) {
+            clearInterval(polling.value);
+            polling.value = null;
+        }
+    } catch (e) {
+        // Silently retry on next interval
+    }
+}
+
+onMounted(() => {
+    if (isActive.value) {
+        polling.value = setInterval(pollStatus, 3000);
+    }
+});
+
+onUnmounted(() => {
+    if (polling.value) clearInterval(polling.value);
+});
+
+const progressEntries = computed(() => {
+    if (!jobData.value.progress) return [];
+    return Object.entries(jobData.value.progress).map(([type, data]) => ({
+        type,
+        ...data,
+        percentage: data.total > 0 ? Math.round((data.processed / data.total) * 100) : 0,
+    }));
+});
+
+const recentErrors = computed(() => {
+    return (jobData.value.error_log || []).slice(-20);
+});
+
+function pause() {
+    router.post(route('escalated.admin.import.pause', jobData.value.id));
+}
+
+function resume() {
+    router.post(route('escalated.admin.import.resume', jobData.value.id));
+}
+
+function cancel() {
+    if (confirm('Are you sure you want to cancel this import?')) {
+        router.post(route('escalated.admin.import.cancel', jobData.value.id));
+    }
+}
+</script>
+
+<template>
+    <div class="space-y-6">
+        <div class="flex items-center justify-between">
+            <div>
+                <h2 class="text-lg font-semibold text-[var(--esc-panel-text)]">
+                    Import Progress
+                    <span
+                        class="ml-2 text-sm font-normal capitalize"
+                        :class="{
+                            'text-blue-400': isActive,
+                            'text-green-400': jobData.status === 'completed',
+                            'text-red-400': jobData.status === 'failed',
+                            'text-yellow-400': jobData.status === 'paused',
+                        }"
+                        >{{ jobData.status }}</span
+                    >
+                </h2>
+                <p class="mt-1 text-sm text-[var(--esc-panel-text-secondary)] capitalize">{{ jobData.platform }}</p>
+            </div>
+
+            <div class="flex gap-2">
+                <button
+                    v-if="jobData.status === 'importing'"
+                    class="rounded-lg border border-yellow-500/50 px-4 py-2 text-sm font-medium text-yellow-400 hover:bg-yellow-500/10"
+                    @click="pause"
+                >
+                    Pause
+                </button>
+                <button
+                    v-if="jobData.status === 'paused'"
+                    class="rounded-lg border border-blue-500/50 px-4 py-2 text-sm font-medium text-blue-400 hover:bg-blue-500/10"
+                    @click="resume"
+                >
+                    Resume
+                </button>
+                <button
+                    v-if="isActive || jobData.status === 'paused'"
+                    class="rounded-lg border border-red-500/50 px-4 py-2 text-sm font-medium text-red-400 hover:bg-red-500/10"
+                    @click="cancel"
+                >
+                    Cancel
+                </button>
+            </div>
+        </div>
+
+        <!-- Progress bars per entity type -->
+        <div class="space-y-4">
+            <div
+                v-for="entry in progressEntries"
+                :key="entry.type"
+                class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-4"
+            >
+                <div class="mb-2 flex items-center justify-between text-sm">
+                    <span class="font-medium capitalize text-[var(--esc-panel-text)]">{{ entry.type }}</span>
+                    <span class="text-[var(--esc-panel-text-secondary)]">
+                        {{ entry.processed }} / {{ entry.total || '?' }}
+                        <span v-if="entry.skipped" class="ml-2 text-yellow-400">{{ entry.skipped }} skipped</span>
+                        <span v-if="entry.failed" class="ml-2 text-red-400">{{ entry.failed }} failed</span>
+                    </span>
+                </div>
+                <div class="h-2 overflow-hidden rounded-full bg-[var(--esc-panel-surface-alt)]">
+                    <div
+                        class="h-full rounded-full bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] transition-all duration-500"
+                        :style="{ width: entry.percentage + '%' }"
+                    ></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Error log -->
+        <div v-if="recentErrors.length" class="rounded-xl border border-red-500/20 bg-[var(--esc-panel-surface)] p-4">
+            <h3 class="mb-3 text-sm font-semibold text-red-400">Recent Errors</h3>
+            <div class="max-h-60 space-y-2 overflow-y-auto">
+                <div
+                    v-for="(error, idx) in recentErrors"
+                    :key="idx"
+                    class="rounded-lg bg-[var(--esc-panel-surface-alt)] p-3 text-xs"
+                >
+                    <span class="font-medium capitalize text-[var(--esc-panel-text)]">{{ error.entity_type }}</span>
+                    <span class="mx-1 text-[var(--esc-panel-text-muted)]">#{{ error.source_id }}</span>
+                    <span class="text-red-400">{{ error.error }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

package/src/pages/Admin/Import/Review.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { ref } from 'vue';
+import { useForm } from '@inertiajs/vue3';
+
+const props = defineProps({
+    platform: String,
+    field_mappings: { type: Object, default: () => ({}) },
+    entity_types: { type: Array, default: () => [] },
+});
+
+const form = useForm({
+    field_mappings: props.field_mappings,
+});
+
+const submitting = ref(false);
+
+function startImport() {
+    submitting.value = true;
+    form.post(route('escalated.admin.import.start', props.platform));
+}
+</script>
+
+<template>
+    <div class="mx-auto max-w-lg space-y-6">
+        <div>
+            <h2 class="text-lg font-semibold text-[var(--esc-panel-text)]">Review Import</h2>
+            <p class="mt-1 text-sm text-[var(--esc-panel-text-secondary)]">
+                Review your import settings before starting.
+            </p>
+        </div>
+
+        <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6 space-y-4">
+            <div>
+                <span class="text-sm font-medium text-[var(--esc-panel-text)]">Platform:</span>
+                <span class="ml-2 text-sm text-[var(--esc-panel-text-secondary)] capitalize">{{ platform }}</span>
+            </div>
+
+            <div>
+                <span class="text-sm font-medium text-[var(--esc-panel-text)]">Entity types to import:</span>
+                <ul class="mt-1 ml-4 list-disc text-sm text-[var(--esc-panel-text-secondary)]">
+                    <li v-for="type in entity_types" :key="type" class="capitalize">{{ type }}</li>
+                </ul>
+            </div>
+
+            <div>
+                <span class="text-sm font-medium text-[var(--esc-panel-text)]">Field mappings configured:</span>
+                <span class="ml-2 text-sm text-[var(--esc-panel-text-secondary)]">
+                    {{ Object.keys(field_mappings).length }} entity types
+                </span>
+            </div>
+        </div>
+
+        <div class="rounded-xl border border-yellow-500/30 bg-yellow-500/10 p-4">
+            <p class="text-sm text-yellow-200">
+                This will create records in your Escalated instance. The import is resumable if interrupted.
+                Notifications and automations are suppressed during import.
+            </p>
+        </div>
+
+        <div class="flex justify-end gap-3">
+            <button
+                class="rounded-lg border border-[var(--esc-panel-border)] px-4 py-2 text-sm font-medium text-[var(--esc-panel-text)] hover:bg-[var(--esc-panel-hover)]"
+                @click="$inertia.visit(route('escalated.admin.import.index'))"
+            >
+                Cancel
+            </button>
+            <button
+                :disabled="submitting"
+                class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-6 py-2 text-sm font-medium text-white disabled:opacity-50"
+                @click="startImport"
+            >
+                {{ submitting ? 'Starting...' : 'Start Import' }}
+            </button>
+        </div>
+    </div>
+</template>

package/src/pages/Admin/KnowledgeBase/Articles/Form.vue

@@ -0,0 +1,142 @@
+<script setup>
+import EscalatedLayout from '../../../../components/EscalatedLayout.vue';
+import ArticleEditor from '../../../../components/ArticleEditor.vue';
+import { useForm, Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+const props = defineProps({
+    article: { type: Object, default: null },
+    categories: Array,
+});
+
+const isEditing = computed(() => !!props.article);
+
+const form = useForm({
+    title: props.article?.title || '',
+    slug: props.article?.slug || '',
+    body: props.article?.body || '',
+    status: props.article?.status || 'draft',
+    category_id: props.article?.category_id || '',
+});
+
+function submit() {
+    if (isEditing.value) {
+        form.put(route('escalated.admin.kb-articles.update', props.article.id));
+    } else {
+        form.post(route('escalated.admin.kb-articles.store'));
+    }
+}
+
+function generateSlug() {
+    if (!form.slug && form.title) {
+        form.slug = form.title
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/(^-|-$)/g, '');
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="isEditing ? 'Edit Article' : 'New Article'">
+        <div class="mx-auto max-w-4xl">
+            <div class="mb-6">
+                <Link
+                    :href="route('escalated.admin.kb-articles.index')"
+                    class="text-sm text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]"
+                >
+                    &larr; Back to Articles
+                </Link>
+            </div>
+
+            <form class="space-y-6" @submit.prevent="submit">
+                <!-- Title -->
+                <div>
+                    <label class="mb-1.5 block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Title</label>
+                    <input
+                        v-model="form.title"
+                        type="text"
+                        class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2.5 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-cyan-500/40 focus:outline-none focus:ring-1 focus:ring-cyan-500/40"
+                        placeholder="Article title"
+                        @blur="generateSlug"
+                    />
+                    <p v-if="form.errors.title" class="mt-1 text-xs text-red-400">{{ form.errors.title }}</p>
+                </div>
+
+                <!-- Slug -->
+                <div>
+                    <label class="mb-1.5 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                        >Slug (SEO URL)</label
+                    >
+                    <input
+                        v-model="form.slug"
+                        type="text"
+                        class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2.5 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-cyan-500/40 focus:outline-none focus:ring-1 focus:ring-cyan-500/40"
+                        placeholder="article-slug"
+                    />
+                    <p v-if="form.errors.slug" class="mt-1 text-xs text-red-400">{{ form.errors.slug }}</p>
+                </div>
+
+                <div class="grid grid-cols-2 gap-4">
+                    <!-- Category -->
+                    <div>
+                        <label class="mb-1.5 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            >Category</label
+                        >
+                        <select
+                            v-model="form.category_id"
+                            class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-cyan-500/40 focus:outline-none focus:ring-1 focus:ring-cyan-500/40"
+                        >
+                            <option value="">No Category</option>
+                            <option v-for="cat in categories" :key="cat.id" :value="cat.id">{{ cat.name }}</option>
+                        </select>
+                        <p v-if="form.errors.category_id" class="mt-1 text-xs text-red-400">
+                            {{ form.errors.category_id }}
+                        </p>
+                    </div>
+
+                    <!-- Status -->
+                    <div>
+                        <label class="mb-1.5 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            >Status</label
+                        >
+                        <select
+                            v-model="form.status"
+                            class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-cyan-500/40 focus:outline-none focus:ring-1 focus:ring-cyan-500/40"
+                        >
+                            <option value="draft">Draft</option>
+                            <option value="published">Published</option>
+                        </select>
+                        <p v-if="form.errors.status" class="mt-1 text-xs text-red-400">{{ form.errors.status }}</p>
+                    </div>
+                </div>
+
+                <!-- Body -->
+                <div>
+                    <label class="mb-1.5 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                        >Content</label
+                    >
+                    <ArticleEditor v-model="form.body" />
+                    <p v-if="form.errors.body" class="mt-1 text-xs text-red-400">{{ form.errors.body }}</p>
+                </div>
+
+                <!-- Actions -->
+                <div class="flex items-center gap-3 pt-2">
+                    <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.5 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-opacity hover:opacity-90 disabled:opacity-50"
+                    >
+                        {{ isEditing ? 'Update Article' : 'Create Article' }}
+                    </button>
+                    <Link
+                        :href="route('escalated.admin.kb-articles.index')"
+                        class="rounded-lg border border-[var(--esc-panel-border)] px-5 py-2.5 text-sm font-medium text-[var(--esc-panel-text-tertiary)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]"
+                    >
+                        Cancel
+                    </Link>
+                </div>
+            </form>
+        </div>
+    </EscalatedLayout>
+</template>