@stacksjs/defaults 0.70.54

package/resources/components/Dashboard/Commerce/Forms/CouponsForm.stx

@@ -0,0 +1,191 @@
+<script>
+interface CouponsFormProps {
+  show?: boolean
+  mode?: 'add' | 'edit'
+  coupon?: any
+  formData?: string
+}
+
+const { show = false, mode = 'add', coupon = null, formData = { } = defineProps<CouponsFormProps>()
+
+// Get today's date in YYYY-MM-DD format
+const today = new Date().toISOString().split('T')[0]
+const nextMonth = new Date()
+nextMonth.setMonth(nextMonth.getMonth() + 1)
+const nextMonthDate = nextMonth.toISOString().split('T')[0]
+
+// Form default values
+  code: '',
+  discount_type: 'Percentage',
+  discount_value: 10,
+  min_order_amount: 0,
+  usage_limit: 100,
+  usage_count: 0,
+  start_date: today,
+  end_date: nextMonthDate,
+  status: 'Active'
+}
+
+const modalTitle = mode == 'add' ? 'Add New Coupon' : 'Edit Coupon'
+const submitButtonText = mode == 'add' ? 'Add' : 'Update'
+</script>
+@if(show)
+    <div 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 transition-opacity" data-action="close"></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>
+            <div class="mt-3 sm:mt-5 text-center">
+              <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">{{ modalTitle }}</h3>
+              <div class="mt-4">
+                <div class="space-y-4">
+                  <div>
+                    <label for="coupon-code" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Coupon Code</label>
+                    <div class="mt-2">
+                      <input
+                        type="text"
+                        id="coupon-code"
+                        name="code"
+                        value="{{ coupon ? coupon.code : formData.code }}"
+                        class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 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 focus:ring-inset shadow-sm"
+                        placeholder="e.g. SUMMER20"
+                      >
+                    </div>
+                  </div>
+
+                  <div class="grid gap-4 grid-cols-2">
+                    <div>
+                      <label for="coupon-type" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Type</label>
+                      <div class="mt-2">
+                        <select
+                          id="coupon-type"
+                          name="discount_type"
+                          class="block py-1.5 w-full text-gray-900 sm:leading-6 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 focus:ring-inset shadow-sm"
+                        >
+                          <option value="Percentage" {{ (coupon ? coupon.discount_type : formData.discount_type) == 'Percentage' ? 'selected' : '' }}>Percentage</option>
+                          <option value="Fixed" {{ (coupon ? coupon.discount_type : formData.discount_type) == 'Fixed' ? 'selected' : '' }}>Fixed Amount</option>
+                        </select>
+                      </div>
+                    </div>
+
+                    <div>
+                      <label for="coupon-value" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Value</label>
+                      <div class="mt-2">
+                        <div class="relative rounded-md shadow-sm">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <span class="text-gray-500 sm:text-sm">%</span>
+                          </div>
+                          <input
+                            type="number"
+                            id="coupon-value"
+                            name="discount_value"
+                            value="{{ coupon ? coupon.discount_value : formData.discount_value }}"
+                            class="block pl-7 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 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 focus:ring-inset"
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="grid gap-4 grid-cols-2">
+                    <div>
+                      <label for="min-order-amount" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Min Order Amount</label>
+                      <div class="mt-2">
+                        <div class="relative rounded-md shadow-sm">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <span class="text-gray-500 sm:text-sm">$</span>
+                          </div>
+                          <input
+                            type="number"
+                            id="min-order-amount"
+                            name="min_order_amount"
+                            value="{{ coupon ? coupon.min_order_amount : formData.min_order_amount }}"
+                            class="block pl-7 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 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 focus:ring-inset"
+                          >
+                        </div>
+                      </div>
+                    </div>
+
+                    <div>
+                      <label for="usage-limit" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Usage Limit</label>
+                      <div class="mt-2">
+                        <input
+                          type="number"
+                          id="usage-limit"
+                          name="usage_limit"
+                          value="{{ coupon ? coupon.usage_limit : formData.usage_limit }}"
+                          class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 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 focus:ring-inset shadow-sm"
+                        >
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="grid gap-4 grid-cols-2">
+                    <div>
+                      <label for="start-date" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Start Date</label>
+                      <div class="mt-2">
+                        <input
+                          type="date"
+                          id="start-date"
+                          name="start_date"
+                          value="{{ coupon ? coupon.start_date : formData.start_date }}"
+                          class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 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 focus:ring-inset shadow-sm"
+                        >
+                      </div>
+                    </div>
+
+                    <div>
+                      <label for="end-date" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">End Date</label>
+                      <div class="mt-2">
+                        <input
+                          type="date"
+                          id="end-date"
+                          name="end_date"
+                          value="{{ coupon ? coupon.end_date : formData.end_date }}"
+                          class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 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 focus:ring-inset shadow-sm"
+                        >
+                      </div>
+                    </div>
+                  </div>
+
+                  <div>
+                    <label for="coupon-status" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Status</label>
+                    <div class="mt-2">
+                      <select
+                        id="coupon-status"
+                        name="status"
+                        class="block py-1.5 w-full text-gray-900 sm:leading-6 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 focus:ring-inset shadow-sm"
+                      >
+                        <option value="Active" {{ (coupon ? coupon.status : formData.status) == 'Active' ? 'selected' : '' }}>Active</option>
+                        <option value="Scheduled" {{ (coupon ? coupon.status : formData.status) == 'Scheduled' ? 'selected' : '' }}>Scheduled</option>
+                        @if(mode == 'edit')
+                          <option value="Expired" {{ coupon && coupon.status == 'Expired' ? 'selected' : '' }}>Expired</option>
+                        @endif
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="sm:grid sm:gap-3 sm:grid-cols-2 sm:grid-flow-row-dense mt-5 sm:mt-6">
+            <button
+              type="button"
+              class="inline-flex justify-center sm:col-start-2 px-3 py-2 w-full font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm"
+              data-action="submit"
+            >
+              {{ submitButtonText }}
+            </button>
+            <button
+              type="button"
+              class="inline-flex justify-center sm:col-start-1 mt-3 px-3 py-2 sm:mt-0 w-full 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"
+              data-action="close"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  @endif

