@escalated-dev/escalated 0.5.0 → 0.7.0

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

@@ -0,0 +1,184 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm } from '@inertiajs/vue3';
+
+const props = defineProps({
+    automation: { type: Object, default: null },
+});
+
+const conditionFields = [
+    { value: 'hours_since_created', label: 'Hours since created' },
+    { value: 'hours_since_updated', label: 'Hours since updated' },
+    { value: 'hours_since_assigned', label: 'Hours since assigned' },
+    { value: 'status', label: 'Status' },
+    { value: 'priority', label: 'Priority' },
+    { value: 'assigned', label: 'Assignment' },
+];
+
+const actionTypes = [
+    { value: 'change_status', label: 'Change status' },
+    { value: 'assign', label: 'Assign to agent (ID)' },
+    { value: 'add_tag', label: 'Add tag (name)' },
+    { value: 'change_priority', label: 'Change priority' },
+    { value: 'add_note', label: 'Add internal note' },
+];
+
+const form = useForm({
+    name: props.automation?.name || '',
+    conditions: props.automation?.conditions || [{ field: 'hours_since_updated', operator: '>', value: '' }],
+    actions: props.automation?.actions || [{ type: 'change_status', value: '' }],
+    active: props.automation?.active ?? true,
+});
+
+function addCondition() {
+    form.conditions.push({ field: 'hours_since_updated', operator: '>', value: '' });
+}
+
+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) {
+        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'">
+        <form class="max-w-2xl space-y-6" @submit.prevent="submit">
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Name</label>
+                <input
+                    v-model="form.name"
+                    type="text"
+                    required
+                    class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                />
+                <p v-if="form.errors.name" class="mt-1 text-xs text-rose-400">{{ form.errors.name }}</p>
+            </div>
+
+            <!-- Conditions -->
+            <div>
+                <label class="mb-2 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                    >Conditions (ALL must match)</label
+                >
+                <div class="space-y-2">
+                    <div v-for="(condition, i) in form.conditions" :key="i" class="flex items-center gap-2">
+                        <select
+                            v-model="condition.field"
+                            class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none"
+                        >
+                            <option v-for="f in conditionFields" :key="f.value" :value="f.value">{{ f.label }}</option>
+                        </select>
+                        <select
+                            v-model="condition.operator"
+                            class="w-16 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none"
+                        >
+                            <option value=">">&gt;</option>
+                            <option value=">=">&gt;=</option>
+                            <option value="<">&lt;</option>
+                            <option value="<=">&lt;=</option>
+                            <option value="=">=</option>
+                        </select>
+                        <input
+                            v-model="condition.value"
+                            type="text"
+                            placeholder="Value"
+                            class="flex-1 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                        />
+                        <button
+                            v-if="form.conditions.length > 1"
+                            type="button"
+                            class="text-rose-400 hover:text-rose-300"
+                            @click="removeCondition(i)"
+                        >
+                            &times;
+                        </button>
+                    </div>
+                </div>
+                <button
+                    type="button"
+                    class="mt-2 text-xs text-[var(--esc-panel-text-tertiary)] hover:text-[var(--esc-panel-text-secondary)]"
+                    @click="addCondition"
+                >
+                    + Add condition
+                </button>
+            </div>
+
+            <!-- Actions -->
+            <div>
+                <label class="mb-2 block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Actions</label>
+                <div class="space-y-2">
+                    <div v-for="(action, i) in form.actions" :key="i" class="flex items-center gap-2">
+                        <select
+                            v-model="action.type"
+                            class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none"
+                        >
+                            <option v-for="a in actionTypes" :key="a.value" :value="a.value">{{ a.label }}</option>
+                        </select>
+                        <input
+                            v-model="action.value"
+                            type="text"
+                            placeholder="Value"
+                            class="flex-1 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                        />
+                        <button
+                            v-if="form.actions.length > 1"
+                            type="button"
+                            class="text-rose-400 hover:text-rose-300"
+                            @click="removeAction(i)"
+                        >
+                            &times;
+                        </button>
+                    </div>
+                </div>
+                <button
+                    type="button"
+                    class="mt-2 text-xs text-[var(--esc-panel-text-tertiary)] hover:text-[var(--esc-panel-text-secondary)]"
+                    @click="addAction"
+                >
+                    + Add action
+                </button>
+            </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 class="flex 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-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)] disabled:opacity-50"
+                >
+                    {{ automation ? 'Update' : 'Create' }}
+                </button>
+                <a
+                    :href="route('escalated.admin.automations.index')"
+                    class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-4 py-2 text-sm font-medium text-[var(--esc-panel-text-secondary)] transition-colors hover:bg-[var(--esc-panel-hover)]"
+                >
+                    Cancel
+                </a>
+            </div>
+        </form>
+    </EscalatedLayout>
+</template>

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

@@ -0,0 +1,129 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+
+defineProps({ automations: Array });
+
+function destroy(id) {
+    if (confirm('Delete this automation?')) {
+        router.delete(route('escalated.admin.automations.destroy', id));
+    }
+}
+
+function conditionsSummary(automation) {
+    return (automation.conditions || []).map((c) => `${c.field} ${c.operator} ${c.value}`).join(', ');
+}
+
+function actionsSummary(automation) {
+    return (automation.actions || []).map((a) => `${a.type}: ${a.value}`).join(', ');
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Automations">
+        <div class="mb-4 flex justify-end">
+            <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)]"
+            >
+                Add 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)]"
+                        >
+                            Conditions
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Actions
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Active
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Last Run
+                        </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="6" class="px-4 py-12 text-center">
+                            <svg
+                                class="mx-auto mb-3 h-8 w-8 text-[var(--esc-panel-text-muted)]"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="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)]">
+                                Create time-based automations to act on idle tickets
+                            </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 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                            {{ automation.name }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)] max-w-xs truncate">
+                            {{ conditionsSummary(automation) }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)] max-w-xs truncate">
+                            {{ actionsSummary(automation) }}
+                        </td>
+                        <td class="px-4 py-3 text-sm">
+                            <span
+                                :class="automation.active ? 'text-emerald-400' : 'text-[var(--esc-panel-text-muted)]'"
+                                >{{ automation.active ? 'Yes' : 'No' }}</span
+                            >
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ automation.last_run_at || '---' }}
+                        </td>
+                        <td class="px-4 py-3 text-right text-sm">
+                            <Link
+                                :href="route('escalated.admin.automations.edit', automation.id)"
+                                class="text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
+                            >
+                                Edit
+                            </Link>
+                            <button class="ml-3 text-rose-400 hover:text-rose-300" @click="destroy(automation.id)">
+                                Delete
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>

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

