@stacksjs/defaults 0.70.206 → 0.70.208

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

@@ -0,0 +1,514 @@
+@extends('layouts/default')
+
+@section('content')
+
+@title('Dashboard - Marketing Lists')
+<PageLayout>
+  <div class="sm:flex sm:items-center sm:justify-between">
+    <PageHeader title="Marketing Lists" description="Manage your email and SMS subscriber lists" />
+    <div class="mt-4 sm:mt-0">
+      <button @click="openAddListModal()" 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 List
+      </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-folder-01"></div>
+      </div>
+      <div class="ml-5">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Total Lists</dt>
+        <dd class="font-medium text-gray-900 text-lg dark:text-white">{{ totalLists() }}</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-mail-01"></div>
+      </div>
+      <div class="ml-5">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Email Lists</dt>
+        <dd class="font-medium text-gray-900 text-lg dark:text-white">{{ totalEmailLists() }}</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-purple-100 dark:bg-purple-900 rounded-md">
+        <div class="h-6 w-6 text-purple-600 dark:text-purple-300 i-hugeicons-message-multiple-02"></div>
+      </div>
+      <div class="ml-5">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">SMS Lists</dt>
+        <dd class="font-medium text-gray-900 text-lg dark:text-white">{{ totalSmsLists() }}</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-user-multiple"></div>
+      </div>
+      <div class="ml-5">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Total Subscribers</dt>
+        <dd class="font-medium text-gray-900 text-lg dark:text-white">{{ formatNumber(totalSubscribers()) }}</dd>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mt-6">
+    <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 lists..." 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="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 listTypes">
+          <option :value="type">{{ type }}</option>
+        </template>
+      </select>
+
+      <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 listStatuses">
+          <option :value="status">{{ status }}</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="dateCreated">Sort by Created</option>
+        <option value="name">Sort by Name</option>
+        <option value="subscriberCount">Sort by Subscribers</option>
+        <option value="openRate">Sort by Open Rate</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 :show="selectedLists().length > 0" class="flex items-center justify-between mt-4 p-3 bg-blue-50 dark:bg-blue-900/30 rounded-md">
+    <span class="text-blue-700 text-sm dark:text-blue-200">{{ selectedLists().length }} list(s) selected</span>
+    <div class="flex gap-2">
+      <button @click="bulkChangeStatus('Archived')" class="px-2.5 py-1.5 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">Archive</button>
+      <button @click="bulkDelete()" class="px-2.5 py-1.5 font-semibold text-sm text-white bg-red-600 hover:bg-red-500 rounded-md shadow-sm">Delete</button>
+    </div>
+  </div>
+
+  <div class="overflow-hidden mt-6 ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+    <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-700">
+      <thead class="bg-gray-50 dark:bg-neutral-700">
+        <tr>
+          <th scope="col" class="relative pl-4 pr-3 py-3.5 sm:pl-6 w-12">
+            <input type="checkbox" :checked="allSelected()" @change="toggleSelectAll()" class="h-4 w-4 text-blue-600 dark:bg-neutral-700 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-600" />
+          </th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Name</th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Type</th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Subscribers</th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Open Rate</th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Click Rate</th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Last Sent</th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Status</th>
+          <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6"><span class="sr-only">Actions</span></th>
+        </tr>
+      </thead>
+      <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+        <template :for="list in paginatedLists">
+          <tr class="hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+            <td class="relative pl-4 pr-3 py-4 sm:pl-6">
+              <input type="checkbox" :checked="isListSelected(list.id)" @change="toggleListSelection(list.id)" class="h-4 w-4 text-blue-600 dark:bg-neutral-700 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-600" />
+            </td>
+            <td class="px-3 py-4">
+              <div class="flex items-center">
+                <div class="font-medium text-gray-900 text-sm dark:text-white">{{ list.name }}</div>
+                <span :show="list.isDefault" class="inline-flex items-center ml-2 px-2 py-0.5 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-100 dark:bg-blue-900 rounded">Default</span>
+              </div>
+              <div class="max-w-md text-gray-500 text-xs truncate dark:text-neutral-400">{{ list.description }}</div>
+            </td>
+            <td class="px-3 py-4 text-sm whitespace-nowrap">
+              <span class="{{ typeBadgeClass(list.type) }}">{{ list.type }}</span>
+            </td>
+            <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ formatNumber(list.subscriberCount) }}</td>
+            <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ formatRate(list.openRate) }}</td>
+            <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ formatRate(list.clickRate) }}</td>
+            <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ formatDate(list.lastSent) }}</td>
+            <td class="px-3 py-4 text-sm whitespace-nowrap">
+              <span class="{{ statusBadgeClass(list.status) }}">{{ list.status }}</span>
+            </td>
+            <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+              <div class="flex justify-end space-x-2">
+                <button @click="duplicateList(list.id)" class="text-gray-600 dark:text-neutral-300 hover:text-gray-900 dark:hover:text-white" title="Duplicate">
+                  <div class="h-5 w-5 i-hugeicons-copy"></div>
+                </button>
+                <button @click="openEditListModal(list.id)" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300" title="Edit">
+                  <div class="h-5 w-5 i-hugeicons-edit-01"></div>
+                </button>
+                <button @click="deleteList(list.id)" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300" title="Delete">
+                  <div class="h-5 w-5 i-hugeicons-waste"></div>
+                </button>
+              </div>
+            </td>
+          </tr>
+        </template>
+        <tr :show="paginatedLists().length === 0">
+          <td colspan="9" class="px-4 py-8 text-center text-gray-500 text-sm dark:text-neutral-400">No lists found.</td>
+        </tr>
+      </tbody>
+    </table>
+  </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="showListModal()" @click.self="closeListModal()" 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 List' : 'New List' }}</h3>
+        <button @click="closeListModal()" 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="listFormName" type="text" placeholder="e.g. Newsletter Subscribers" 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">Description</label>
+          <textarea x-model="listFormDescription" rows="2" placeholder="Brief description of this list" 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"></textarea>
+        </div>
+        <div>
+          <label class="block font-medium text-gray-900 text-sm dark:text-white">Tags (comma-separated)</label>
+          <input x-model="listFormTags" type="text" placeholder="e.g. newsletter, weekly" 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="listFormType" 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">
+              <option value="email">Email</option>
+              <option value="sms">SMS</option>
+              <option value="both">Both</option>
+            </select>
+          </div>
+          <div>
+            <label class="block font-medium text-gray-900 text-sm dark:text-white">Status</label>
+            <select x-model="listFormStatus" 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">
+              <option value="Active">Active</option>
+              <option value="Draft">Draft</option>
+              <option value="Archived">Archived</option>
+            </select>
+          </div>
+        </div>
+        <div class="flex items-center">
+          <input id="isDefault" :checked="listFormIsDefault" @change="toggleListFormIsDefault()" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-500" />
+          <label for="isDefault" class="ml-2 text-gray-700 text-sm dark:text-neutral-300">Set as default list</label>
+        </div>
+      </div>
+
+      <div class="flex justify-end mt-6 space-x-2">
+        <button @click="closeListModal()" 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="saveList()" :disabled="!listFormName()" 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 listTypes = ['email', 'sms', 'both']
+const listStatuses = ['Active', 'Draft', 'Archived']
+
+interface MarketingList {
+  id: number
+  name: string
+  description: string
+  type: 'email' | 'sms' | 'both'
+  tags: string[]
+  subscriberCount: number
+  openRate?: number
+  clickRate?: number
+  unsubscribeRate?: number
+  lastSent: string | null
+  dateCreated: string
+  status: 'Active' | 'Draft' | 'Archived'
+  isDefault: boolean
+}
+
+const initialLists: MarketingList[] = [
+  { id: 1, name: 'Newsletter Subscribers', description: 'Main newsletter list for weekly updates', type: 'email', tags: ['newsletter', 'main'], subscriberCount: 1245, openRate: 24.5, clickRate: 3.2, unsubscribeRate: 0.5, lastSent: '2023-12-15', dateCreated: '2023-01-10', status: 'Active', isDefault: true },
+  { id: 2, name: 'Product Announcements', description: 'Customers interested in new product releases', type: 'email', tags: ['products', 'announcements'], subscriberCount: 876, openRate: 32.1, clickRate: 5.7, unsubscribeRate: 0.3, lastSent: '2023-12-01', dateCreated: '2023-02-15', status: 'Active', isDefault: false },
+  { id: 3, name: 'SMS Promotions', description: 'Customers who opted in for SMS promotional messages', type: 'sms', tags: ['sms', 'promotions'], subscriberCount: 542, openRate: undefined, clickRate: 8.3, unsubscribeRate: 1.2, lastSent: '2023-11-25', dateCreated: '2023-03-20', status: 'Active', isDefault: false },
+  { id: 4, name: 'Abandoned Cart Reminders', description: 'Customers who abandoned their shopping carts', type: 'both', tags: ['cart', 'recovery'], subscriberCount: 328, openRate: 41.2, clickRate: 12.5, unsubscribeRate: 0.8, lastSent: '2023-12-10', dateCreated: '2023-04-05', status: 'Active', isDefault: false },
+  { id: 5, name: 'VIP Customers', description: 'High-value customers for exclusive offers', type: 'both', tags: ['vip', 'exclusive'], subscriberCount: 156, openRate: 58.7, clickRate: 24.3, unsubscribeRate: 0.1, lastSent: '2023-12-05', dateCreated: '2023-05-12', status: 'Active', isDefault: false },
+  { id: 6, name: 'Re-engagement Campaign', description: 'Inactive customers we want to win back', type: 'email', tags: ['inactive', 'win-back'], subscriberCount: 723, openRate: 12.8, clickRate: 1.9, unsubscribeRate: 3.2, lastSent: '2023-11-15', dateCreated: '2023-06-20', status: 'Active', isDefault: false },
+  { id: 7, name: 'Event Attendees', description: 'Customers who registered for upcoming events', type: 'both', tags: ['events', 'webinars'], subscriberCount: 412, openRate: 38.5, clickRate: 9.7, unsubscribeRate: 0.4, lastSent: '2023-12-08', dateCreated: '2023-07-15', status: 'Active', isDefault: false },
+  { id: 8, name: 'Beta Testers', description: 'Customers interested in testing new features', type: 'email', tags: ['beta', 'testing'], subscriberCount: 189, openRate: 45.2, clickRate: 18.6, unsubscribeRate: 0.2, lastSent: '2023-11-30', dateCreated: '2023-08-10', status: 'Active', isDefault: false },
+]
+
+const lists = state<MarketingList[]>(initialLists)
+const searchQuery = state('')
+const typeFilter = state('all')
+const statusFilter = state('all')
+const sortBy = state<'dateCreated' | 'name' | 'subscriberCount' | 'openRate'>('dateCreated')
+const sortOrder = state<'asc' | 'desc'>('desc')
+const currentPage = state(1)
+const itemsPerPage = 8
+const selectedLists = state<number[]>([])
+
+const showListModal = state(false)
+const isEditMode = state(false)
+const editingListId = state<number | null>(null)
+const listFormName = state('')
+const listFormDescription = state('')
+const listFormTags = state('')
+const listFormType = state<'email' | 'sms' | 'both'>('email')
+const listFormStatus = state<'Active' | 'Draft' | 'Archived'>('Draft')
+const listFormIsDefault = state(false)
+
+const totalLists = derived(() => lists().length)
+const totalEmailLists = derived(() => lists().filter(l => l.type === 'email' || l.type === 'both').length)
+const totalSmsLists = derived(() => lists().filter(l => l.type === 'sms' || l.type === 'both').length)
+const totalSubscribers = derived(() => lists().reduce((sum, l) => sum + l.subscriberCount, 0))
+
+const filteredLists = derived(() => {
+  const q = searchQuery().toLowerCase()
+  const type = typeFilter()
+  const status = statusFilter()
+  const sort = sortBy()
+  const order = sortOrder()
+  return lists()
+    .filter((list) => {
+      const matchesSearch = !q
+        || list.name.toLowerCase().includes(q)
+        || list.description.toLowerCase().includes(q)
+        || list.tags.some(t => t.toLowerCase().includes(q))
+      const matchesType = type === 'all' || list.type === type
+      const matchesStatus = status === 'all' || list.status === status
+      return matchesSearch && matchesType && matchesStatus
+    })
+    .sort((a, b) => {
+      let cmp = 0
+      if (sort === 'dateCreated')
+        cmp = new Date(a.dateCreated).getTime() - new Date(b.dateCreated).getTime()
+      else if (sort === 'name')
+        cmp = a.name.localeCompare(b.name)
+      else if (sort === 'subscriberCount')
+        cmp = a.subscriberCount - b.subscriberCount
+      else
+        cmp = (a.openRate ?? 0) - (b.openRate ?? 0)
+      return order === 'asc' ? cmp : -cmp
+    })
+})
+
+const totalPages = derived(() => Math.max(1, Math.ceil(filteredLists().length / itemsPerPage)))
+
+const paginatedLists = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage
+  return filteredLists().slice(start, start + itemsPerPage)
+})
+
+const allSelected = derived(() => {
+  const visible = paginatedLists()
+  return visible.length > 0 && visible.every(l => selectedLists().includes(l.id))
+})
+
+effect(() => {
+  filteredLists()
+  currentPage.set(1)
+})
+
+effect(() => {
+  if (currentPage() > totalPages())
+    currentPage.set(totalPages())
+})
+
+function formatNumber(n: number) {
+  return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}
+
+function formatDate(date: string | null) {
+  if (!date)
+    return '-'
+  return new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+function formatRate(rate: number | undefined) {
+  if (rate === undefined)
+    return '-'
+  return `${rate.toFixed(1)}%`
+}
+
+function statusBadgeClass(status: string) {
+  const base = 'inline-flex items-center px-2 py-1 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 'Draft': return `${base} bg-yellow-50 text-yellow-700 ring-yellow-600/20 dark:bg-yellow-900/30 dark:text-yellow-400`
+    case 'Archived': return `${base} bg-gray-50 text-gray-700 ring-gray-600/20 dark:bg-neutral-900/30 dark:text-neutral-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-1 font-medium text-xs rounded-full ring-1 ring-inset'
+  switch (type) {
+    case 'email': return `${base} bg-blue-50 text-blue-700 ring-blue-600/20 dark:bg-blue-900/30 dark:text-blue-400`
+    case 'sms': return `${base} bg-purple-50 text-purple-700 ring-purple-600/20 dark:bg-purple-900/30 dark:text-purple-400`
+    case 'both': return `${base} bg-indigo-50 text-indigo-700 ring-indigo-600/20 dark:bg-indigo-900/30 dark:text-indigo-400`
+    default: return `${base} bg-gray-50 text-gray-700 ring-gray-600/20 dark:bg-neutral-900/30 dark:text-neutral-400`
+  }
+}
+
+function isListSelected(id: number) {
+  return selectedLists().includes(id)
+}
+
+function toggleListSelection(id: number) {
+  const current = selectedLists()
+  selectedLists.set(current.includes(id) ? current.filter(x => x !== id) : [...current, id])
+}
+
+function toggleSelectAll() {
+  selectedLists.set(allSelected() ? [] : paginatedLists().map(l => l.id))
+}
+
+function toggleListFormIsDefault() {
+  listFormIsDefault.set(!listFormIsDefault())
+}
+
+function nextPage() {
+  if (currentPage() < totalPages())
+    currentPage.set(currentPage() + 1)
+}
+
+function prevPage() {
+  if (currentPage() > 1)
+    currentPage.set(currentPage() - 1)
+}
+
+function openAddListModal() {
+  editingListId.set(null)
+  isEditMode.set(false)
+  listFormName.set('')
+  listFormDescription.set('')
+  listFormTags.set('')
+  listFormType.set('email')
+  listFormStatus.set('Draft')
+  listFormIsDefault.set(false)
+  showListModal.set(true)
+}
+
+function openEditListModal(id: number) {
+  const list = lists().find(l => l.id === id)
+  if (!list)
+    return
+  editingListId.set(id)
+  isEditMode.set(true)
+  listFormName.set(list.name)
+  listFormDescription.set(list.description)
+  listFormTags.set(list.tags.join(', '))
+  listFormType.set(list.type)
+  listFormStatus.set(list.status)
+  listFormIsDefault.set(list.isDefault)
+  showListModal.set(true)
+}
+
+function closeListModal() {
+  showListModal.set(false)
+}
+
+function saveList() {
+  const name = listFormName().trim()
+  if (!name)
+    return
+  const tags = listFormTags().split(',').map(t => t.trim()).filter(t => t.length > 0)
+  if (isEditMode()) {
+    const id = editingListId()
+    let next = lists().map(l => l.id === id
+      ? { ...l, name, description: listFormDescription(), tags, type: listFormType(), status: listFormStatus(), isDefault: listFormIsDefault() }
+      : l)
+    if (listFormIsDefault())
+      next = next.map(l => l.id === id ? l : { ...l, isDefault: false })
+    lists.set(next)
+  }
+  else {
+    const nextId = Math.max(0, ...lists().map(l => l.id)) + 1
+    let next = [...lists(), {
+      id: nextId,
+      name,
+      description: listFormDescription(),
+      type: listFormType(),
+      tags,
+      subscriberCount: 0,
+      openRate: undefined,
+      clickRate: undefined,
+      unsubscribeRate: undefined,
+      lastSent: null,
+      dateCreated: new Date().toISOString().split('T')[0]!,
+      status: listFormStatus(),
+      isDefault: listFormIsDefault(),
+    }]
+    if (listFormIsDefault())
+      next = next.map(l => l.id === nextId ? l : { ...l, isDefault: false })
+    lists.set(next)
+  }
+  closeListModal()
+}
+
+function deleteList(id: number) {
+  const list = lists().find(l => l.id === id)
+  if (list?.isDefault)
+    return
+  lists.set(lists().filter(l => l.id !== id))
+  selectedLists.set(selectedLists().filter(x => x !== id))
+}
+
+function duplicateList(id: number) {
+  const original = lists().find(l => l.id === id)
+  if (!original)
+    return
+  const nextId = Math.max(0, ...lists().map(l => l.id)) + 1
+  lists.set([...lists(), {
+    ...original,
+    id: nextId,
+    name: `${original.name} (Copy)`,
+    subscriberCount: 0,
+    lastSent: null,
+    dateCreated: new Date().toISOString().split('T')[0]!,
+    isDefault: false,
+  }])
+}
+
+function bulkDelete() {
+  const ids = selectedLists()
+  if (ids.length === 0)
+    return
+  const selected = lists().filter(l => ids.includes(l.id))
+  if (selected.some(l => l.isDefault))
+    return
+  lists.set(lists().filter(l => !ids.includes(l.id)))
+  selectedLists.set([])
+}
+
+function bulkChangeStatus(status: 'Active' | 'Draft' | 'Archived') {
+  const ids = selectedLists()
+  if (ids.length === 0)
+    return
+  lists.set(lists().map(l => ids.includes(l.id) ? { ...l, status } : l))
+}
+</script>
+
+@endsection