@stacksjs/defaults 0.70.54

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

@@ -0,0 +1,161 @@
+<script>
+interface CouponsTableProps {
+  coupons?: any[]
+  searchQuery?: string
+  statusFilter?: string
+  sortBy?: string
+  sortOrder?: string
+  currentPage?: number
+  itemsPerPage?: number
+  statuses?: string
+}
+
+const { coupons = [], searchQuery = '', statusFilter = '', sortBy = 'code', sortOrder = 'asc', currentPage = 1, itemsPerPage = 10, statuses = ['Active', 'Expired', 'Scheduled'] } = defineProps<CouponsTableProps>()
+
+function getStatus(status) {
+    const statusStr = Array.isArray(status) ? status[0] : status
+    return statusStr || 'N/A'
+  }
+
+  function getStatusClass(status) {
+    const statusStr = Array.isArray(status) ? status[0] : status
+    switch (statusStr) {
+      case 'Active':
+        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 'Expired':
+        return 'bg-gray-50 text-gray-700 ring-1 ring-inset ring-gray-600/20 dark:bg-neutral-900/30 dark:text-neutral-400'
+      case 'Scheduled':
+        return 'bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-900/30 dark:text-blue-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>
+<!-- Coupons 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">
+            <button class="inline-flex items-center group" data-action="sort" data-column="code">
+              Coupon Code
+              <span class="group-focus:visible group-hover:visible flex-none ml-2 text-stone-400 rounded">
+                @if(sortBy == 'code')
+                  <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">Type</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="discount_value">
+              Value
+              <span class="group-focus:visible group-hover:visible flex-none ml-2 text-stone-400 rounded">
+                @if(sortBy == 'discount_value')
+                  <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">Min Order Amount</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="usage_count">
+              Usage
+              <span class="group-focus:visible group-hover:visible flex-none ml-2 text-stone-400 rounded">
+                @if(sortBy == 'usage_count')
+                  <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">
+            <button class="inline-flex items-center group" data-action="sort" data-column="end_date">
+              Expiry
+              <span class="group-focus:visible group-hover:visible flex-none ml-2 text-stone-400 rounded">
+                @if(sortBy == 'end_date')
+                  <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="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(coupons as coupon)
+          <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">
+              {{ coupon.code }}
+            </td>
+            <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ coupon.discount_type }}
+            </td>
+            <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ coupon.discount_type == 'Percentage' ? coupon.discount_value + '%' : '$' + coupon.discount_value.toFixed(2) }}
+            </td>
+            <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ coupon.min_order_amount > 0 ? '$' + coupon.min_order_amount.toFixed(2) : 'None' }}
+            </td>
+            <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ coupon.usage_count }} / {{ coupon.usage_limit }}
+            </td>
+            <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ coupon.end_date }}
+            </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(coupon.status) }}">
+                {{ getStatus(coupon.status) }}
+              </span>
+            </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-blue-400 hover:text-blue-900 dark:hover:text-blue-300 duration-150 transition-colors"
+                  data-action="view"
+                  data-coupon-id="{{ coupon.id }}"
+                >
+                  <div class="h-5 w-5 i-hugeicons-view"></div>
+                </button>
+                <button
+                  type="button"
+                  class="text-stone-400 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 duration-150 transition-colors"
+                  data-action="edit"
+                  data-coupon-id="{{ coupon.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 coupon"
+                  data-action="delete"
+                  data-coupon-id="{{ coupon.id }}"
+                >
+                  <div class="h-5 w-5 i-hugeicons-waste"></div>
+                </button>
+              </div>
+            </td>
+          </tr>
+        @endforeach
+        @if(coupons.length == 0)
+          <tr>
+            <td colspan="8" class="px-6 py-3.5 text-center text-sm text-stone-500 dark:text-neutral-400">
+              No coupons found matching your criteria
+            </td>
+          </tr>
+        @endif
+      </tbody>
+    </table>
+  </div>

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

