@escalated-dev/escalated 0.5.0 → 0.7.0

package/src/pages/Admin/Settings/EmailSettings.vue

@@ -0,0 +1,243 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+const props = defineProps({
+    addresses: { type: Array, default: () => [] },
+    defaultReplyAddress: { type: String, default: '' },
+});
+
+const form = useForm({
+    addresses: props.addresses.map((a) => ({ ...a })),
+    default_reply_address: props.defaultReplyAddress,
+});
+
+const showAddForm = ref(false);
+const newAddress = ref({
+    email: '',
+    display_name: '',
+    department_id: null,
+});
+
+function addAddress() {
+    form.addresses.push({
+        email: newAddress.value.email,
+        display_name: newAddress.value.display_name,
+        department_id: newAddress.value.department_id,
+        dkim_status: 'unknown',
+    });
+    newAddress.value = { email: '', display_name: '', department_id: null };
+    showAddForm.value = false;
+}
+
+function removeAddress(index) {
+    form.addresses.splice(index, 1);
+}
+
+function submit() {
+    form.post(route('escalated.admin.settings.email.update'));
+}
+
+const dkimStatusClasses = {
+    verified: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+    pending: 'bg-amber-500/10 text-amber-400 border-amber-500/20',
+    failed: 'bg-rose-500/10 text-rose-400 border-rose-500/20',
+    unknown: 'bg-neutral-500/10 text-neutral-400 border-neutral-500/20',
+};
+</script>
+
+<template>
+    <EscalatedLayout title="Email Channel Settings">
+        <form class="mx-auto max-w-3xl space-y-6" @submit.prevent="submit">
+            <!-- Email Addresses -->
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
+                <div class="mb-5 flex items-center justify-between">
+                    <div>
+                        <h3 class="text-sm font-semibold text-[var(--esc-panel-text)]">Support Email Addresses</h3>
+                        <p class="mt-0.5 text-xs text-[var(--esc-panel-text-muted)]">
+                            Configure multiple email addresses for receiving and responding to tickets
+                        </p>
+                    </div>
+                    <button
+                        type="button"
+                        class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-1.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)]"
+                        @click="showAddForm = true"
+                    >
+                        Add Address
+                    </button>
+                </div>
+
+                <!-- Address Table -->
+                <div
+                    v-if="form.addresses.length"
+                    class="overflow-hidden rounded-lg 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)]"
+                                >
+                                    Email
+                                </th>
+                                <th
+                                    class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                                >
+                                    Display Name
+                                </th>
+                                <th
+                                    class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                                >
+                                    Department
+                                </th>
+                                <th
+                                    class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                                >
+                                    DKIM
+                                </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="(addr, idx) in form.addresses"
+                                :key="idx"
+                                class="hover:bg-[var(--esc-panel-hover)]"
+                            >
+                                <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-secondary)]">
+                                    {{ addr.email }}
+                                </td>
+                                <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                                    {{ addr.display_name || '---' }}
+                                </td>
+                                <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                                    {{ addr.department_id ? `Dept #${addr.department_id}` : 'All' }}
+                                </td>
+                                <td class="px-4 py-3">
+                                    <span
+                                        :class="[
+                                            'inline-flex rounded-full border px-2 py-0.5 text-xs font-medium',
+                                            dkimStatusClasses[addr.dkim_status] || dkimStatusClasses.unknown,
+                                        ]"
+                                    >
+                                        {{ addr.dkim_status || 'Unknown' }}
+                                    </span>
+                                </td>
+                                <td class="px-4 py-3 text-right">
+                                    <button
+                                        type="button"
+                                        class="text-sm text-red-500/60 hover:text-red-400"
+                                        @click="removeAddress(idx)"
+                                    >
+                                        Remove
+                                    </button>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div
+                    v-else
+                    class="rounded-lg border border-dashed border-[var(--esc-panel-active)] px-6 py-8 text-center"
+                >
+                    <p class="text-sm text-[var(--esc-panel-text-muted)]">No email addresses configured yet.</p>
+                </div>
+
+                <!-- Add Address Form -->
+                <div
+                    v-if="showAddForm"
+                    class="mt-4 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface-alt)] p-4"
+                >
+                    <h4 class="mb-3 text-sm font-medium text-[var(--esc-panel-text-secondary)]">Add Email Address</h4>
+                    <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
+                        <div>
+                            <label class="block text-xs font-medium text-[var(--esc-panel-text-tertiary)]"
+                                >Email Address</label
+                            >
+                            <input
+                                v-model="newAddress.email"
+                                type="email"
+                                placeholder="support@example.com"
+                                class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] px-3 py-2 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>
+                            <label class="block text-xs font-medium text-[var(--esc-panel-text-tertiary)]"
+                                >Display Name</label
+                            >
+                            <input
+                                v-model="newAddress.display_name"
+                                type="text"
+                                placeholder="Support Team"
+                                class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] px-3 py-2 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>
+                            <label class="block text-xs font-medium text-[var(--esc-panel-text-tertiary)]"
+                                >Department Routing</label
+                            >
+                            <input
+                                v-model.number="newAddress.department_id"
+                                type="number"
+                                placeholder="All departments"
+                                class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] px-3 py-2 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>
+                    <div class="mt-3 flex gap-2">
+                        <button
+                            type="button"
+                            class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-1.5 text-sm font-medium text-white"
+                            :disabled="!newAddress.email"
+                            @click="addAddress"
+                        >
+                            Add
+                        </button>
+                        <button
+                            type="button"
+                            class="rounded-lg border border-[var(--esc-panel-border-input)] px-4 py-1.5 text-sm text-[var(--esc-panel-text-tertiary)] hover:text-[var(--esc-panel-text-secondary)]"
+                            @click="showAddForm = false"
+                        >
+                            Cancel
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Default Reply Address -->
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
+                <h3 class="mb-5 text-sm font-semibold text-[var(--esc-panel-text)]">Default Reply Address</h3>
+                <p class="mb-3 text-xs text-[var(--esc-panel-text-muted)]">
+                    Select the default email address for outbound replies
+                </p>
+                <select
+                    v-model="form.default_reply_address"
+                    class="w-full max-w-sm 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 value="">Select an address...</option>
+                    <option v-for="(addr, idx) in form.addresses" :key="idx" :value="addr.email">
+                        {{ addr.display_name ? `${addr.display_name} <${addr.email}>` : addr.email }}
+                    </option>
+                </select>
+            </div>
+
+            <!-- Submit -->
+            <div class="flex items-center justify-end gap-3">
+                <span v-if="form.recentlySuccessful" class="text-sm text-emerald-400">Saved.</span>
+                <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"
+                >
+                    {{ form.processing ? 'Saving...' : 'Save Email Settings' }}
+                </button>
+            </div>
+        </form>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Settings/Sandbox.vue

