@stacksjs/defaults 0.70.54

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

@@ -0,0 +1,92 @@
+<script>
+interface LicenseKeysTableProps {
+  licenseKeys?: any[]
+}
+
+const { licenseKeys = [] } = defineProps<LicenseKeysTableProps>()
+
+function statusVariant(status) {
+    const s = String(status || '').toLowerCase()
+    if (s === 'active') return 'success'
+    if (s === 'expired') return 'warning'
+    if (s === 'revoked') return 'danger'
+    return 'default'
+  }
+
+  function uppercaseFirstLetter(status) {
+    return status.charAt(0).toUpperCase() + status.slice(1)
+  }
+
+  function formatDate(date) {
+    if (!date) return 'N/A'
+    return new Date(date).toLocaleDateString()
+  }
+</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">Key</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">Template</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">Customer</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">Product</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">Order 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">Date Created</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 Date</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-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Actions</th>
+        </tr>
+      </thead>
+      <tbody class="bg-white dark:bg-neutral-800 divide-stone-100 divide-y dark:divide-neutral-700">
+        @foreach(licenseKeys as licenseKey)
+          <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">
+              {{ licenseKey.key }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ licenseKey.template }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ licenseKey.customer.name }}
+              <div class="text-stone-400 text-xs dark:text-neutral-500">{{ licenseKey.customer.email }}</div>
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ licenseKey.product }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ licenseKey.order_id }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ formatDate(licenseKey.created_at) }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ formatDate(licenseKey.expiry_date) }}
+            </td>
+            <td class="px-4 py-3.5 text-sm whitespace-nowrap">
+              <Badge variant="{{ statusVariant(licenseKey.status) }}" size="sm">
+                {{ uppercaseFirstLetter(licenseKey.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" data-action="view" data-license-id="{{ licenseKey.id }}" title="View">
+                <div class="h-5 w-5 i-hugeicons-view"></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" data-action="edit" data-license-id="{{ licenseKey.id }}" title="Edit">
+                <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" data-action="delete" data-license-id="{{ licenseKey.id }}" title="Delete">
+                <div class="h-5 w-5 i-hugeicons-waste"></div>
+              </button>
+            </td>
+          </tr>
+        @endforeach
+        @if(licenseKeys.length == 0)
+          <tr>
+            <td colspan="9" class="px-6 py-3.5 text-center text-sm text-stone-500 dark:text-neutral-400">
+              No license keys found
+            </td>
+          </tr>
+        @endif
+      </tbody>
+    </table>
+  </div>

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

@@ -0,0 +1,88 @@
+<script>
+interface LicenseTemplatesTableProps {
+  templates?: any[]
+}
+
+const { templates = [] } = defineProps<LicenseTemplatesTableProps>()
+
+function statusVariant(active, status) {
+    if (status) {
+      const s = String(Array.isArray(status) ? status[0] || '' : status).toLowerCase()
+      if (s === 'active') return 'success'
+      return 'default'
+    }
+    return active ? 'success' : 'default'
+  }
+
+  function getStatusText(active, status) {
+    if (status) {
+      const statusStr = Array.isArray(status) ? (status.length > 0 ? status[0] : undefined) : status
+      if (statusStr) {
+        return statusStr.charAt(0).toUpperCase() + statusStr.slice(1)
+      }
+    }
+
+    return active ? 'Active' : 'Inactive'
+  }
+</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">Format</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">Prefix</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">Segments</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">Character Set</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(templates as template)
+          <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">
+              {{ template.name }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ template.format }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ template.prefix || 'None' }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ template.segment_count }} x {{ template.segment_length }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ template.char_set.length }} chars
+            </td>
+            <td class="px-4 py-3.5 text-sm whitespace-nowrap">
+              <Badge variant="{{ statusVariant(template.active, template.status) }}" size="sm">
+                {{ getStatusText(template.active, template.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" data-action="view" data-template-id="{{ template.id }}" title="View">
+                <div class="h-5 w-5 i-hugeicons-view"></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" data-action="edit" data-template-id="{{ template.id }}" title="Edit">
+                <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" data-action="delete" data-template-id="{{ template.id }}" title="Delete">
+                <div class="h-5 w-5 i-hugeicons-waste"></div>
+              </button>
+            </td>
+          </tr>
+        @endforeach
+        @if(templates.length == 0)
+          <tr>
+            <td colspan="7" class="px-6 py-3.5 text-center text-sm text-stone-500 dark:text-neutral-400">
+              No license templates found
+            </td>
+          </tr>
+        @endif
+      </tbody>
+    </table>
+  </div>

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

@@ -0,0 +1,122 @@
+<script>
+interface PaginationProps {
+  currentPage?: number
+  totalItems?: number
+  itemsPerPage?: number
+  maxDisplayedPages?: number
+}
+
+const { currentPage = 1, totalItems = 0, itemsPerPage = 10, maxDisplayedPages = 5 } = defineProps<PaginationProps>()
+
+const totalPages = Math.ceil(totalItems / itemsPerPage)
+  const startItem = ((currentPage - 1) * itemsPerPage) + 1
+  const endItem = Math.min(currentPage * itemsPerPage, totalItems)
+
+  function getDisplayedPages() {
+    if (totalPages <= maxDisplayedPages) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1)
+    }
+
+    const pages = []
+    const halfMax = Math.floor(maxDisplayedPages / 2)
+
+    // Always show first page
+    pages.push(1)
+
+    // Add ellipsis if needed
+    if (currentPage - halfMax > 2) {
+      pages.push('...')
+    }
+
+    // Add pages around current page
+    const start = Math.max(2, currentPage - halfMax)
+    const end = Math.min(totalPages - 1, currentPage + halfMax)
+
+    for (let i = start; i <= end; i++) {
+      pages.push(i)
+    }
+
+    // Add ellipsis if needed
+    if (currentPage + halfMax < totalPages - 1) {
+      pages.push('...')
+    }
+
+    // Always show last page
+    if (totalPages > 1) {
+      pages.push(totalPages)
+    }
+
+    return pages
+  }
+
+  const displayedPages = getDisplayedPages()
+</script>
+<div class="flex items-center justify-between mt-5 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">
+      <a
+        href="#"
+        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 hover:bg-gray-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 {{ currentPage == 1 ? 'opacity-50 cursor-not-allowed' : '' }}"
+        data-action="prev"
+      >
+        Previous
+      </a>
+      <a
+        href="#"
+        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 hover:bg-gray-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 {{ currentPage == totalPages ? 'opacity-50 cursor-not-allowed' : '' }}"
+        data-action="next"
+      >
+        Next
+      </a>
+    </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">{{ startItem }}</span>
+          to
+          <span class="font-medium">{{ endItem }}</span>
+          of
+          <span class="font-medium">{{ totalItems }}</span>
+          results
+        </p>
+      </div>
+      <div>
+        <nav class="inline-flex -space-x-px rounded-md shadow-sm isolate" aria-label="Pagination">
+          <a
+            href="#"
+            class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 dark:ring-neutral-700 dark:hover:bg-neutral-700 {{ currentPage == 1 ? 'opacity-50 cursor-not-allowed' : '' }}"
+            data-action="prev"
+          >
+            <span class="sr-only">Previous</span>
+            <div class="h-5 w-5 i-hugeicons-arrow-left-01"></div>
+          </a>
+
+          @foreach(displayedPages as page)
+            @if(page != '...')
+              <a
+                href="#"
+                class="{{ page == currentPage ? 'relative z-10 inline-flex items-center bg-blue-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:bg-blue-700' : 'relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 dark:text-neutral-200 dark:ring-neutral-700 dark:hover:bg-neutral-700' }} cursor-pointer"
+                data-action="page"
+                data-page="{{ page }}"
+              >
+                {{ page }}
+              </a>
+            @else
+              <span class="inline-flex relative items-center px-4 py-2 font-semibold text-gray-700 text-sm dark:text-neutral-400 ring-1 ring-gray-300 ring-inset dark:ring-neutral-700 focus:outline-offset-0">
+                ...
+              </span>
+            @endif
+          @endforeach
+
+          <a
+            href="#"
+            class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 dark:ring-neutral-700 dark:hover:bg-neutral-700 {{ currentPage == totalPages ? 'opacity-50 cursor-not-allowed' : '' }}"
+            data-action="next"
+          >
+            <span class="sr-only">Next</span>
+            <div class="h-5 w-5 i-hugeicons-arrow-right-01"></div>
+          </a>
+        </nav>
+      </div>
+    </div>
+  </div>

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

@@ -0,0 +1,23 @@
+<script>
+interface SearchFilterProps {
+  placeholder?: string
+  searchQuery?: string
+}
+
+const { placeholder = 'Search...', searchQuery = '' } = defineProps<SearchFilterProps>()
+</script>
+<div>
+    <!-- Search -->
+    <div class="relative rounded-md shadow-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
+        type="text"
+        class="block pl-10 pr-3 py-2.5 w-full leading-6 text-base text-gray-900 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"
+        placeholder="{{ placeholder }}"
+        value="{{ searchQuery }}"
+        name="search"
+      >
+    </div>
+  </div>

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

@@ -0,0 +1,80 @@
+<script>
+interface ShippingMethodsTableProps {
+  methods?: any[]
+}
+
+const { methods = [] } = defineProps<ShippingMethodsTableProps>()
+
+function formatCurrency(amount) {
+    if (!amount) return 'N/A'
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    }).format(amount)
+  }
+</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">Base Rate</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">Handling Fee</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">Free Shipping</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">Zones</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">
+              {{ formatCurrency(method.base_rate) }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ formatCurrency(method.free_shipping) }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              @if(method.free_shipping !== null)
+                Over {{ formatCurrency(method.free_shipping) }}
+              @else
+                Not available
+              @endif
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              <div class="flex flex-wrap gap-1">
+                @foreach(method.shipping_zones as zone)
+                  <span class="inline-flex items-center px-2 py-1 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-900 rounded-full">
+                    {{ zone.name }}
+                  </span>
+                @endforeach
+              </div>
+            </td>
+            <td class="px-4 py-3.5 text-sm whitespace-nowrap">
+              <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-medium {{ method.status == 'active' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300' : 'bg-gray-100 text-gray-800 dark:bg-neutral-700 dark:text-neutral-300' }}">
+                {{ method.status }}
+              </span>
+            </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
+      </tbody>
+    </table>
+  </div>

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

@@ -0,0 +1,59 @@
+<script>
+interface ShippingRatesTableProps {
+  rates?: any[]
+}
+
+const { rates = [] } = defineProps<ShippingRatesTableProps>()
+
+function formatCurrency(amount) {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    }).format(amount)
+  }
+</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">Method</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">Zone</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">Weight From</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">Weight To</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">Rate</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(rates as rate)
+          <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">
+              {{ rate.shipping_method.name }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ rate.shipping_zone.name }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ rate.weight_from }} kg
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ rate.weight_to }} kg
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ formatCurrency(rate.rate) }}
+            </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-rate-id="{{ rate.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-rate-id="{{ rate.id }}">
+                <div class="h-5 w-5 i-hugeicons-waste"></div>
+              </button>
+            </td>
+          </tr>
+        @endforeach
+      </tbody>
+    </table>
+  </div>

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

