@stacksjs/defaults 0.70.54

package/resources/components/Dashboard/Billing/PaymentMethodList.stx

@@ -0,0 +1,52 @@
+<script>
+interface PaymentMethodListProps {
+  userId?: number
+  paymentMethods?: any[]
+  loading?: boolean
+}
+
+const { userId = 1, paymentMethods = [], loading = false } = defineProps<PaymentMethodListProps>()
+</script>
+<div class="mt-4">
+    @if(loading)
+      <slot name="loading" />
+    @else
+      <ul role="list" class="grid gap-6 grid-cols-1 sm:grid-cols-1 lg:grid-cols-1">
+        @foreach(paymentMethods as method)
+          <li class="col-span-1 bg-white border divide-gray-200 divide-y rounded-lg shadow">
+            <div class="p-3 w-full">
+              <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-4">
+                  <slot name="cardBrand" />
+                  <h2 class="text-gray-600 text-sm">
+                    {{ method.brand }} •••• {{ method.last_four }} <br>
+                    <span class="italic text-gray-500 text-xs">Expires {{ method.exp_month }} / {{ method.exp_year }}</span>
+                  </h2>
+                </div>
+
+                <div class="flex justify-end space-x-4">
+                  <button
+                    type="button"
+                    class="px-2 py-1 font-semibold text-sm text-white bg-white hover:bg-neutral-50 border rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm"
+                    data-action="make-default"
+                    data-method-id="{{ method.id }}"
+                  >
+                    <span class="text-gray-700 i-hugeicons-star"></span>
+                  </button>
+
+                  <button
+                    type="button"
+                    class="px-2 py-1 font-semibold text-sm text-white bg-white hover:bg-neutral-50 border rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm"
+                    data-action="delete"
+                    data-method-id="{{ method.id }}"
+                  >
+                    <span class="text-gray-700 i-hugeicons-trash"></span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </li>
+        @endforeach
+      </ul>
+    @endif
+  </div>

package/resources/components/Dashboard/Billing/Plans.stx