@@ -0,0 +1,142 @@
+<script>
+interface CustomersTableProps {
+  customers?: any[]
+  searchQuery?: string
+  statusFilter?: string
+  sortBy?: string
+  sortOrder?: string
+  currentPage?: number
+  itemsPerPage?: number
+  statuses?: string
+}
+
+const { customers = [], searchQuery = '', statusFilter = '', sortBy = 'name', sortOrder = 'asc', currentPage = 1, itemsPerPage = 10, statuses = ['Active', 'Inactive'] } = defineProps<CustomersTableProps>()
+
+function getStatusClass(status) {
+    const statusStr = Array.isArray(status) ? status[0] : status
+    switch (statusStr) {
+      case 'Active':
+        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 'Inactive':
+        return 'bg-gray-50 text-gray-700 ring-1 ring-inset ring-gray-600/20 dark:bg-neutral-900/30 dark:text-neutral-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>
+<!-- Customers 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">
+            <button class="inline-flex items-center group" data-action="sort" data-column="name">
+              Customer
+              <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">Contact</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_spent">
+              Total Spent
+              <span class="group-focus:visible group-hover:visible flex-none ml-2 text-stone-400 rounded">
+                @if(sortBy == 'total_spent')
+                  <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">
+            <button class="inline-flex items-center group" data-action="sort" data-column="last_order">
+              Last Order
+              <span class="group-hover:visible flex-none ml-2 text-stone-400 rounded group-focus-visible">
+                @if(sortBy == 'last_order')
+                  <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="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(customers as customer)
+          <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">
+              <div class="flex items-center">
+                <img src="{{ customer.avatar }}" alt="" class="flex-shrink-0 h-10 w-10 rounded-full">
+                <div class="ml-4">
+                  <div>{{ customer.name }}</div>
+                  <div class="text-stone-500 text-xs dark:text-neutral-400">ID: {{ customer.id }}</div>
+                </div>
+              </div>
+            </td>
+            <td class="px-3 py-3.5 text-sm text-stone-500 dark:text-neutral-300">
+              <div>{{ customer.email }}</div>
+              <div>{{ customer.phone }}</div>
+            </td>
+            <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              ${{ (customer.total_spent || 0).toFixed(2) }}
+            </td>
+            <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ customer.last_order || 'Never' }}
+            </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(customer.status) }}">
+                {{ customer.status }}
+              </span>
+            </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-customer-id="{{ customer.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-customer-id="{{ customer.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 customer"
+                  data-action="delete"
+                  data-customer-id="{{ customer.id }}"
+                >
+                  <div class="h-5 w-5 i-hugeicons-waste"></div>
+                </button>
+              </div>
+            </td>
+          </tr>
+        @endforeach
+        @if(customers.length == 0)
+          <tr>
+            <td colspan="7" class="px-6 py-8 text-center text-sm text-stone-500 dark:text-neutral-400">
+              No customers found matching your criteria
+            </td>
+          </tr>
+        @endif
+      </tbody>
+    </table>
+  </div>

package/resources/components/Dashboard/Commerce/Delivery/DeliveryRoutesTable.stx

@@ -0,0 +1,80 @@
+<script>
+interface DeliveryRoutesTableProps {
+  routes?: any[]
+}
+
+const { routes = [] } = defineProps<DeliveryRoutesTableProps>()
+
+function formatDate(date) {
+    if (!date) return 'N/A'
+    const dateObj = typeof date === 'string' ? new Date(date) : date
+    return dateObj.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    }
+  }
+</script>
+<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">Route ID</th>
+          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Driver</th>
+          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Vehicle</th>
+          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Stops</th>
+          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Delivery Time</th>
+          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Total Distance</th>
+          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-right text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Last Active</th>
+          <th scope="col" class="relative pl-3 pr-6 py-3.5 text-right">
+            <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(routes as route)
+          <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">
+              {{ route.id }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ route.driver }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ route.vehicle }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ route.stops }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ route.delivery_time }} hours
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ route.total_distance }} km
+            </td>
+            <td class="px-4 py-3.5 text-right text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ formatDate(route.last_active) }}
+            </td>
+            <td class="relative pl-3 pr-6 py-3.5 font-medium text-right text-sm whitespace-nowrap">
+              <button type="button" class="mr-2 p-2 text-stone-400 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 border border-transparent rounded-md hover:border-blue-200 dark:hover:border-blue-800 duration-150 transition-colors" data-action="view-map" data-route-id="{{ route.id }}" title="View Map">
+                <div class="h-5 w-5 i-hugeicons-route-02"></div>
+              </button>
+              <button type="button" class="mr-2 p-2 text-stone-400 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 border border-transparent rounded-md hover:border-blue-200 dark:hover:border-blue-800 duration-150 transition-colors" title="Edit" data-action="edit" data-route-id="{{ route.id }}">
+                <div class="h-5 w-5 i-hugeicons-edit-01"></div>
+              </button>
+              <button type="button" class="p-2 text-stone-400 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 border border-transparent rounded-md hover:border-red-200 dark:hover:border-red-800 duration-150 transition-colors" title="Delete" data-action="delete" data-route-id="{{ route.id }}">
+                <div class="h-5 w-5 i-hugeicons-waste"></div>
+              </button>
+            </td>
+          </tr>
+        @endforeach
+        @if(routes.length == 0)
+          <tr>
+            <td colspan="8" class="px-6 py-3.5 text-center text-sm text-stone-500 dark:text-neutral-400">
+              No delivery routes found
+            </td>
+          </tr>
+        @endif
+      </tbody>
+    </table>
+  </div>

