@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/marketing/campaigns/index.stx

@@ -0,0 +1,604 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Campaigns')
+<PageLayout>
+  <div class="sm:flex sm:items-center sm:justify-between">
+    <PageHeader title="Campaigns" description="Plan, launch, and monitor marketing campaigns across channels" />
+    <div class="mt-4 sm:mt-0">
+      <button @click="openNewCampaignModal()" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md shadow-sm">
+        <div class="mr-2 h-5 w-5 i-hugeicons-plus-sign"></div>
+        New Campaign
+      </button>
+    </div>
+  </div>
+
+  <div class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 mt-6">
+    <div class="flex overflow-hidden items-center p-5 bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="p-2 h-10 w-10 bg-blue-100 dark:bg-blue-900 rounded-md">
+        <div class="h-6 w-6 text-blue-600 dark:text-blue-300 i-hugeicons-rocket-01"></div>
+      </div>
+      <div class="ml-5">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Total Campaigns</dt>
+        <dd class="font-medium text-gray-900 text-lg dark:text-white">{{ totalCampaigns() }}</dd>
+      </div>
+    </div>
+    <div class="flex overflow-hidden items-center p-5 bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="p-2 h-10 w-10 bg-green-100 dark:bg-green-900 rounded-md">
+        <div class="h-6 w-6 text-green-600 dark:text-green-300 i-hugeicons-checkmark-circle-02"></div>
+      </div>
+      <div class="ml-5">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Active</dt>
+        <dd class="font-medium text-gray-900 text-lg dark:text-white">{{ activeCount() }}</dd>
+      </div>
+    </div>
+    <div class="flex overflow-hidden items-center p-5 bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="p-2 h-10 w-10 bg-blue-100 dark:bg-blue-900 rounded-md">
+        <div class="h-6 w-6 text-blue-600 dark:text-blue-300 i-hugeicons-clock-01"></div>
+      </div>
+      <div class="ml-5">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Scheduled</dt>
+        <dd class="font-medium text-gray-900 text-lg dark:text-white">{{ scheduledCount() }}</dd>
+      </div>
+    </div>
+    <div class="flex overflow-hidden items-center p-5 bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="p-2 h-10 w-10 bg-yellow-100 dark:bg-yellow-900 rounded-md">
+        <div class="h-6 w-6 text-yellow-600 dark:text-yellow-300 i-hugeicons-edit-01"></div>
+      </div>
+      <div class="ml-5">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Drafts</dt>
+        <dd class="font-medium text-gray-900 text-lg dark:text-white">{{ draftCount() }}</dd>
+      </div>
+    </div>
+  </div>
+
+  <div class="grid gap-5 grid-cols-1 lg:grid-cols-2 mt-6">
+    <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="p-6">
+        <h3 class="font-medium text-base text-gray-900 dark:text-white">Goal Progress (Active)</h3>
+        <div class="mt-4 h-72"><canvas id="campaigns_goal_chart"></canvas></div>
+      </div>
+    </div>
+    <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="p-6">
+        <h3 class="font-medium text-base text-gray-900 dark:text-white">Budget vs Spent</h3>
+        <div class="mt-4 h-72"><canvas id="campaigns_budget_chart"></canvas></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mt-8">
+    <div class="relative flex-1 max-w-sm">
+      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+        <div class="h-5 w-5 text-gray-400 i-hugeicons-search-01"></div>
+      </div>
+      <input x-model="searchQuery" type="text" placeholder="Search campaigns..." class="block pl-10 pr-3 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600" />
+    </div>
+
+    <div class="flex flex-col gap-4 sm:flex-row">
+      <select x-model="statusFilter" class="block pl-3 pr-10 py-1.5 text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600">
+        <option value="all">All Statuses</option>
+        <template :for="status in campaignStatuses">
+          <option :value="status">{{ status }}</option>
+        </template>
+      </select>
+      <select x-model="typeFilter" class="block pl-3 pr-10 py-1.5 text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600">
+        <option value="all">All Types</option>
+        <template :for="type in campaignTypes">
+          <option :value="type">{{ type }}</option>
+        </template>
+      </select>
+      <select x-model="sortBy" class="block pl-3 pr-10 py-1.5 text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600">
+        <option value="startDate">Sort by Start Date</option>
+        <option value="name">Sort by Name</option>
+        <option value="budget">Sort by Budget</option>
+        <option value="goalProgress">Sort by Progress</option>
+      </select>
+      <select x-model="sortOrder" class="block pl-3 pr-10 py-1.5 text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600">
+        <option value="desc">Descending</option>
+        <option value="asc">Ascending</option>
+      </select>
+    </div>
+  </div>
+
+  <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6">
+    <template :for="campaign in paginatedCampaigns">
+      <div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700 shadow-sm hover:shadow-md transition-shadow">
+        <div class="p-6">
+          <div class="flex items-start justify-between">
+            <div>
+              <h3 class="font-medium text-base text-gray-900 dark:text-white">{{ campaign.name }}</h3>
+              <div class="flex items-center mt-1 space-x-2">
+                <span class="{{ typeBadgeClass(campaign.type) }}">{{ campaign.type }}</span>
+                <span class="{{ statusBadgeClass(campaign.status) }}">{{ campaign.status }}</span>
+              </div>
+            </div>
+            <button @click="openCampaignActions(campaign.id)" class="text-gray-400 hover:text-gray-600 dark:hover:text-white">
+              <div class="h-5 w-5 i-hugeicons-more-horizontal-circle-01"></div>
+            </button>
+          </div>
+
+          <div class="flex items-center mt-4 text-gray-500 text-sm dark:text-neutral-400">
+            <img :src="campaign.ownerAvatar" :alt="campaign.owner" class="h-6 w-6 rounded-full" />
+            <span class="ml-2">{{ campaign.owner }}</span>
+          </div>
+
+          <div class="grid gap-3 grid-cols-2 mt-4 text-sm">
+            <div>
+              <p class="text-gray-500 dark:text-neutral-400">Start</p>
+              <p class="font-medium text-gray-900 dark:text-white">{{ formatDate(campaign.startDate) }}</p>
+            </div>
+            <div>
+              <p class="text-gray-500 dark:text-neutral-400">End</p>
+              <p class="font-medium text-gray-900 dark:text-white">{{ formatDate(campaign.endDate) }}</p>
+            </div>
+            <div>
+              <p class="text-gray-500 dark:text-neutral-400">Budget</p>
+              <p class="font-medium text-gray-900 dark:text-white">{{ formatCurrency(campaign.budget) }}</p>
+            </div>
+            <div>
+              <p class="text-gray-500 dark:text-neutral-400">Spent</p>
+              <p class="font-medium text-gray-900 dark:text-white">{{ formatCurrency(campaign.spent) }}</p>
+            </div>
+          </div>
+
+          <div class="mt-4">
+            <div class="flex items-center justify-between text-sm">
+              <span class="text-gray-500 dark:text-neutral-400">{{ campaign.goal }}</span>
+              <span class="font-medium text-gray-900 dark:text-white">{{ formatGoalProgress(campaign) }}</span>
+            </div>
+            <div class="overflow-hidden mt-1 h-2 bg-gray-200 dark:bg-neutral-700 rounded-full">
+              <div class="h-full bg-blue-500 rounded-full" style="width: {{ goalPercentage(campaign) }}%"></div>
+            </div>
+          </div>
+
+          <div :show="campaign.channels.length > 0" class="flex flex-wrap gap-1 mt-4">
+            <template :for="channel in campaign.channels">
+              <span class="inline-flex items-center px-2 py-0.5 font-medium text-gray-600 text-xs dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700 rounded">{{ channel }}</span>
+            </template>
+          </div>
+
+          <div class="flex justify-end mt-4 space-x-2">
+            <button @click="duplicateCampaign(campaign.id)" class="px-2.5 py-1.5 text-gray-700 text-sm dark:text-neutral-300 hover:bg-gray-50 dark:hover:bg-neutral-700 rounded-md" title="Duplicate">
+              <div class="h-4 w-4 i-hugeicons-copy"></div>
+            </button>
+            <button @click="openEditCampaignModal(campaign.id)" class="px-2.5 py-1.5 text-blue-600 text-sm dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 rounded-md" title="Edit">
+              <div class="h-4 w-4 i-hugeicons-edit-01"></div>
+            </button>
+            <button @click="deleteCampaign(campaign.id)" class="px-2.5 py-1.5 text-red-600 text-sm dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-md" title="Delete">
+              <div class="h-4 w-4 i-hugeicons-waste"></div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+
+  <div :show="paginatedCampaigns().length === 0" class="py-12 text-center">
+    <div class="mx-auto h-12 w-12 text-gray-400 i-hugeicons-rocket-01"></div>
+    <h3 class="mt-2 font-semibold text-gray-900 text-sm dark:text-white">No campaigns found</h3>
+    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Try adjusting your filters or create a new campaign.</p>
+  </div>
+
+  <div :show="totalPages() > 1" class="flex items-center justify-between mt-6">
+    <p class="text-gray-700 text-sm dark:text-neutral-300">Page {{ currentPage() }} of {{ totalPages() }}</p>
+    <nav class="inline-flex -space-x-px rounded-md shadow-sm isolate">
+      <button @click="prevPage()" :disabled="currentPage() === 1" class="inline-flex relative items-center px-2 py-2 text-gray-400 dark:text-neutral-500 hover:bg-gray-50 dark:hover:bg-neutral-700 ring-1 ring-gray-300 ring-inset rounded-l-md dark:ring-neutral-600 disabled:opacity-50 disabled:cursor-not-allowed">
+        <div class="h-5 w-5 i-hugeicons-arrow-left-01"></div>
+      </button>
+      <button @click="nextPage()" :disabled="currentPage() === totalPages()" class="inline-flex relative items-center px-2 py-2 text-gray-400 dark:text-neutral-500 hover:bg-gray-50 dark:hover:bg-neutral-700 ring-1 ring-gray-300 ring-inset rounded-r-md dark:ring-neutral-600 disabled:opacity-50 disabled:cursor-not-allowed">
+        <div class="h-5 w-5 i-hugeicons-arrow-right-01"></div>
+      </button>
+    </nav>
+  </div>
+
+  <div :show="showCampaignModal()" @click.self="closeCampaignModal()" class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black bg-opacity-50">
+    <div class="overflow-y-auto p-6 max-h-[90vh] w-full sm:max-w-2xl bg-white dark:bg-neutral-800 rounded-lg shadow-xl">
+      <div class="flex items-start justify-between mb-4">
+        <h3 class="font-semibold text-gray-900 text-lg dark:text-white">{{ isEditMode() ? 'Edit Campaign' : 'New Campaign' }}</h3>
+        <button @click="closeCampaignModal()" class="text-gray-400 dark:text-neutral-300 hover:text-gray-600">
+          <i class="h-5 w-5 i-hugeicons-cancel-01"></i>
+        </button>
+      </div>
+
+      <div class="space-y-4">
+        <div>
+          <label class="block font-medium text-gray-900 text-sm dark:text-white">Name</label>
+          <input x-model="formName" type="text" placeholder="Campaign name" class="block mt-2 py-1.5 w-full text-gray-900 sm:text-sm dark:text-white dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 shadow-sm" />
+        </div>
+        <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
+          <div>
+            <label class="block font-medium text-gray-900 text-sm dark:text-white">Type</label>
+            <select x-model="formType" class="block mt-2 pl-3 pr-10 py-1.5 w-full text-gray-900 sm:text-sm dark:text-white dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600">
+              <template :for="type in campaignTypes">
+                <option :value="type">{{ type }}</option>
+              </template>
+            </select>
+          </div>
+          <div>
+            <label class="block font-medium text-gray-900 text-sm dark:text-white">Status</label>
+            <select x-model="formStatus" class="block mt-2 pl-3 pr-10 py-1.5 w-full text-gray-900 sm:text-sm dark:text-white dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600">
+              <template :for="status in campaignStatuses">
+                <option :value="status">{{ status }}</option>
+              </template>
+            </select>
+          </div>
+        </div>
+        <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
+          <div>
+            <label class="block font-medium text-gray-900 text-sm dark:text-white">Start Date</label>
+            <input x-model="formStartDate" type="date" class="block mt-2 py-1.5 w-full text-gray-900 sm:text-sm dark:text-white dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 shadow-sm" />
+          </div>
+          <div>
+            <label class="block font-medium text-gray-900 text-sm dark:text-white">End Date</label>
+            <input x-model="formEndDate" type="date" class="block mt-2 py-1.5 w-full text-gray-900 sm:text-sm dark:text-white dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 shadow-sm" />
+          </div>
+        </div>
+        <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
+          <div>
+            <label class="block font-medium text-gray-900 text-sm dark:text-white">Budget</label>
+            <input x-model="formBudget" type="number" min="0" class="block mt-2 py-1.5 w-full text-gray-900 sm:text-sm dark:text-white dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 shadow-sm" />
+          </div>
+          <div>
+            <label class="block font-medium text-gray-900 text-sm dark:text-white">Goal</label>
+            <input x-model="formGoal" type="text" placeholder="Sales / Engagement / etc" class="block mt-2 py-1.5 w-full text-gray-900 sm:text-sm dark:text-white dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 shadow-sm" />
+          </div>
+        </div>
+        <div>
+          <label class="block font-medium text-gray-900 text-sm dark:text-white">Audience</label>
+          <input x-model="formAudience" type="text" placeholder="e.g. All Customers" class="block mt-2 py-1.5 w-full text-gray-900 sm:text-sm dark:text-white dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 shadow-sm" />
+        </div>
+      </div>
+
+      <div class="flex justify-end mt-6 space-x-2">
+        <button @click="closeCampaignModal()" class="inline-flex justify-center px-3 py-2 font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">Cancel</button>
+        <button @click="saveCampaign()" :disabled="!formName()" class="inline-flex justify-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md shadow-sm disabled:opacity-50">{{ isEditMode() ? 'Save' : 'Create' }}</button>
+      </div>
+    </div>
+  </div>
+</PageLayout>
+
+<script client>
+// Filter options — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838).
+const campaignTypes = ['Email', 'SMS', 'Seasonal', 'Discount', 'Product Launch', 'App Promotion']
+const campaignStatuses = ['Active', 'Scheduled', 'Draft', 'Completed', 'Paused']
+
+interface Campaign {
+  id: number
+  uuid: string
+  name: string
+  type: string
+  status: string
+  startDate: string
+  endDate: string | null
+  budget: number
+  spent: number
+  goal: string
+  goalTarget: number
+  goalProgress: number
+  audience: string
+  channels: string[]
+  owner: string
+  ownerAvatar: string
+  createdAt: string
+  lastModified: string
+}
+
+interface ChartLike { destroy: () => void, update: () => void, data: { labels: string[], datasets: Array<{ label?: string, data: number[] }> } }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+const initialCampaigns: Campaign[] = [
+  { id: 1, uuid: '11ce', name: 'Summer Sale Promotion', type: 'Discount', status: 'Active', startDate: '2023-06-01', endDate: '2023-08-31', budget: 5000, spent: 2300, goal: 'Sales', goalTarget: 25000, goalProgress: 12500, audience: 'All Customers', channels: ['Email', 'Social Media', 'SMS'], owner: 'Alex Johnson', ownerAvatar: 'https://randomuser.me/api/portraits/men/32.jpg', createdAt: '2023-05-15', lastModified: '2023-06-10' },
+  { id: 2, uuid: '22ce', name: 'New Product Launch - Premium Coffee', type: 'Product Launch', status: 'Scheduled', startDate: '2023-09-15', endDate: '2023-10-15', budget: 8000, spent: 0, goal: 'Awareness', goalTarget: 50000, goalProgress: 0, audience: 'Coffee Enthusiasts', channels: ['Email', 'Social Media', 'Paid Ads'], owner: 'Sarah Miller', ownerAvatar: 'https://randomuser.me/api/portraits/women/44.jpg', createdAt: '2023-08-01', lastModified: '2023-08-15' },
+  { id: 3, uuid: '33ce', name: 'Customer Loyalty Program', type: 'Email', status: 'Active', startDate: '2023-01-01', endDate: null, budget: 12000, spent: 5400, goal: 'Retention', goalTarget: 75, goalProgress: 65, audience: 'Existing Customers', channels: ['Email'], owner: 'David Chen', ownerAvatar: 'https://randomuser.me/api/portraits/men/67.jpg', createdAt: '2022-12-01', lastModified: '2023-07-15' },
+  { id: 4, uuid: '44ce', name: 'Holiday Special Discount', type: 'Discount', status: 'Draft', startDate: '2023-12-01', endDate: '2023-12-31', budget: 6000, spent: 0, goal: 'Sales', goalTarget: 40000, goalProgress: 0, audience: 'All Customers', channels: ['Email', 'Social Media', 'Website'], owner: 'Emily Wilson', ownerAvatar: 'https://randomuser.me/api/portraits/women/23.jpg', createdAt: '2022-12-10', lastModified: '2023-06-15' },
+  { id: 5, uuid: '55ce', name: 'Back to School Campaign', type: 'Seasonal', status: 'Completed', startDate: '2022-08-01', endDate: '2022-09-15', budget: 4500, spent: 4500, goal: 'Sales', goalTarget: 30000, goalProgress: 35200, audience: 'Students & Parents', channels: ['Email', 'Social Media', 'Paid Ads'], owner: 'Michael Thompson', ownerAvatar: 'https://randomuser.me/api/portraits/men/42.jpg', createdAt: '2022-07-05', lastModified: '2022-09-20' },
+  { id: 6, uuid: '66ce', name: 'Spring Collection Launch', type: 'Product Launch', status: 'Completed', startDate: '2023-03-01', endDate: '2023-04-15', budget: 7500, spent: 7200, goal: 'Sales', goalTarget: 45000, goalProgress: 42000, audience: 'All Customers', channels: ['Email', 'Social Media', 'Website'], owner: 'Jessica Lee', ownerAvatar: 'https://randomuser.me/api/portraits/women/56.jpg', createdAt: '2023-02-10', lastModified: '2023-04-20' },
+  { id: 7, uuid: '77ce', name: 'App Download Promotion', type: 'App Promotion', status: 'Active', startDate: '2023-07-01', endDate: '2023-09-30', budget: 6000, spent: 2800, goal: 'Downloads', goalTarget: 10000, goalProgress: 6500, audience: 'All Customers', channels: ['Email', 'Social Media', 'Paid Ads', 'Website'], owner: 'Robert Garcia', ownerAvatar: 'https://randomuser.me/api/portraits/men/78.jpg', createdAt: '2023-06-15', lastModified: '2023-07-25' },
+  { id: 8, uuid: '88ce', name: 'Black Friday Sale', type: 'Discount', status: 'Draft', startDate: '2023-11-24', endDate: '2023-11-27', budget: 15000, spent: 0, goal: 'Sales', goalTarget: 100000, goalProgress: 0, audience: 'All Customers', channels: ['Email', 'Social Media', 'Paid Ads'], owner: 'Sophia Martinez', ownerAvatar: 'https://randomuser.me/api/portraits/women/90.jpg', createdAt: '2023-08-10', lastModified: '2023-08-10' },
+  { id: 9, uuid: '99ce', name: 'Monthly Newsletter', type: 'Email', status: 'Scheduled', startDate: '2023-12-25', endDate: '2023-12-25', budget: 500, spent: 0, goal: 'Engagement', goalTarget: 2000, goalProgress: 0, audience: 'All Subscribers', channels: ['Email'], owner: 'Sarah Miller', ownerAvatar: 'https://randomuser.me/api/portraits/women/44.jpg', createdAt: '2023-12-10', lastModified: '2023-12-10' },
+  { id: 10, uuid: 'aace', name: 'Holiday Sale Announcement', type: 'Email', status: 'Active', startDate: '2023-12-15', endDate: '2023-12-31', budget: 1200, spent: 800, goal: 'Sales', goalTarget: 50000, goalProgress: 32000, audience: 'All Customers', channels: ['Email'], owner: 'Alex Johnson', ownerAvatar: 'https://randomuser.me/api/portraits/men/32.jpg', createdAt: '2023-12-01', lastModified: '2023-12-05' },
+  { id: 11, uuid: 'bbce', name: 'Flash Sale Alert', type: 'SMS', status: 'Scheduled', startDate: '2023-12-20', endDate: '2023-12-20', budget: 300, spent: 0, goal: 'Sales', goalTarget: 10000, goalProgress: 0, audience: 'Opted-in Customers', channels: ['SMS'], owner: 'David Chen', ownerAvatar: 'https://randomuser.me/api/portraits/men/67.jpg', createdAt: '2023-12-15', lastModified: '2023-12-15' },
+  { id: 12, uuid: 'ccce', name: 'Order Delivery Notification', type: 'SMS', status: 'Active', startDate: '2023-12-01', endDate: null, budget: 200, spent: 120, goal: 'Customer Service', goalTarget: 500, goalProgress: 320, audience: 'Recent Customers', channels: ['SMS'], owner: 'Emily Wilson', ownerAvatar: 'https://randomuser.me/api/portraits/women/23.jpg', createdAt: '2023-11-25', lastModified: '2023-11-30' },
+]
+
+const campaigns = state<Campaign[]>(initialCampaigns)
+const searchQuery = state('')
+const statusFilter = state('all')
+const typeFilter = state('all')
+const sortBy = state<'startDate' | 'name' | 'budget' | 'goalProgress'>('startDate')
+const sortOrder = state<'asc' | 'desc'>('desc')
+const currentPage = state(1)
+const itemsPerPage = 9
+
+const showCampaignModal = state(false)
+const isEditMode = state(false)
+const editingCampaignId = state<number | null>(null)
+const formName = state('')
+const formType = state('Email')
+const formStatus = state('Draft')
+const formStartDate = state('')
+const formEndDate = state('')
+const formBudget = state('0')
+const formGoal = state('Sales')
+const formAudience = state('All Customers')
+
+const totalCampaigns = derived(() => campaigns().length)
+const activeCount = derived(() => campaigns().filter(c => c.status === 'Active').length)
+const scheduledCount = derived(() => campaigns().filter(c => c.status === 'Scheduled').length)
+const draftCount = derived(() => campaigns().filter(c => c.status === 'Draft').length)
+
+const filteredCampaigns = derived(() => {
+  const q = searchQuery().toLowerCase()
+  const status = statusFilter()
+  const type = typeFilter()
+  const sort = sortBy()
+  const order = sortOrder()
+  return campaigns()
+    .filter((c) => {
+      const matchesSearch = !q || c.name.toLowerCase().includes(q) || c.owner.toLowerCase().includes(q)
+      const matchesStatus = status === 'all' || c.status === status
+      const matchesType = type === 'all' || c.type === type
+      return matchesSearch && matchesStatus && matchesType
+    })
+    .sort((a, b) => {
+      let cmp = 0
+      if (sort === 'name')
+        cmp = a.name.localeCompare(b.name)
+      else if (sort === 'startDate')
+        cmp = new Date(a.startDate).getTime() - new Date(b.startDate).getTime()
+      else if (sort === 'budget')
+        cmp = a.budget - b.budget
+      else
+        cmp = a.goalProgress - b.goalProgress
+      return order === 'asc' ? cmp : -cmp
+    })
+})
+
+const totalPages = derived(() => Math.max(1, Math.ceil(filteredCampaigns().length / itemsPerPage)))
+
+const paginatedCampaigns = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage
+  return filteredCampaigns().slice(start, start + itemsPerPage)
+})
+
+effect(() => {
+  filteredCampaigns()
+  currentPage.set(1)
+})
+
+effect(() => {
+  if (currentPage() > totalPages())
+    currentPage.set(totalPages())
+})
+
+function formatDate(date: string | null) {
+  if (!date)
+    return 'Ongoing'
+  return new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+function formatCurrency(value: number) {
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0 }).format(value)
+}
+
+function formatGoalProgress(c: Campaign) {
+  const goal = c.goal.toLowerCase()
+  if (goal.includes('sales') || goal.includes('budget'))
+    return `${formatCurrency(c.goalProgress)} / ${formatCurrency(c.goalTarget)}`
+  if (goal.includes('retention') || goal.includes('rate'))
+    return `${c.goalProgress}% / ${c.goalTarget}%`
+  return `${c.goalProgress.toLocaleString()} / ${c.goalTarget.toLocaleString()}`
+}
+
+function goalPercentage(c: Campaign) {
+  if (c.goalTarget === 0)
+    return 0
+  return Math.min(100, Math.round((c.goalProgress / c.goalTarget) * 100))
+}
+
+function statusBadgeClass(status: string) {
+  const base = 'inline-flex items-center px-2 py-0.5 font-medium text-xs rounded-full ring-1 ring-inset'
+  switch (status) {
+    case 'Active': return `${base} bg-green-50 text-green-700 ring-green-600/20 dark:bg-green-900/30 dark:text-green-400`
+    case 'Scheduled': return `${base} bg-blue-50 text-blue-700 ring-blue-600/20 dark:bg-blue-900/30 dark:text-blue-400`
+    case 'Draft': return `${base} bg-yellow-50 text-yellow-700 ring-yellow-600/20 dark:bg-yellow-900/30 dark:text-yellow-400`
+    case 'Completed': return `${base} bg-gray-50 text-gray-700 ring-gray-600/20 dark:bg-neutral-900/30 dark:text-neutral-400`
+    case 'Paused': return `${base} bg-orange-50 text-orange-700 ring-orange-600/20 dark:bg-orange-900/30 dark:text-orange-400`
+    default: return `${base} bg-gray-50 text-gray-700 ring-gray-600/20 dark:bg-neutral-900/30 dark:text-neutral-400`
+  }
+}
+
+function typeBadgeClass(type: string) {
+  const base = 'inline-flex items-center px-2 py-0.5 font-medium text-xs rounded'
+  switch (type) {
+    case 'Email': return `${base} bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200`
+    case 'SMS': return `${base} bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-200`
+    case 'Discount': return `${base} bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200`
+    case 'Seasonal': return `${base} bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-200`
+    case 'Product Launch': return `${base} bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200`
+    case 'App Promotion': return `${base} bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-200`
+    default: return `${base} bg-gray-100 text-gray-700 dark:bg-neutral-700 dark:text-neutral-200`
+  }
+}
+
+function nextPage() {
+  if (currentPage() < totalPages())
+    currentPage.set(currentPage() + 1)
+}
+
+function prevPage() {
+  if (currentPage() > 1)
+    currentPage.set(currentPage() - 1)
+}
+
+function openNewCampaignModal() {
+  editingCampaignId.set(null)
+  isEditMode.set(false)
+  formName.set('')
+  formType.set('Email')
+  formStatus.set('Draft')
+  formStartDate.set(new Date().toISOString().split('T')[0]!)
+  formEndDate.set('')
+  formBudget.set('0')
+  formGoal.set('Sales')
+  formAudience.set('All Customers')
+  showCampaignModal.set(true)
+}
+
+function openEditCampaignModal(id: number) {
+  const c = campaigns().find(x => x.id === id)
+  if (!c)
+    return
+  editingCampaignId.set(id)
+  isEditMode.set(true)
+  formName.set(c.name)
+  formType.set(c.type)
+  formStatus.set(c.status)
+  formStartDate.set(c.startDate)
+  formEndDate.set(c.endDate ?? '')
+  formBudget.set(String(c.budget))
+  formGoal.set(c.goal)
+  formAudience.set(c.audience)
+  showCampaignModal.set(true)
+}
+
+function closeCampaignModal() {
+  showCampaignModal.set(false)
+}
+
+function saveCampaign() {
+  const name = formName().trim()
+  if (!name)
+    return
+  const budget = Number.parseFloat(formBudget()) || 0
+  const endDate = formEndDate() || null
+  if (isEditMode()) {
+    const id = editingCampaignId()
+    campaigns.set(campaigns().map(c => c.id === id
+      ? { ...c, name, type: formType(), status: formStatus(), startDate: formStartDate() || c.startDate, endDate, budget, goal: formGoal(), audience: formAudience(), lastModified: new Date().toISOString().split('T')[0]! }
+      : c))
+  }
+  else {
+    const nextId = Math.max(0, ...campaigns().map(c => c.id)) + 1
+    campaigns.set([...campaigns(), {
+      id: nextId,
+      uuid: crypto.randomUUID().substring(0, 8),
+      name,
+      type: formType(),
+      status: formStatus(),
+      startDate: formStartDate() || new Date().toISOString().split('T')[0]!,
+      endDate,
+      budget,
+      spent: 0,
+      goal: formGoal(),
+      goalTarget: 0,
+      goalProgress: 0,
+      audience: formAudience(),
+      channels: [formType()],
+      owner: 'Marketing Team',
+      ownerAvatar: 'https://randomuser.me/api/portraits/women/44.jpg',
+      createdAt: new Date().toISOString().split('T')[0]!,
+      lastModified: new Date().toISOString().split('T')[0]!,
+    }])
+  }
+  closeCampaignModal()
+}
+
+function deleteCampaign(id: number) {
+  campaigns.set(campaigns().filter(c => c.id !== id))
+}
+
+function duplicateCampaign(id: number) {
+  const original = campaigns().find(c => c.id === id)
+  if (!original)
+    return
+  const nextId = Math.max(0, ...campaigns().map(c => c.id)) + 1
+  campaigns.set([...campaigns(), {
+    ...original,
+    id: nextId,
+    name: `${original.name} (Copy)`,
+    status: 'Draft',
+    spent: 0,
+    goalProgress: 0,
+    createdAt: new Date().toISOString().split('T')[0]!,
+    lastModified: new Date().toISOString().split('T')[0]!,
+  }])
+}
+
+function openCampaignActions(id: number) {
+  openEditCampaignModal(id)
+}
+
+let chartHandles: Array<ChartLike | null> = []
+
+function destroyCharts() {
+  for (const h of chartHandles)
+    h?.destroy()
+  chartHandles = []
+}
+
+async function buildCharts() {
+  destroyCharts()
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+
+  const active = campaigns().filter(c => c.status === 'Active').slice(0, 6)
+  const goalChart = useChart({
+    Chart: Ctor,
+    id: 'campaigns_goal_chart',
+    type: 'bar',
+    data: {
+      labels: active.map(c => c.name.length > 20 ? `${c.name.slice(0, 17)}…` : c.name),
+      datasets: [{
+        label: 'Progress %',
+        data: active.map(c => goalPercentage(c)),
+        backgroundColor: 'rgba(59, 130, 246, 0.5)',
+        borderColor: 'rgba(59, 130, 246, 1)',
+        borderWidth: 1,
+      }],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      indexAxis: 'y',
+      plugins: { legend: { display: false } },
+      scales: { x: { beginAtZero: true, max: 100, ticks: { callback: (v: number | string) => `${v}%` } } },
+    },
+  })
+  chartHandles.push(goalChart.instance as ChartLike | null)
+
+  const top = filteredCampaigns().slice(0, 6)
+  const budgetChart = useChart({
+    Chart: Ctor,
+    id: 'campaigns_budget_chart',
+    type: 'bar',
+    data: {
+      labels: top.map(c => c.name.length > 20 ? `${c.name.slice(0, 17)}…` : c.name),
+      datasets: [
+        { label: 'Budget', data: top.map(c => c.budget), backgroundColor: 'rgba(99, 102, 241, 0.5)' },
+        { label: 'Spent', data: top.map(c => c.spent), backgroundColor: 'rgba(244, 63, 94, 0.7)' },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: { legend: { position: 'top' } },
+      scales: { y: { beginAtZero: true, ticks: { callback: (v: number | string) => `$${Number(v).toLocaleString()}` } } },
+    },
+  })
+  chartHandles.push(budgetChart.instance as ChartLike | null)
+}
+
+onMount(async () => {
+  await buildCharts()
+})
+
+onDestroy(() => {
+  destroyCharts()
+})
+</script>
+
+@endsection