@escalated-dev/escalated 0.6.0 → 0.7.0

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

@@ -0,0 +1,195 @@
+<script setup>
+import EscalatedLayout from '../../../../components/EscalatedLayout.vue';
+import { router } from '@inertiajs/vue3';
+import { ref, watch } from 'vue';
+import { Link } from '@inertiajs/vue3';
+
+const props = defineProps({
+    articles: Object,
+    categories: Array,
+    filters: Object,
+});
+
+const search = ref(props.filters?.search || '');
+const status = ref(props.filters?.status || '');
+const categoryId = ref(props.filters?.category_id || '');
+
+let debounceTimer;
+function applyFilters() {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+        router.get(
+            route('escalated.admin.kb-articles.index'),
+            {
+                search: search.value || undefined,
+                status: status.value || undefined,
+                category_id: categoryId.value || undefined,
+            },
+            { preserveState: true, preserveScroll: true },
+        );
+    }, 300);
+}
+
+watch([search, status, categoryId], applyFilters);
+
+function deleteArticle(article) {
+    if (confirm('Delete this article?')) {
+        router.delete(route('escalated.admin.kb-articles.destroy', article.id));
+    }
+}
+
+const statusColors = {
+    published: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+    draft: 'bg-amber-500/10 text-amber-400 border-amber-500/20',
+};
+</script>
+
+<template>
+    <EscalatedLayout title="Knowledge Base — Articles">
+        <div class="mb-6 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <input
+                    v-model="search"
+                    type="text"
+                    placeholder="Search articles..."
+                    class="rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2 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"
+                />
+                <select
+                    v-model="status"
+                    class="rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2 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="">All Statuses</option>
+                    <option value="draft">Draft</option>
+                    <option value="published">Published</option>
+                </select>
+                <select
+                    v-model="categoryId"
+                    class="rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2 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="">All Categories</option>
+                    <option v-for="cat in categories" :key="cat.id" :value="cat.id">{{ cat.name }}</option>
+                </select>
+            </div>
+            <Link
+                :href="route('escalated.admin.kb-articles.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-opacity hover:opacity-90"
+            >
+                New Article
+            </Link>
+        </div>
+
+        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)]">
+            <table class="w-full">
+                <thead>
+                    <tr class="border-b border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)]">
+                        <th
+                            class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Title
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Category
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Status
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Views
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Helpful
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Date
+                        </th>
+                        <th
+                            class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Actions
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                    <tr v-for="article in articles.data" :key="article.id" class="hover:bg-[var(--esc-panel-hover)]">
+                        <td class="px-4 py-3">
+                            <Link
+                                :href="route('escalated.admin.kb-articles.edit', article.id)"
+                                class="text-sm font-medium text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
+                            >
+                                {{ article.title }}
+                            </Link>
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ article.category?.name || '—' }}
+                        </td>
+                        <td class="px-4 py-3">
+                            <span
+                                :class="[
+                                    'inline-flex rounded-full border px-2 py-0.5 text-xs font-medium',
+                                    statusColors[article.status] || 'text-[var(--esc-panel-text-tertiary)]',
+                                ]"
+                            >
+                                {{ article.status }}
+                            </span>
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ article.view_count }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ article.helpful_count }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-muted)]">
+                            {{ article.created_at ? new Date(article.created_at).toLocaleDateString() : '—' }}
+                        </td>
+                        <td class="px-4 py-3 text-right">
+                            <Link
+                                :href="route('escalated.admin.kb-articles.edit', article.id)"
+                                class="mr-2 text-sm text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]"
+                            >
+                                Edit
+                            </Link>
+                            <button class="text-sm text-red-500/60 hover:text-red-400" @click="deleteArticle(article)">
+                                Delete
+                            </button>
+                        </td>
+                    </tr>
+                    <tr v-if="!articles.data?.length">
+                        <td colspan="7" class="px-4 py-8 text-center text-sm text-[var(--esc-panel-text-muted)]">
+                            No articles found.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <!-- Pagination -->
+        <div v-if="articles.links && articles.last_page > 1" class="mt-4 flex items-center justify-center gap-1">
+            <Link
+                v-for="link in articles.links"
+                :key="link.label"
+                :href="link.url || '#'"
+                :class="[
+                    'rounded-lg px-3 py-1.5 text-sm transition-colors',
+                    link.active
+                        ? 'bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] text-white'
+                        : link.url
+                          ? 'border border-[var(--esc-panel-border)] text-[var(--esc-panel-text-tertiary)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]'
+                          : 'cursor-default text-[var(--esc-panel-text-muted)]',
+                ]"
+                preserve-scroll
+            >
+                <!-- eslint-disable-next-line vue/no-v-html --><span v-html="link.label" />
+            </Link>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/KnowledgeBase/Categories/Index.vue