package/resources/components/Dashboard/Commerce/Delivery/DigitalDeliveryTable.stx

@@ -0,0 +1,85 @@
+<script>
+interface DigitalDeliveryTableProps {
+  methods?: any[]
+}
+
+const { methods = [] } = defineProps<DigitalDeliveryTableProps>()
+
+function statusVariant(status) {
+    return String(status || '').toLowerCase() === 'active' ? 'success' : 'default'
+  }
+
+  function uppercaseFirstLetter(status) {
+    return status.charAt(0).toUpperCase() + status.slice(1)
+  }
+
+  function formatLimit(value) {
+    return value !== null && value !== undefined ? value.toString() : 'Unlimited'
+  }
+
+  function formatExpiry(days) {
+    return days !== null && days !== undefined ? `${days} days` : 'Never expires'
+  }
+</script>
+<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">Name</th>
+          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Description</th>
+          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Download Limit</th>
+          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Expiry Days</th>
+          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Requires Login</th>
+          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Automatic Delivery</th>
+          <th scope="col" class="px-4 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="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(methods as method)
+          <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">
+              {{ method.name }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ method.description }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ formatLimit(method.download_limit) }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ formatExpiry(method.expiry_days) }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ method.requires_login ? 'Yes' : 'No' }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ method.automatic_delivery ? 'Yes' : 'No' }}
+            </td>
+            <td class="px-4 py-3.5 text-sm whitespace-nowrap">
+              <Badge variant="{{ statusVariant(method.status) }}" size="sm">
+                {{ uppercaseFirstLetter(method.status) }}
+              </Badge>
+            </td>
+            <td class="relative pl-3 pr-6 py-3.5 font-medium text-right text-sm whitespace-nowrap">
+              <button type="button" class="mr-2 p-2 text-stone-400 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 border border-transparent rounded-md hover:border-blue-200 dark:hover:border-blue-800 duration-150 transition-colors" title="Edit" data-action="edit" data-method-id="{{ method.id }}">
+                <div class="h-5 w-5 i-hugeicons-edit-01"></div>
+              </button>
+              <button type="button" class="p-2 text-stone-400 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 border border-transparent rounded-md hover:border-red-200 dark:hover:border-red-800 duration-150 transition-colors" title="Delete" data-action="delete" data-method-id="{{ method.id }}">
+                <div class="h-5 w-5 i-hugeicons-waste"></div>
+              </button>
+            </td>
+          </tr>
+        @endforeach
+        @if(methods.length == 0)
+          <tr>
+            <td colspan="8" class="px-6 py-3.5 text-center text-sm text-stone-500 dark:text-neutral-400">
+              No digital delivery methods found
+            </td>
+          </tr>
+        @endif
+      </tbody>
+    </table>
+  </div>

