@omega.js/web 0.1.0

package/core/_layouts/blueprint/admin/calendar/index.html

@@ -0,0 +1,590 @@
+---
+layout: admin/core/minimal-viewport-locked
+
+meta:
+  title: "Marketing calendar - Admin"
+  description: "Schedule and manage marketing campaigns: emails and push notifications"
+  breadcrumb: "Calendar"
+
+config:
+  theme:
+    header:
+      title:
+        content: "Marketing calendar"
+        icon: "calendar-days"
+      breadcrumbs:
+        items:
+          - label: "Admin"
+            href: "/admin"
+          - label: "Marketing"
+          - label: "Calendar"
+      actions:
+        items:
+          - label: "Create campaign"
+            icon: "plus"
+            color: "primary"
+            attributes:
+              - ["id", "btn-create-campaign"]
+---
+
+<!-- Calendar Root -->
+<div id="calendar-root" class="d-flex flex-column flex-grow-1">
+  <!-- Toolbar: navigation, view switcher, period label -->
+  <div id="calendar-toolbar" class="d-flex align-items-center justify-content-between mb-3 flex-shrink-0"></div>
+
+  <!-- Calendar grid: fills remaining height -->
+  <div id="calendar-grid" class="flex-grow-1 overflow-hidden position-relative"></div>
+</div>
+
+<!-- Campaign Editor Modal -->
+<div class="modal fade" id="campaign-editor-modal" tabindex="-1" aria-labelledby="campaign-modal-title" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-scrollable">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="campaign-modal-title">
+          <i class="fa-solid fa-plus fa-md me-2"></i>
+          <span id="campaign-modal-title-text">Create campaign</span>
+          <small class="text-muted fw-normal ms-2 d-none" id="campaign-modal-id" style="font-size: 0.6rem"></small>
+        </h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <form id="campaign-editor-form" novalidate data-form-state="initializing" onsubmit="return false">
+
+          <!-- Campaign Type -->
+          <h6 class="mb-3">
+            <i class="fa-solid fa-bullhorn me-2"></i>
+            Campaign type
+          </h6>
+          <div class="row mb-4">
+            <div class="col-6">
+              <input type="radio" class="btn-check" name="campaign.type" id="campaign-type-email" value="email" checked autocomplete="off">
+              <label class="btn btn-outline-adaptive w-100 d-flex align-items-center justify-content-center" for="campaign-type-email">
+                <i class="fa-solid fa-envelope fa-sm me-2"></i>
+                Email
+              </label>
+            </div>
+            <div class="col-6">
+              <input type="radio" class="btn-check" name="campaign.type" id="campaign-type-push" value="push" autocomplete="off">
+              <label class="btn btn-outline-adaptive w-100 d-flex align-items-center justify-content-center" for="campaign-type-push">
+                <i class="fa-solid fa-bell fa-sm me-2"></i>
+                Push notification
+              </label>
+            </div>
+          </div>
+
+          <!-- Content: Edit / Preview tabs -->
+          <ul class="nav nav-tabs mb-3" id="campaign-content-tabs" role="tablist">
+            <li class="nav-item" role="presentation">
+              <button class="nav-link active" id="tab-edit" data-bs-toggle="tab" data-bs-target="#panel-edit" type="button" role="tab">
+                <i class="fa-solid fa-pen fa-sm me-1"></i> Edit
+              </button>
+            </li>
+            <li class="nav-item" role="presentation">
+              <button class="nav-link" id="tab-preview" data-bs-toggle="tab" data-bs-target="#panel-preview" type="button" role="tab">
+                <i class="fa-solid fa-eye fa-sm me-1"></i> Preview
+              </button>
+            </li>
+          </ul>
+
+          <div class="tab-content">
+            <!-- Edit Tab -->
+            <div class="tab-pane fade show active" id="panel-edit" role="tabpanel">
+              <div class="mb-3">
+                <label for="campaign-name" class="form-label">
+                  Campaign name <span class="text-danger">*</span>
+                </label>
+                <input type="text"
+                       class="form-control"
+                       id="campaign-name"
+                       name="campaign.name"
+                       placeholder="e.g. Spring Sale"
+                       minlength="3"
+                       maxlength="100"
+                       required>
+                <div class="invalid-feedback">Campaign name is required (3-100 characters)</div>
+              </div>
+
+              <div class="mb-3">
+                <label for="campaign-subject" class="form-label">
+                  Subject <span class="text-danger">*</span>
+                  <small class="text-muted fw-normal ms-1" id="campaign-subject-hint">(email subject line)</small>
+                </label>
+                <input type="text"
+                       class="form-control"
+                       id="campaign-subject"
+                       name="campaign.subject"
+                       placeholder="e.g. 50% Off Premium!"
+                       minlength="3"
+                       maxlength="200"
+                       required>
+                <div class="invalid-feedback">Subject is required</div>
+              </div>
+
+              <!-- Email-only fields -->
+              <div id="email-fields">
+                <div class="mb-3">
+                  <label for="campaign-preheader" class="form-label">
+                    Preheader
+                    <small class="text-muted fw-normal ms-1">(preview text)</small>
+                  </label>
+                  <input type="text"
+                         class="form-control"
+                         id="campaign-preheader"
+                         name="campaign.preheader"
+                         placeholder="Brief preview text shown in inbox"
+                         maxlength="200">
+                </div>
+
+                <div class="mb-3">
+                  <label for="campaign-content" class="form-label">
+                    Content
+                    <small class="text-muted fw-normal ms-1">(markdown)</small>
+                  </label>
+                  <textarea class="form-control font-monospace"
+                            id="campaign-content"
+                            name="campaign.content"
+                            rows="6"
+                            placeholder="# Hello&#10;&#10;Check out our **sale**!"></textarea>
+                </div>
+
+                <div class="row mb-3">
+                  <div class="col-md-6">
+                    <label for="campaign-template" class="form-label">Template</label>
+                    <select class="form-select" id="campaign-template" name="campaign.template">
+                      <option value="card" selected>Card</option>
+                      <option value="plain">Plain</option>
+                    </select>
+                  </div>
+                  <div class="col-md-6">
+                    <label for="campaign-sender" class="form-label">Sender</label>
+                    <select class="form-select" id="campaign-sender" name="campaign.sender">
+                      <option value="marketing" selected>Marketing</option>
+                      <option value="newsletter">Newsletter</option>
+                      <option value="hello">Hello</option>
+                      <option value="orders">Orders</option>
+                    </select>
+                  </div>
+                </div>
+
+                <div class="mb-3">
+                  <label for="campaign-discount-code" class="form-label">
+                    Discount code
+                    <small class="text-muted fw-normal ms-1">(optional: resolves {discount.code} and {discount.percent})</small>
+                  </label>
+                  <input type="text"
+                         class="form-control"
+                         id="campaign-discount-code"
+                         name="campaign.discountCode"
+                         placeholder="e.g. UPGRADE15">
+                </div>
+              </div>
+
+              <!-- Push-only fields -->
+              <div id="push-fields" class="d-none">
+            <div class="mb-3">
+              <label for="campaign-icon" class="form-label">
+                Icon URL
+              </label>
+              <input type="url"
+                     class="form-control"
+                     id="campaign-icon"
+                     name="campaign.icon"
+                     placeholder="https://example.com/icon.png"
+                     pattern="https?://.+"
+                     title="URL must start with http:// or https://">
+              <div class="invalid-feedback">Please provide a valid icon URL</div>
+            </div>
+
+            <div class="mb-3">
+              <label for="campaign-click-action" class="form-label">
+                Click action URL
+              </label>
+              <input type="url"
+                     class="form-control"
+                     id="campaign-click-action"
+                     name="campaign.clickAction"
+                     placeholder="https://example.com/landing"
+                     pattern="https?://.+"
+                     title="URL must start with http:// or https://">
+              <div class="invalid-feedback">Please provide a valid URL</div>
+            </div>
+
+            <div class="mb-3">
+              <label for="campaign-push-tags" class="form-label">
+                <i class="fa-solid fa-tags fa-sm me-1"></i>
+                Filter by tags
+                <small class="text-muted fw-normal ms-1">(comma-separated)</small>
+              </label>
+              <input type="text"
+                     class="form-control"
+                     id="campaign-push-tags"
+                     name="campaign.filters.tags"
+                     placeholder="e.g. premium, active">
+            </div>
+
+            <div class="mb-3">
+              <label for="campaign-push-owner" class="form-label">
+                Owner UID
+                <small class="text-muted fw-normal ms-1">(optional, for testing)</small>
+              </label>
+              <input type="text"
+                     class="form-control"
+                     id="campaign-push-owner"
+                     name="campaign.filters.owner"
+                     placeholder="User UID for targeted test send">
+            </div>
+          </div>
+            </div>
+
+            <!-- Preview Tab -->
+            <div class="tab-pane fade" id="panel-preview" role="tabpanel">
+              <div id="campaign-preview-container">
+                <div class="text-center text-muted py-4">
+                  <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+                  Loading preview...
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Test Mode -->
+          <div class="form-check mb-4">
+            <input class="form-check-input"
+                   type="checkbox"
+                   id="campaign-test"
+                   name="campaign.test">
+            <label class="form-check-label" for="campaign-test">
+              Test mode
+            </label>
+            <small class="d-block text-muted mt-1">
+              Send only to admin/test recipients instead of the full audience. Use this to preview the campaign before going live.
+            </small>
+          </div>
+
+          <!-- Schedule -->
+          <h6 class="mb-3 mt-4">
+            <i class="fa-solid fa-clock me-2"></i>
+            Schedule
+            <small class="text-muted fw-normal ms-1">(UTC)</small>
+          </h6>
+
+          <div class="row mb-2">
+            <div class="col-md-5">
+              <label for="campaign-date" class="form-label">
+                Date (UTC) <span class="text-danger">*</span>
+              </label>
+              <input type="date"
+                     class="form-control"
+                     id="campaign-date"
+                     name="campaign.date"
+                     required>
+              <div class="invalid-feedback">Date is required</div>
+            </div>
+            <div class="col-md-4">
+              <label for="campaign-time" class="form-label">
+                Time (UTC) <span class="text-danger">*</span>
+              </label>
+              <input type="time"
+                     class="form-control"
+                     id="campaign-time"
+                     name="campaign.time"
+                     value="09:00"
+                     required>
+              <div class="invalid-feedback">Time is required</div>
+            </div>
+            <div class="col-md-3 d-flex align-items-end">
+              <button type="button" class="btn btn-md btn-outline-primary w-100" id="btn-send-now">
+                <i class="fa-solid fa-clock fa-sm me-1"></i>
+                Set now
+              </button>
+            </div>
+          </div>
+          <div class="mb-3" id="campaign-local-time-row" style="display:none">
+            <span class="omega-chip" id="campaign-time-local"></span>
+          </div>
+
+          <!-- Recurrence -->
+          <h6 class="mb-3 mt-4">
+            <i class="fa-solid fa-repeat me-2"></i>
+            Recurrence
+            <small class="text-muted fw-normal ms-1">(optional)</small>
+          </h6>
+
+          <div class="form-check mb-3">
+            <input class="form-check-input"
+                   type="checkbox"
+                   id="campaign-recurring"
+                   name="campaign.recurring">
+            <label class="form-check-label" for="campaign-recurring">
+              Make this a recurring campaign
+            </label>
+          </div>
+
+          <div id="recurrence-fields" class="d-none">
+            <div class="row mb-3">
+              <div class="col-md-4">
+                <label for="campaign-recurrence-pattern" class="form-label">Pattern</label>
+                <select class="form-select" id="campaign-recurrence-pattern" name="campaign.recurrence.pattern">
+                  <option value="daily">Daily</option>
+                  <option value="weekly">Weekly</option>
+                  <option value="monthly" selected>Monthly (day of month)</option>
+                  <option value="monthly-weekday">Monthly (Nth weekday)</option>
+                  <option value="quarterly">Quarterly</option>
+                  <option value="yearly">Yearly</option>
+                </select>
+              </div>
+              <div class="col-md-4">
+                <label for="campaign-recurrence-hour" class="form-label">Hour (UTC)</label>
+                <div class="input-group">
+                  <input type="number"
+                         class="form-control"
+                         id="campaign-recurrence-hour"
+                         name="campaign.recurrence.hour"
+                         value="14"
+                         min="0"
+                         max="23">
+                  <span class="input-group-text">:</span>
+                  <input type="number"
+                         class="form-control"
+                         id="campaign-recurrence-minute"
+                         name="campaign.recurrence.minute"
+                         value="0"
+                         min="0"
+                         max="59"
+                         placeholder="Min">
+                </div>
+              </div>
+              <div class="col-md-4">
+                <label for="campaign-recurrence-day" class="form-label">
+                  Day
+                  <small class="text-muted fw-normal ms-1" id="recurrence-day-hint">(of month)</small>
+                </label>
+                <input type="number"
+                       class="form-control"
+                       id="campaign-recurrence-day"
+                       name="campaign.recurrence.day"
+                       value="1"
+                       min="0"
+                       max="31">
+              </div>
+            </div>
+
+            <div class="row mb-3 d-none" id="recurrence-nth-row">
+              <div class="col-md-4">
+                <label for="campaign-recurrence-nth" class="form-label">Occurrence</label>
+                <select class="form-select" id="campaign-recurrence-nth" name="campaign.recurrence.nth">
+                  <option value="1">1st</option>
+                  <option value="2" selected>2nd</option>
+                  <option value="3">3rd</option>
+                  <option value="4">4th</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="row mb-3 d-none" id="recurrence-month-row">
+              <div class="col-md-4">
+                <label for="campaign-recurrence-month" class="form-label">Month</label>
+                <select class="form-select" id="campaign-recurrence-month" name="campaign.recurrence.month">
+                  <option value="1">January</option>
+                  <option value="2">February</option>
+                  <option value="3">March</option>
+                  <option value="4">April</option>
+                  <option value="5">May</option>
+                  <option value="6">June</option>
+                  <option value="7">July</option>
+                  <option value="8">August</option>
+                  <option value="9">September</option>
+                  <option value="10">October</option>
+                  <option value="11">November</option>
+                  <option value="12">December</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="alert alert-info small mb-3" id="recurrence-info">
+              This campaign will repeat automatically. Editing changes all future sends.
+            </div>
+          </div>
+
+          <!-- Targeting -->
+          <h6 class="mb-3 mt-4">
+            <i class="fa-solid fa-users me-2"></i>
+            Targeting
+          </h6>
+
+          <div class="mb-3" id="email-targeting">
+            <label class="form-label">Providers</label>
+            <small class="d-block text-muted mb-2">Which services to send through. Leave unchecked to use all enabled providers.</small>
+            <div class="d-flex gap-3">
+              <div class="form-check">
+                <input class="form-check-input"
+                       type="checkbox"
+                       id="campaign-provider-sendgrid"
+                       name="campaign.providers.sendgrid">
+                <label class="form-check-label" for="campaign-provider-sendgrid">
+                  SendGrid
+                </label>
+              </div>
+              <div class="form-check">
+                <input class="form-check-input"
+                       type="checkbox"
+                       id="campaign-provider-beehiiv"
+                       name="campaign.providers.beehiiv">
+                <label class="form-check-label" for="campaign-provider-beehiiv">
+                  Beehiiv
+                </label>
+              </div>
+            </div>
+          </div>
+
+          <div class="form-check mb-2">
+            <input class="form-check-input"
+                   type="checkbox"
+                   id="campaign-all"
+                   name="campaign.all">
+            <label class="form-check-label" for="campaign-all">
+              Target all contacts
+              <small class="text-muted fw-normal ms-1">(SendGrid only: overrides lists/segments)</small>
+            </label>
+          </div>
+
+          <div class="mb-3">
+            <label for="campaign-lists" class="form-label">
+              Lists
+              <small class="text-muted fw-normal ms-1">(SendGrid list IDs, comma-separated; empty = brand default list)</small>
+            </label>
+            <input type="text"
+                   class="form-control"
+                   id="campaign-lists"
+                   name="campaign.lists"
+                   placeholder="Leave empty for default brand list">
+          </div>
+
+          <div class="mb-3">
+            <label for="campaign-segments" class="form-label">
+              Include segments
+              <small class="text-muted fw-normal ms-1">(AND: contacts must match ALL listed segments)</small>
+            </label>
+            <input type="text"
+                   class="form-control"
+                   id="campaign-segments"
+                   name="campaign.segments"
+                   placeholder="e.g. subscription_free, lifecycle_30d">
+            <small class="form-text text-muted">SSOT keys: subscription_free, subscription_paid, subscription_trialing, subscription_cancelled, subscription_churned_trial, subscription_churned_paid, lifecycle_7d, lifecycle_30d, engagement_active_30d, engagement_inactive_90d, etc.</small>
+          </div>
+
+          <div class="mb-3">
+            <label for="campaign-exclude-segments" class="form-label">
+              Exclude segments
+              <small class="text-muted fw-normal ms-1">(AND: contacts matching ANY excluded segment are removed)</small>
+            </label>
+            <input type="text"
+                   class="form-control"
+                   id="campaign-exclude-segments"
+                   name="campaign.excludeSegments"
+                   placeholder="e.g. subscription_paid, subscription_trialing">
+          </div>
+
+          <!-- Advanced Settings (collapsible) -->
+          <h6 class="mb-3 mt-4">
+            <a class="text-decoration-none" data-bs-toggle="collapse" href="#advanced-settings" role="button" aria-expanded="false">
+              <i class="fa-solid fa-sliders me-2"></i>
+              Advanced settings
+              <small class="text-muted fw-normal ms-1">(optional)</small>
+            </a>
+          </h6>
+
+          <div class="collapse" id="advanced-settings">
+            <div class="row mb-3">
+              <div class="col-md-6">
+                <label for="campaign-group" class="form-label">ASM Group</label>
+                <input type="text"
+                       class="form-control"
+                       id="campaign-group"
+                       name="campaign.group"
+                       placeholder="e.g. marketing">
+              </div>
+              <div class="col-md-6">
+                <label for="campaign-categories" class="form-label">
+                  Categories
+                  <small class="text-muted fw-normal ms-1">(comma-separated)</small>
+                </label>
+                <input type="text"
+                       class="form-control"
+                       id="campaign-categories"
+                       name="campaign.categories"
+                       placeholder="e.g. marketing, q1-launch">
+              </div>
+            </div>
+
+            <div class="mb-3">
+              <label class="form-label">UTM overrides</label>
+              <div class="row g-2" id="utm-fields">
+                <div class="col-md-6">
+                  <input type="text" class="form-control form-control-sm" name="campaign.utm.utm_source" placeholder="utm_source">
+                </div>
+                <div class="col-md-6">
+                  <input type="text" class="form-control form-control-sm" name="campaign.utm.utm_medium" placeholder="utm_medium">
+                </div>
+                <div class="col-md-6">
+                  <input type="text" class="form-control form-control-sm" name="campaign.utm.utm_campaign" placeholder="utm_campaign">
+                </div>
+                <div class="col-md-6">
+                  <input type="text" class="form-control form-control-sm" name="campaign.utm.utm_term" placeholder="utm_term">
+                </div>
+                <div class="col-md-6">
+                  <input type="text" class="form-control form-control-sm" name="campaign.utm.utm_content" placeholder="utm_content">
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="modal-footer d-flex justify-content-between">
+            <div>
+              <button type="submit" name="action" value="delete" formnovalidate class="btn btn-outline-danger d-none" id="btn-delete-campaign">
+                <i class="fa-solid fa-trash fa-sm me-1"></i>
+                <span class="button-text">Delete</span>
+              </button>
+            </div>
+            <div class="d-flex gap-2">
+              <button type="submit" name="action" value="test" formnovalidate class="btn btn-outline-warning" id="btn-send-test">
+                <i class="fa-solid fa-vial fa-sm me-1"></i>
+                <span class="button-text">Send test</span>
+              </button>
+              <button type="submit" name="action" value="save" class="btn btn-adaptive" id="btn-save-campaign">
+                <i class="fa-solid fa-paper-plane fa-sm me-1"></i>
+                <span class="button-text">Save campaign</span>
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Campaign Results Modal (read-only for sent/failed) -->
+<div class="modal fade" id="campaign-results-modal" tabindex="-1" aria-labelledby="campaign-results-title" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-scrollable">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="campaign-results-title">
+          <i class="fa-solid fa-eye fa-md me-2"></i>
+          <span id="campaign-results-title-text">Campaign details</span>
+        </h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body" id="campaign-results-body">
+        <!-- Populated dynamically -->
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline-danger d-none" id="btn-retry-campaign">
+          <i class="fa-solid fa-rotate-right fa-sm me-1"></i>
+          Retry (Create new)
+        </button>
+        <button type="button" class="btn btn-outline-adaptive" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>