@stacksjs/defaults 0.70.207 → 0.70.208

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

@@ -0,0 +1,377 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Commerce Taxes')
+<PageLayout>
+      <div class="sm:flex sm:items-center sm:justify-between">
+        <PageHeader title="Tax Rates" description="Manage tax rates for your products across different countries and regions. Digital services often have specific tax requirements based on customer location." />
+        <div class="mt-4 sm:mt-0">
+          <button
+            type="button"
+            @click="openAddModal()"
+            class="inline-flex items-center px-3 py-2 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"
+          >
+            <div class="mr-1 h-5 w-5 i-hugeicons-plus-sign"></div>
+            Add tax
+          </button>
+        </div>
+      </div>
+
+      <!-- Filters -->
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mt-6">
+        <div class="relative max-w-sm">
+          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+            <div class="h-5 w-5 text-gray-400 i-hugeicons-search-01"></div>
+          </div>
+          <input
+            x-model="searchQuery"
+            type="text"
+            class="block pl-10 pr-3 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset"
+            placeholder="Search taxes..."
+          />
+        </div>
+
+        <div class="flex flex-col gap-4 sm:flex-row">
+          <select
+            x-model="activeFilter"
+            class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset"
+          >
+            <option value="all">All Taxes</option>
+            <option value="active">Active Only</option>
+            <option value="inactive">Inactive Only</option>
+          </select>
+
+          <select
+            x-model="countryFilter"
+            class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset"
+          >
+            <option value="all">All Countries</option>
+            <template :for="country in countries">
+              <option value="{{ country }}">{{ country }}</option>
+            </template>
+          </select>
+
+          <select
+            x-model="typeFilter"
+            class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset"
+          >
+            <option value="all">All Types</option>
+            <template :for="type in taxTypes">
+              <option value="{{ type }}">{{ type }}</option>
+            </template>
+          </select>
+        </div>
+      </div>
+
+      <!-- Taxes table -->
+      <div class="flow-root mt-6">
+        <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+          <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+            <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+              <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-700">
+                <thead class="bg-gray-50 dark:bg-neutral-700">
+                  <tr>
+                    <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('name')" class="inline-flex items-center group">
+                        Name
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'name' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('rate')" class="inline-flex items-center group">
+                        Rate (%)
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'rate' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">Type</th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('country')" class="inline-flex items-center group">
+                        Country
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'country' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">Region</th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">Status</th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">Default</th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('createdAt')" class="inline-flex items-center text-right group">
+                        Created
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'createdAt' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6">
+                      <span class="sr-only">Actions</span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                  <template :for="tax in filteredTaxes">
+                    <tr>
+                      <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-white">{{ tax.name }}</td>
+                      <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ tax.rate }}%</td>
+                      <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ tax.type }}</td>
+                      <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ tax.country }}</td>
+                      <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ tax.region }}</td>
+                      <td class="px-3 py-4 text-sm whitespace-nowrap">
+                        <span class="inline-flex items-center px-2 py-1 font-medium text-xs rounded-md {{ tax.active ? 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-900/30 dark:text-green-400' : 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-400' }}">
+                          {{ tax.active ? 'Active' : 'Inactive' }}
+                        </span>
+                      </td>
+                      <td class="px-3 py-4 text-sm whitespace-nowrap">
+                        @if(tax.isDefault)
+                          <span class="inline-flex items-center px-2 py-1 font-medium text-blue-700 text-xs dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 ring-1 ring-blue-600/20 ring-inset rounded-md">
+                            Default
+                          </span>
+                        @endif
+                      </td>
+                      <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">{{ tax.createdAt }}</td>
+                      <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                        <div class="flex items-center justify-end space-x-2">
+                          <button type="button" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300">
+                            <div class="h-5 w-5 i-hugeicons-edit-01"></div>
+                          </button>
+                          <button type="button" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">
+                            <div class="h-5 w-5 i-hugeicons-waste"></div>
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  </template>
+                  @if(filteredTaxes().length === 0)
+                    <tr>
+                      <td colspan="9" class="px-6 py-4 text-center text-gray-500 text-sm dark:text-neutral-400">
+                        No taxes found matching your criteria
+                      </td>
+                    </tr>
+                  @endif
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Add Tax Modal -->
+  <div :show="showAddModal" 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" @click="closeAddModal()"></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">Add New Tax Rate</h3>
+            <div class="mt-2">
+              <div class="text-gray-500 text-sm dark:text-neutral-400">
+                <p>Set up tax rates for different countries and regions where your SaaS products are sold.</p>
+                <p class="mt-2">For digital services, tax is typically based on the customer's location rather than your business location.</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-4">
+            <div class="space-y-4">
+              <div>
+                <label for="tax-name" class="block font-medium text-gray-700 text-sm dark:text-neutral-200">Name</label>
+                <div class="mt-1">
+                  <input id="tax-name" type="text" x-model="newName" class="block w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
+                </div>
+              </div>
+
+              <div>
+                <label for="tax-rate" class="block font-medium text-gray-700 text-sm dark:text-neutral-200">Rate (%)</label>
+                <div class="mt-1">
+                  <input id="tax-rate" type="number" step="0.01" x-model.number="newRate" class="block w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
+                </div>
+                <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Enter the percentage rate (e.g., 20 for 20%)</p>
+              </div>
+
+              <div>
+                <label for="tax-type" class="block font-medium text-gray-700 text-sm dark:text-neutral-200">Type</label>
+                <div class="mt-1">
+                  <select id="tax-type" x-model="newType" class="block w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm">
+                    <template :for="type in taxTypeOptions">
+                      <option :value="type">{{ type }}</option>
+                    </template>
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <label for="tax-country" class="block font-medium text-gray-700 text-sm dark:text-neutral-200">Country</label>
+                <div class="mt-1">
+                  <input id="tax-country" type="text" x-model="newCountry" class="block w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
+                </div>
+              </div>
+
+              <div>
+                <label for="tax-region" class="block font-medium text-gray-700 text-sm dark:text-neutral-200">Region</label>
+                <div class="mt-1">
+                  <input id="tax-region" type="text" x-model="newRegion" placeholder="All" class="block w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
+                </div>
+              </div>
+
+              <div class="flex items-center">
+                <input id="active" x-model="newActive" type="checkbox" class="h-4 w-4 text-blue-600 dark:bg-neutral-700 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-600 dark:focus:ring-offset-neutral-800" />
+                <label for="active" class="block ml-2 text-gray-900 text-sm dark:text-white">Active</label>
+              </div>
+
+              <div class="flex items-center">
+                <input id="isDefault" x-model="newIsDefault" type="checkbox" class="h-4 w-4 text-blue-600 dark:bg-neutral-700 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-600 dark:focus:ring-offset-neutral-800" />
+                <label for="isDefault" class="block ml-2 text-gray-900 text-sm dark:text-white">Set as default tax rate</label>
+              </div>
+              <p class="text-gray-500 text-sm dark:text-neutral-400">This tax rate will be applied to new SaaS subscriptions by default</p>
+            </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" @click="addTax()">Add</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" @click="closeAddModal()">Cancel</button>
+        </div>
+      </div>
+</PageLayout>
+<script client>
+// Tax type options — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838).
+const taxTypeOptions = ['VAT', 'GST', 'Sales Tax', 'Digital Services Tax', 'Consumption Tax'] as const
+
+interface Tax {
+  id: number
+  name: string
+  rate: number
+  type: string
+  country: string
+  region: string
+  active: boolean
+  createdAt: string
+  isDefault: boolean
+}
+
+const initialTaxes: Tax[] = [
+  { id: 1, name: 'US Digital Services', rate: 0.0, type: 'Sales Tax', country: 'United States', region: 'All', active: true, createdAt: '2023-05-10', isDefault: true },
+  { id: 2, name: 'EU Digital VAT', rate: 20.0, type: 'VAT', country: 'European Union', region: 'All', active: true, createdAt: '2023-05-15', isDefault: false },
+  { id: 3, name: 'UK Digital Services', rate: 20.0, type: 'VAT', country: 'United Kingdom', region: 'All', active: true, createdAt: '2023-05-20', isDefault: false },
+  { id: 4, name: 'Canada GST/HST', rate: 5.0, type: 'GST', country: 'Canada', region: 'All', active: true, createdAt: '2023-06-01', isDefault: false },
+  { id: 5, name: 'Australia GST', rate: 10.0, type: 'GST', country: 'Australia', region: 'All', active: true, createdAt: '2023-06-15', isDefault: false },
+  { id: 6, name: 'Japan Consumption Tax', rate: 10.0, type: 'Consumption Tax', country: 'Japan', region: 'All', active: true, createdAt: '2023-07-01', isDefault: false },
+  { id: 7, name: 'Norway VAT', rate: 25.0, type: 'VAT', country: 'Norway', region: 'All', active: true, createdAt: '2023-07-15', isDefault: false },
+  { id: 8, name: 'New Zealand GST', rate: 15.0, type: 'GST', country: 'New Zealand', region: 'All', active: true, createdAt: '2023-08-01', isDefault: false },
+  { id: 9, name: 'Singapore GST', rate: 8.0, type: 'GST', country: 'Singapore', region: 'All', active: true, createdAt: '2023-08-15', isDefault: false },
+  { id: 10, name: 'South Africa VAT', rate: 15.0, type: 'VAT', country: 'South Africa', region: 'All', active: true, createdAt: '2023-09-01', isDefault: false },
+]
+
+const taxes = state(initialTaxes)
+const searchQuery = state('')
+const sortBy = state<'name' | 'rate' | 'country' | 'createdAt'>('name')
+const sortOrder = state<'asc' | 'desc'>('asc')
+const activeFilter = state<'all' | 'active' | 'inactive'>('all')
+const countryFilter = state<string>('all')
+const typeFilter = state<string>('all')
+
+const showAddModal = state(false)
+const newName = state('')
+const newRate = state(0)
+const newType = state<string>('Percentage')
+const newCountry = state('')
+const newRegion = state('')
+const newActive = state(true)
+const newIsDefault = state(false)
+
+function countries(): string[] {
+  return Array.from(new Set(taxes().map(t => t.country))).sort()
+}
+
+function taxTypes(): string[] {
+  return Array.from(new Set(taxes().map(t => t.type))).sort()
+}
+
+const filteredTaxes = derived(() => {
+  const q = searchQuery().toLowerCase()
+  const aFilter = activeFilter()
+  const cFilter = countryFilter()
+  const tFilter = typeFilter()
+  const by = sortBy()
+  const dir = sortOrder()
+
+  return taxes()
+    .filter((t) => {
+      const matchesSearch
+        = t.name.toLowerCase().includes(q)
+          || t.country.toLowerCase().includes(q)
+          || t.region.toLowerCase().includes(q)
+      const matchesActive
+        = aFilter === 'all'
+          || (aFilter === 'active' && t.active)
+          || (aFilter === 'inactive' && !t.active)
+      const matchesCountry = cFilter === 'all' || t.country === cFilter
+      const matchesType = tFilter === 'all' || t.type === tFilter
+      return matchesSearch && matchesActive && matchesCountry && matchesType
+    })
+    .sort((a, b) => {
+      let cmp = 0
+      if (by === 'name') cmp = a.name.localeCompare(b.name)
+      else if (by === 'rate') cmp = a.rate - b.rate
+      else if (by === 'country') cmp = a.country.localeCompare(b.country)
+      else if (by === 'createdAt') cmp = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+      return dir === 'asc' ? cmp : -cmp
+    })
+})
+
+function toggleSort(column: 'name' | 'rate' | 'country' | 'createdAt'): void {
+  if (sortBy() === column) {
+    sortOrder.update(d => d === 'asc' ? 'desc' : 'asc')
+  }
+  else {
+    sortBy.set(column)
+    sortOrder.set('asc')
+  }
+}
+
+function openAddModal(): void {
+  newName.set('')
+  newRate.set(0)
+  newType.set('VAT')
+  newCountry.set('')
+  newRegion.set('')
+  newActive.set(true)
+  newIsDefault.set(false)
+  showAddModal.set(true)
+}
+
+function closeAddModal(): void {
+  showAddModal.set(false)
+}
+
+function addTax(): void {
+  const list = taxes()
+  const id = list.length > 0 ? Math.max(...list.map(t => t.id)) + 1 : 1
+  const isDefault = newIsDefault()
+  const next = isDefault
+    ? list.map(t => ({ ...t, isDefault: false }))
+    : list
+
+  taxes.set([...next, {
+    id,
+    name: newName(),
+    rate: newRate(),
+    type: newType(),
+    country: newCountry(),
+    region: newRegion() || 'All',
+    active: newActive(),
+    createdAt: new Date().toISOString().split('T')[0] || '',
+    isDefault,
+  }])
+  closeAddModal()
+}
+</script>
+
+@endsection