package/resources/components/Dashboard/Commerce/OrdersTable.stx

@@ -0,0 +1,131 @@
+<script>
+interface OrdersTableProps {
+  orders?: any[]
+  searchQuery?: string
+  statusFilter?: string
+  sortBy?: string
+  sortOrder?: string
+  currentPage?: number
+  itemsPerPage?: number
+  statuses?: string
+}
+
+const { orders = [], searchQuery = '', statusFilter = '', sortBy = 'id', sortOrder = 'desc', currentPage = 1, itemsPerPage = 10, statuses = ['Completed', 'Processing', 'Shipped', 'Cancelled', 'Refunded'] } = defineProps<OrdersTableProps>()
+
+function getStatusClass(status) {
+    switch (status) {
+      case 'Completed':
+        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 'Processing':
+        return 'bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-900/30 dark:text-blue-400'
+      case 'Shipped':
+        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 'Cancelled':
+        return 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-400'
+      case 'Refunded':
+        return 'bg-purple-50 text-purple-700 ring-1 ring-inset ring-purple-600/20 dark:bg-purple-900/30 dark:text-purple-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'
+    }
+  }
+</script>
+<!-- Orders table -->
+  <div class="overflow-hidden border border-stone-200/80 rounded-xl dark:border-neutral-700 shadow-sm">
+    <table class="min-w-full divide-stone-100 divide-y dark:divide-neutral-700">
+      <thead class="bg-stone-50/80 dark:bg-neutral-800">
+        <tr>
+          <th scope="col" class="pl-6 pr-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">
+            Order ID
+          </th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">
+            Customer Info
+          </th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">
+            Date
+          </th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">
+            <button class="inline-flex items-center group" data-action="sort" data-column="total_amount">
+              Total
+              <span class="group-focus:visible group-hover:visible flex-none ml-2 text-stone-400 rounded">
+                @if(sortBy == 'total_amount')
+                  <div class="{{ sortOrder == 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02' }} h-3.5 w-3.5"></div>
+                @else
+                  <div class="h-3.5 w-3.5 i-hugeicons-arrows-up-down"></div>
+                @endif
+              </span>
+            </button>
+          </th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Status</th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Type</th>
+          <th scope="col" class="relative pl-3 pr-6 py-3.5">
+            <span class="sr-only">Actions</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody class="bg-white dark:bg-neutral-800 divide-stone-100 divide-y dark:divide-neutral-700">
+        @foreach(orders as order)
+          <tr class="hover:bg-stone-50/50 dark:hover:bg-neutral-700/50 transition-colors">
+            <td class="pl-6 pr-3 py-3.5 font-medium text-sm text-stone-800 whitespace-nowrap dark:text-white">
+              #{{ order.id }}
+            </td>
+            <td class="px-3 py-3.5 text-sm text-stone-500 dark:text-neutral-300">
+              <div>Customer ID: {{ order.customer_id }}</div>
+              <div class="text-stone-400 text-xs dark:text-neutral-500">Order Type: {{ order.order_type }}</div>
+            </td>
+            <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ order.created_at || new Date().toLocaleDateString() }}
+            </td>
+            <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              ${{ order.total_amount.toFixed(2) }}
+            </td>
+            <td class="px-3 py-3.5 text-sm whitespace-nowrap">
+              <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium {{ getStatusClass(order.status) }}">
+                {{ order.status }}
+              </span>
+            </td>
+            <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ order.order_type }}
+            </td>
+            <td class="relative pl-3 pr-6 py-3.5 font-medium text-right text-sm whitespace-nowrap">
+              <div class="flex items-center justify-end space-x-2">
+                <button
+                  type="button"
+                  class="text-stone-400 dark:text-neutral-400 hover:text-blue-600 dark:hover:text-blue-400 duration-150 transition-colors"
+                  title="View order"
+                  data-action="view"
+                  data-order-id="{{ order.id }}"
+                >
+                  <div class="h-5 w-5 i-hugeicons-view"></div>
+                </button>
+                <button
+                  type="button"
+                  class="text-stone-400 dark:text-neutral-400 hover:text-blue-600 dark:hover:text-blue-400 duration-150 transition-colors"
+                  title="Edit order"
+                  data-action="edit"
+                  data-order-id="{{ order.id }}"
+                >
+                  <div class="h-5 w-5 i-hugeicons-edit-01"></div>
+                </button>
+                <button
+                  type="button"
+                  class="text-red-400 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300 duration-150 transition-colors"
+                  title="Delete order"
+                  data-action="delete"
+                  data-order-id="{{ order.id }}"
+                >
+                  <div class="h-5 w-5 i-hugeicons-waste"></div>
+                </button>
+              </div>
+            </td>
+          </tr>
+        @endforeach
+        @if(orders.length == 0)
+          <tr>
+            <td colspan="7" class="px-6 py-8 text-center text-sm text-stone-500 dark:text-neutral-400">
+              No orders found matching your criteria
+            </td>
+          </tr>
+        @endif
+      </tbody>
+    </table>
+  </div>