@@ -0,0 +1,71 @@
+<script>
+interface ShippingZonesTableProps {
+  zones?: any[]
+}
+
+const { zones = [] } = defineProps<ShippingZonesTableProps>()
+
+function getPostalCodes(postalCodes) {
+    if (!postalCodes) return 'All'
+    return postalCodes.split(',').map(code => code.trim()).join(', ')
+  }
+</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">Zone 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">Countries</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">Regions</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">Postal Codes</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(zones as zone)
+          <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">
+              {{ zone.name }}
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              <div class="flex flex-wrap gap-1">
+                @foreach(zone.countries as country)
+                  <span class="inline-flex items-center px-2 py-1 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-900 rounded-full">
+                    {{ country }}
+                  </span>
+                @endforeach
+              </div>
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              <div class="flex flex-wrap gap-1">
+                @foreach(zone.regions as region)
+                  <span class="inline-flex items-center px-2 py-1 font-medium text-green-700 text-xs dark:text-green-300 bg-green-50 dark:bg-green-900 rounded-full">
+                    {{ region }}
+                  </span>
+                @endforeach
+              </div>
+            </td>
+            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ getPostalCodes(zone.postal_codes) }}
+            </td>
+            <td class="px-4 py-3.5 text-sm whitespace-nowrap">
+              <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-medium {{ zone.status == 'active' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300' : 'bg-gray-100 text-gray-800 dark:bg-neutral-700 dark:text-neutral-300' }}">
+                {{ zone.status }}
+              </span>
+            </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-zone-id="{{ zone.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-zone-id="{{ zone.id }}">
+                <div class="h-5 w-5 i-hugeicons-waste"></div>
+              </button>
+            </td>
+          </tr>
+        @endforeach
+      </tbody>
+    </table>
+  </div>

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

@@ -0,0 +1,36 @@
+<script>
+interface TabNavigationProps {
+  modelValue?: string
+  tabs?: any[]
+}
+
+const { modelValue = '', tabs = [] } = defineProps<TabNavigationProps>()
+</script>
+<div>
+    <div class="sm:hidden">
+      <label for="tabs" class="sr-only">Select a tab</label>
+      <select
+        id="tabs"
+        name="tabs"
+        class="block w-full dark:text-white dark:bg-neutral-800 border-gray-300 rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-blue-500"
+      >
+        @foreach(tabs as tab)
+          <option value="{{ tab }}" {{ tab == modelValue ? 'selected' : '' }}>{{ tab.name }}</option>
+        @endforeach
+      </select>
+    </div>
+    <div class="hidden sm:block">
+      <div class="border-b border-gray-200 dark:border-neutral-700">
+        <nav class="flex -mb-px space-x-8" aria-label="Tabs">
+          @foreach(tabs as tab)
+            <a
+              href="{{ tab.href }}"
+              class="{{ tab == modelValue ? 'border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-neutral-400 dark:hover:border-gray-600 dark:hover:text-gray-300' }} whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
+            >
+              {{ tab.name }}
+            </a>
+          @endforeach
+        </nav>
+      </div>
+    </div>
+  </div>