@stacksjs/defaults 0.70.206 → 0.70.208

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

@@ -0,0 +1,475 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Reviews')
+<PageLayout>
+  <div class="sm:flex sm:items-center sm:justify-between">
+    <PageHeader title="Customer Reviews" description="Monitor and respond to customer reviews from Google, Yelp, and other platforms" />
+  </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-message-multiple-02"></div>
+      </div>
+      <div class="ml-5">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Total Reviews</dt>
+        <dd class="font-medium text-gray-900 text-lg dark:text-white">{{ totalReviews() }}</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-star"></div>
+      </div>
+      <div class="ml-5">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Average Rating</dt>
+        <dd class="font-medium text-gray-900 text-lg dark:text-white">{{ averageRating() }}</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">Response Rate</dt>
+        <dd class="font-medium text-gray-900 text-lg dark:text-white">{{ responseRate() }}%</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-red-100 dark:bg-red-900 rounded-md">
+        <div class="h-6 w-6 text-red-600 dark:text-red-300 i-hugeicons-flag-02"></div>
+      </div>
+      <div class="ml-5">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Flagged</dt>
+        <dd class="font-medium text-gray-900 text-lg dark:text-white">{{ flaggedCount() }}</dd>
+      </div>
+    </div>
+  </div>
+
+  <div class="grid gap-5 grid-cols-1 lg:grid-cols-3 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">Rating Distribution</h3>
+        <div class="mt-4 h-56"><canvas id="reviews_rating_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">Sentiment Breakdown</h3>
+        <div class="mt-4 h-56"><canvas id="reviews_sentiment_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">By Source</h3>
+        <div class="mt-4 h-56"><canvas id="reviews_source_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 reviews..." 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="sourceFilter" 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 Sources</option>
+        <template :for="source in sources">
+          <option :value="source">{{ source }}</option>
+        </template>
+      </select>
+      <select x-model="ratingFilter" 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 Ratings</option>
+        <option value="5">5 stars</option>
+        <option value="4">4 stars</option>
+        <option value="3">3 stars</option>
+        <option value="2">2 stars</option>
+        <option value="1">1 star</option>
+      </select>
+      <select x-model="sentimentFilter" 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 Sentiments</option>
+        <template :for="sentiment in sentiments">
+          <option :value="sentiment">{{ sentiment }}</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 reviewStatuses">
+          <option :value="status">{{ status }}</option>
+        </template>
+      </select>
+    </div>
+  </div>
+
+  <div class="mt-6 space-y-4">
+    <template :for="review in filteredReviews">
+      <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="review.authorAvatar" :alt="review.author" class="object-cover h-10 w-10 rounded-full" />
+              <div>
+                <h3 class="font-medium text-base text-gray-900 dark:text-white">{{ review.author }}</h3>
+                <div class="flex items-center mt-1 space-x-2">
+                  <span class="{{ sourceBadgeClass(review.source) }}">{{ review.source }}</span>
+                  <span class="text-gray-500 text-sm dark:text-neutral-400">{{ formatDate(review.date) }}</span>
+                  <span :show="review.isVerified" class="inline-flex items-center px-1.5 py-0.5 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-100 dark:bg-blue-900 rounded">Verified</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="flex flex-col items-end space-y-2">
+              <div class="flex items-center">{{ ratingStars(review.rating) }}</div>
+              <span class="{{ statusBadgeClass(review.status) }}">{{ review.status }}</span>
+            </div>
+          </div>
+
+          <h4 class="mt-3 font-medium text-gray-900 dark:text-white">{{ review.title }}</h4>
+          <p class="mt-1 text-gray-700 text-sm dark:text-neutral-300">{{ review.content }}</p>
+
+          <div :show="review.tags.length > 0" class="flex flex-wrap gap-2 mt-3">
+            <template :for="tag in review.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-700 ring-1 ring-gray-500/10 ring-inset rounded-full">{{ tag }}</span>
+            </template>
+          </div>
+
+          <div :show="review.response !== undefined" class="mt-4 p-4 bg-gray-50 dark:bg-neutral-700 border-blue-500 border-l-4 rounded">
+            <div class="flex items-center justify-between">
+              <span class="font-medium text-gray-900 text-sm dark:text-white">{{ review.response?.author }}</span>
+              <span class="text-gray-500 text-xs dark:text-neutral-400">{{ formatDate(review.response?.date) }}</span>
+            </div>
+            <p class="mt-1 text-gray-700 text-sm dark:text-neutral-300">{{ review.response?.content }}</p>
+          </div>
+
+          <div class="flex items-center justify-between mt-4">
+            <div class="flex items-center space-x-4 text-gray-500 text-sm dark:text-neutral-400">
+              <span><span class="font-medium">{{ review.helpful }}</span> found helpful</span>
+            </div>
+
+            <div class="flex space-x-2">
+              <button @click="openResponseModal(review.id)" class="inline-flex items-center px-2.5 py-1.5 font-semibold text-blue-700 text-sm dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/50 ring-1 ring-blue-600/20 ring-inset rounded-md shadow-sm">
+                <div class="mr-1 h-4 w-4 i-hugeicons-message-edit"></div>
+                {{ review.response ? 'Edit Reply' : 'Reply' }}
+              </button>
+              <button @click="toggleHighlight(review.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="Highlight">
+                <div class="h-4 w-4 {{ review.isHighlighted ? 'i-hugeicons-star text-yellow-500' : 'i-hugeicons-star' }}"></div>
+              </button>
+              <button @click="toggleFlag(review.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="Flag">
+                <div class="h-4 w-4 {{ review.status === 'flagged' ? 'i-hugeicons-flag-02 text-red-500' : 'i-hugeicons-flag-02' }}"></div>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <div :show="filteredReviews().length === 0" class="py-12 text-center">
+      <div class="mx-auto h-12 w-12 text-gray-400 i-hugeicons-message-multiple-02"></div>
+      <h3 class="mt-2 font-semibold text-gray-900 text-sm dark:text-white">No reviews found</h3>
+      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Try adjusting your search or filters.</p>
+    </div>
+  </div>
+
+  <div :show="showResponseModal()" @click.self="closeResponseModal()" 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">Respond to {{ respondingReview()?.author }}</h3>
+        <button @click="closeResponseModal()" 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 :show="respondingReview() !== null" class="mb-4 p-4 bg-gray-50 dark:bg-neutral-700 rounded">
+        <div class="flex items-center mb-1">{{ ratingStars(respondingReview()?.rating ?? 0) }}</div>
+        <h4 class="font-medium text-gray-900 text-sm dark:text-white">{{ respondingReview()?.title }}</h4>
+        <p class="mt-1 text-gray-700 text-sm dark:text-neutral-300">{{ respondingReview()?.content }}</p>
+      </div>
+
+      <div>
+        <label class="block font-medium text-gray-900 text-sm dark:text-white">Your Response</label>
+        <textarea x-model="responseText" rows="6" placeholder="Write a thoughtful response..." 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="flex justify-end mt-6 space-x-2">
+        <button @click="closeResponseModal()" 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="submitResponse()" :disabled="!responseText()" 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">Submit Response</button>
+      </div>
+    </div>
+  </div>
+</PageLayout>
+
+<script client>
+// Filter options — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838).
+const sources = ['Google', 'Yelp', 'Facebook', 'TripAdvisor', 'Other']
+const reviewStatuses = ['unread', 'read', 'responded', 'flagged']
+const sentiments = ['positive', 'neutral', 'negative']
+
+interface Review {
+  id: number
+  uuid: string
+  source: 'Google' | 'Yelp' | 'Facebook' | 'TripAdvisor' | 'Other'
+  rating: number
+  title: string
+  content: string
+  author: string
+  authorAvatar?: string
+  date: string
+  location: string
+  response?: { content: string, date: string, author: string }
+  status: 'unread' | 'read' | 'responded' | 'flagged'
+  sentiment: 'positive' | 'neutral' | 'negative'
+  tags: string[]
+  helpful: number
+  notHelpful: number
+  isVerified: boolean
+  isHighlighted: boolean
+  isHidden: boolean
+}
+
+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 initialReviews: Review[] = [
+  { id: 1, uuid: '11ce', source: 'Google', rating: 5, title: 'Excellent service and product quality', content: 'I was extremely impressed with both the quality of the product and the customer service.', author: 'Alex Johnson', authorAvatar: 'https://randomuser.me/api/portraits/men/32.jpg', date: '2023-07-15', location: 'Main Street Branch', response: { content: 'Thank you for your kind words, Alex!', date: '2023-07-16', author: 'Customer Support Team' }, status: 'responded', sentiment: 'positive', tags: ['service', 'product quality', 'staff'], helpful: 12, notHelpful: 0, isVerified: true, isHighlighted: true, isHidden: false },
+  { id: 2, uuid: '22ce', source: 'Yelp', rating: 2, title: 'Disappointed with wait times', content: 'I had to wait over 45 minutes to be served. The staff seemed disorganized.', author: 'Sarah Miller', authorAvatar: 'https://randomuser.me/api/portraits/women/44.jpg', date: '2023-07-10', location: 'Downtown Location', status: 'read', sentiment: 'negative', tags: ['wait time', 'staff', 'busy'], helpful: 8, notHelpful: 2, isVerified: true, isHighlighted: false, isHidden: false },
+  { id: 3, uuid: '33ce', source: 'Google', rating: 4, title: 'Great product, room for improvement', content: 'The product exceeded my expectations. However, pricing could be more competitive.', author: 'David Chen', authorAvatar: 'https://randomuser.me/api/portraits/men/67.jpg', date: '2023-07-05', location: 'Online Store', response: { content: 'Thank you for your feedback, David!', date: '2023-07-06', author: 'Product Team' }, status: 'responded', sentiment: 'positive', tags: ['product quality', 'pricing', 'value'], helpful: 15, notHelpful: 3, isVerified: true, isHighlighted: false, isHidden: false },
+  { id: 4, uuid: '44ce', source: 'Yelp', rating: 1, title: 'Terrible experience, avoid at all costs', content: 'The product was defective, and customer service was rude.', author: 'Emily Wilson', authorAvatar: 'https://randomuser.me/api/portraits/women/23.jpg', date: '2023-07-01', location: 'Westside Branch', status: 'flagged', sentiment: 'negative', tags: ['defective product', 'customer service', 'rude staff'], helpful: 20, notHelpful: 1, isVerified: true, isHighlighted: false, isHidden: false },
+  { id: 5, uuid: '55ce', source: 'Google', rating: 5, title: 'Outstanding experience from start to finish', content: 'I was treated like a valued customer. The product is amazing.', author: 'Michael Thompson', authorAvatar: 'https://randomuser.me/api/portraits/men/42.jpg', date: '2023-06-28', location: 'Main Street Branch', response: { content: 'Thank you for your wonderful review, Michael!', date: '2023-06-29', author: 'Customer Support Team' }, status: 'responded', sentiment: 'positive', tags: ['service', 'product quality', 'follow-up'], helpful: 18, notHelpful: 0, isVerified: true, isHighlighted: true, isHidden: false },
+  { id: 6, uuid: '66ce', source: 'Yelp', rating: 3, title: 'Average experience, nothing special', content: 'The product was okay, and the service was adequate. Nothing stood out.', author: 'Jessica Lee', authorAvatar: 'https://randomuser.me/api/portraits/women/56.jpg', date: '2023-06-25', location: 'Eastside Location', status: 'read', sentiment: 'neutral', tags: ['average', 'basic service'], helpful: 5, notHelpful: 2, isVerified: true, isHighlighted: false, isHidden: false },
+  { id: 7, uuid: '77ce', source: 'Google', rating: 4, title: 'Very good but with minor issues', content: 'The staff was friendly and knowledgeable. Slight delay in processing.', author: 'Robert Garcia', authorAvatar: 'https://randomuser.me/api/portraits/men/78.jpg', date: '2023-06-20', location: 'Online Store', status: 'unread', sentiment: 'positive', tags: ['friendly staff', 'knowledgeable', 'delay'], helpful: 9, notHelpful: 1, isVerified: true, isHighlighted: false, isHidden: false },
+  { id: 8, uuid: '88ce', source: 'Facebook', rating: 5, title: 'Highly recommend', content: 'My favorite spot in town. Always consistent quality.', author: 'Karen Park', authorAvatar: 'https://randomuser.me/api/portraits/women/12.jpg', date: '2023-06-15', location: 'Main Street Branch', status: 'unread', sentiment: 'positive', tags: ['consistent', 'recommended'], helpful: 6, notHelpful: 0, isVerified: false, isHighlighted: false, isHidden: false },
+  { id: 9, uuid: '99ce', source: 'TripAdvisor', rating: 4, title: 'Great find when traveling', content: 'Visited while in town. Will be back next trip.', author: 'James Brown', authorAvatar: 'https://randomuser.me/api/portraits/men/22.jpg', date: '2023-06-10', location: 'Main Street Branch', status: 'read', sentiment: 'positive', tags: ['traveler', 'recommended'], helpful: 4, notHelpful: 0, isVerified: false, isHighlighted: false, isHidden: false },
+]
+
+const reviews = state<Review[]>(initialReviews)
+const searchQuery = state('')
+const sourceFilter = state('all')
+const ratingFilter = state('all')
+const sentimentFilter = state('all')
+const statusFilter = state('all')
+
+const showResponseModal = state(false)
+const respondingReviewId = state<number | null>(null)
+const responseText = state('')
+
+const totalReviews = derived(() => reviews().length)
+const flaggedCount = derived(() => reviews().filter(r => r.status === 'flagged').length)
+const respondedCount = derived(() => reviews().filter(r => r.response !== undefined).length)
+const responseRate = derived(() => totalReviews() === 0 ? 0 : Math.round((respondedCount() / totalReviews()) * 100))
+const averageRating = derived(() => {
+  const total = reviews().reduce((sum, r) => sum + r.rating, 0)
+  return totalReviews() === 0 ? '0.0' : (total / totalReviews()).toFixed(1)
+})
+
+const ratingDistribution = derived(() => {
+  const counts = [0, 0, 0, 0, 0]
+  for (const r of reviews()) {
+    if (r.rating >= 1 && r.rating <= 5)
+      counts[r.rating - 1]!++
+  }
+  return counts
+})
+
+const sentimentDistribution = derived(() => ({
+  positive: reviews().filter(r => r.sentiment === 'positive').length,
+  neutral: reviews().filter(r => r.sentiment === 'neutral').length,
+  negative: reviews().filter(r => r.sentiment === 'negative').length,
+}))
+
+const sourceDistribution = derived(() => {
+  const sourceList = ['Google', 'Yelp', 'Facebook', 'TripAdvisor', 'Other']
+  return sourceList.map(source => ({
+    source,
+    count: reviews().filter(r => r.source === source).length,
+  }))
+})
+
+const filteredReviews = derived(() => {
+  const q = searchQuery().toLowerCase()
+  const source = sourceFilter()
+  const rating = ratingFilter()
+  const sentiment = sentimentFilter()
+  const status = statusFilter()
+  return reviews()
+    .filter((review) => {
+      const matchesSearch = !q
+        || review.title.toLowerCase().includes(q)
+        || review.content.toLowerCase().includes(q)
+        || review.author.toLowerCase().includes(q)
+        || review.tags.some(t => t.toLowerCase().includes(q))
+      const matchesSource = source === 'all' || review.source === source
+      const matchesRating = rating === 'all' || review.rating === Number.parseInt(rating, 10)
+      const matchesSentiment = sentiment === 'all' || review.sentiment === sentiment
+      const matchesStatus = status === 'all' || review.status === status
+      return matchesSearch && matchesSource && matchesRating && matchesSentiment && matchesStatus
+    })
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+})
+
+const respondingReview = derived(() => reviews().find(r => r.id === respondingReviewId()) ?? null)
+
+function formatDate(date: string | null | undefined) {
+  if (!date)
+    return '-'
+  return new Date(date).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+function ratingStars(rating: number) {
+  return '★'.repeat(rating) + '☆'.repeat(Math.max(0, 5 - rating))
+}
+
+function sourceBadgeClass(source: string) {
+  const base = 'inline-flex items-center px-2 py-0.5 font-medium text-xs rounded'
+  switch (source) {
+    case 'Google': return `${base} bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200`
+    case 'Yelp': return `${base} bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200`
+    case 'Facebook': return `${base} bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-200`
+    case 'TripAdvisor': return `${base} bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200`
+    default: return `${base} bg-gray-100 text-gray-700 dark:bg-neutral-700 dark:text-neutral-200`
+  }
+}
+
+function statusBadgeClass(status: string) {
+  const base = 'inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset'
+  switch (status) {
+    case 'unread': return `${base} bg-blue-50 text-blue-700 ring-blue-600/20 dark:bg-blue-900/30 dark:text-blue-400`
+    case 'read': return `${base} bg-gray-50 text-gray-700 ring-gray-600/20 dark:bg-neutral-900/30 dark:text-neutral-400`
+    case 'responded': return `${base} bg-green-50 text-green-700 ring-green-600/20 dark:bg-green-900/30 dark:text-green-400`
+    case 'flagged': return `${base} bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-900/30 dark:text-red-400`
+    default: return `${base} bg-gray-50 text-gray-700 ring-gray-600/20 dark:bg-neutral-900/30 dark:text-neutral-400`
+  }
+}
+
+function openResponseModal(id: number) {
+  const review = reviews().find(r => r.id === id)
+  if (!review)
+    return
+  respondingReviewId.set(id)
+  responseText.set(review.response?.content ?? '')
+  showResponseModal.set(true)
+  if (review.status === 'unread')
+    reviews.set(reviews().map(r => r.id === id ? { ...r, status: 'read' } : r))
+}
+
+function closeResponseModal() {
+  showResponseModal.set(false)
+  respondingReviewId.set(null)
+  responseText.set('')
+}
+
+function submitResponse() {
+  const id = respondingReviewId()
+  const text = responseText().trim()
+  if (!id || !text)
+    return
+  const today = new Date().toISOString().split('T')[0]!
+  reviews.set(reviews().map(r => r.id === id
+    ? { ...r, response: { content: text, date: today, author: 'Customer Support Team' }, status: 'responded' }
+    : r))
+  closeResponseModal()
+}
+
+function toggleFlag(id: number) {
+  reviews.set(reviews().map(r => r.id === id
+    ? { ...r, status: r.status === 'flagged' ? 'read' : 'flagged' }
+    : r))
+}
+
+function toggleHighlight(id: number) {
+  reviews.set(reviews().map(r => r.id === id ? { ...r, isHighlighted: !r.isHighlighted } : r))
+}
+
+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 baseOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: { legend: { display: false } },
+    scales: {
+      y: { beginAtZero: true, ticks: { precision: 0 } },
+      x: { grid: { display: false } },
+    },
+  }
+
+  const ratingChart = useChart({
+    Chart: Ctor,
+    id: 'reviews_rating_chart',
+    type: 'bar',
+    data: {
+      labels: ['1★', '2★', '3★', '4★', '5★'],
+      datasets: [{
+        label: 'Reviews',
+        data: ratingDistribution(),
+        backgroundColor: ['#ef4444', '#f97316', '#eab308', '#84cc16', '#22c55e'],
+      }],
+    },
+    options: baseOptions,
+  })
+  chartHandles.push(ratingChart.instance as ChartLike | null)
+
+  const sentiment = sentimentDistribution()
+  const sentimentChart = useChart({
+    Chart: Ctor,
+    id: 'reviews_sentiment_chart',
+    type: 'bar',
+    data: {
+      labels: ['Positive', 'Neutral', 'Negative'],
+      datasets: [{
+        label: 'Reviews',
+        data: [sentiment.positive, sentiment.neutral, sentiment.negative],
+        backgroundColor: ['#22c55e', '#3b82f6', '#ef4444'],
+      }],
+    },
+    options: baseOptions,
+  })
+  chartHandles.push(sentimentChart.instance as ChartLike | null)
+
+  const sourceData = sourceDistribution()
+  const sourceChart = useChart({
+    Chart: Ctor,
+    id: 'reviews_source_chart',
+    type: 'doughnut',
+    data: {
+      labels: sourceData.map(s => s.source),
+      datasets: [{
+        label: 'Reviews',
+        data: sourceData.map(s => s.count),
+        backgroundColor: ['#3b82f6', '#ef4444', '#8b5cf6', '#22c55e', '#f59e0b'],
+      }],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: { legend: { position: 'bottom' } },
+    },
+  })
+  chartHandles.push(sourceChart.instance as ChartLike | null)
+}
+
+onMount(async () => {
+  await buildCharts()
+})
+
+onDestroy(() => {
+  destroyCharts()
+})
+</script>
+
+@endsection