@@ -0,0 +1,135 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+</script>
+
+<template>
+    <EscalatedLayout title="Sandbox Environment">
+        <div class="mx-auto max-w-2xl space-y-6">
+            <!-- Info -->
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
+                <h3 class="mb-4 text-sm font-semibold text-[var(--esc-panel-text)]">Sandbox Environment</h3>
+                <p class="text-sm text-[var(--esc-panel-text-tertiary)]">
+                    A sandbox environment allows you to test configuration changes, automations, and workflows without
+                    affecting your production data. Changes made in a sandbox can be promoted to production once
+                    validated.
+                </p>
+                <div
+                    class="mt-4 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface-alt)] p-4"
+                >
+                    <h4 class="mb-2 text-sm font-medium text-[var(--esc-panel-text-secondary)]">Key Features</h4>
+                    <ul class="space-y-2 text-sm text-[var(--esc-panel-text-muted)]">
+                        <li class="flex items-start gap-2">
+                            <svg
+                                class="mt-0.5 h-4 w-4 shrink-0 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="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                                />
+                            </svg>
+                            Isolated copy of your helpdesk configuration
+                        </li>
+                        <li class="flex items-start gap-2">
+                            <svg
+                                class="mt-0.5 h-4 w-4 shrink-0 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="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                                />
+                            </svg>
+                            Test automations, triggers, and SLA policies safely
+                        </li>
+                        <li class="flex items-start gap-2">
+                            <svg
+                                class="mt-0.5 h-4 w-4 shrink-0 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="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                                />
+                            </svg>
+                            Promote validated changes to production
+                        </li>
+                        <li class="flex items-start gap-2">
+                            <svg
+                                class="mt-0.5 h-4 w-4 shrink-0 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="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                                />
+                            </svg>
+                            Sandboxes auto-expire after 30 days
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Status -->
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
+                <h3 class="mb-4 text-sm font-semibold text-[var(--esc-panel-text)]">Sandbox Status</h3>
+                <div class="rounded-lg border border-dashed border-[var(--esc-panel-active)] px-6 py-8 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="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25"
+                        />
+                    </svg>
+                    <p class="text-sm text-[var(--esc-panel-text-muted)]">No sandbox active.</p>
+                    <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                        Create a sandbox to start testing changes safely.
+                    </p>
+                </div>
+            </div>
+
+            <!-- Create Button -->
+            <div class="flex justify-end">
+                <div class="group relative">
+                    <button
+                        type="button"
+                        disabled
+                        class="cursor-not-allowed rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)]/50 to-[var(--esc-panel-accent-secondary)]/50 px-5 py-2 text-sm font-medium text-white/50 shadow-lg shadow-[var(--esc-panel-bg)]/20"
+                    >
+                        Create Sandbox
+                    </button>
+                    <div
+                        class="pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 rounded-lg bg-neutral-800 px-3 py-2 text-xs text-[var(--esc-panel-text-secondary)] opacity-0 shadow-lg transition-opacity group-hover:opacity-100"
+                    >
+                        Coming soon &mdash; requires infrastructure setup
+                        <div
+                            class="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-neutral-800"
+                        ></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Settings/SsoSettings.vue

