@stacksjs/defaults 0.70.229 → 0.70.230

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

@@ -1,604 +1,10 @@
 @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>
+  <CampaignsDashboard />
 </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