refactor: standardize admin templates with shared macros

Migrate all admin templates to use standardized components:
- Use tabs macros (tabs_nav, tab_button) for tab navigation
- Use number_stepper for quantity/numeric inputs
- Use headers macros for consistent page layouts
- Use modals macros for dialog components

Affected pages: dashboard, settings, logs, content-pages, companies,
vendors, users, imports, marketplace, code-quality, and more.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/templates/admin/dashboard.html

@@ -1,41 +1,19 @@
 {# app/templates/admin/dashboard.html #}
 {% extends "admin/base.html" %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
 
 {% block title %}Dashboard{% endblock %}
 
 {% block alpine_data %}adminDashboard(){% endblock %}
 
 {% block content %}
-<!-- Page Header with Refresh Button -->
-<div class="flex items-center justify-between my-6">
-    <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
-        Dashboard
-    </h2>
-    <button
-        @click="refresh()"
-        :disabled="loading"
-        class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
-    >
-        <span x-show="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
-        <span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
-        <span x-text="loading ? 'Loading...' : 'Refresh'"></span>
-    </button>
-</div>
+{{ page_header('Dashboard', action_label='Refresh', action_onclick='refresh()', action_icon='refresh') }}
 
-<!-- Loading State -->
-<div x-show="loading" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading dashboard...</p>
-</div>
+{{ loading_state('Loading dashboard...') }}
 
-<!-- Error State -->
-<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error loading dashboard</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error loading dashboard') }}
 
 <!-- Stats Cards -->
 <div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
@@ -101,17 +79,9 @@
 </div>
 
 <!-- Recent Vendors Table -->
-<div x-show="!loading" class="w-full overflow-hidden rounded-lg shadow-xs">
-    <div class="w-full overflow-x-auto">
-        <table class="w-full whitespace-no-wrap">
-            <thead>
-                <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
-                    <th class="px-4 py-3">Vendor</th>
-                    <th class="px-4 py-3">Status</th>
-                    <th class="px-4 py-3">Created</th>
-                    <th class="px-4 py-3">Actions</th>
-                </tr>
-            </thead>
+<div x-show="!loading">
+    {% call table_wrapper() %}
+            {{ table_header(['Vendor', 'Status', 'Created', 'Actions']) }}
             <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                 <template x-if="recentVendors.length === 0">
                     <tr>
@@ -162,8 +132,7 @@
                     </tr>
                 </template>
             </tbody>
-        </table>
-    </div>
+    {% endcall %}
 </div>
 {% endblock %}