@@ -0,0 +1,218 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm } from '@inertiajs/vue3';
+
+const props = defineProps({ settings: Object });
+
+const form = useForm({
+    sso_provider: props.settings.sso_provider ?? 'none',
+    sso_entity_id: props.settings.sso_entity_id ?? '',
+    sso_url: props.settings.sso_url ?? '',
+    sso_certificate: props.settings.sso_certificate ?? '',
+    sso_attr_email: props.settings.sso_attr_email ?? 'email',
+    sso_attr_name: props.settings.sso_attr_name ?? 'name',
+    sso_attr_role: props.settings.sso_attr_role ?? 'role',
+    sso_jwt_secret: props.settings.sso_jwt_secret ?? '',
+    sso_jwt_algorithm: props.settings.sso_jwt_algorithm ?? 'HS256',
+});
+
+function submit() {
+    form.post(route('escalated.admin.settings.sso.update'));
+}
+</script>
+
+<template>
+    <EscalatedLayout title="SSO Settings">
+        <form class="mx-auto max-w-2xl space-y-6" @submit.prevent="submit">
+            <!-- Provider Selection -->
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
+                <h3 class="mb-5 text-sm font-semibold text-[var(--esc-panel-text)]">Single Sign-On</h3>
+                <div class="space-y-5">
+                    <div>
+                        <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            >SSO Provider</label
+                        >
+                        <p class="mt-0.5 text-xs text-[var(--esc-panel-text-muted)]">
+                            Choose how users authenticate with your identity provider
+                        </p>
+                        <select
+                            v-model="form.sso_provider"
+                            class="mt-2 w-48 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 value="none">None (disabled)</option>
+                            <option value="saml">SAML 2.0</option>
+                            <option value="jwt">JWT</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
+            <!-- SAML Settings -->
+            <div
+                v-if="form.sso_provider === 'saml'"
+                class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6"
+            >
+                <h3 class="mb-5 text-sm font-semibold text-[var(--esc-panel-text)]">SAML Configuration</h3>
+                <div class="space-y-5">
+                    <div>
+                        <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            >Entity ID</label
+                        >
+                        <p class="mt-0.5 text-xs text-[var(--esc-panel-text-muted)]">
+                            The Entity ID (Issuer) from your Identity Provider
+                        </p>
+                        <input
+                            v-model="form.sso_entity_id"
+                            type="text"
+                            placeholder="https://idp.example.com/metadata"
+                            class="mt-2 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)] 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 v-if="form.errors.sso_entity_id" class="mt-1 text-sm text-rose-400">
+                            {{ form.errors.sso_entity_id }}
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">SSO URL</label>
+                        <p class="mt-0.5 text-xs text-[var(--esc-panel-text-muted)]">The Single Sign-On URL endpoint</p>
+                        <input
+                            v-model="form.sso_url"
+                            type="url"
+                            placeholder="https://idp.example.com/sso"
+                            class="mt-2 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)] 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 v-if="form.errors.sso_url" class="mt-1 text-sm text-rose-400">
+                            {{ form.errors.sso_url }}
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            >Certificate</label
+                        >
+                        <p class="mt-0.5 text-xs text-[var(--esc-panel-text-muted)]">
+                            X.509 certificate from your Identity Provider (PEM format)
+                        </p>
+                        <textarea
+                            v-model="form.sso_certificate"
+                            rows="6"
+                            placeholder="-----BEGIN CERTIFICATE-----&#10;...&#10;-----END CERTIFICATE-----"
+                            class="mt-2 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 font-mono text-xs 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)]"
+                        ></textarea>
+                        <div v-if="form.errors.sso_certificate" class="mt-1 text-sm text-rose-400">
+                            {{ form.errors.sso_certificate }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- JWT Settings -->
+            <div
+                v-if="form.sso_provider === 'jwt'"
+                class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6"
+            >
+                <h3 class="mb-5 text-sm font-semibold text-[var(--esc-panel-text)]">JWT Configuration</h3>
+                <div class="space-y-5">
+                    <div>
+                        <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            >Shared Secret</label
+                        >
+                        <p class="mt-0.5 text-xs text-[var(--esc-panel-text-muted)]">
+                            Secret key used to sign and verify JWT tokens
+                        </p>
+                        <input
+                            v-model="form.sso_jwt_secret"
+                            type="password"
+                            class="mt-2 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.sso_jwt_secret" class="mt-1 text-sm text-rose-400">
+                            {{ form.errors.sso_jwt_secret }}
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            >Algorithm</label
+                        >
+                        <select
+                            v-model="form.sso_jwt_algorithm"
+                            class="mt-2 w-48 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 value="HS256">HS256</option>
+                            <option value="HS384">HS384</option>
+                            <option value="HS512">HS512</option>
+                            <option value="RS256">RS256</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">SSO URL</label>
+                        <p class="mt-0.5 text-xs text-[var(--esc-panel-text-muted)]">
+                            Redirect URL where users authenticate and receive a JWT
+                        </p>
+                        <input
+                            v-model="form.sso_url"
+                            type="url"
+                            placeholder="https://auth.example.com/jwt-sso"
+                            class="mt-2 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)] 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>
+            </div>
+
+            <!-- Attribute Mapping -->
+            <div
+                v-if="form.sso_provider !== 'none'"
+                class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6"
+            >
+                <h3 class="mb-5 text-sm font-semibold text-[var(--esc-panel-text)]">Attribute Mapping</h3>
+                <p class="mb-4 text-xs text-[var(--esc-panel-text-muted)]">
+                    Map the attribute names from your identity provider to Escalated user fields
+                </p>
+                <div class="space-y-5">
+                    <div>
+                        <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            >Email Attribute</label
+                        >
+                        <input
+                            v-model="form.sso_attr_email"
+                            type="text"
+                            placeholder="email"
+                            class="mt-2 w-full max-w-sm 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)] 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>
+                        <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            >Name Attribute</label
+                        >
+                        <input
+                            v-model="form.sso_attr_name"
+                            type="text"
+                            placeholder="name"
+                            class="mt-2 w-full max-w-sm 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)] 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>
+                        <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            >Role Attribute</label
+                        >
+                        <input
+                            v-model="form.sso_attr_role"
+                            type="text"
+                            placeholder="role"
+                            class="mt-2 w-full max-w-sm 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)] 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>
+            </div>
+
+            <!-- Submit -->
+            <div class="flex items-center justify-end gap-3">
+                <span v-if="form.recentlySuccessful" class="text-sm text-emerald-400">Saved.</span>
+                <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"
+                >
+                    {{ form.processing ? 'Saving...' : 'Save SSO Settings' }}
+                </button>
+            </div>
+        </form>
+    </EscalatedLayout>
+</template>