package/resources/components/Dashboard/Commerce/ProductsTable.stx

@@ -0,0 +1,170 @@
+<script>
+interface ProductsTableProps {
+  products?: any[]
+  searchQuery?: string
+  categoryFilter?: string
+  sortBy?: string
+  sortOrder?: string
+  currentPage?: number
+  itemsPerPage?: number
+  categories?: any[]
+  selectedItems?: any[]
+}
+
+const { products = [], searchQuery = '', categoryFilter = '', sortBy = 'name', sortOrder = 'asc', currentPage = 1, itemsPerPage = 10, categories = [], selectedItems = [] } = defineProps<ProductsTableProps>()
+
+function isSelected(productId) {
+    return selectedItems.includes(productId)
+  }
+
+  function toggleSelect(productId) {
+    $emit('toggle-select', productId)
+  }
+
+  function toggleSelectAll() {
+    $emit('toggle-select-all')
+  }
+
+  const allSelected = products.length > 0 && products.every(p => selectedItems.includes(p.id))
+
+  function getStatusClass(isAvailable) {
+    switch (isAvailable) {
+      case 1:
+        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 0:
+        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 getStatusText(isAvailable) {
+    return isAvailable === 1 ? 'Available' : 'Unavailable'
+  }
+
+  function formatDate(dateString) {
+    return new Date(dateString).toLocaleDateString()
+  }
+</script>
+<!-- Products table -->
+  <div class="overflow-hidden border border-stone-200/80 rounded-xl dark:border-neutral-700 shadow-sm">
+    <table class="min-w-full divide-stone-100 divide-y dark:divide-neutral-700">
+      <thead class="bg-stone-50/80 dark:bg-neutral-800">
+        <tr>
+          <th scope="col" class="pl-4 pr-1 py-3.5 w-10">
+            <input
+              type="checkbox"
+              class="h-4 w-4 text-blue-500 bg-white dark:bg-neutral-800 border-stone-300 rounded dark:border-neutral-600 focus:ring-blue-500/40 focus:ring-offset-0 cursor-pointer"
+              :checked="allSelected"
+              @change="toggleSelectAll"
+            />
+          </th>
+          <th scope="col" class="pl-2 pr-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">
+            <button class="inline-flex items-center group" data-action="sort" data-column="name">
+              Product
+              <span class="group-focus:visible group-hover:visible flex-none ml-2 text-stone-400 rounded">
+                @if(sortBy == 'name')
+                  <div class="{{ sortOrder == 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02' }} h-3.5 w-3.5"></div>
+                @else
+                  <div class="h-3.5 w-3.5 i-hugeicons-arrows-up-down"></div>
+                @endif
+              </span>
+            </button>
+          </th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Manufacturer</th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Category</th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">
+            <button class="inline-flex items-center group" data-action="sort" data-column="price">
+              Price
+              <span class="group-focus:visible group-hover:visible flex-none ml-2 text-stone-400 rounded">
+                @if(sortBy == 'price')
+                  <div class="{{ sortOrder == 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02' }} h-3.5 w-3.5"></div>
+                @else
+                  <div class="h-3.5 w-3.5 i-hugeicons-arrows-up-down"></div>
+                @endif
+              </span>
+            </button>
+          </th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Status</th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-right text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Inventory</th>
+          <th scope="col" class="px-3 py-3.5 font-semibold text-right text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">
+            <button class="inline-flex items-center group" data-action="sort" data-column="created_at">
+              Created At
+              <span class="group-focus:visible group-hover:visible flex-none ml-2 text-stone-400 rounded">
+                @if(sortBy == 'created_at')
+                  <div class="{{ sortOrder == 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02' }} h-3.5 w-3.5"></div>
+                @else
+                  <div class="h-3.5 w-3.5 i-hugeicons-arrows-up-down"></div>
+                @endif
+              </span>
+            </button>
+          </th>
+          <th scope="col" class="relative pl-3 pr-6 py-3.5">
+            <span class="sr-only">Actions</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody class="bg-white dark:bg-neutral-800 divide-stone-100 divide-y dark:divide-neutral-700">
+        @foreach(products as product)
+          <tr class="hover:bg-stone-50/50 dark:hover:bg-neutral-700/50 transition-colors">
+            <td class="pl-6 pr-3 py-3.5 text-sm whitespace-nowrap">
+              <div class="flex items-center">
+                <div class="flex-shrink-0 h-10 w-10">
+                  <img src="{{ product.image_url }}" alt="{{ product.name }}" class="object-cover h-10 w-10 rounded-lg">
+                </div>
+                <div class="ml-4">
+                  <div class="font-medium text-stone-800 dark:text-white">{{ product.name }}</div>
+                  <div class="mt-1 text-stone-500 text-xs dark:text-neutral-400">
+                    {{ product.description.substring(0, 50) }}{{ product.description.length > 50 ? '...' : '' }}
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-400">
+              {{ product.manufacturer?.name || 'N/A' }}
+            </td>
+            <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-400">
+              {{ product.category?.name || 'N/A' }}
+            </td>
+            <td class="px-3 py-3.5 text-sm whitespace-nowrap">
+              <div class="font-medium text-stone-800 dark:text-white">${{ product.price.toFixed(2) }}</div>
+            </td>
+            <td class="px-3 py-3.5 text-sm whitespace-nowrap">
+              <span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {{ getStatusClass(product.is_available) }}">
+                {{ getStatusText(product.is_available) }}
+              </span>
+            </td>
+            <td class="px-3 py-3.5 text-right text-sm text-stone-500 whitespace-nowrap dark:text-neutral-400">{{ product.inventory_count }}</td>
+            <td class="px-3 py-3.5 text-right text-sm text-stone-500 whitespace-nowrap dark:text-neutral-400">{{ formatDate(product.created_at) }}</td>
+            <td class="relative pl-3 pr-6 py-3.5 font-medium text-right text-sm whitespace-nowrap">
+              <div class="flex items-center justify-end space-x-2">
+                <button
+                  type="button"
+                  class="text-stone-400 dark:text-neutral-400 hover:text-blue-600 dark:hover:text-blue-400 duration-150 transition-colors"
+                  data-action="view"
+                  data-product-id="{{ product.id }}"
+                >
+                  <div class="h-5 w-5 i-hugeicons-view"></div>
+                </button>
+                <button
+                  type="button"
+                  class="text-stone-400 dark:text-neutral-400 hover:text-blue-600 dark:hover:text-blue-400 duration-150 transition-colors"
+                  data-action="edit"
+                  data-product-id="{{ product.id }}"
+                >
+                  <div class="h-5 w-5 i-hugeicons-edit-01"></div>
+                </button>
+              </div>
+            </td>
+          </tr>
+        @endforeach
+        @if(products.length == 0)
+          <tr>
+            <td colspan="8" class="px-6 py-8 text-center text-sm text-stone-500 dark:text-neutral-400">
+              No products found matching your criteria
+            </td>
+          </tr>
+        @endif
+      </tbody>
+    </table>
+  </div>