fastapi-admin-kit 0.1.0__py3-none-any.whl

fastapi_admin_kit/templates/pages/audit_log.html

@@ -0,0 +1,102 @@
+{# pages/audit_log.html — audit log timeline page #}
+{% extends "base.html" %}
+
+{% block title %}Audit Log — {{ title | default("Admin") }}{% endblock %}
+
+{% block content %}
+<div class="space-y-6">
+  <div class="page-header">
+    <div class="page-header-left">
+      <h1 class="page-header-title">Audit Log</h1>
+      <p class="page-header-subtitle">Track all changes across your models</p>
+    </div>
+  </div>
+
+  <div class="bg-white rounded-xl border border-[var(--color-gray-200)]">
+    <div class="px-6 py-4 border-b border-[var(--color-gray-200)]">
+      <div class="flex flex-col sm:flex-row sm:items-center gap-4">
+        <div class="flex-1">
+          <div class="relative">
+            {{ icon("magnifying-glass", class="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-gray-400)]", size="20px") }}
+            <input type="text" name="search" value="{{ search | default('') }}"
+                   placeholder="Search audit log..."
+                   class="form-input w-full pl-10 pr-4 py-2 rounded-lg border border-[var(--color-gray-300)] bg-white text-[var(--color-gray-900)] focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)] transition-colors">
+          </div>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <select name="action" class="form-select px-3 py-2 rounded-lg border border-[var(--color-gray-300)] bg-white text-[var(--color-gray-900)] text-sm">
+            <option value="">All Actions</option>
+            <option value="CREATE" {% if action_filter == 'CREATE' %}selected{% endif %}>Create</option>
+            <option value="UPDATE" {% if action_filter == 'UPDATE' %}selected{% endif %}>Update</option>
+            <option value="DELETE" {% if action_filter == 'DELETE' %}selected{% endif %}>Delete</option>
+          </select>
+
+          <select name="model" class="form-select px-3 py-2 rounded-lg border border-[var(--color-gray-300)] bg-white text-[var(--color-gray-900)] text-sm">
+            <option value="">All Models</option>
+            {% for model_name in model_names %}
+            <option value="{{ model_name }}" {% if model_filter == model_name %}selected{% endif %}>{{ model_name }}</option>
+            {% endfor %}
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <div class="divide-y divide-[var(--color-gray-100)]">
+      {% if entries %}
+      {% for entry in entries %}
+      <div class="px-6 py-4 hover:bg-[var(--color-gray-50)] transition-colors">
+        <div class="flex items-start gap-4">
+          <div class="shrink-0 mt-1">
+            {% if entry.action == 'CREATE' %}
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Created</span>
+            {% elif entry.action == 'UPDATE' %}
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Updated</span>
+            {% elif entry.action == 'DELETE' %}
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Deleted</span>
+            {% endif %}
+          </div>
+          <div class="flex-1 min-w-0">
+            <div class="text-sm text-[var(--color-gray-900)]">
+              <span class="font-medium">{{ entry.user_email | default("System") }}</span>
+              {{ entry.action | lower }}d
+              <a href="{{ admin_path | default('/admin') }}/{{ entry.table_name }}/{{ entry.object_id }}"
+                 class="font-medium text-[var(--color-primary-600)] hover:underline">
+                {{ entry.model_name }} #{{ entry.object_id }}
+              </a>
+              {% if entry.object_repr %}
+              <span class="text-[var(--color-gray-500)]">({{ entry.object_repr }})</span>
+              {% endif %}
+            </div>
+            <div class="text-xs text-[var(--color-gray-500)] mt-1">
+              {{ entry.timestamp }}
+              {% if entry.ip_address %}
+              <span class="ml-2">IP: {{ entry.ip_address }}</span>
+              {% endif %}
+            </div>
+            {% if entry.changes %}
+            <div class="mt-2 text-xs text-[var(--color-gray-500)]">
+              Changed: {{ entry.changes.keys() | list | join(', ') }}
+            </div>
+            {% endif %}
+          </div>
+          <a href="{{ admin_path | default('/admin') }}/audit-log/{{ entry.id }}"
+             class="shrink-0 text-sm text-[var(--color-primary-600)] hover:underline">
+            View
+          </a>
+        </div>
+      </div>
+      {% endfor %}
+      {% else %}
+      <div class="px-6 py-12 text-center">
+        {{ icon("clock", class="mx-auto text-[var(--color-gray-400)]", size="48px") }}
+        <p class="mt-4 text-sm text-[var(--color-gray-500)]">No audit log entries found</p>
+      </div>
+      {% endif %}
+    </div>
+
+    {% from "partials/pagination.html" import render_pagination %}
+    {{ render_pagination(page, total_pages, total_items, per_page) }}
+  </div>
+</div>
+{% endblock %}

fastapi_admin_kit/templates/pages/dashboard.html

@@ -0,0 +1,295 @@
+{# pages/dashboard.html — premium dashboard #}
+{% extends "base.html" %}
+
+{% block title %}{{ title | default("Admin") }} — Dashboard{% endblock %}
+
+{% block content %}
+{% set _colors = {
+  'Categories': 'teal',
+  'Products': 'purple',
+  'Users': 'blue',
+  'Orders': 'orange',
+  'Order Items': 'green',
+  'Order Itemss': 'green',
+  'Admin Field Permissions': 'yellow',
+  'Admin Field Permissionss': 'yellow',
+  'Admin Permissions': 'red',
+  'Admin Permissionss': 'red',
+  'Admin Users': 'indigo',
+  'Admin Userss': 'indigo',
+  'Admin Audit Logs': 'cyan',
+  'Admin Roles': 'pink',
+  'Admin Roless': 'pink'
+} %}
+
+<div class="dashboard-wrapper" style="display: flex; flex-direction: column; gap: 28px;">
+  {# ─── Page Header ─── #}
+  <div class="page-header">
+    <div class="page-header-left">
+      <h1 class="page-header-title">Dashboard</h1>
+      <p class="page-header-subtitle" style="color: var(--text-tertiary); font-size: var(--text-sm);">
+        Welcome back, Admin! Here's what's happening with your store today.
+      </p>
+    </div>
+    <div class="page-header-right">
+      <span class="badge badge-info" style="font-size: var(--text-2xs);">
+        <span style="width: 6px; height: 6px; background: var(--info-500); border-radius: 50%; display: inline-block; margin-right: 6px; animation: pulse 2s infinite;"></span>
+        System Online
+      </span>
+    </div>
+  </div>
+
+  {# ─── Stat Cards ─── #}
+  <div class="stat-cards" style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;">
+    {% for card in stat_cards %}
+    {% set _color = _colors[card.title] | default('teal') %}
+    <a href="{{ card.url }}" class="dashboard-stat-card">
+      <div class="stat-header">
+        <div class="stat-icon stat-icon--{{ _color }}">
+          {{ icon(card.icon, size="20px") }}
+        </div>
+        <span class="stat-label">{{ card.title }}</span>
+      </div>
+      <div class="stat-count">{{ card.count }}</div>
+      <div style="display: flex; align-items: center; gap: 8px;">
+        <span class="stat-subtitle">Total {{ card.title | lower }}</span>
+        {% if card.has_trend %}
+        <span class="stat-trend {{ card.trend_direction }}">
+          {% if card.trend_direction == 'up' %}{{ icon('arrow-up', size="10px") }}{% else %}{{ icon('arrow-down', size="10px") }}{% endif %}
+          {{ card.trend_pct }}%
+        </span>
+        <span class="stat-trend-period">vs last 30 days</span>
+        {% endif %}
+      </div>
+      {# Wave decoration #}
+      <svg class="stat-wave" viewBox="0 0 80 30" fill="none">
+        <path d="M0 20 Q20 5 40 15 T80 10 V30 H0Z" fill="currentColor" opacity="0.3"/>
+        <path d="M0 25 Q25 12 50 20 T80 15 V30 H0Z" fill="currentColor" opacity="0.5"/>
+      </svg>
+    </a>
+    {% endfor %}
+  </div>
+
+  {# ─── Bottom Grid: Activity + Quick Actions ─── #}
+  <div style="display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start;">
+    {# Recent Activity #}
+    <div style="background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); overflow: hidden;">
+      <div style="padding: 20px 24px; border-bottom: 1px solid var(--surface-border); display: flex; align-items: center; justify-content: space-between;">
+        <div style="display: flex; align-items: center; gap: 10px;">
+          <div style="width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--primary-50); display: flex; align-items: center; justify-content: center;">
+            {{ icon('clock', size="18px") }}
+          </div>
+          <div>
+            <h2 style="font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; color: var(--text-primary);">Recent Activity</h2>
+            <p style="font-size: var(--text-xs); color: var(--text-tertiary);">Latest system activities will appear here</p>
+          </div>
+        </div>
+        {% if recent_audit %}
+        <a href="{{ admin_path | default('/admin') }}/audit-log/" style="display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); text-decoration: none; padding: 6px 12px; border-radius: var(--radius-md); border: 1px solid var(--surface-border); transition: all 0.15s;"
+           onmouseenter="this.style.borderColor='var(--primary-500)'" onmouseleave="this.style.borderColor='var(--surface-border)'">
+          View all
+          {{ icon('chevron-right', size="14px") }}
+        </a>
+        {% endif %}
+      </div>
+
+      {% if recent_audit %}
+      <div>
+        {% for entry in recent_audit %}
+        <div style="padding: 16px 24px; display: flex; align-items: flex-start; gap: 14px; border-bottom: 1px solid var(--surface-border); transition: background 0.15s;"
+             onmouseenter="this.style.background='var(--primary-50)'" onmouseleave="this.style.background=''">
+          <div style="flex-shrink: 0; margin-top: 2px;">
+            {% if entry.action == 'CREATE' %}
+            <div style="width: 32px; height: 32px; border-radius: var(--radius-full); background: rgba(34, 197, 94, 0.1); display: flex; align-items: center; justify-content: center;">
+              {{ icon('plus', size="16px") }}
+            </div>
+            {% elif entry.action == 'UPDATE' %}
+            <div style="width: 32px; height: 32px; border-radius: var(--radius-full); background: rgba(245, 158, 11, 0.1); display: flex; align-items: center; justify-content: center;">
+              {{ icon('pencil', size="16px") }}
+            </div>
+            {% elif entry.action == 'DELETE' %}
+            <div style="width: 32px; height: 32px; border-radius: var(--radius-full); background: rgba(239, 68, 68, 0.1); display: flex; align-items: center; justify-content: center;">
+              {{ icon('trash', size="16px") }}
+            </div>
+            {% endif %}
+          </div>
+          <div style="flex: 1; min-width: 0;">
+            <div style="font-size: var(--text-sm); color: var(--text-primary); line-height: 1.5;">
+              <span style="font-weight: var(--font-semibold);">{{ entry.user_email | default("System") }}</span>
+              <span style="color: var(--text-tertiary);"> {{ entry.action | lower }}d </span>
+              <span style="font-weight: var(--font-semibold);">{{ entry.model_name }}</span>
+              <span style="font-family: var(--font-mono); color: var(--text-tertiary); font-size: var(--text-xs);"> #{{ entry.object_id }}</span>
+            </div>
+            <div style="font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 4px; font-family: var(--font-mono);">{{ entry.timestamp }}</div>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+      {% else %}
+      <div style="padding: 48px 24px; text-align: center;">
+        <div style="width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--surface-overlay); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
+          {{ icon('clock', size="32px") }}
+        </div>
+        <p style="font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--font-semibold);">No recent Activity</p>
+        <p style="font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 4px;">System activities will appear here</p>
+      </div>
+      {% endif %}
+    </div>
+
+    {# Quick Actions #}
+    <div style="background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); overflow: hidden;">
+      <div style="padding: 20px 24px; border-bottom: 1px solid var(--surface-border); display: flex; align-items: center; gap: 10px;">
+        <div style="width: 36px; height: 36px; border-radius: var(--radius-md); background: rgba(234, 179, 8, 0.12); display: flex; align-items: center; justify-content: center;">
+          {{ icon('bolt', size="18px") }}
+        </div>
+        <div>
+          <h2 style="font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; color: var(--text-primary);">Quick Actions</h2>
+          <p style="font-size: var(--text-xs); color: var(--text-tertiary);">Common actions at your fingertips</p>
+        </div>
+      </div>
+      <div class="quick-actions-grid">
+        {% set _action_colors = {
+          'Categories': {'bg': 'rgba(20, 184, 166, 0.12)', 'fg': '#14b8a6'},
+          'Products': {'bg': 'rgba(139, 92, 246, 0.12)', 'fg': '#8b5cf6'},
+          'Users': {'bg': 'rgba(59, 130, 246, 0.12)', 'fg': '#3b82f6'},
+          'Orders': {'bg': 'rgba(249, 115, 22, 0.12)', 'fg': '#f97316'},
+          'Order Items': {'bg': 'rgba(34, 197, 94, 0.12)', 'fg': '#22c55e'},
+          'Admin Audit Logs': {'bg': 'rgba(6, 182, 212, 0.12)', 'fg': '#06b6d4'},
+          'Admin Roles': {'bg': 'rgba(236, 72, 153, 0.12)', 'fg': '#ec4899'},
+          'Admin Users': {'bg': 'rgba(99, 102, 241, 0.12)', 'fg': '#6366f1'},
+          'Admin Permissions': {'bg': 'rgba(239, 68, 68, 0.12)', 'fg': '#ef4444'},
+          'Admin Field Permissions': {'bg': 'rgba(234, 179, 8, 0.12)', 'fg': '#eab308'}
+        } %}
+        {% for registered in registered_models %}
+        {% set _ac = _action_colors[registered.verbose_name_plural] | default({'bg': 'var(--primary-50)', 'fg': 'var(--primary-600)'}) %}
+        <a href="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/" class="quick-action-item">
+          <div class="action-icon" style="background: {{ _ac.bg }};">
+            {{ icon(registered.admin.icon | default('cube'), size="18px") }}
+          </div>
+          <div class="action-text">
+            <div class="action-title">Add {{ registered.verbose_name }}</div>
+            <div class="action-desc">Create a new {{ registered.verbose_name | lower }}</div>
+          </div>
+          {{ icon('chevron-right', size="18px", class="action-chevron") }}
+        </a>
+        {% endfor %}
+        {# Extra: System Logs link #}
+        <a href="{{ admin_path | default('/admin') }}/audit-log/" class="quick-action-item">
+          <div class="action-icon" style="background: rgba(6, 182, 212, 0.12);">
+            {{ icon('document-text', size="18px") }}
+          </div>
+          <div class="action-text">
+            <div class="action-title">System Logs</div>
+            <div class="action-desc">View system audit logs</div>
+          </div>
+          {{ icon('chevron-right', size="18px", class="action-chevron") }}
+        </a>
+      </div>
+    </div>
+  </div>
+
+  {# ─── Charts ─── #}
+  {% if overview_data and show_charts %}
+  <h2 style="font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; color: var(--text-primary); margin: 0;">Charts</h2>
+  <div class="system-overview-card">
+    <div class="overview-header">
+      <div class="overview-header-icon">
+        {{ icon('chart-bar') }}
+      </div>
+      <span class="overview-title">System Overview</span>
+    </div>
+    <div class="overview-body">
+      <div class="overview-chart">
+        <canvas id="overviewDonut"></canvas>
+      </div>
+      <div class="overview-legend">
+        {% for item in overview_data %}
+        {% if item.value > 0 %}
+        <div class="overview-legend-item">
+          <span class="overview-legend-label">
+            <span class="overview-legend-dot" style="background: {{ item.color }};"></span>
+            {{ item.label }}
+          </span>
+          <span class="overview-legend-value">{{ item.value }}</span>
+        </div>
+        {% endif %}
+        {% endfor %}
+        <div class="overview-total">
+          <span>Total</span>
+          <span class="overview-legend-value">{{ overview_total }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endif %}
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  const canvas = document.getElementById('overviewDonut');
+  if (!canvas) return;
+
+  const data = {{ overview_data | tojson }};
+  const labels = data.map(d => d.label);
+  const values = data.map(d => d.value);
+  const colors = data.map(d => d.color);
+
+  new Chart(canvas, {
+    type: 'doughnut',
+    data: {
+      labels: labels,
+      datasets: [{
+        data: values,
+        backgroundColor: colors,
+        borderWidth: 0,
+        hoverOffset: 6
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: true,
+      cutout: '65%',
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          backgroundColor: 'rgba(15, 23, 42, 0.9)',
+          titleColor: '#f1f5f9',
+          bodyColor: '#94a3b8',
+          borderColor: 'rgba(30, 41, 59, 0.5)',
+          borderWidth: 1,
+          cornerRadius: 8,
+          padding: 10,
+          bodyFont: { family: "'DM Sans', sans-serif" }
+        }
+      }
+    }
+  });
+});
+</script>
+
+<style>
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  @media (max-width: 1280px) {
+    .stat-cards {
+      grid-template-columns: repeat(3, 1fr) !important;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .stat-cards {
+      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .stat-cards {
+      grid-template-columns: repeat(2, 1fr) !important;
+    }
+  }
+</style>
+{% endblock %}

fastapi_admin_kit/templates/pages/detail.html

@@ -0,0 +1,183 @@
+{# pages/detail.html — read-only detail view for a single object #}
+{% extends "base.html" %}
+
+{% block title %}{{ registered.verbose_name }} #{{ obj.id }} — {{ title | default("Admin") }}{% endblock %}
+
+{% block breadcrumb %}
+{{ super() }}
+<span class="breadcrumb-separator">/</span>
+<a href="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/" class="breadcrumb-segment hover:text-[var(--color-primary-600)] transition-colors">{{ registered.verbose_name_plural }}</a>
+<span class="breadcrumb-separator">/</span>
+<span class="breadcrumb-current">{{ obj }}</span>
+{% endblock %}
+
+{% block content %}
+<div class="space-y-6">
+  <div class="page-header">
+    <div class="page-header-left">
+      <a href="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/" class="page-header-back">
+        {{ icon("chevron-left", size="16px") }}
+        {{ registered.verbose_name_plural }}
+      </a>
+      <h1 class="page-header-title">View {{ registered.verbose_name }}</h1>
+      <p class="page-header-subtitle">
+        <span class="mono">#{{ obj.id }}</span>
+        {% if obj.__str__() %} — {{ obj.__str__() }}{% endif %}
+      </p>
+    </div>
+    <div class="page-header-right">
+      {% if permissions.can_edit %}
+      <a href="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/{{ obj.id }}" class="btn btn-primary btn-sm">
+        {{ icon("pencil", size="16px") }}
+        Edit
+      </a>
+      {% endif %}
+      {% if permissions.can_delete %}
+      <form method="post" action="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/{{ obj.id }}/delete" style="display: inline;">
+        <input type="hidden" name="csrf_token" value="{{ get_csrf_token(request) }}">
+        <button type="button" class="btn btn-danger btn-sm"
+                onclick="confirmAction('Delete', 'Are you sure you want to delete this {{ registered.verbose_name | lower }}?', () => this.closest('form').submit())">
+          Delete
+        </button>
+      </form>
+      {% endif %}
+    </div>
+  </div>
+
+  {% if fieldsets %}
+  {% for fieldset in fieldsets %}
+  <div class="bg-white rounded-xl border border-[var(--color-gray-200)]">
+    <div class="px-6 py-4 border-b border-[var(--color-gray-200)]">
+      <h2 class="text-lg font-semibold text-[var(--color-gray-900)]">{{ fieldset.title or "Details" }}</h2>
+    </div>
+    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+      {% for field in fieldset.fields %}
+      <div{% if field.meta.extra.get('full_width', false) %} class="md:col-span-2"{% endif %}>
+        <dt class="text-sm font-medium text-[var(--color-gray-500)]">{{ field.meta.label }}</dt>
+        <dd class="mt-1 text-sm text-[var(--color-gray-900)]">
+          {% set val = field.widget_context.value | default(none) %}
+          {% if val is none %}
+            <span class="text-[var(--color-gray-400)]">-</span>
+          {% elif field.widget_macro == 'toggle' %}
+            {% if val %}
+            <span class="status-badge status-badge--success">
+              {{ icon("check-circle", size="14px") }}
+              Active
+            </span>
+            {% else %}
+            <span class="status-badge status-badge--muted">
+              {{ icon("x-circle", size="14px") }}
+              Inactive
+            </span>
+            {% endif %}
+          {% elif field.widget_macro == 'select' %}
+            {% set choices = field.widget_context.choices | default([]) %}
+            {% set found = false %}
+            {% for choice in choices %}
+              {% if choice[0] | string == val | string %}
+                {{ choice[1] }}
+                {% set found = true %}
+              {% endif %}
+            {% endfor %}
+            {% if not found and val %}{{ val }}{% endif %}
+          {% elif field.widget_macro == 'image_upload' and val %}
+            <img src="{{ val }}" style="max-width: 200px; max-height: 200px; border-radius: var(--radius-md); border: 1px solid var(--surface-border);">
+          {% elif field.widget_macro == 'file_upload' and val %}
+            <a href="{{ val }}" target="_blank" style="color: var(--primary-500);">{{ val }}</a>
+          {% elif field.widget_macro == 'json_editor' %}
+            <pre class="bg-[var(--color-gray-50)] rounded-lg p-4 overflow-auto text-sm text-[var(--color-gray-900)]" style="max-height: 300px;">{{ val }}</pre>
+          {% elif field.widget_macro == 'color_picker' %}
+            <div class="flex items-center gap-2">
+              <div style="width: 24px; height: 24px; border-radius: var(--radius-sm); border: 1px solid var(--surface-border); background: {{ val }};"></div>
+              <span>{{ val }}</span>
+            </div>
+          {% elif field.widget_macro == 'relation_picker' %}
+            {{ field.widget_context.label_text | default(val) }}
+          {% elif field.widget_macro == 'tag_input' %}
+            {% set tags = val | default('[]') %}
+            {% if tags is string %}
+              {% set tags = tags | tojson %}
+            {% endif %}
+            <div class="flex flex-wrap gap-1">
+              {% for tag in tags %}
+              <span class="tag-chip">{{ tag }}</span>
+              {% endfor %}
+            </div>
+          {% else %}
+            {{ val }}
+          {% endif %}
+        </dd>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+  {% endfor %}
+  {% else %}
+  <div class="bg-white rounded-xl border border-[var(--color-gray-200)]">
+    <div class="px-6 py-4 border-b border-[var(--color-gray-200)]">
+      <h2 class="text-lg font-semibold text-[var(--color-gray-900)]">Details</h2>
+    </div>
+    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+      {% for field in form_fields %}
+      <div{% if field.meta.extra.get('full_width', false) %} class="md:col-span-2"{% endif %}>
+        <dt class="text-sm font-medium text-[var(--color-gray-500)]">{{ field.meta.label }}</dt>
+        <dd class="mt-1 text-sm text-[var(--color-gray-900)]">
+          {% set val = field.widget_context.value | default(none) %}
+          {% if val is none %}
+            <span class="text-[var(--color-gray-400)]">-</span>
+          {% elif field.widget_macro == 'toggle' %}
+            {% if val %}
+            <span class="status-badge status-badge--success">
+              {{ icon("check-circle", size="14px") }}
+              Active
+            </span>
+            {% else %}
+            <span class="status-badge status-badge--muted">
+              {{ icon("x-circle", size="14px") }}
+              Inactive
+            </span>
+            {% endif %}
+          {% elif field.widget_macro == 'select' %}
+            {% set choices = field.widget_context.choices | default([]) %}
+            {% set found = false %}
+            {% for choice in choices %}
+              {% if choice[0] | string == val | string %}
+                {{ choice[1] }}
+                {% set found = true %}
+              {% endif %}
+            {% endfor %}
+            {% if not found and val %}{{ val }}{% endif %}
+          {% elif field.widget_macro == 'image_upload' and val %}
+            <img src="{{ val }}" style="max-width: 200px; max-height: 200px; border-radius: var(--radius-md); border: 1px solid var(--surface-border);">
+          {% elif field.widget_macro == 'file_upload' and val %}
+            <a href="{{ val }}" target="_blank" style="color: var(--primary-500);">{{ val }}</a>
+          {% elif field.widget_macro == 'json_editor' %}
+            <pre class="bg-[var(--color-gray-50)] rounded-lg p-4 overflow-auto text-sm text-[var(--color-gray-900)]" style="max-height: 300px;">{{ val }}</pre>
+          {% elif field.widget_macro == 'color_picker' %}
+            <div class="flex items-center gap-2">
+              <div style="width: 24px; height: 24px; border-radius: var(--radius-sm); border: 1px solid var(--surface-border); background: {{ val }};"></div>
+              <span>{{ val }}</span>
+            </div>
+          {% elif field.widget_macro == 'relation_picker' %}
+            {{ field.widget_context.label_text | default(val) }}
+          {% elif field.widget_macro == 'tag_input' %}
+            {% set tags = val | default('[]') %}
+            {% if tags is string %}
+              {% set tags = tags | tojson %}
+            {% endif %}
+            <div class="flex flex-wrap gap-1">
+              {% for tag in tags %}
+              <span class="tag-chip">{{ tag }}</span>
+              {% endfor %}
+            </div>
+          {% else %}
+            {{ val }}
+          {% endif %}
+        </dd>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+  {% endif %}
+</div>
+{% endblock %}