@@ -0,0 +1,193 @@
+<script setup>
+import EscalatedLayout from '../../../../components/EscalatedLayout.vue';
+import CategoryTree from '../../../../components/CategoryTree.vue';
+import { useForm, router } from '@inertiajs/vue3';
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+    categories: Array,
+});
+
+const showForm = ref(false);
+const editing = ref(null);
+
+const form = useForm({
+    name: '',
+    slug: '',
+    parent_id: '',
+    position: 0,
+    description: '',
+});
+
+const isEditing = computed(() => !!editing.value);
+
+function openCreate() {
+    editing.value = null;
+    form.reset();
+    showForm.value = true;
+}
+
+function openEdit(category) {
+    editing.value = category;
+    form.name = category.name;
+    form.slug = category.slug;
+    form.parent_id = category.parent_id || '';
+    form.position = category.position || 0;
+    form.description = category.description || '';
+    showForm.value = true;
+}
+
+function submit() {
+    if (isEditing.value) {
+        form.put(route('escalated.admin.kb-categories.update', editing.value.id), {
+            onSuccess: () => {
+                showForm.value = false;
+                form.reset();
+                editing.value = null;
+            },
+        });
+    } else {
+        form.post(route('escalated.admin.kb-categories.store'), {
+            onSuccess: () => {
+                showForm.value = false;
+                form.reset();
+            },
+        });
+    }
+}
+
+function deleteCategory(category) {
+    if (confirm(`Delete category "${category.name}"?`)) {
+        router.delete(route('escalated.admin.kb-categories.destroy', category.id));
+    }
+}
+
+const parentOptions = computed(() => {
+    if (!editing.value) return props.categories;
+    return props.categories.filter((c) => c.id !== editing.value.id);
+});
+</script>
+
+<template>
+    <EscalatedLayout title="Knowledge Base — Categories">
+        <div class="mb-6 flex items-center justify-between">
+            <p class="text-sm text-[var(--esc-panel-text-muted)]">
+                Organize your knowledge base articles into categories.
+            </p>
+            <button
+                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-opacity hover:opacity-90"
+                @click="openCreate"
+            >
+                New Category
+            </button>
+        </div>
+
+        <!-- Inline form -->
+        <div
+            v-if="showForm"
+            class="mb-6 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-5"
+        >
+            <h3 class="mb-4 text-sm font-semibold text-[var(--esc-panel-text-secondary)]">
+                {{ isEditing ? 'Edit Category' : 'New Category' }}
+            </h3>
+            <form class="space-y-4" @submit.prevent="submit">
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="mb-1 block text-xs font-medium text-[var(--esc-panel-text-tertiary)]">Name</label>
+                        <input
+                            v-model="form.name"
+                            type="text"
+                            class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2 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="Category name"
+                        />
+                        <p v-if="form.errors.name" class="mt-1 text-xs text-red-400">{{ form.errors.name }}</p>
+                    </div>
+                    <div>
+                        <label class="mb-1 block text-xs font-medium text-[var(--esc-panel-text-tertiary)]">Slug</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 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="auto-generated-if-empty"
+                        />
+                    </div>
+                </div>
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="mb-1 block text-xs font-medium text-[var(--esc-panel-text-tertiary)]"
+                            >Parent Category</label
+                        >
+                        <select
+                            v-model="form.parent_id"
+                            class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2 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="">None (Root)</option>
+                            <option v-for="cat in parentOptions" :key="cat.id" :value="cat.id">{{ cat.name }}</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="mb-1 block text-xs font-medium text-[var(--esc-panel-text-tertiary)]"
+                            >Position</label
+                        >
+                        <input
+                            v-model.number="form.position"
+                            type="number"
+                            min="0"
+                            class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-cyan-500/40 focus:outline-none focus:ring-1 focus:ring-cyan-500/40"
+                        />
+                    </div>
+                </div>
+                <div>
+                    <label class="mb-1 block text-xs font-medium text-[var(--esc-panel-text-tertiary)]"
+                        >Description</label
+                    >
+                    <textarea
+                        v-model="form.description"
+                        rows="2"
+                        class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2 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="Optional description..."
+                    ></textarea>
+                </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 shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-opacity hover:opacity-90 disabled:opacity-50"
+                    >
+                        {{ isEditing ? 'Update' : 'Create' }}
+                    </button>
+                    <button
+                        type="button"
+                        class="text-sm text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]"
+                        @click="showForm = false"
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </form>
+        </div>
+
+        <!-- Category Tree -->
+        <CategoryTree :categories="categories" @edit="openEdit" @delete="deleteCategory" />
+
+        <div
+            v-if="!categories?.length && !showForm"
+            class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] py-12 text-center"
+        >
+            <svg
+                class="mx-auto mb-3 h-10 w-10 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="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
+                />
+            </svg>
+            <p class="text-sm text-[var(--esc-panel-text-muted)]">No categories yet. Create one to get started.</p>
+        </div>
+    </EscalatedLayout>
+</template>