package/resources/components/Dashboard/Commerce/Delivery/DriversTable.stx

@@ -0,0 +1,99 @@
+<script>
+interface DriversTableProps {
+  drivers?: any[]
+}
+
+const { drivers = [] } = defineProps<DriversTableProps>()
+
+function formatDate(date) {
+    if (!date) return 'N/A'
+    const dateObj = typeof date === 'string' ? new Date(date) : date
+    return dateObj.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    }
+  }
+
+  function getStatusClass(status) {
+    switch (status) {
+      case 'Active':
+        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 'On Delivery':
+        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 'On Break':
+        return 'bg-yellow-50 text-yellow-700 ring-1 ring-inset ring-yellow-600/20 dark:bg-yellow-900/30 dark:text-yellow-400'
+      default:
+        return 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-400'
+    }
+  }
+</script>
+<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">ID</th>
+          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Name</th>
+          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Phone</th>
+          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Vehicle</th>
+          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">License</th>
+          <th scope="col" class="px-4 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-4 py-3.5 font-semibold text-left text-right text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Last Active</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(drivers as driver)
+          <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">
+              {{ driver.id }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              <div class="flex items-center">
+                <div class="flex-shrink-0 h-10 w-10">
+                  <img
+                    src="{{ driver.avatar || 'https://carefreeagency-eliinova.s3.amazonaws.com/images/avatar/default.svg' }}"
+                    alt=""
+                    class="h-10 w-10 rounded-full"
+                  >
+                </div>
+                <div class="ml-4">
+                  <div class="font-medium text-stone-800 dark:text-white">{{ driver.name }}</div>
+                </div>
+              </div>
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ driver.phone }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ driver.vehicle_number }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ driver.license }}
+            </td>
+            <td class="px-4 py-3.5 text-sm whitespace-nowrap">
+              <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium {{ getStatusClass(driver.status) }}">
+                {{ driver.status }}
+              </span>
+            </td>
+            <td class="px-4 py-3.5 text-right text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ formatDate(driver.last_active) }}
+            </td>
+            <td class="relative pl-3 pr-6 py-3.5 font-medium text-right text-sm whitespace-nowrap">
+              <button type="button" class="mr-2 p-2 text-stone-400 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 border border-transparent rounded-md hover:border-blue-200 dark:hover:border-blue-800 duration-150 transition-colors" data-action="view-routes" data-driver-id="{{ driver.id }}" title="View Routes">
+                <div class="h-5 w-5 i-hugeicons-route-02"></div>
+              </button>
+              <button type="button" class="mr-2 p-2 text-stone-400 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 border border-transparent rounded-md hover:border-blue-200 dark:hover:border-blue-800 duration-150 transition-colors" title="Edit" data-action="edit" data-driver-id="{{ driver.id }}">
+                <div class="h-5 w-5 i-hugeicons-edit-01"></div>
+              </button>
+              <button type="button" class="p-2 text-stone-400 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 border border-transparent rounded-md hover:border-red-200 dark:hover:border-red-800 duration-150 transition-colors" title="Delete" data-action="delete" data-driver-id="{{ driver.id }}">
+                <div class="h-5 w-5 i-hugeicons-waste"></div>
+              </button>
+            </td>
+          </tr>
+        @endforeach
+      </tbody>
+    </table>
+  </div>