@@ -0,0 +1,136 @@
+<script>
+interface PlansProps {
+  currentPlan?: any
+  hasPaymentMethods?: boolean
+  updatingPlanState?: boolean
+  hobbyMonthlyPrice?: number
+  hobbyYearlyPrice?: number
+  hobbyLifetimePrice?: number
+  proMonthlyPrice?: number
+  proYearlyPrice?: number
+  proLifetimePrice?: number
+  showPlans?: boolean
+}
+
+const { currentPlan = null, hasPaymentMethods = false, updatingPlanState = false, hobbyMonthlyPrice = 39, hobbyYearlyPrice = 379, hobbyLifetimePrice = 479, proMonthlyPrice = 59, proYearlyPrice = 579, proLifetimePrice = 749, showPlans = true } = defineProps<PlansProps>()
+
+// Pricing data
+</script>
+<div class="w-full">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center space-x-2">
+        <h2 class="font-medium text-gray-900 text-lg">
+          Dashboard Plans
+        </h2>
+      </div>
+
+      <div>
+        <div class="flex justify-center">
+          <fieldset aria-label="Payment frequency">
+            <div class="grid gap-x-1 grid-cols-3 p-1 font-semibold text-center text-xs/5 ring-1 ring-gray-200 ring-inset rounded-full" data-plan-type-selector>
+              <label class="px-2.5 py-1 text-white bg-blue-600 rounded-full cursor-pointer" data-plan-type="monthly">
+                <input type="radio" name="frequency" value="monthly" class="sr-only" checked>
+                <span>Monthly</span>
+              </label>
+
+              <label class="px-2.5 py-1 rounded-full cursor-pointer" data-plan-type="annually">
+                <input type="radio" name="frequency" value="annually" class="sr-only">
+                <span>Annually</span>
+              </label>
+
+              <label class="px-2.5 py-1 rounded-full cursor-pointer" data-plan-type="lifetime">
+                <input type="radio" name="frequency" value="lifetime" class="sr-only">
+                <span>Lifetime</span>
+              </label>
+            </div>
+          </fieldset>
+        </div>
+      </div>
+    </div>
+
+    <div class="pt-8">
+      <p class="font-semibold text-gray-800">
+        Choose one of the recurring plans.
+      </p>
+    </div>
+
+    <div class="pt-8">
+      <fieldset>
+        <div class="space-y-4">
+          <!-- Hobby Plan -->
+          <label class="block sm:flex relative sm:justify-between px-6 py-4 bg-white border rounded-lg focus:outline-none shadow-sm cursor-pointer" data-plan="hobby">
+            <input type="radio" name="selected-plan" value="hobby" class="sr-only">
+            <span class="flex items-center">
+              <span class="flex flex-col text-sm">
+                <div class="flex">
+                  <span class="font-medium text-gray-900">Hobby</span>
+                </div>
+                <p class="pt-2 text-gray-600 text-xs">
+                  All Stacks features are included.
+                </p>
+              </span>
+            </span>
+            <span class="flex sm:flex-col mt-2 sm:ml-4 sm:mt-0 text-sm sm:text-right">
+              <span class="font-medium text-gray-900" data-hobby-price>$ {{ hobbyMonthlyPrice }}</span>
+              <span class="ml-1 sm:ml-0 text-gray-500" data-per-text>/month</span>
+            </span>
+            <span class="absolute border rounded-lg pointer-events-none -inset-px" aria-hidden="true"></span>
+          </label>
+
+          <!-- Pro Plan -->
+          <label class="block sm:flex relative sm:justify-between px-6 py-4 bg-white border rounded-lg focus:outline-none shadow-sm cursor-pointer" data-plan="pro">
+            <input type="radio" name="selected-plan" value="pro" class="sr-only">
+            <span class="flex items-center">
+              <span class="flex flex-col text-sm">
+                <div class="flex">
+                  <span class="font-medium text-gray-900">Pro</span>
+                </div>
+                <p class="pt-2 text-gray-600 text-xs">
+                  All Stacks features are included & being able to invite team members.
+                </p>
+              </span>
+            </span>
+            <span class="flex sm:flex-col mt-2 sm:ml-4 sm:mt-0 text-sm sm:text-right">
+              <span class="font-medium text-gray-900" data-pro-price>${{ proMonthlyPrice }}</span>
+              <span class="ml-1 sm:ml-0 text-gray-500" data-per-text>/month</span>
+            </span>
+            <span class="absolute border rounded-lg pointer-events-none -inset-px" aria-hidden="true"></span>
+          </label>
+        </div>
+      </fieldset>
+    </div>
+
+    @if(showPlans)
+      <div class="flex justify-end pt-8">
+        <button
+          type="button"
+          class="px-2.5 py-1.5 font-semibold text-sm text-white bg-blue-600 disabled:bg-gray-600 hover:bg-neutral-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm"
+          @if(!hasPaymentMethods) disabled @endif
+          data-action="subscribe"
+        >
+          Subscribe
+        </button>
+      </div>
+    @endif
+
+    @if(updatingPlanState)
+      <div class="flex justify-end pt-8">
+        <button
+          type="button"
+          class="px-2.5 py-1.5 font-semibold text-gray-900 text-sm bg-white hover:bg-gray-50 ring-1 ring-gray-300 ring-inset rounded-md shadow-sm"
+          data-action="cancel-edit"
+        >
+          Cancel Plan
+        </button>
+
+        <button
+          type="button"
+          class="ml-4 px-2.5 py-1.5 font-semibold text-sm text-white bg-blue-600 disabled:bg-gray-600 hover:bg-neutral-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm"
+          @if(!hasPaymentMethods) disabled @endif
+          data-action="update-plan"
+        >
+          Update Plan
+        </button>
+      </div>
+    @endif
+  </div>

package/resources/components/Dashboard/Buttons/AppButton.stx