@@ -0,0 +1,172 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import ScheduleEditor from '../../../components/ScheduleEditor.vue';
+import { useForm } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+const props = defineProps({
+    schedule: { type: Object, default: null },
+    timezones: { type: Array, default: () => [] },
+});
+
+const defaultSchedule = {
+    monday: { start: '09:00', end: '17:00' },
+    tuesday: { start: '09:00', end: '17:00' },
+    wednesday: { start: '09:00', end: '17:00' },
+    thursday: { start: '09:00', end: '17:00' },
+    friday: { start: '09:00', end: '17:00' },
+    saturday: { start: '', end: '' },
+    sunday: { start: '', end: '' },
+};
+
+const form = useForm({
+    name: props.schedule?.name || '',
+    timezone: props.schedule?.timezone || 'UTC',
+    is_default: props.schedule?.is_default ?? false,
+    schedule: props.schedule?.schedule || { ...defaultSchedule },
+    holidays:
+        props.schedule?.holidays?.map((h) => ({
+            name: h.name,
+            date: h.date?.split('T')[0] || h.date,
+            recurring: h.recurring,
+        })) || [],
+});
+
+const newHoliday = ref({ name: '', date: '', recurring: false });
+
+function addHoliday() {
+    if (newHoliday.value.name && newHoliday.value.date) {
+        form.holidays.push({ ...newHoliday.value });
+        newHoliday.value = { name: '', date: '', recurring: false };
+    }
+}
+
+function removeHoliday(index) {
+    form.holidays.splice(index, 1);
+}
+
+function submit() {
+    if (props.schedule) {
+        form.put(route('escalated.admin.business-hours.update', props.schedule.id));
+    } else {
+        form.post(route('escalated.admin.business-hours.store'));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="schedule ? 'Edit Schedule' : 'New Schedule'">
+        <form
+            class="mx-auto max-w-2xl space-y-5 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6"
+            @submit.prevent="submit"
+        >
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Name</label>
+                <input
+                    v-model="form.name"
+                    type="text"
+                    required
+                    class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                />
+                <div v-if="form.errors.name" class="mt-1 text-sm text-rose-400">{{ form.errors.name }}</div>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Timezone</label>
+                <select
+                    v-model="form.timezone"
+                    required
+                    class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                >
+                    <option v-for="tz in timezones" :key="tz" :value="tz">{{ tz }}</option>
+                </select>
+                <div v-if="form.errors.timezone" class="mt-1 text-sm text-rose-400">{{ form.errors.timezone }}</div>
+            </div>
+
+            <label class="flex items-center gap-2">
+                <input
+                    v-model="form.is_default"
+                    type="checkbox"
+                    class="rounded border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] text-cyan-500 focus:ring-[var(--esc-panel-border-input)]"
+                />
+                <span class="text-sm text-[var(--esc-panel-text-secondary)]">Default schedule</span>
+            </label>
+
+            <div>
+                <label class="mb-2 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                    >Weekly Hours</label
+                >
+                <ScheduleEditor v-model="form.schedule" />
+                <div v-if="form.errors.schedule" class="mt-1 text-sm text-rose-400">{{ form.errors.schedule }}</div>
+            </div>
+
+            <div>
+                <label class="mb-2 block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Holidays</label>
+                <div class="space-y-2">
+                    <div
+                        v-for="(holiday, idx) in form.holidays"
+                        :key="idx"
+                        class="flex items-center gap-2 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface-alt)] px-3 py-2"
+                    >
+                        <span class="flex-1 text-sm text-[var(--esc-panel-text-secondary)]">{{ holiday.name }}</span>
+                        <span class="text-sm text-[var(--esc-panel-text-tertiary)]">{{ holiday.date }}</span>
+                        <span
+                            v-if="holiday.recurring"
+                            class="inline-flex items-center rounded-full bg-violet-500/10 px-2 py-0.5 text-xs font-medium text-violet-400 ring-1 ring-violet-500/20"
+                            >Recurring</span
+                        >
+                        <button
+                            type="button"
+                            class="text-sm text-rose-400 hover:text-rose-300"
+                            @click="removeHoliday(idx)"
+                        >
+                            Remove
+                        </button>
+                    </div>
+                    <div class="flex items-end gap-2">
+                        <div class="flex-1">
+                            <input
+                                v-model="newHoliday.name"
+                                type="text"
+                                placeholder="Holiday name"
+                                class="w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                            />
+                        </div>
+                        <div>
+                            <input
+                                v-model="newHoliday.date"
+                                type="date"
+                                class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                            />
+                        </div>
+                        <label class="flex items-center gap-1">
+                            <input
+                                v-model="newHoliday.recurring"
+                                type="checkbox"
+                                class="rounded border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] text-cyan-500 focus:ring-[var(--esc-panel-border-input)]"
+                            />
+                            <span class="text-xs text-[var(--esc-panel-text-tertiary)]">Recurring</span>
+                        </label>
+                        <button
+                            type="button"
+                            class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-3 py-1.5 text-sm font-medium text-[var(--esc-panel-text-secondary)] transition-colors hover:bg-[var(--esc-panel-hover)]"
+                            @click="addHoliday"
+                        >
+                            Add
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex justify-end">
+                <button
+                    type="submit"
+                    :disabled="form.processing"
+                    class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-5 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)] disabled:opacity-50"
+                >
+                    {{ schedule ? 'Update' : 'Create' }}
+                </button>
+            </div>
+        </form>
+    </EscalatedLayout>
+</template>

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

