@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/marketing/social-posts/index.stx

@@ -0,0 +1,560 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Social Posts')
+<PageLayout>
+  <div class="sm:flex sm:items-center sm:justify-between">
+    <PageHeader title="Social Media Posts" description="Create, schedule, and manage your social media posts for Bluesky" />
+    <div class="mt-4 sm:mt-0">
+      <button @click="openNewPostModal()" 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 Post
+      </button>
+    </div>
+  </div>
+
+  <div class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 mt-6">
+    <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="flex items-center p-5">
+        <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-document-validation"></div>
+        </div>
+        <div class="flex-1 ml-5 w-0">
+          <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Total Posts</dt>
+          <dd class="font-medium text-gray-900 text-lg dark:text-white">{{ totalPosts() }}</dd>
+        </div>
+      </div>
+    </div>
+    <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="flex items-center p-5">
+        <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="flex-1 ml-5 w-0">
+          <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Published</dt>
+          <dd class="font-medium text-gray-900 text-lg dark:text-white">{{ publishedCount() }}</dd>
+        </div>
+      </div>
+    </div>
+    <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="flex items-center p-5">
+        <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="flex-1 ml-5 w-0">
+          <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Scheduled</dt>
+          <dd class="font-medium text-gray-900 text-lg dark:text-white">{{ scheduledCount() }}</dd>
+        </div>
+      </div>
+    </div>
+    <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="flex items-center p-5">
+        <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="flex-1 ml-5 w-0">
+          <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Drafts</dt>
+          <dd class="font-medium text-gray-900 text-lg dark:text-white">{{ draftsCount() }}</dd>
+        </div>
+      </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 posts..." 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 statuses">
+          <option :value="status">{{ status }}</option>
+        </template>
+      </select>
+
+      <select x-model="platformFilter" 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 Platforms</option>
+        <template :for="platform in platforms">
+          <option :value="platform">{{ platform }}</option>
+        </template>
+      </select>
+
+      <select x-model="authorFilter" 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 Authors</option>
+        <template :for="author in authorList">
+          <option value="{{ author }}">{{ author }}</option>
+        </template>
+      </select>
+
+      <div class="flex rounded-md shadow-sm">
+        <button @click="setViewMode('detailed')" class="{{ viewModeButtonClass('detailed', 'l') }}">
+          <div class="h-5 w-5 i-hugeicons-grid"></div>
+        </button>
+        <button @click="setViewMode('compact')" class="{{ viewModeButtonClass('compact', 'r') }}">
+          <div class="h-5 w-5 i-hugeicons-list-view"></div>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex items-center mt-4 text-gray-500 text-sm dark:text-neutral-400">
+    <span class="mr-2">Sort by:</span>
+    <button @click="toggleSort('scheduledDate')" class="{{ sortButtonClass('scheduledDate', 'mr-3') }}">
+      Date <span class="ml-1">{{ sortIndicator('scheduledDate') }}</span>
+    </button>
+    <button @click="toggleSort('engagement')" class="{{ sortButtonClass('engagement', 'mr-3') }}">
+      Engagement <span class="ml-1">{{ sortIndicator('engagement') }}</span>
+    </button>
+    <button @click="toggleSort('author')" class="{{ sortButtonClass('author', '') }}">
+      Author <span class="ml-1">{{ sortIndicator('author') }}</span>
+    </button>
+  </div>
+
+  <div :show="viewMode() === 'detailed'" class="mt-6">
+    <div :show="paginatedPosts().length === 0" class="py-12 text-center">
+      <div class="mx-auto h-12 w-12 text-gray-400 i-hugeicons-document-validation"></div>
+      <h3 class="mt-2 font-semibold text-gray-900 text-sm dark:text-white">No posts found</h3>
+      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Try adjusting your search or filter to find what you're looking for.</p>
+    </div>
+
+    <div class="space-y-6">
+      <template :for="post in paginatedPosts">
+        <div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700 shadow-sm">
+          <div class="p-6">
+            <div class="flex items-start justify-between">
+              <div class="flex items-start space-x-4">
+                <img :src="post.authorAvatar" :alt="post.author" class="object-cover h-12 w-12 rounded-full" />
+                <div>
+                  <h3 class="font-medium text-base text-gray-900 dark:text-white">{{ post.author }}</h3>
+                  <div class="flex items-center mt-1">
+                    <span class="inline-flex items-center px-2 py-1 font-medium text-blue-700 text-xs dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 ring-1 ring-blue-600/20 ring-inset rounded-full">{{ post.platform }}</span>
+                    <span class="ml-2 text-gray-500 text-sm dark:text-neutral-400">{{ formatDate(post.scheduledDate) }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="flex flex-col items-end space-y-2">
+                <span class="{{ statusBadgeClass(post.status) }}">{{ post.status }}</span>
+                <span :show="post.threadId !== null" class="inline-flex items-center px-2 py-1 w-fit font-medium text-purple-700 text-xs dark:text-purple-400 bg-purple-50 dark:bg-purple-900/30 ring-1 ring-inset ring-purple-600/20 rounded-full">
+                  Thread {{ post.isThreadStarter ? '(Starter)' : '' }}
+                </span>
+              </div>
+            </div>
+
+            <p class="mt-4 text-gray-500 text-sm dark:text-neutral-400">{{ post.content }}</p>
+
+            <div :show="post.images.length > 0" class="grid gap-2 grid-cols-2 mt-4">
+              <template :for="image in post.images">
+                <div class="aspect-square overflow-hidden relative rounded-lg">
+                  <img :src="image" alt="Post image" class="object-cover h-full w-full" />
+                </div>
+              </template>
+            </div>
+
+            <div :show="post.tags.length > 0" class="flex flex-wrap gap-2 mt-4">
+              <template :for="tag in post.tags">
+                <span class="inline-flex items-center px-2 py-1 font-medium text-gray-600 text-xs dark:text-neutral-300 bg-gray-50 dark:bg-neutral-800 ring-1 ring-gray-500/10 ring-inset rounded-full">#{{ tag }}</span>
+              </template>
+            </div>
+
+            <div :show="post.status === 'Published'" class="flex items-center mt-4 text-gray-500 text-sm dark:text-neutral-400">
+              <div class="flex items-center"><div class="mr-1 h-4 w-4 i-hugeicons-heart"></div><span>{{ post.likes }} likes</span></div>
+              <div class="flex items-center ml-4"><div class="mr-1 h-4 w-4 i-hugeicons-refresh-02"></div><span>{{ post.reposts }} reposts</span></div>
+              <div class="flex items-center ml-4"><div class="mr-1 h-4 w-4 i-hugeicons-bubble-chat"></div><span>{{ post.replies }} replies</span></div>
+            </div>
+
+            <div class="flex justify-end mt-4 space-x-3">
+              <button @click="duplicatePost(post.id)" class="inline-flex items-center 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">
+                <div class="mr-1 h-4 w-4 i-hugeicons-copy"></div>
+                Duplicate
+              </button>
+              <button @click="openEditPostModal(post.id)" class="p-1.5 text-gray-700 dark:text-neutral-300 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" title="Edit post">
+                <div class="h-4 w-4 i-hugeicons-edit-01"></div>
+              </button>
+              <button @click="deletePost(post.id)" class="inline-flex items-center 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">
+                <div class="mr-1 h-4 w-4 i-hugeicons-waste"></div>
+                Delete
+              </button>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+
+  <div :show="viewMode() === 'compact'" 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="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm dark:text-white">Content</th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Platform</th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Author</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="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-white">Date</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="post in paginatedPosts">
+          <tr class="hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+            <td class="pl-4 pr-3 py-4 sm:pl-6 max-w-md text-gray-900 text-sm truncate dark:text-white">{{ truncate(post.content, 80) }}</td>
+            <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ post.platform }}</td>
+            <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ post.author }}</td>
+            <td class="px-3 py-4 text-sm whitespace-nowrap"><span class="{{ statusBadgeClass(post.status) }}">{{ post.status }}</span></td>
+            <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-400">{{ formatDate(post.scheduledDate) }}</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="openEditPostModal(post.id)" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300"><div class="h-5 w-5 i-hugeicons-edit-01"></div></button>
+                <button @click="deletePost(post.id)" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"><div class="h-5 w-5 i-hugeicons-waste"></div></button>
+              </div>
+            </td>
+          </tr>
+        </template>
+        <tr :show="paginatedPosts().length === 0">
+          <td colspan="6" class="px-4 py-8 text-center text-gray-500 text-sm dark:text-neutral-400">No posts 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="showPostModal()" @click.self="closePostModal()" 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">{{ isNewPost() ? 'New Post' : 'Edit Post' }}</h3>
+        <button @click="closePostModal()" 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">Content</label>
+          <textarea x-model="postContent" rows="4" placeholder="What's on your mind? Use #tags to categorise" 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 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">Platform</label>
+            <select x-model="postPlatform" 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="platform in platforms">
+                <option :value="platform">{{ platform }}</option>
+              </template>
+            </select>
+          </div>
+          <div>
+            <label class="block font-medium text-gray-900 text-sm dark:text-white">Status</label>
+            <select x-model="postStatus" 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 statuses">
+                <option :value="status">{{ status }}</option>
+              </template>
+            </select>
+          </div>
+        </div>
+        <div>
+          <label class="block font-medium text-gray-900 text-sm dark:text-white">Scheduled Date</label>
+          <input x-model="postScheduledDate" type="datetime-local" 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">Author</label>
+          <input x-model="postAuthor" type="text" 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="closePostModal()" 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="savePost()" :disabled="!postContent()" 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">{{ isNewPost() ? 'Create' : 'Save' }}</button>
+      </div>
+    </div>
+  </div>
+</PageLayout>
+
+<script client>
+// Filter options — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838).
+const statuses = ['Published', 'Scheduled', 'Draft', 'Failed']
+const platforms = ['Bluesky', 'Twitter', 'Instagram', 'Facebook']
+
+interface SocialPost {
+  id: number
+  content: string
+  images: string[]
+  platform: string
+  status: 'Published' | 'Scheduled' | 'Draft' | 'Failed'
+  scheduledDate: string
+  publishedDate: string | null
+  author: string
+  authorAvatar: string
+  likes: number
+  reposts: number
+  replies: number
+  engagement: number
+  tags: string[]
+  isThreadStarter: boolean
+  threadId: number | null
+  threadSize: number
+}
+
+const initialPosts: SocialPost[] = [
+  { id: 1, content: 'Just launched our new summer menu! Come try our refreshing new salads and smoothies. Perfect for the hot weather! #SummerMenu #HealthyEating', images: ['https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80'], platform: 'Bluesky', status: 'Published', scheduledDate: '2023-06-15T10:00:00', publishedDate: '2023-06-15T10:00:00', author: 'Marketing Team', authorAvatar: 'https://randomuser.me/api/portraits/women/44.jpg', likes: 28, reposts: 12, replies: 5, engagement: 4.5, tags: ['SummerMenu', 'HealthyEating'], isThreadStarter: false, threadId: null, threadSize: 0 },
+  { id: 2, content: "We're excited to announce our partnership with local farmers to bring you the freshest ingredients possible! #LocalFarmers #FarmToTable", images: [], platform: 'Bluesky', status: 'Scheduled', scheduledDate: '2023-07-01T09:30:00', publishedDate: null, author: 'Marketing Team', authorAvatar: 'https://randomuser.me/api/portraits/women/44.jpg', likes: 0, reposts: 0, replies: 0, engagement: 0, tags: ['LocalFarmers', 'FarmToTable'], isThreadStarter: false, threadId: null, threadSize: 0 },
+  { id: 3, content: "Thread: Our chef's journey to creating the perfect burger (1/4)\n\nIt all started with a passion for quality ingredients. #BurgerStory #CulinaryJourney", images: [], platform: 'Bluesky', status: 'Draft', scheduledDate: '2023-07-05T12:00:00', publishedDate: null, author: 'Chef Michael', authorAvatar: 'https://randomuser.me/api/portraits/men/32.jpg', likes: 0, reposts: 0, replies: 0, engagement: 0, tags: ['BurgerStory', 'CulinaryJourney'], isThreadStarter: true, threadId: 101, threadSize: 4 },
+  { id: 4, content: 'Join us this weekend for our special brunch menu! Mimosas included with every order. #WeekendBrunch #Mimosas', images: [], platform: 'Bluesky', status: 'Failed', scheduledDate: '2023-06-20T08:00:00', publishedDate: null, author: 'Marketing Team', authorAvatar: 'https://randomuser.me/api/portraits/women/44.jpg', likes: 0, reposts: 0, replies: 0, engagement: 0, tags: ['WeekendBrunch', 'Mimosas'], isThreadStarter: false, threadId: null, threadSize: 0 },
+  { id: 5, content: 'Customer appreciation week starts tomorrow! Enjoy 15% off all orders. #CustomerAppreciation', images: [], platform: 'Bluesky', status: 'Published', scheduledDate: '2023-06-25T11:00:00', publishedDate: '2023-06-25T11:00:00', author: 'Marketing Team', authorAvatar: 'https://randomuser.me/api/portraits/women/44.jpg', likes: 45, reposts: 23, replies: 15, engagement: 8.3, tags: ['CustomerAppreciation'], isThreadStarter: false, threadId: null, threadSize: 0 },
+  { id: 6, content: "We're hiring! Looking for passionate chefs and servers to join our team. #NowHiring #RestaurantJobs", images: [], platform: 'Bluesky', status: 'Scheduled', scheduledDate: '2023-07-10T14:00:00', publishedDate: null, author: 'HR Team', authorAvatar: 'https://randomuser.me/api/portraits/men/67.jpg', likes: 0, reposts: 0, replies: 0, engagement: 0, tags: ['NowHiring', 'RestaurantJobs'], isThreadStarter: false, threadId: null, threadSize: 0 },
+  { id: 7, content: 'Happy hour just got happier! Join us Monday-Friday from 4-6pm for half-price appetizers. #HappyHour #Cocktails', images: [], platform: 'Bluesky', status: 'Published', scheduledDate: '2023-06-10T16:00:00', publishedDate: '2023-06-10T16:00:00', author: 'Marketing Team', authorAvatar: 'https://randomuser.me/api/portraits/women/44.jpg', likes: 37, reposts: 18, replies: 8, engagement: 6.3, tags: ['HappyHour', 'Cocktails'], isThreadStarter: false, threadId: null, threadSize: 0 },
+]
+
+const posts = state<SocialPost[]>(initialPosts)
+const searchQuery = state('')
+const statusFilter = state('all')
+const platformFilter = state('all')
+const authorFilter = state('all')
+const sortBy = state<'scheduledDate' | 'engagement' | 'author'>('scheduledDate')
+const sortOrder = state<'asc' | 'desc'>('desc')
+const viewMode = state<'detailed' | 'compact'>('compact')
+const currentPage = state(1)
+const itemsPerPage = 5
+
+const showPostModal = state(false)
+const isNewPost = state(false)
+const editingPostId = state<number | null>(null)
+const postContent = state('')
+const postPlatform = state('Bluesky')
+const postStatus = state<'Published' | 'Scheduled' | 'Draft' | 'Failed'>('Draft')
+const postScheduledDate = state('')
+const postAuthor = state('Marketing Team')
+
+const totalPosts = derived(() => posts().length)
+const publishedCount = derived(() => posts().filter(p => p.status === 'Published').length)
+const scheduledCount = derived(() => posts().filter(p => p.status === 'Scheduled').length)
+const draftsCount = derived(() => posts().filter(p => p.status === 'Draft').length)
+
+const authorList = derived(() => {
+  const set = new Set<string>()
+  for (const p of posts())
+    set.add(p.author)
+  return Array.from(set).sort()
+})
+
+const filteredPosts = derived(() => {
+  const q = searchQuery().toLowerCase()
+  const status = statusFilter()
+  const platform = platformFilter()
+  const author = authorFilter()
+  const sort = sortBy()
+  const order = sortOrder()
+  return posts()
+    .filter((post) => {
+      const matchesSearch = !q
+        || post.content.toLowerCase().includes(q)
+        || post.tags.some(t => t.toLowerCase().includes(q))
+        || post.author.toLowerCase().includes(q)
+      const matchesStatus = status === 'all' || post.status === status
+      const matchesPlatform = platform === 'all' || post.platform === platform
+      const matchesAuthor = author === 'all' || post.author === author
+      return matchesSearch && matchesStatus && matchesPlatform && matchesAuthor
+    })
+    .sort((a, b) => {
+      let cmp = 0
+      if (sort === 'scheduledDate')
+        cmp = new Date(a.scheduledDate).getTime() - new Date(b.scheduledDate).getTime()
+      else if (sort === 'engagement')
+        cmp = a.engagement - b.engagement
+      else
+        cmp = a.author.localeCompare(b.author)
+      return order === 'asc' ? cmp : -cmp
+    })
+})
+
+const totalPages = derived(() => Math.max(1, Math.ceil(filteredPosts().length / itemsPerPage)))
+
+const paginatedPosts = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage
+  return filteredPosts().slice(start, start + itemsPerPage)
+})
+
+effect(() => {
+  filteredPosts()
+  currentPage.set(1)
+})
+
+effect(() => {
+  if (currentPage() > totalPages())
+    currentPage.set(totalPages())
+})
+
+function formatDate(date: string | null) {
+  if (!date)
+    return 'N/A'
+  return new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+}
+
+function truncate(text: string, max: number) {
+  if (text.length <= max)
+    return text
+  return `${text.substring(0, max)}…`
+}
+
+function statusBadgeClass(status: string) {
+  const base = 'inline-flex items-center rounded-full px-2 py-1 text-xs font-medium w-fit'
+  switch (status) {
+    case 'Published': return `${base} bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-900/30 dark:text-green-400`
+    case 'Scheduled': return `${base} bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-900/30 dark:text-blue-400`
+    case 'Draft': return `${base} bg-yellow-50 text-yellow-700 ring-1 ring-inset ring-yellow-600/20 dark:bg-yellow-900/30 dark:text-yellow-400`
+    case 'Failed': return `${base} bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-400`
+    default: return `${base} bg-gray-50 text-gray-700 ring-1 ring-inset ring-gray-600/20 dark:bg-neutral-900/30 dark:text-neutral-400`
+  }
+}
+
+function viewModeButtonClass(mode: 'detailed' | 'compact', side: 'l' | 'r') {
+  const radius = side === 'l' ? 'rounded-l-md' : 'rounded-r-md -ml-px'
+  const base = `relative inline-flex items-center ${radius} px-3 py-2 text-sm font-semibold ring-1 ring-inset focus:z-10`
+  return viewMode() === mode
+    ? `${base} bg-blue-600 text-white ring-blue-600`
+    : `${base} bg-white text-gray-900 ring-gray-300 hover:bg-gray-50 dark:bg-neutral-800 dark:text-white dark:ring-neutral-700 dark:hover:bg-neutral-700`
+}
+
+function setViewMode(mode: 'detailed' | 'compact') {
+  viewMode.set(mode)
+}
+
+function sortButtonClass(key: string, extra: string) {
+  const active = sortBy() === key ? 'font-semibold text-blue-600 dark:text-blue-400' : ''
+  return `flex items-center hover:text-gray-700 dark:hover:text-gray-300 ${extra} ${active}`.trim()
+}
+
+function sortIndicator(key: string) {
+  if (sortBy() !== key)
+    return ''
+  return sortOrder() === 'asc' ? '↑' : '↓'
+}
+
+function toggleSort(key: 'scheduledDate' | 'engagement' | 'author') {
+  if (sortBy() === key)
+    sortOrder.set(sortOrder() === 'asc' ? 'desc' : 'asc')
+  else {
+    sortBy.set(key)
+    sortOrder.set('desc')
+  }
+}
+
+function nextPage() {
+  if (currentPage() < totalPages())
+    currentPage.set(currentPage() + 1)
+}
+
+function prevPage() {
+  if (currentPage() > 1)
+    currentPage.set(currentPage() - 1)
+}
+
+function openNewPostModal() {
+  editingPostId.set(null)
+  isNewPost.set(true)
+  postContent.set('')
+  postPlatform.set('Bluesky')
+  postStatus.set('Draft')
+  postScheduledDate.set(new Date().toISOString().slice(0, 16))
+  postAuthor.set('Marketing Team')
+  showPostModal.set(true)
+}
+
+function openEditPostModal(id: number) {
+  const post = posts().find(p => p.id === id)
+  if (!post)
+    return
+  editingPostId.set(id)
+  isNewPost.set(false)
+  postContent.set(post.content)
+  postPlatform.set(post.platform)
+  postStatus.set(post.status)
+  postScheduledDate.set(post.scheduledDate.slice(0, 16))
+  postAuthor.set(post.author)
+  showPostModal.set(true)
+}
+
+function closePostModal() {
+  showPostModal.set(false)
+}
+
+function extractTags(content: string): string[] {
+  const matches = content.match(/#[a-z0-9]+/gi)
+  if (!matches)
+    return []
+  return matches.map(t => t.substring(1))
+}
+
+function savePost() {
+  const content = postContent().trim()
+  if (!content)
+    return
+  const tags = extractTags(content)
+  if (isNewPost()) {
+    const nextId = Math.max(0, ...posts().map(p => p.id)) + 1
+    posts.set([...posts(), {
+      id: nextId,
+      content,
+      images: [],
+      platform: postPlatform(),
+      status: postStatus(),
+      scheduledDate: postScheduledDate() || new Date().toISOString(),
+      publishedDate: postStatus() === 'Published' ? new Date().toISOString() : null,
+      author: postAuthor(),
+      authorAvatar: 'https://randomuser.me/api/portraits/women/44.jpg',
+      likes: 0,
+      reposts: 0,
+      replies: 0,
+      engagement: 0,
+      tags,
+      isThreadStarter: false,
+      threadId: null,
+      threadSize: 0,
+    }])
+  }
+  else {
+    const id = editingPostId()
+    posts.set(posts().map(p => p.id === id
+      ? { ...p, content, tags, platform: postPlatform(), status: postStatus(), scheduledDate: postScheduledDate() || p.scheduledDate, author: postAuthor() }
+      : p))
+  }
+  closePostModal()
+}
+
+function deletePost(id: number) {
+  posts.set(posts().filter(p => p.id !== id))
+}
+
+function duplicatePost(id: number) {
+  const original = posts().find(p => p.id === id)
+  if (!original)
+    return
+  const nextId = Math.max(0, ...posts().map(p => p.id)) + 1
+  posts.set([...posts(), {
+    ...original,
+    id: nextId,
+    status: 'Draft',
+    publishedDate: null,
+    likes: 0,
+    reposts: 0,
+    replies: 0,
+    engagement: 0,
+  }])
+}
+</script>
+
+@endsection