@@ -0,0 +1,48 @@
+<script server>
+interface AppButtonProps {
+  buttonText?: string
+  loadingText?: string
+  passedClass?: string
+  loading?: boolean
+}
+
+const { buttonText = '', loadingText = '', passedClass = '', loading = false } = defineProps<AppButtonProps>()
+
+const buttonString = loading ? loadingText : buttonText
+  const disabledClass = ' disabled:opacity-50 disabled:cursor-not-allowed'
+  const finalClass = passedClass + disabledClass
+</script>
+<button
+  type="button"
+  class="flex items-center {{ finalClass }}"
+  @if(loading) disabled @endif
+>
+  @if(loading)
+    <svg
+      class="-ml-1 mr-3 h-5 w-5 text-white animate-spin"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      ></circle>
+      <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  @else
+    <slot name="icon" />
+  @endif
+
+  <span>
+    {{ buttonString }}
+  </span>
+</button>

package/resources/components/Dashboard/Buttons/IconButton.stx

@@ -0,0 +1,20 @@
+<script server>
+interface IconButtonProps {
+  to?: string
+  active?: boolean
+}
+
+const { to = '', active = false } = defineProps<IconButtonProps>()
+</script>
+<a
+  href="{{ to }}"
+  class="bg-primary flex flex-row items-center gap-2 rounded-md p-1 {{ active ? 'dark:bg-neutral-700 bg-neutral-50 dark:text-blue-300 text-gray-600' : '' }}"
+>
+  <div class="flex relative items-center justify-center p-1 bg-gray-8 rounded-md">
+    <span class="h-6 w-6 text-white"></span>
+  </div>
+
+  <span class="!text-sm text-gray-8">
+    <slot />
+  </span>
+</a>

package/resources/components/Dashboard/Card.stx

