@escalated-dev/escalated 0.8.0 → 0.9.0

package/src/pages/Admin/Newsletters/Compose.vue

@@ -0,0 +1,192 @@
+<template>
+    <EscalatedLayout title="Newsletters">
+        <div class="compose">
+            <div v-if="!mailConfigured" class="compose__banner">
+                {{ $t('newsletters.compose.mail_not_configured') }}
+            </div>
+
+            <header class="compose__header">
+                <h1>{{ $t('newsletters.compose.title') }}</h1>
+                <div class="compose__actions">
+                    <button type="button" @click="save('draft')">
+                        {{ $t('newsletters.compose.actions.save_draft') }}
+                    </button>
+                    <button type="button" @click="testSend">
+                        {{ $t('newsletters.compose.actions.test_send') }}
+                    </button>
+                    <template v-if="canSend">
+                        <button type="button" :disabled="!mailConfigured || !form.scheduled_at" @click="schedule">
+                            {{ $t('newsletters.compose.actions.schedule') }}
+                        </button>
+                        <button type="button" class="button--primary" :disabled="!mailConfigured" @click="sendNow">
+                            {{ $t('newsletters.compose.actions.send_now') }}
+                        </button>
+                    </template>
+                </div>
+            </header>
+
+            <div class="compose__panes">
+                <section class="compose__metadata">
+                    <label>
+                        {{ $t('newsletters.compose.subject') }}
+                        <input v-model="form.subject" />
+                    </label>
+                    <label>
+                        {{ $t('newsletters.compose.from_name') }}
+                        <input v-model="form.from_name" />
+                    </label>
+                    <label>
+                        {{ $t('newsletters.compose.from_email') }}
+                        <input v-model="form.from_email" type="email" />
+                    </label>
+                    <label>
+                        {{ $t('newsletters.compose.reply_to') }}
+                        <input v-model="form.reply_to" type="email" />
+                    </label>
+                    <label>
+                        {{ $t('newsletters.compose.list') }}
+                        <select v-model="form.target_list_id">
+                            <option v-for="l in lists" :key="l.id" :value="l.id">
+                                {{ l.name }} ({{ l.member_count }})
+                            </option>
+                        </select>
+                    </label>
+                    <label>
+                        {{ $t('newsletters.compose.template') }}
+                        <select v-model="form.template_id">
+                            <option :value="null">— none —</option>
+                            <option v-for="t in templates" :key="t.id" :value="t.id">{{ t.name }}</option>
+                        </select>
+                    </label>
+                    <label>
+                        {{ $t('newsletters.compose.schedule_at') }}
+                        <input v-model="form.scheduled_at" type="datetime-local" />
+                    </label>
+                </section>
+
+                <section class="compose__editor">
+                    <div class="compose__editor-toolbar">
+                        <MergeFieldDropdown @insert="insertField" />
+                    </div>
+                    <MarkdownEditor ref="editorRef" v-model="form.body_markdown" />
+                </section>
+
+                <section class="compose__preview">
+                    <PreviewIframe :html="previewHtml" :loading="previewLoading" />
+                </section>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import MarkdownEditor from '../../../components/admin/newsletters/MarkdownEditor.vue';
+import MergeFieldDropdown from '../../../components/admin/newsletters/MergeFieldDropdown.vue';
+import PreviewIframe from '../../../components/admin/newsletters/PreviewIframe.vue';
+import { reactive, ref, toRef, computed } from 'vue';
+import { router } from '@inertiajs/vue3';
+import { usePreview } from './usePreview.js';
+
+const props = defineProps({
+    lists: { type: Array, required: true },
+    templates: { type: Array, required: true },
+    themes: { type: Array, required: true },
+    mailConfigured: { type: Boolean, required: true },
+    canSend: { type: Boolean, required: true },
+    defaultFromEmail: { type: String, default: '' },
+    defaultReplyTo: { type: String, default: '' },
+    defaultTheme: { type: String, default: 'default' },
+    // When present, the page is editing an existing draft/scheduled newsletter.
+    newsletter: { type: Object, default: null },
+});
+
+const isEditing = computed(() => props.newsletter != null && props.newsletter.id != null);
+
+const form = reactive({
+    subject: props.newsletter?.subject ?? '',
+    from_name: props.newsletter?.from_name ?? '',
+    from_email: props.newsletter?.from_email ?? props.defaultFromEmail,
+    reply_to: props.newsletter?.reply_to ?? props.defaultReplyTo,
+    target_list_id: props.newsletter?.target_list_id ?? props.lists[0]?.id ?? null,
+    template_id: props.newsletter?.template_id ?? null,
+    theme: props.newsletter?.theme ?? props.defaultTheme,
+    body_markdown: props.newsletter?.body_markdown ?? '',
+    scheduled_at: props.newsletter?.scheduled_at ?? '',
+});
+
+const editorRef = ref(null);
+const { html: previewHtml, loading: previewLoading } = usePreview(toRef(form), '/admin/newsletters/preview');
+
+function insertField(path) {
+    editorRef.value?.insertMergeField(path);
+}
+function save(status) {
+    if (isEditing.value) {
+        router.put(`/admin/newsletters/${props.newsletter.id}`, { ...form, status });
+    } else {
+        router.post('/admin/newsletters', { ...form, status });
+    }
+}
+function testSend() {
+    router.post('/admin/newsletters/test', form);
+}
+function schedule() {
+    save('scheduled');
+}
+function sendNow() {
+    save('sending');
+}
+</script>
+
+<style scoped>
+.compose__banner {
+    background: #fef3c7;
+    padding: 12px 16px;
+    border-radius: 6px;
+    margin-bottom: 12px;
+}
+.compose__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+.compose__actions {
+    display: flex;
+    gap: 8px;
+}
+.compose__panes {
+    display: grid;
+    grid-template-columns: 280px 1fr 1fr;
+    gap: 16px;
+    align-items: start;
+}
+.compose__metadata {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.compose__metadata label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 13px;
+    color: var(--escalated-text-muted, #64748b);
+}
+.compose__metadata input,
+.compose__metadata select {
+    padding: 8px 10px;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    border-radius: 6px;
+    font-size: 14px;
+    color: var(--escalated-text, #0f172a);
+}
+.compose__editor-toolbar {
+    margin-bottom: 8px;
+}
+.compose__preview {
+    height: 100%;
+    min-height: 480px;
+}
+</style>

package/src/pages/Admin/Newsletters/Edit.vue

@@ -0,0 +1,24 @@
+<template>
+    <Compose v-bind="composeProps" />
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Compose from './Compose.vue';
+
+const props = defineProps({
+    newsletter: { type: Object, required: true },
+    lists: { type: Array, required: true },
+    templates: { type: Array, required: true },
+    themes: { type: Array, required: true },
+    mailConfigured: { type: Boolean, required: true },
+    canSend: { type: Boolean, required: true },
+});
+
+const composeProps = computed(() => ({
+    ...props,
+    defaultFromEmail: props.newsletter.from_email,
+    defaultReplyTo: props.newsletter.reply_to,
+    defaultTheme: props.newsletter.theme,
+}));
+</script>

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

@@ -0,0 +1,141 @@
+<template>
+    <EscalatedLayout title="Newsletters">
+        <div class="newsletters-index">
+            <header>
+                <h1>{{ $t('newsletters.index.title') }}</h1>
+                <Link href="/admin/newsletters/new" class="button button--primary">
+                    {{ $t('newsletters.index.new') }}
+                </Link>
+            </header>
+            <nav class="newsletters-index__tabs">
+                <Link
+                    v-for="tabItem in tabs"
+                    :key="tabItem.key"
+                    :href="`/admin/newsletters?tab=${tabItem.key}`"
+                    :class="{ active: tab === tabItem.key }"
+                >
+                    {{ $t(`newsletters.index.tabs.${tabItem.key}`) }}
+                </Link>
+            </nav>
+            <table>
+                <thead>
+                    <tr>
+                        <th>{{ $t('newsletters.index.columns.subject') }}</th>
+                        <th>{{ $t('newsletters.index.columns.list') }}</th>
+                        <th>{{ $t('newsletters.index.columns.status') }}</th>
+                        <th>{{ $t('newsletters.index.columns.scheduled') }}</th>
+                        <th>{{ $t('newsletters.index.columns.sent') }}</th>
+                        <th>{{ $t('newsletters.index.columns.recipients') }}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-if="!filtered.length">
+                        <td colspan="6" class="empty">{{ emptyMessage }}</td>
+                    </tr>
+                    <tr v-for="n in filtered" :key="n.id">
+                        <td>
+                            <Link :href="`/admin/newsletters/${n.id}`">{{ n.subject }}</Link>
+                        </td>
+                        <td>{{ n.target_list.name }}</td>
+                        <td>
+                            <span :class="`status status--${n.status}`">{{ n.status }}</span>
+                        </td>
+                        <td>{{ n.scheduled_at ? new Date(n.scheduled_at).toLocaleString() : '—' }}</td>
+                        <td>{{ n.sent_at ? new Date(n.sent_at).toLocaleString() : '—' }}</td>
+                        <td>{{ n.summary_total ?? '—' }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import { useI18n } from '../../../composables/useI18n';
+
+const props = defineProps({
+    newsletters: { type: Array, required: true },
+    tab: { type: String, default: 'drafts' },
+});
+
+const { t } = useI18n();
+
+const tabs = [
+    { key: 'drafts', statuses: ['draft'] },
+    { key: 'scheduled', statuses: ['scheduled', 'sending', 'paused'] },
+    { key: 'sent', statuses: ['sent', 'failed'] },
+];
+
+const filtered = computed(() => {
+    const active = tabs.find((tab) => tab.key === props.tab) ?? tabs[0];
+    return props.newsletters.filter((n) => active.statuses.includes(n.status));
+});
+
+const emptyMessage = computed(() => t(`newsletters.index.empty.${props.tab}`));
+</script>
+
+<style scoped>
+.newsletters-index header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+.newsletters-index__tabs {
+    display: flex;
+    gap: 16px;
+    border-bottom: 1px solid var(--escalated-border, #e2e8f0);
+    margin-bottom: 12px;
+}
+.newsletters-index__tabs a {
+    padding: 8px 4px;
+    color: var(--escalated-text-muted, #64748b);
+    border-bottom: 2px solid transparent;
+    text-decoration: none;
+}
+.newsletters-index__tabs a.active {
+    color: var(--escalated-text, #0f172a);
+    border-bottom-color: var(--escalated-accent, #2563eb);
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+th,
+td {
+    text-align: left;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--escalated-border, #e2e8f0);
+    font-size: 14px;
+}
+.empty {
+    color: var(--escalated-text-muted, #64748b);
+    text-align: center;
+    padding: 32px;
+}
+.status {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+}
+.status--draft {
+    background: #f1f5f9;
+}
+.status--scheduled,
+.status--sending {
+    background: #e0f2fe;
+}
+.status--sent {
+    background: #dcfce7;
+}
+.status--paused {
+    background: #fef3c7;
+}
+.status--failed {
+    background: #fee2e2;
+}
+</style>

package/src/pages/Admin/Newsletters/Lists/Create.vue

@@ -0,0 +1,64 @@
+<template>
+    <EscalatedLayout title="New list">
+        <form class="lists-create" @submit.prevent="submit">
+            <h1>{{ $t('newsletters.lists.new') }}</h1>
+            <label>
+                {{ $t('newsletters.lists.columns.name') }}
+                <input v-model="form.name" required />
+            </label>
+            <label>
+                {{ $t('form.description') }}
+                <textarea v-model="form.description" />
+            </label>
+            <fieldset>
+                <legend>{{ $t('newsletters.lists.columns.kind') }}</legend>
+                <label class="radio">
+                    <input v-model="form.kind" type="radio" value="static" />
+                    {{ $t('newsletters.lists.kind.static') }}
+                </label>
+                <p class="help">{{ $t('newsletters.lists.create.static_help') }}</p>
+                <label class="radio">
+                    <input v-model="form.kind" type="radio" value="dynamic" />
+                    {{ $t('newsletters.lists.kind.dynamic') }}
+                </label>
+                <p class="help">{{ $t('newsletters.lists.create.dynamic_help') }}</p>
+            </fieldset>
+            <button type="submit">{{ $t('form.create') }}</button>
+        </form>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../../components/EscalatedLayout.vue';
+import { reactive } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const form = reactive({ name: '', description: '', kind: 'static' });
+function submit() {
+    router.post('/admin/newsletters/lists', form);
+}
+</script>
+
+<style scoped>
+.lists-create {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-width: 480px;
+}
+.lists-create label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.lists-create label.radio {
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+}
+.help {
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 12px;
+    margin: 0 0 8px 24px;
+}
+</style>

package/src/pages/Admin/Newsletters/Lists/Index.vue

@@ -0,0 +1,59 @@
+<template>
+    <EscalatedLayout title="Lists">
+        <div class="lists-index">
+            <header>
+                <h1>{{ $t('newsletters.lists.title') }}</h1>
+                <Link href="/admin/newsletters/lists/new" class="button button--primary">
+                    {{ $t('newsletters.lists.new') }}
+                </Link>
+            </header>
+            <table>
+                <thead>
+                    <tr>
+                        <th>{{ $t('newsletters.lists.columns.name') }}</th>
+                        <th>{{ $t('newsletters.lists.columns.kind') }}</th>
+                        <th>{{ $t('newsletters.lists.columns.members') }}</th>
+                        <th>{{ $t('newsletters.lists.columns.opted_out') }}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="l in lists" :key="l.id">
+                        <td>
+                            <Link :href="`/admin/newsletters/lists/${l.id}`">{{ l.name }}</Link>
+                        </td>
+                        <td>{{ l.kind }}</td>
+                        <td>{{ l.member_count }}</td>
+                        <td>{{ l.opted_out_count }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../../components/EscalatedLayout.vue';
+import { Link } from '@inertiajs/vue3';
+
+defineProps({ lists: { type: Array, required: true } });
+</script>
+
+<style scoped>
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+th,
+td {
+    text-align: left;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--escalated-border, #e2e8f0);
+    font-size: 14px;
+}
+</style>

package/src/pages/Admin/Newsletters/Lists/Show.vue

@@ -0,0 +1,53 @@
+<template>
+    <EscalatedLayout title="List">
+        <div class="lists-show">
+            <header>
+                <h1>{{ list.name }}</h1>
+                <div class="lists-show__meta">
+                    {{ list.kind }} list · {{ list.member_count }} members · {{ list.opted_out_count }} opted out
+                </div>
+            </header>
+            <section v-if="list.kind === 'static'">
+                <ListMemberTable :members="members.data" @remove="onRemove" />
+            </section>
+            <section v-else>
+                <DynamicFilterBuilder
+                    :model-value="list.filter_json ?? { rules: [] }"
+                    :match-count="matchCount"
+                    @update:model-value="onFilterChange"
+                />
+            </section>
+        </div>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../../components/EscalatedLayout.vue';
+import ListMemberTable from '../../../../components/admin/newsletters/ListMemberTable.vue';
+import DynamicFilterBuilder from '../../../../components/admin/newsletters/DynamicFilterBuilder.vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    list: { type: Object, required: true },
+    members: { type: Object, required: true },
+    matchCount: { type: Number, default: 0 },
+});
+
+function onRemove(contactId) {
+    router.delete(`/admin/newsletters/lists/${props.list.id}/members/${contactId}`);
+}
+function onFilterChange(filter) {
+    router.put(`/admin/newsletters/lists/${props.list.id}`, { filter_json: filter });
+}
+</script>
+
+<style scoped>
+header {
+    margin-bottom: 16px;
+}
+.lists-show__meta {
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 13px;
+    margin-top: 4px;
+}
+</style>

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

@@ -0,0 +1,85 @@
+<template>
+    <EscalatedLayout title="Newsletter settings">
+        <form class="settings" @submit.prevent="save">
+            <h1>{{ $t('newsletters.settings.title') }}</h1>
+            <label>
+                {{ $t('newsletters.settings.default_from') }}
+                <input v-model="form.default_from" name="default_from" type="email" />
+            </label>
+            <label>
+                {{ $t('newsletters.settings.default_reply_to') }}
+                <input v-model="form.default_reply_to" name="default_reply_to" type="email" />
+            </label>
+            <label>
+                {{ $t('newsletters.settings.default_theme') }}
+                <select v-model="form.default_theme" name="default_theme">
+                    <option v-for="t in themes" :key="t" :value="t">{{ t }}</option>
+                </select>
+            </label>
+            <label>
+                {{ $t('newsletters.settings.rate_limit') }}
+                <input v-model.number="form.rate_limit_per_minute" type="number" min="1" />
+            </label>
+            <label>
+                {{ $t('newsletters.settings.batch_size') }}
+                <input v-model.number="form.batch_size" type="number" min="1" />
+            </label>
+            <label class="checkbox">
+                <input v-model="form.tracking_enabled" name="tracking_enabled" type="checkbox" />
+                {{ $t('newsletters.settings.tracking_enabled') }}
+            </label>
+            <p class="help">{{ $t('newsletters.settings.tracking_help') }}</p>
+            <button type="submit">{{ $t('form.save') }}</button>
+        </form>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { reactive } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    settings: { type: Object, required: true },
+    themes: { type: Array, required: true },
+});
+
+const form = reactive({ ...props.settings });
+function save() {
+    router.put('/admin/newsletters/settings', form);
+}
+</script>
+
+<style scoped>
+.settings {
+    max-width: 480px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+.settings label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 13px;
+    color: var(--escalated-text-muted, #64748b);
+}
+.settings label.checkbox {
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    color: var(--escalated-text, #0f172a);
+}
+.settings input,
+.settings select {
+    padding: 8px 10px;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    border-radius: 6px;
+    font-size: 14px;
+}
+.help {
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 12px;
+}
+</style>