@stacksjs/defaults 0.70.206 → 0.70.208

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

@@ -0,0 +1,656 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Commerce Reviews')
+<PageLayout>
+      <!-- Header -->
+      <div class="sm:flex sm:items-center sm:justify-between">
+        <PageHeader title="Reviews" description="Manage customer reviews for your products" />
+      </div>
+
+      <!-- Summary cards -->
+      <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="p-5">
+            <div class="flex items-center">
+              <div class="flex-shrink-0">
+                <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-bubble-chat"></div>
+                </div>
+              </div>
+              <div class="flex-1 ml-5 w-0">
+                <dl>
+                  <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Total Reviews</dt>
+                  <dd>
+                    <div class="font-medium text-gray-900 text-lg dark:text-white">{{ totalReviews() }}</div>
+                  </dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+          <div class="p-5">
+            <div class="flex items-center">
+              <div class="flex-shrink-0">
+                <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>
+              <div class="flex-1 ml-5 w-0">
+                <dl>
+                  <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Published Reviews</dt>
+                  <dd>
+                    <div class="font-medium text-gray-900 text-lg dark:text-white">{{ publishedReviews() }}</div>
+                  </dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+          <div class="p-5">
+            <div class="flex items-center">
+              <div class="flex-shrink-0">
+                <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>
+              <div class="flex-1 ml-5 w-0">
+                <dl>
+                  <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Average Rating</dt>
+                  <dd>
+                    <div class="font-medium text-gray-900 text-lg dark:text-white">{{ averageRating() }} / 5</div>
+                  </dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+          <div class="p-5">
+            <div class="flex items-center">
+              <div class="flex-shrink-0">
+                <div class="p-2 h-10 w-10 bg-orange-100 dark:bg-orange-900 rounded-md">
+                  <div class="h-6 w-6 text-orange-600 dark:text-orange-300 i-hugeicons-clock-01"></div>
+                </div>
+              </div>
+              <div class="flex-1 ml-5 w-0">
+                <dl>
+                  <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Pending Reviews</dt>
+                  <dd>
+                    <div class="font-medium text-gray-900 text-lg dark:text-white">{{ pendingReviews() }}</div>
+                  </dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Filters and view options -->
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mt-6">
+        <div class="relative 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 focus:ring-inset" />
+        </div>
+
+        <div class="flex flex-col gap-4 sm:flex-row">
+          <select x-model="productFilter" class="block pl-3 pr-10 py-1.5 w-full 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 focus:ring-inset">
+            <option value="all">All Products</option>
+            <template :for="product in productList">
+              <option value="{{ product.id }}">{{ product.name }}</option>
+            </template>
+          </select>
+
+          <select x-model="ratingFilter" class="block pl-3 pr-10 py-1.5 w-full 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 focus:ring-inset">
+            <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 Stars</option>
+          </select>
+
+          <select x-model="statusFilter" class="block pl-3 pr-10 py-1.5 w-full 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 focus:ring-inset">
+            <option value="all">All Statuses</option>
+            <option value="Published">Published</option>
+            <option value="Under Review">Under Review</option>
+            <option value="Rejected">Rejected</option>
+            <option value="Spam">Spam</option>
+          </select>
+
+          <div class="flex rounded-md shadow-sm">
+            <button type="button" @click="setViewMode('detailed')" class="relative inline-flex items-center rounded-l-md px-3 py-2 text-sm font-semibold ring-1 ring-inset focus:z-10 {{ viewMode() === 'detailed' ? 'bg-blue-600 text-white ring-blue-600' : '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' }}">
+              <div class="h-5 w-5 i-hugeicons-grid"></div>
+            </button>
+            <button type="button" @click="setViewMode('compact')" class="relative -ml-px inline-flex items-center rounded-r-md px-3 py-2 text-sm font-semibold ring-1 ring-inset focus:z-10 {{ viewMode() === 'compact' ? 'bg-blue-600 text-white ring-blue-600' : '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' }}">
+              <div class="h-5 w-5 i-hugeicons-list-view"></div>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Sort options -->
+      <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('dateAdded')" class="flex items-center mr-3 hover:text-gray-700 dark:hover:text-gray-300 {{ sortBy() === 'dateAdded' ? 'font-semibold text-blue-600 dark:text-blue-400' : '' }}">
+          Date
+          <span :show="sortBy() === 'dateAdded'" class="ml-1">
+            <div :show="sortOrder() === 'asc'" class="h-4 w-4 i-hugeicons-arrow-up-01"></div>
+            <div :show="sortOrder() === 'desc'" class="h-4 w-4 i-hugeicons-arrow-down-02"></div>
+          </span>
+        </button>
+        <button @click="toggleSort('rating')" class="flex items-center mr-3 hover:text-gray-700 dark:hover:text-gray-300 {{ sortBy() === 'rating' ? 'font-semibold text-blue-600 dark:text-blue-400' : '' }}">
+          Rating
+          <span :show="sortBy() === 'rating'" class="ml-1">
+            <div :show="sortOrder() === 'asc'" class="h-4 w-4 i-hugeicons-arrow-up-01"></div>
+            <div :show="sortOrder() === 'desc'" class="h-4 w-4 i-hugeicons-arrow-down-02"></div>
+          </span>
+        </button>
+        <button @click="toggleSort('helpful')" class="flex items-center mr-3 hover:text-gray-700 dark:hover:text-gray-300 {{ sortBy() === 'helpful' ? 'font-semibold text-blue-600 dark:text-blue-400' : '' }}">
+          Helpful
+          <span :show="sortBy() === 'helpful'" class="ml-1">
+            <div :show="sortOrder() === 'asc'" class="h-4 w-4 i-hugeicons-arrow-up-01"></div>
+            <div :show="sortOrder() === 'desc'" class="h-4 w-4 i-hugeicons-arrow-down-02"></div>
+          </span>
+        </button>
+        <button @click="toggleSort('customerName')" class="flex items-center hover:text-gray-700 dark:hover:text-gray-300 {{ sortBy() === 'customerName' ? 'font-semibold text-blue-600 dark:text-blue-400' : '' }}">
+          Customer
+          <span :show="sortBy() === 'customerName'" class="ml-1">
+            <div :show="sortOrder() === 'asc'" class="h-4 w-4 i-hugeicons-arrow-up-01"></div>
+            <div :show="sortOrder() === 'desc'" class="h-4 w-4 i-hugeicons-arrow-down-02"></div>
+          </span>
+        </button>
+      </div>
+
+      <!-- Detailed view -->
+      <div :show="isDetailed" class="mt-6">
+        <div :show="hasNoReviews" class="py-12 text-center">
+          <div class="mx-auto h-12 w-12 text-gray-400 i-hugeicons-bubble-chat"></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 filter to find what you're looking for.</p>
+        </div>
+        <div :show="hasReviews" class="space-y-6">
+          <template :for="review in paginatedReviews">
+            <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.customerAvatar }}" alt="{{ review.customerName }}" class="object-cover h-12 w-12 rounded-full" />
+                    <div>
+                      <h3 class="font-medium text-base text-gray-900 dark:text-white">{{ review.customerName }}</h3>
+                      <p class="text-gray-500 text-sm dark:text-neutral-400">{{ review.customerEmail }}</p>
+                      <div class="flex items-center mt-1">
+                        <span class="text-lg text-yellow-400">{{ getRatingStars(review.rating) }}</span>
+                        <span class="ml-2 text-gray-500 text-sm dark:text-neutral-400">{{ review.dateAdded }}</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="flex flex-col items-end space-y-2">
+                    <span class="{{ getStatusClass(review.status) }} inline-flex items-center rounded-full px-2 py-1 text-xs font-medium">{{ review.status }}</span>
+                    <span :show="{{ review.featured ? 'true' : 'false' }}" class="inline-flex items-center px-2 py-1 font-medium text-xs text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/30 ring-1 ring-inset ring-yellow-600/20 rounded-full">Featured</span>
+                  </div>
+                </div>
+
+                <div class="flex items-center mt-4">
+                  <img src="{{ review.productImage }}" alt="{{ review.productName }}" class="object-cover h-10 w-10 rounded-md" />
+                  <div class="ml-3">
+                    <h4 class="font-medium text-gray-900 text-sm dark:text-white">{{ review.productName }}</h4>
+                  </div>
+                </div>
+
+                <div class="mt-4">
+                  <h4 class="font-medium text-base text-gray-900 dark:text-white">{{ review.title }}</h4>
+                  <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">{{ review.comment }}</p>
+                </div>
+
+                <div 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-thumbs-up"></div>
+                    <span>{{ review.helpful }} helpful</span>
+                  </div>
+                  <div class="flex items-center ml-4">
+                    <div class="mr-1 h-4 w-4 i-hugeicons-thumbs-down"></div>
+                    <span>{{ review.unhelpful }} unhelpful</span>
+                  </div>
+                </div>
+
+                <div class="flex justify-end mt-4 space-x-3">
+                  <button @click="toggleFeature({{ review.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 {{ review.featured ? 'i-hugeicons-star-off' : 'i-hugeicons-star' }}"></div>
+                    {{ review.featured ? 'Unfeature' : 'Feature' }}
+                  </button>
+                  <button :show="{{ review.status !== 'Published' ? 'true' : 'false' }}" @click="updateReviewStatus({{ review.id }}, 'Published')" class="inline-flex items-center px-2.5 py-1.5 font-semibold text-green-700 text-sm dark:text-green-400 bg-green-50 dark:bg-green-900/30 hover:bg-green-100 dark:hover:bg-green-900/50 ring-1 ring-green-600/20 ring-inset rounded-md shadow-sm">
+                    <div class="mr-1 h-4 w-4 i-hugeicons-checkmark-circle-02"></div>
+                    Approve
+                  </button>
+                  <button :show="{{ review.status !== 'Rejected' ? 'true' : 'false' }}" @click="updateReviewStatus({{ review.id }}, 'Rejected')" class="inline-flex items-center px-2.5 py-1.5 font-semibold text-red-700 text-sm dark:text-red-400 bg-red-50 dark:bg-red-900/30 hover:bg-red-100 dark:hover:bg-red-900/50 ring-1 ring-inset ring-red-600/20 rounded-md shadow-sm">
+                    <div class="mr-1 h-4 w-4 i-hugeicons-cancel-circle"></div>
+                    Reject
+                  </button>
+                  <button @click="openEditReviewModal({{ review.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-edit-01"></div>
+                    Edit
+                  </button>
+                  <button @click="deleteReview({{ review.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>
+
+      <!-- Compact view -->
+      <div :show="isCompact" 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">Customer</th>
+              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Product</th>
+              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Rating</th>
+              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Review</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-left 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">
+            <tr :show="hasNoReviews">
+              <td colspan="7" class="py-4 text-center text-gray-500 text-sm dark:text-neutral-400">No reviews found. Try adjusting your search or filter.</td>
+            </tr>
+            <template :for="review in paginatedReviews">
+              <tr class="hover:bg-gray-50 dark:hover:bg-neutral-700">
+                <td class="pl-4 pr-3 py-4 sm:pl-6 text-sm whitespace-nowrap">
+                  <div class="flex items-center">
+                    <div class="flex-shrink-0 h-8 w-8">
+                      <img src="{{ review.customerAvatar }}" alt="{{ review.customerName }}" class="object-cover h-8 w-8 rounded-full" />
+                    </div>
+                    <div class="ml-4">
+                      <div class="font-medium text-gray-900 dark:text-white">{{ review.customerName }}</div>
+                      <div class="text-gray-500 text-xs dark:text-neutral-400">{{ review.customerEmail }}</div>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-3 py-4 text-sm whitespace-nowrap">
+                  <div class="flex items-center">
+                    <div class="flex-shrink-0 h-8 w-8">
+                      <img src="{{ review.productImage }}" alt="{{ review.productName }}" class="object-cover h-8 w-8 rounded-md" />
+                    </div>
+                    <div class="ml-2 text-gray-900 dark:text-white">{{ review.productName }}</div>
+                  </div>
+                </td>
+                <td class="px-3 py-4 text-sm whitespace-nowrap">
+                  <span class="text-yellow-400">{{ getRatingStars(review.rating) }}</span>
+                </td>
+                <td class="px-3 py-4 max-w-xs text-gray-500 text-sm dark:text-neutral-400">
+                  <div class="font-medium text-gray-900 dark:text-white">{{ review.title }}</div>
+                  <div class="truncate">{{ review.comment }}</div>
+                </td>
+                <td class="px-3 py-4 text-sm whitespace-nowrap">
+                  <span class="{{ getStatusClass(review.status) }} inline-flex items-center rounded-full px-2 py-1 text-xs font-medium">{{ review.status }}</span>
+                  <span :show="{{ review.featured ? 'true' : 'false' }}" class="inline-flex items-center mt-1 px-2 py-1 font-medium text-xs text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/30 ring-1 ring-inset ring-yellow-600/20 rounded-full">Featured</span>
+                </td>
+                <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ review.dateAdded }}</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="openEditReviewModal({{ review.id }})" type="button" class="text-gray-400 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 duration-150 transition-colors">
+                      <div class="h-5 w-5 i-hugeicons-edit-01"></div>
+                      <span class="sr-only">Edit, {{ review.customerName }}'s review</span>
+                    </button>
+                    <button @click="deleteReview({{ review.id }})" type="button" class="text-gray-400 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 duration-150 transition-colors">
+                      <div class="h-5 w-5 i-hugeicons-waste"></div>
+                      <span class="sr-only">Delete, {{ review.customerName }}'s review</span>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Pagination -->
+      <div :show="hasMultiplePages" class="flex items-center justify-between mt-6 px-4 py-3 sm:px-6 border-gray-200 border-t dark:border-neutral-700">
+        <div class="flex sm:hidden flex-1 justify-between">
+          <button @click="previousPage()" class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 dark:border-neutral-600 dark:bg-neutral-800 dark:text-white {{ currentPage() === 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50 dark:hover:bg-neutral-700' }}">Previous</button>
+          <button @click="nextPage()" class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 dark:border-neutral-600 dark:bg-neutral-800 dark:text-white {{ currentPage() === totalPages() ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50 dark:hover:bg-neutral-700' }}">Next</button>
+        </div>
+        <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+          <div>
+            <p class="text-gray-700 text-sm dark:text-neutral-300">
+              Showing <span class="font-medium">{{ rangeStart() }}</span> to <span class="font-medium">{{ rangeEnd() }}</span> of <span class="font-medium">{{ totalFilteredReviews() }}</span> results
+            </p>
+          </div>
+          <div>
+            <nav class="inline-flex -space-x-px rounded-md shadow-sm isolate" aria-label="Pagination">
+              <button @click="previousPage()" class="inline-flex relative focus:z-20 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 focus:outline-offset-0 {{ currentPage() === 1 ? 'opacity-50 cursor-not-allowed' : '' }}">
+                <span class="sr-only">Previous</span>
+                <div class="h-5 w-5 i-hugeicons-arrow-left-01"></div>
+              </button>
+              <template :for="page in pageNumbers">
+                <button @click="changePage({{ page }})" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold ring-1 ring-inset ring-gray-300 focus:z-20 focus:outline-offset-0 dark:ring-neutral-600 {{ page === currentPage() ? 'bg-blue-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:bg-blue-700' : 'text-gray-900 hover:bg-gray-50 dark:text-white dark:hover:bg-neutral-700' }}">{{ page }}</button>
+              </template>
+              <button @click="nextPage()" class="inline-flex relative focus:z-20 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 focus:outline-offset-0 {{ currentPage() === totalPages() ? 'opacity-50 cursor-not-allowed' : '' }}">
+                <span class="sr-only">Next</span>
+                <div class="h-5 w-5 i-hugeicons-arrow-right-01"></div>
+              </button>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Edit Review Modal -->
+  <div :show="showReviewModal" class="fixed inset-0 overflow-y-auto z-10">
+    <div class="flex items-end justify-center sm:items-center p-4 sm:p-0 min-h-full text-center">
+      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-neutral-900 dark:bg-opacity-75 transition-opacity" @click="closeReviewModal()"></div>
+      <div class="overflow-hidden relative pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-lg sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl transition-all transform">
+        <div class="absolute right-0 top-0 pr-4 pt-4">
+          <button type="button" @click="closeReviewModal()" class="text-gray-400 dark:text-neutral-500 hover:text-gray-500 dark:hover:text-gray-400 bg-white dark:bg-neutral-800 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+            <span class="sr-only">Close</span>
+            <div class="h-6 w-6 i-hugeicons-cancel-circle"></div>
+          </button>
+        </div>
+        <div class="sm:flex sm:items-start">
+          <div class="mt-3 sm:ml-4 sm:mt-0 w-full text-center sm:text-left">
+            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Edit Review</h3>
+            <div class="mt-4">
+              <form @submit.prevent="saveReview()" class="space-y-4">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center">
+                    <img src="{{ editCustomerAvatar() }}" alt="{{ editCustomerName() }}" class="object-cover h-10 w-10 rounded-full" />
+                    <div class="ml-3">
+                      <p class="font-medium text-gray-900 text-sm dark:text-white">{{ editCustomerName() }}</p>
+                      <p class="text-gray-500 text-xs dark:text-neutral-400">{{ editCustomerEmail() }}</p>
+                    </div>
+                  </div>
+                  <div class="flex items-center">
+                    <img src="{{ editProductImage() }}" alt="{{ editProductName() }}" class="object-cover h-10 w-10 rounded-md" />
+                    <div class="ml-3">
+                      <p class="font-medium text-gray-900 text-sm dark:text-white">{{ editProductName() }}</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div>
+                  <label for="review-rating" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Rating</label>
+                  <select id="review-rating" x-model.number="editRating" class="block mt-1 w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm">
+                    <option value="1">1 Star</option>
+                    <option value="2">2 Stars</option>
+                    <option value="3">3 Stars</option>
+                    <option value="4">4 Stars</option>
+                    <option value="5">5 Stars</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label for="review-title" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Title</label>
+                  <input type="text" id="review-title" x-model="editTitle" required class="block mt-1 w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
+                </div>
+
+                <div>
+                  <label for="review-comment" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Comment</label>
+                  <textarea id="review-comment" x-model="editComment" rows="4" required class="block mt-1 w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm"></textarea>
+                </div>
+
+                <div>
+                  <label for="review-status" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Status</label>
+                  <select id="review-status" x-model="editStatus" class="block mt-1 w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm">
+                    <option value="Published">Published</option>
+                    <option value="Under Review">Under Review</option>
+                    <option value="Rejected">Rejected</option>
+                    <option value="Spam">Spam</option>
+                  </select>
+                </div>
+
+                <div class="flex items-center">
+                  <input id="review-featured" type="checkbox" x-model="editFeatured" class="h-4 w-4 text-blue-600 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-500" />
+                  <label for="review-featured" class="block ml-2 font-medium text-gray-700 text-sm dark:text-neutral-300">Featured review</label>
+                </div>
+
+                <div class="sm:flex sm:flex-row-reverse mt-5 sm:mt-4">
+                  <button type="submit" class="inline-flex justify-center px-3 py-2 sm:ml-3 w-full sm:w-auto font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md shadow-sm">Save Changes</button>
+                  <button type="button" @click="closeReviewModal()" class="inline-flex justify-center mt-3 px-3 py-2 sm:mt-0 w-full sm:w-auto 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>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+</PageLayout>
+<script client>
+interface Product {
+  id: number
+  name: string
+  imageUrl: string
+  category: string
+}
+
+interface Review {
+  id: number
+  productId: number
+  productName: string
+  productImage: string
+  customerName: string
+  customerEmail: string
+  customerAvatar: string
+  rating: number
+  title: string
+  comment: string
+  status: string
+  featured: boolean
+  dateAdded: string
+  helpful: number
+  unhelpful: number
+}
+
+const products = state<Product[]>([
+  { id: 1, name: 'Classic Cheeseburger', imageUrl: 'https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', category: 'Burgers' },
+  { id: 2, name: 'Margherita Pizza', imageUrl: 'https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', category: 'Pizza' },
+  { id: 4, name: 'Spicy Ramen Bowl', imageUrl: 'https://images.unsplash.com/photo-1569718212165-3a8278d5f624?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', category: 'Asian' },
+  { id: 7, name: 'Chocolate Brownie Sundae', imageUrl: 'https://images.unsplash.com/photo-1563805042-7684c019e1cb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', category: 'Desserts' },
+  { id: 9, name: 'Chicken Wings (12 pc)', imageUrl: 'https://images.unsplash.com/photo-1608039755401-742074f0548d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', category: 'Appetizers' },
+  { id: 12, name: 'Strawberry Cheesecake', imageUrl: 'https://images.unsplash.com/photo-1565958011703-44f9829ba187?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', category: 'Desserts' },
+])
+
+const reviews = state<Review[]>([
+  { id: 1, productId: 1, productName: 'Classic Cheeseburger', productImage: 'https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', customerName: 'Alex Johnson', customerEmail: 'alex.j@example.com', customerAvatar: 'https://randomuser.me/api/portraits/men/32.jpg', rating: 5, title: 'Best burger in town!', comment: 'This cheeseburger is absolutely amazing. The beef patty was juicy and flavorful, and the special sauce really makes it stand out. Will definitely order again!', status: 'Published', featured: true, dateAdded: '2023-12-15', helpful: 24, unhelpful: 2 },
+  { id: 2, productId: 2, productName: 'Margherita Pizza', productImage: 'https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', customerName: 'Sarah Miller', customerEmail: 'sarah.m@example.com', customerAvatar: 'https://randomuser.me/api/portraits/women/44.jpg', rating: 4, title: 'Authentic Italian taste', comment: 'The Margherita pizza was delicious and reminded me of my trip to Naples. The crust was thin and crispy, and the fresh basil really elevated the flavor. My only complaint is that it was a bit small for the price.', status: 'Published', featured: true, dateAdded: '2023-12-10', helpful: 18, unhelpful: 3 },
+  { id: 3, productId: 4, productName: 'Spicy Ramen Bowl', productImage: 'https://images.unsplash.com/photo-1569718212165-3a8278d5f624?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', customerName: 'David Chen', customerEmail: 'd.chen@example.com', customerAvatar: 'https://randomuser.me/api/portraits/men/67.jpg', rating: 5, title: 'Authentic and spicy!', comment: 'This ramen is the real deal! The broth was rich and flavorful, and the spice level was perfect for me. The soft-boiled egg was cooked to perfection, and the noodles had just the right texture. Highly recommend!', status: 'Published', featured: false, dateAdded: '2023-12-05', helpful: 32, unhelpful: 1 },
+  { id: 4, productId: 7, productName: 'Chocolate Brownie Sundae', productImage: 'https://images.unsplash.com/photo-1563805042-7684c019e1cb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', customerName: 'Emily Wilson', customerEmail: 'emily.w@example.com', customerAvatar: 'https://randomuser.me/api/portraits/women/23.jpg', rating: 5, title: 'Decadent dessert!', comment: 'This brownie sundae is to die for! The brownie was warm and gooey, and the ice cream was premium quality. The perfect way to end a meal or satisfy a sweet tooth. Worth every calorie!', status: 'Published', featured: true, dateAdded: '2023-11-28', helpful: 41, unhelpful: 0 },
+  { id: 5, productId: 9, productName: 'Chicken Wings (12 pc)', productImage: 'https://images.unsplash.com/photo-1608039755401-742074f0548d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', customerName: 'Michael Thompson', customerEmail: 'm.thompson@example.com', customerAvatar: 'https://randomuser.me/api/portraits/men/42.jpg', rating: 3, title: 'Good but not great', comment: 'The wings were crispy and the portion size was generous, but I found the Buffalo sauce to be a bit too vinegary for my taste. The Honey Garlic flavor was much better. Service was quick though!', status: 'Published', featured: false, dateAdded: '2023-11-20', helpful: 8, unhelpful: 5 },
+  { id: 6, productId: 12, productName: 'Strawberry Cheesecake', productImage: 'https://images.unsplash.com/photo-1565958011703-44f9829ba187?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', customerName: 'Jessica Lee', customerEmail: 'jessica.l@example.com', customerAvatar: 'https://randomuser.me/api/portraits/women/56.jpg', rating: 4, title: 'Creamy and delicious', comment: 'This cheesecake has the perfect texture - creamy but not too heavy. The strawberry topping was made with fresh berries and not too sweet. My only suggestion would be to have a slightly thicker crust.', status: 'Published', featured: false, dateAdded: '2023-11-15', helpful: 15, unhelpful: 2 },
+  { id: 7, productId: 1, productName: 'Classic Cheeseburger', productImage: 'https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', customerName: 'Robert Garcia', customerEmail: 'r.garcia@example.com', customerAvatar: 'https://randomuser.me/api/portraits/men/78.jpg', rating: 2, title: 'Disappointed with my order', comment: 'I was really looking forward to this burger, but it arrived cold and the bun was soggy. The patty itself was tasty, but the overall experience was disappointing. Hope they can improve their delivery packaging.', status: 'Under Review', featured: false, dateAdded: '2023-12-18', helpful: 3, unhelpful: 1 },
+  { id: 8, productId: 4, productName: 'Spicy Ramen Bowl', productImage: 'https://images.unsplash.com/photo-1569718212165-3a8278d5f624?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', customerName: 'Sophia Martinez', customerEmail: 's.martinez@example.com', customerAvatar: 'https://randomuser.me/api/portraits/women/90.jpg', rating: 5, title: 'Perfect comfort food!', comment: 'This ramen bowl is exactly what I needed on a cold day. The broth was rich and flavorful, and the spice level was just right - enough to warm you up without being overwhelming. The noodles had the perfect texture and the toppings were generous. Will definitely order again!', status: 'Published', featured: true, dateAdded: '2023-12-01', helpful: 27, unhelpful: 0 },
+  { id: 9, productId: 2, productName: 'Margherita Pizza', productImage: 'https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', customerName: 'Daniel Brown', customerEmail: 'd.brown@example.com', customerAvatar: 'https://randomuser.me/api/portraits/men/22.jpg', rating: 1, title: 'Not what I expected', comment: 'I was very disappointed with this pizza. The crust was burnt on the bottom and the cheese was barely melted. For the price, I expected much better quality. Will not be ordering this again.', status: 'Under Review', featured: false, dateAdded: '2023-12-17', helpful: 5, unhelpful: 2 },
+  { id: 10, productId: 7, productName: 'Chocolate Brownie Sundae', productImage: 'https://images.unsplash.com/photo-1563805042-7684c019e1cb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', customerName: 'Olivia Taylor', customerEmail: 'o.taylor@example.com', customerAvatar: 'https://randomuser.me/api/portraits/women/12.jpg', rating: 4, title: 'Great dessert option', comment: 'This brownie sundae was a delightful treat! The brownie was rich and chocolatey, and the ice cream complemented it perfectly. My only suggestion would be to add more chocolate sauce. Otherwise, it was perfect!', status: 'Published', featured: false, dateAdded: '2023-11-25', helpful: 19, unhelpful: 3 },
+  { id: 11, productId: 9, productName: 'Chicken Wings (12 pc)', productImage: 'https://images.unsplash.com/photo-1608039755401-742074f0548d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', customerName: 'William Clark', customerEmail: 'w.clark@example.com', customerAvatar: 'https://randomuser.me/api/portraits/men/52.jpg', rating: 5, title: 'Best wings in town!', comment: 'These wings are absolutely fantastic! I tried all three flavors and they were all delicious, but the BBQ was my favorite. The wings were meaty and cooked perfectly - crispy on the outside and juicy on the inside. Great value for the price too!', status: 'Published', featured: true, dateAdded: '2023-11-10', helpful: 38, unhelpful: 1 },
+  { id: 12, productId: 12, productName: 'Strawberry Cheesecake', productImage: 'https://images.unsplash.com/photo-1565958011703-44f9829ba187?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', customerName: 'Emma Wilson', customerEmail: 'e.wilson@example.com', customerAvatar: 'https://randomuser.me/api/portraits/women/33.jpg', rating: 3, title: 'Good but not great', comment: 'The cheesecake itself had a nice texture and wasn\'t too sweet, which I appreciated. However, the strawberry topping tasted a bit artificial to me. I would have preferred fresh strawberries. It was still enjoyable, just not exceptional.', status: 'Published', featured: false, dateAdded: '2023-12-08', helpful: 7, unhelpful: 4 },
+])
+
+const searchQuery = state('')
+const sortBy = state('dateAdded')
+const sortOrder = state<'asc' | 'desc'>('desc')
+const productFilter = state('all')
+const ratingFilter = state('all')
+const statusFilter = state('all')
+const viewMode = state('detailed')
+
+const currentPage = state(1)
+const itemsPerPage = state(5)
+
+const showReviewModal = state(false)
+const editingReviewId = state<number | null>(null)
+const editingReview = state<Review | null>(null)
+const editTitle = state('')
+const editComment = state('')
+const editRating = state(5)
+const editStatus = state('Published')
+const editFeatured = state(false)
+
+function productList(): Product[] { return products() }
+
+const filteredReviews = derived(() => {
+  const list = reviews()
+  const q = searchQuery().toLowerCase()
+  const pf = productFilter()
+  const rf = ratingFilter()
+  const sf = statusFilter()
+  return list
+    .filter((r) => {
+      const matchesSearch = r.customerName.toLowerCase().includes(q)
+        || r.title.toLowerCase().includes(q)
+        || r.comment.toLowerCase().includes(q)
+        || r.productName.toLowerCase().includes(q)
+      const matchesProduct = pf === 'all' || r.productId.toString() === pf
+      const matchesRating = rf === 'all' || r.rating.toString() === rf
+      const matchesStatus = sf === 'all' || r.status === sf
+      return matchesSearch && matchesProduct && matchesRating && matchesStatus
+    })
+    .sort((a, b) => {
+      let comparison = 0
+      const sb = sortBy()
+      if (sb === 'dateAdded')
+        comparison = new Date(a.dateAdded).getTime() - new Date(b.dateAdded).getTime()
+      else if (sb === 'rating')
+        comparison = a.rating - b.rating
+      else if (sb === 'helpful')
+        comparison = a.helpful - b.helpful
+      else if (sb === 'customerName')
+        comparison = a.customerName.localeCompare(b.customerName)
+      return sortOrder() === 'asc' ? comparison : -comparison
+    })
+})
+
+const totalPages = derived(() => Math.max(1, Math.ceil(filteredReviews().length / itemsPerPage())))
+const paginatedReviews = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage()
+  return filteredReviews().slice(start, start + itemsPerPage())
+})
+const pageNumbers = derived(() => Array.from({ length: totalPages() }, (_, i) => i + 1))
+const hasNoReviews = derived(() => paginatedReviews().length === 0)
+const hasReviews = derived(() => paginatedReviews().length > 0)
+const isDetailed = derived(() => viewMode() === 'detailed')
+const isCompact = derived(() => viewMode() === 'compact')
+const hasMultiplePages = derived(() => totalPages() > 1)
+
+const totalReviews = derived(() => reviews().length)
+const publishedReviews = derived(() => reviews().filter(r => r.status === 'Published').length)
+const pendingReviews = derived(() => reviews().filter(r => r.status === 'Under Review').length)
+const averageRating = derived(() => {
+  const list = reviews()
+  if (!list.length)
+    return '0.0'
+  const total = list.reduce((sum, r) => sum + r.rating, 0)
+  return (total / list.length).toFixed(1)
+})
+
+const totalFilteredReviews = derived(() => filteredReviews().length)
+const rangeStart = derived(() => totalFilteredReviews() === 0 ? 0 : (currentPage() - 1) * itemsPerPage() + 1)
+const rangeEnd = derived(() => Math.min(currentPage() * itemsPerPage(), totalFilteredReviews()))
+
+function editCustomerName(): string { return editingReview()?.customerName ?? '' }
+function editCustomerEmail(): string { return editingReview()?.customerEmail ?? '' }
+function editCustomerAvatar(): string { return editingReview()?.customerAvatar ?? '' }
+function editProductName(): string { return editingReview()?.productName ?? '' }
+function editProductImage(): string { return editingReview()?.productImage ?? '' }
+
+function setViewMode(mode: string): void {
+  viewMode.set(mode)
+}
+
+function toggleSort(column: string): void {
+  if (sortBy() === column)
+    sortOrder.set(sortOrder() === 'asc' ? 'desc' : 'asc')
+  else {
+    sortBy.set(column)
+    sortOrder.set('desc')
+  }
+}
+
+function changePage(page: number): void {
+  currentPage.set(page)
+}
+
+function previousPage(): void {
+  if (currentPage() > 1)
+    currentPage.update(p => p - 1)
+}
+
+function nextPage(): void {
+  if (currentPage() < totalPages())
+    currentPage.update(p => p + 1)
+}
+
+function getStatusClass(status: string): string {
+  switch (status) {
+    case 'Published': return 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-900/30 dark:text-green-400'
+    case 'Under Review': return 'bg-yellow-50 text-yellow-700 ring-1 ring-inset ring-yellow-600/20 dark:bg-yellow-900/30 dark:text-yellow-400'
+    case 'Rejected': return '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 'bg-gray-50 text-gray-700 ring-1 ring-inset ring-gray-600/20 dark:bg-neutral-900/30 dark:text-neutral-400'
+  }
+}
+
+function getRatingStars(rating: number): string {
+  return '★'.repeat(rating) + '☆'.repeat(5 - rating)
+}
+
+function findReview(id: number): Review | undefined {
+  return reviews().find(r => r.id === id)
+}
+
+function openEditReviewModal(id: number): void {
+  const target = findReview(id)
+  if (!target)
+    return
+  editingReviewId.set(id)
+  editingReview.set({ ...target })
+  editTitle.set(target.title)
+  editComment.set(target.comment)
+  editRating.set(target.rating)
+  editStatus.set(target.status)
+  editFeatured.set(target.featured)
+  showReviewModal.set(true)
+}
+
+function closeReviewModal(): void {
+  showReviewModal.set(false)
+  editingReviewId.set(null)
+  editingReview.set(null)
+}
+
+function saveReview(): void {
+  const id = editingReviewId()
+  if (id == null)
+    return
+  reviews.update(list => list.map(r => r.id === id
+    ? { ...r, title: editTitle(), comment: editComment(), rating: editRating(), status: editStatus(), featured: editFeatured() }
+    : r))
+  closeReviewModal()
+}
+
+function toggleFeature(id: number): void {
+  reviews.update(list => list.map(r => r.id === id ? { ...r, featured: !r.featured } : r))
+}
+
+function updateReviewStatus(id: number, newStatus: string): void {
+  reviews.update(list => list.map(r => r.id === id ? { ...r, status: newStatus } : r))
+}
+
+function deleteReview(id: number): void {
+  reviews.update(list => list.filter(r => r.id !== id))
+}
+</script>
+
+@endsection