@@ -0,0 +1,113 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+
+defineProps({ schedules: Array });
+
+function destroy(id) {
+    if (confirm('Delete this schedule?')) {
+        router.delete(route('escalated.admin.business-hours.destroy', id));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Business Hours">
+        <div class="mb-4 flex justify-end">
+            <Link
+                :href="route('escalated.admin.business-hours.create')"
+                class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)]"
+            >
+                Add Schedule
+            </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)]"
+                        >
+                            Timezone
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Default
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Holidays
+                        </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="!schedules?.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 business schedules yet</p>
+                            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                                Create a schedule to define your team's working hours
+                            </p>
+                        </td>
+                    </tr>
+                    <tr
+                        v-for="sched in schedules"
+                        :key="sched.id"
+                        class="transition-colors hover:bg-[var(--esc-panel-hover)]"
+                    >
+                        <td class="px-4 py-3 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                            {{ sched.name }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">{{ sched.timezone }}</td>
+                        <td class="px-4 py-3 text-sm">
+                            <span
+                                v-if="sched.is_default"
+                                class="inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-0.5 text-xs font-medium text-emerald-400 ring-1 ring-emerald-500/20"
+                                >Default</span
+                            >
+                            <span v-else class="text-[var(--esc-panel-text-muted)]">-</span>
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ sched.holidays?.length || 0 }}
+                        </td>
+                        <td class="px-4 py-3 text-right text-sm">
+                            <Link
+                                :href="route('escalated.admin.business-hours.edit', sched.id)"
+                                class="text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
+                            >
+                                Edit
+                            </Link>
+                            <button class="ml-3 text-rose-400 hover:text-rose-300" @click="destroy(sched.id)">
+                                Delete
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>