@@ -0,0 +1,78 @@
+<!--
+  Custom Dashboard Card Component
+
+  A flexible card component for dashboard content.
+
+  Usage:
+  <Card title="My Card" :actions="[{ label: 'Action', onClick: handleClick }]">
+    <p>Card content here</p>
+  </Card>
+-->
+
+<script>
+interface CardProps {
+  title?: string
+  subtitle?: string
+  actions?: any[]
+  padding?: boolean
+}
+
+const { title, subtitle, actions, padding } = defineProps<CardProps>()
+</script>
+<div class="dashboard-card">
+    @if (title || actions.length > 0)
+      <div class="dashboard-card-header">
+        <div>
+          @if (title)
+            <h3 class="dashboard-card-title">{{ title }}</h3>
+          @endif
+          @if (subtitle)
+            <p class="dashboard-card-subtitle">{{ subtitle }}</p>
+          @endif
+        </div>
+        @if (actions.length > 0)
+          <div class="dashboard-card-actions">
+            @foreach (actions as action)
+              <button class="btn btn-ghost btn-sm" @click="action.onClick">
+                {{ action.label }}
+              </button>
+            @endforeach
+          </div>
+        @endif
+      </div>
+    @endif
+    <div class="{{ padding ? 'dashboard-card-content' : '' }}">
+      <slot></slot>
+    </div>
+  </div>
+<style>
+.dashboard-card {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+.dashboard-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.dashboard-card-title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+.dashboard-card-subtitle {
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  margin-top: 0.125rem;
+}
+.dashboard-card-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+.dashboard-card-content {
+  padding: 1.25rem;
+}
+</style>

package/resources/components/Dashboard/Chart.stx

@@ -0,0 +1,75 @@
+<!--
+  Custom Dashboard Chart Component
+
+  A placeholder chart component for dashboard visualizations.
+  Integrate with your preferred charting library (Chart.js, D3, etc.)
+
+  Usage:
+  <Chart type="line" :data="chartData" :options="chartOptions" />
+-->
+
+<script>
+interface ChartProps {
+  type?: string
+  data: Record<string, any>
+  options?: Record<string, any>
+  height?: string
+}
+
+const { type = 'line', data, options = {}, height = '300px' } = defineProps<ChartProps>()
+</script>
+<div class="dashboard-chart" style="height: {{ height }};">
+    <div class="chart-placeholder">
+      <div class="chart-icon">📊</div>
+      <div class="chart-text">{{ type.charAt(0).toUpperCase() + type.slice(1) }} Chart</div>
+      <div class="chart-hint">
+        Integrate with Chart.js, D3, or your preferred library
+      </div>
+    </div>
+    <!--
+      To use with Chart.js:
+      <canvas ref="chartCanvas"></canvas>
+
+      <script client>
+      import Chart from '@stacksjs/charts'
+
+            </script>
+    -->
+  </div>
+<script client>
+import { onMount } from 'stx'
+
+onMount(() => {
+  new Chart(chartCanvas, {
+          type: type,
+          data: data,
+          options: options
+        }
+})
+</script>
+
+<style>
+.dashboard-chart {
+  background: var(--color-bg-subtle);
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.chart-placeholder {
+  text-align: center;
+  color: var(--color-text-muted);
+}
+.chart-icon {
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
+}
+.chart-text {
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+.chart-hint {
+  font-size: 0.75rem;
+  opacity: 0.7;
+}
+</style>

package/resources/components/Dashboard/CodeEditor.stx

@@ -0,0 +1,41 @@
+<script>
+interface CodeEditorProps {
+  live?: boolean
+  lang?: string
+  theme?: string
+  content?: string
+}
+
+const { live = false, lang = 'typescript', theme = 'github_dark', content = `echo 'Hello World!' } = defineProps<CodeEditorProps>()
+
+mv ./test/test.ts ./jello
+cp`
+</script>
+<header class="flex items-center justify-between p-4 bg-[#1f2428] border-[#30363d] border-b rounded-t-lg">
+    <div class="flex gap-2 items-center">
+      <div class="h-3 w-3 bg-[#f85149] rounded-full"></div>
+      <div class="h-3 w-3 bg-[#db9d16] rounded-full"></div>
+      <div class="h-3 w-3 bg-[#2ea043] rounded-full"></div>
+    </div>
+
+    @if(!live)
+      <span class="font-mono text-[#c9d1d9] text-sm">Deploy Script</span>
+    @else
+      <span class="font-mono text-[#c9d1d9] text-sm">Live Terminal Output</span>
+    @endif
+  </header>
+
+  <div class="bg-[#0d1117] rounded-b-lg vue-ace-editor" style="height: 300px; font-size: 14px;">
+    <pre class="p-4 font-mono text-[#c9d1d9] text-sm">{{ content }}</pre>
+  </div>
+<style>
+select {
+  margin-right: 15px;
+}
+
+.vue-ace-editor {
+  font-size: 14px;
+  flex: 1;
+  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+}
+</style>

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

@@ -0,0 +1,70 @@
+<script>
+interface BulkActionBarProps {
+  selectedCount?: number
+  defaultActions?: string
+  actions?: string
+}
+
+const { selectedCount = 0, defaultActions = [, actions } = defineProps<BulkActionBarProps>()
+
+/**
+ * BulkActionBar Component
+ *
+ * Displays a sticky action bar when items are selected in a table.
+ * Provides bulk operations like delete, status change, and export.
+ *
+ * Props:
+ *   selectedCount - Number of selected items
+ *   actions - Array of { label, icon, variant, action } objects
+ */
+
+  { label: 'Delete', icon: 'i-hugeicons-delete-02', variant: 'danger' },
+  { label: 'Export', icon: 'i-hugeicons-download-04', variant: 'secondary' },
+]
+
+function handleAction(action) {
+  $emit('action', action)
+}
+
+function handleDeselectAll() {
+  $emit('deselect-all')
+}
+</script>
+
+@if(selectedCount > 0)
+  <div class="flex sticky top-0 z-10 gap-4 items-center justify-between mb-4 px-4 py-3 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 rounded-lg dark:border-blue-800">
+    <div class="flex gap-3 items-center">
+      <span class="inline-flex items-center justify-center h-6 w-6 font-bold text-white text-xs bg-blue-600 rounded-full">
+        {{ selectedCount }}
+      </span>
+      <span class="font-medium text-blue-800 text-sm dark:text-blue-200">
+        {{ selectedCount === 1 ? '1 item selected' : `${selectedCount} items selected` }}
+      </span>
+    </div>
+
+    <div class="flex gap-2 items-center">
+      @for(action in defaultActions)
+        <button
+          type="button"
+          class="inline-flex gap-1.5 items-center px-3 py-1.5 font-medium text-sm rounded-md transition-colors"
+          :class="dark:text-blue-300 dark:text-red-300 bg-blue-100 bg-red-100 dark:bg-blue-900/50 dark:bg-red-900/50 hover:bg-blue-200 hover:bg-red-200 dark:hover:bg-blue-900/70' dark:hover:bg-red-900/70' : ? 'danger' 'text-blue-700 'text-red-700 === action.variant"
+          @click="handleAction(action)"
+        >
+          <div :class="action.icon" class="h-4 w-4"></div>
+          {{ action.label }}
+        </button>
+      @endfor
+
+      <button
+        type="button"
+        class="ml-2 p-1.5 text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 transition-colors"
+        @click="handleDeselectAll"
+        title="Deselect all"
+      >
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+@endif

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

@@ -0,0 +1,133 @@
+<script>
+interface CategoriesTableProps {
+  categories?: any[]
+  searchQuery?: string
+  featuredFilter?: string
+  sortBy?: string
+  sortOrder?: string
+  currentPage?: number
+  itemsPerPage?: number
+}
+
+const { categories = [], searchQuery = '', featuredFilter = '', sortBy = 'name', sortOrder = 'asc', currentPage = 1, itemsPerPage = 10 } = defineProps<CategoriesTableProps>()
+
+// Color mapping for initial letters
+  const initialColors = {
+    'Burgers': 'bg-red-500',
+    'Mexican': 'bg-green-500',
+    'Desserts': 'bg-purple-500',
+    'Asian Fusion': 'bg-blue-500'
+  }
+
+  function getInitialColor(name) {
+    return initialColors[name] || 'bg-blue-500'
+  }
+</script>
+<!-- Categories 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">
+              Category
+              <span class="group-hover:visible flex-none ml-2 text-stone-400 rounded group-focus-visible">
+                @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">Description</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="display_order">
+              Display Order
+              <span class="group-hover:visible flex-none ml-2 text-stone-400 rounded group-focus-visible">
+                @if(sortBy == 'display_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">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(categories as category)
+          <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 space-x-3">
+                @if(category.image_url)
+                  <img
+                    src="{{ category.image_url }}"
+                    alt="{{ category.name }}"
+                    class="object-cover h-10 w-10 border border-stone-200 rounded-full dark:border-neutral-700 shadow-sm"
+                  >
+                @else
+                  <div class="h-10 w-10 rounded-full flex items-center justify-center text-white font-medium shadow-sm {{ getInitialColor(category.name) }}">
+                    {{ category.name ? category.name.charAt(0).toUpperCase() : '?' }}
+                  </div>
+                @endif
+                <span>{{ category.name }}</span>
+              </div>
+            </td>
+            <td class="px-3 py-3.5 text-sm text-stone-500 dark:text-neutral-300">
+              {{ category.description || 'No description' }}
+            </td>
+            <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              {{ category.display_order }}
+            </td>
+            <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+              @if(category.is_active)
+                <div class="h-5 w-5 text-green-500 i-hugeicons-checkmark-circle-02"></div>
+              @else
+                <div class="h-5 w-5 text-stone-400 i-hugeicons-cancel-circle"></div>
+              @endif
+            </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-category-id="{{ category.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-category-id="{{ category.id }}"
+                >
+                  <div class="h-5 w-5 i-hugeicons-edit-01"></div>
+                </button>
+                <button
+                  type="button"
+                  class="text-stone-400 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 duration-150 transition-colors"
+                  data-action="delete"
+                  data-category-id="{{ category.id }}"
+                >
+                  <div class="h-5 w-5 i-hugeicons-waste"></div>
+                </button>
+              </div>
+            </td>
+          </tr>
+        @endforeach
+        @if(categories.length == 0)
+          <tr>
+            <td colspan="5" class="px-6 py-3.5 text-center text-sm text-stone-500 dark:text-neutral-400">
+              No categories found matching your criteria
+            </td>
+          </tr>
+        @endif
+      </tbody>
+    </table>
+  </div>