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

fastapi_admin_kit/templates/macros/icons.html

@@ -0,0 +1,50 @@
+{# macros/icons.html — Material Symbols icon macro (with Heroicon name mapping) #}
+{# NOTE: The icon() function is also available as a Jinja2 global (registered in core.py) #}
+{# This macro file is kept for backward compatibility with {% from "macros/icons.html" import icon %} #}
+
+{% set _icon_map = {
+  "home": "home",
+  "chart-bar": "bar_chart",
+  "clock": "schedule",
+  "shield-check": "verified_user",
+  "users": "group",
+  "folder": "folder",
+  "cube": "inventory_2",
+  "shopping-cart": "shopping_cart",
+  "magnifying-glass": "search",
+  "chevron-right": "chevron_right",
+  "chevron-left": "chevron_left",
+  "chevron-up": "expand_less",
+  "chevron-down": "expand_more",
+  "ellipsis-vertical": "more_vert",
+  "pencil": "edit",
+  "trash": "delete",
+  "x-mark": "close",
+  "x-circle": "cancel",
+  "check-circle": "check_circle",
+  "check": "check",
+  "plus": "add",
+  "eye": "visibility",
+  "bell": "notifications",
+  "sun": "light_mode",
+  "moon": "dark_mode",
+  "bars-": "menu",
+  "arrow-down-tray": "download",
+  "arrow-path": "refresh",
+  "paper-airplane": "send",
+  "exclamation-triangle": "warning",
+  "information-circle": "info",
+  "document-text": "description",
+  "arrow-down": "arrow_downward",
+  "arrow-up": "arrow_upward",
+  "bolt": "bolt",
+  "cog-": "settings",
+  "cog-6-tooth": "settings",
+  "lock": "lock"
+} %}
+
+{% macro icon(name, size="", css_class="") %}
+{% set _ms_name = _icon_map.get(name, name) %}
+{% set _size = size or "24px" %}
+<span class="material-symbols-outlined {{ css_class }}" style="font-size: {{ _size }};">{{ _ms_name }}</span>
+{% endmacro %}

fastapi_admin_kit/templates/macros/table.html

@@ -0,0 +1,108 @@
+{# macros/table.html — Reusable table macros for list views #}
+
+{% macro table_header(columns, ordering, model_name, admin_path="/admin") %}
+<thead>
+  <tr class="border-b border-[var(--color-gray-200)]">
+    <th class="px-6 py-3 text-left">
+      <input type="checkbox" id="select-all"
+             class="rounded border-[var(--color-gray-300)] text-[var(--color-primary-600)] focus:ring-[var(--color-primary-500)]">
+    </th>
+    {% for col in columns %}
+    {% if not col.primary_key or columns | length > 1 %}
+    <th class="px-6 py-3 text-left text-xs font-semibold text-[var(--color-gray-500)] uppercase tracking-wider">
+      <a href="?ordering={% if ordering == col.name %}-{% endif %}{{ col.name }}"
+         class="flex items-center gap-1 hover:text-[var(--color-gray-900)] transition-colors">
+        {{ col.name | replace('_', ' ') | title }}
+        {% if ordering == col.name %}
+        {{ icon("chevron-right") }}
+        {% elif ordering == '-' ~ col.name %}
+        {{ icon("chevron-right", class="rotate-180") }}
+        {% endif %}
+      </a>
+    </th>
+    {% endif %}
+    {% endfor %}
+    <th class="px-6 py-3 text-right text-xs font-semibold text-[var(--color-gray-500)] uppercase tracking-wider">
+      Actions
+    </th>
+  </tr>
+</thead>
+{% endmacro %}
+
+{% macro table_row(obj, columns, permissions, model_name, admin_path="/admin") %}
+<tr class="hover:bg-[var(--color-gray-50)] transition-colors">
+  <td class="px-6 py-4">
+    <input type="checkbox" name="ids[]" value="{{ obj.id }}"
+           class="rounded border-[var(--color-gray-300)] text-[var(--color-primary-600)] focus:ring-[var(--color-primary-500)]">
+  </td>
+  {% for col in columns %}
+  {% if not col.primary_key or columns | length > 1 %}
+  <td class="px-6 py-4 text-sm text-[var(--color-gray-900)]">
+    {{ table_cell(obj, col) }}
+  </td>
+  {% endif %}
+  {% endfor %}
+  <td class="px-6 py-4 text-right text-sm space-x-2">
+    {% if permissions.can_edit %}
+    <a href="{{ admin_path }}/{{ model_name }}/{{ obj.id }}"
+       class="text-[var(--color-primary-600)] hover:text-[var(--color-primary-500)] font-medium transition-colors">
+      Edit
+    </a>
+    {% endif %}
+    {% if permissions.can_delete %}
+    <button class="text-[var(--color-danger)] hover:text-red-700 font-medium transition-colors"
+            onclick="confirmAction('Delete', 'Are you sure you want to delete this?', () => { var form = document.createElement('form'); form.method = 'POST'; form.action = '{{ admin_path }}/{{ model_name }}/{{ obj.id }}/delete'; var csrf = document.createElement('input'); csrf.type = 'hidden'; csrf.name = 'csrf_token'; csrf.value = '{{ get_csrf_token(request) }}'; form.appendChild(csrf); document.body.appendChild(form); form.submit(); })">
+      Delete
+    </button>
+    {% endif %}
+  </td>
+</tr>
+{% endmacro %}
+
+{% macro table_cell(obj, col) %}
+{% if col.display_fn is defined and col.display_fn %}
+{% set val = col.value(obj) %}
+{% else %}
+{% set val = attr(obj, col.name) | default('-') %}
+{% endif %}
+{% if col.boolean is defined and col.boolean %}
+{% if val is sameas true %}
+<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+  Active
+</span>
+{% elif val is sameas false %}
+<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
+  Inactive
+</span>
+{% else %}
+{{ val }}
+{% endif %}
+{% elif val is sameas true %}
+<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+  Active
+</span>
+{% elif val is sameas false %}
+<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
+  Inactive
+</span>
+{% elif val == '-' %}
+<span class="text-[var(--color-gray-400)]">-</span>
+{% else %}
+{{ val }}
+{% endif %}
+{% endmacro %}
+
+{% macro empty_state(model_name, verbose_name, can_create, admin_path="/admin") %}
+<tr>
+  <td colspan="100" class="px-6 py-12 text-center">
+    {{ icon("document-text", size="48px") }}
+    <p class="mt-4 text-sm text-[var(--color-gray-500)]">No {{ verbose_name | lower }} found</p>
+    {% if can_create %}
+    <a href="{{ admin_path }}/{{ model_name }}/create"
+       class="mt-4 inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--color-primary-600)] text-white text-sm font-medium hover:bg-[var(--color-primary-500)] transition-colors">
+      + Create your first {{ verbose_name | lower }}
+    </a>
+    {% endif %}
+  </td>
+</tr>
+{% endmacro %}

fastapi_admin_kit/templates/macros/widgets.html

@@ -0,0 +1,159 @@
+{# Widget macros for form rendering #}
+
+{% macro text_input(name, label, value='', required=false, readonly=false, placeholder='', maxlength=null, error=null, css_class='') %}
+<div class="relative">
+    <input type="text" 
+           id="{{ name }}" 
+           name="{{ name }}" 
+           value="{{ value or '' }}"
+           {% if required %}required{% endif %}
+           {% if readonly %}readonly{% endif %}
+           {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
+           {% if maxlength %}maxlength="{{ maxlength }}"{% endif %}
+           class="w-full border rounded px-3 py-2 {% if error %}border-red-500{% endif %} {{ css_class }}">
+</div>
+{% endmacro %}
+
+{% macro textarea(name, label, value='', required=false, readonly=false, rows=5, placeholder='', error=null, css_class='') %}
+<textarea id="{{ name }}" 
+          name="{{ name }}" 
+          rows="{{ rows }}"
+          {% if required %}required{% endif %}
+          {% if readonly %}readonly{% endif %}
+          {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
+          class="w-full border rounded px-3 py-2 {% if error %}border-red-500{% endif %} {{ css_class }}">{{ value or '' }}</textarea>
+{% endmacro %}
+
+{% macro number_input(name, label, value='', required=false, readonly=false, step='1', min=null, max=null, placeholder='', error=null, css_class='') %}
+<input type="number" 
+       id="{{ name }}" 
+       name="{{ name }}" 
+       value="{{ value or '' }}"
+       step="{{ step }}"
+       {% if min is not none %}min="{{ min }}"{% endif %}
+       {% if max is not none %}max="{{ max }}"{% endif %}
+       {% if required %}required{% endif %}
+       {% if readonly %}readonly{% endif %}
+       {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
+       class="w-full border rounded px-3 py-2 {% if error %}border-red-500{% endif %} {{ css_class }}">
+{% endmacro %}
+
+{% macro toggle(name, label, checked=false, required=false, readonly=false, error=null, css_class='') %}
+<label class="relative inline-flex items-center cursor-pointer">
+    <input type="checkbox" 
+           id="{{ name }}" 
+           name="{{ name }}" 
+           {% if checked %}checked{% endif %}
+           {% if readonly %}disabled{% endif %}
+           class="sr-only peer">
+    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+</label>
+{% endmacro %}
+
+{% macro date_picker(name, label, value='', required=false, readonly=false, error=null, css_class='') %}
+<input type="date" 
+       id="{{ name }}" 
+       name="{{ name }}" 
+       value="{{ value or '' }}"
+       {% if required %}required{% endif %}
+       {% if readonly %}readonly{% endif %}
+       class="w-full border rounded px-3 py-2 {% if error %}border-red-500{% endif %} {{ css_class }}">
+{% endmacro %}
+
+{% macro datetime_picker(name, label, value='', required=false, readonly=false, error=null, css_class='') %}
+<input type="datetime-local" 
+       id="{{ name }}" 
+       name="{{ name }}" 
+       value="{{ value or '' }}"
+       {% if required %}required{% endif %}
+       {% if readonly %}readonly{% endif %}
+       class="w-full border rounded px-3 py-2 {% if error %}border-red-500{% endif %} {{ css_class }}">
+{% endmacro %}
+
+{% macro time_picker(name, label, value='', required=false, readonly=false, error=null, css_class='') %}
+<input type="time" 
+       id="{{ name }}" 
+       name="{{ name }}" 
+       value="{{ value or '' }}"
+       {% if required %}required{% endif %}
+       {% if readonly %}readonly{% endif %}
+       class="w-full border rounded px-3 py-2 {% if error %}border-red-500{% endif %} {{ css_class }}">
+{% endmacro %}
+
+{% macro select(name, label, value='', choices=[], required=false, readonly=false, error=null, css_class='') %}
+<select id="{{ name }}" 
+        name="{{ name }}" 
+        {% if required %}required{% endif %}
+        {% if readonly %}disabled{% endif %}
+        class="w-full border rounded px-3 py-2 {% if error %}border-red-500{% endif %} {{ css_class }}">
+    <option value="">-- Select --</option>
+    {% for choice in choices %}
+    <option value="{{ choice.value }}" {% if choice.value == value %}selected{% endif %}>
+        {{ choice.label }}
+    </option>
+    {% endfor %}
+</select>
+{% endmacro %}
+
+{% macro json_editor(name, label, value='', required=false, readonly=false, error=null, css_class='') %}
+<textarea id="{{ name }}" 
+          name="{{ name }}" 
+          rows="10"
+          {% if required %}required{% endif %}
+          {% if readonly %}readonly{% endif %}
+          class="w-full border rounded px-3 py-2 font-mono text-sm {% if error %}border-red-500{% endif %} {{ css_class }}"
+          placeholder="{}">{{ value | tojson if value else '' }}</textarea>
+{% endmacro %}
+
+{% macro file_upload(name, label, required=false, readonly=false, accept='*/*', error=null, css_class='') %}
+<input type="file" 
+       id="{{ name }}" 
+       name="{{ name }}" 
+       accept="{{ accept }}"
+       {% if required %}required{% endif %}
+       {% if readonly %}disabled{% endif %}
+       class="w-full border rounded px-3 py-2 {% if error %}border-red-500{% endif %} {{ css_class }}">
+{% endmacro %}
+
+{% macro tag_input(name, label, tags=[], required=false, readonly=false, error=null, css_class='') %}
+<div x-data="{ tags: {{ tags | tojson }}, newTag: '' }" class="w-full">
+    <div class="flex flex-wrap gap-2 mb-2">
+        <template x-for="(tag, index) in tags" :key="index">
+            <span class="bg-blue-100 text-blue-800 text-sm px-2 py-1 rounded flex items-center gap-1">
+                <span x-text="tag"></span>
+                {% if not readonly %}
+                <button type="button" @click="tags.splice(index, 1)" class="text-blue-600 hover:text-blue-800">&times;</button>
+                {% endif %}
+            </span>
+        </template>
+    </div>
+    <input type="text" 
+           x-model="newTag" 
+           @keydown.enter.prevent="if(newTag.trim()){tags.push(newTag.trim());newTag=''}"
+           placeholder="Add tag..."
+           class="w-full border rounded px-3 py-2">
+    <input type="hidden" :name="'{{ name }}'" :value="JSON.stringify(tags)">
+</div>
+{% endmacro %}
+
+{% macro relation_picker(name, label, value='', required=false, readonly=false, error=null, css_class='') %}
+<select id="{{ name }}" 
+        name="{{ name }}" 
+        {% if required %}required{% endif %}
+        {% if readonly %}disabled{% endif %}
+        class="w-full border rounded px-3 py-2 {% if error %}border-red-500{% endif %} {{ css_class }}">
+    <option value="">-- Select --</option>
+    {# Options will be loaded via HTMX #}
+</select>
+{% endmacro %}
+
+{% macro multi_relation_picker(name, label, selected=[], required=false, readonly=false, error=null, css_class='') %}
+<select id="{{ name }}" 
+        name="{{ name }}" 
+        multiple
+        {% if required %}required{% endif %}
+        {% if readonly %}disabled{% endif %}
+        class="w-full border rounded px-3 py-2 {% if error %}border-red-500{% endif %} {{ css_class }}">
+    {# Options will be loaded via HTMX #}
+</select>
+{% endmacro %}

fastapi_admin_kit/templates/pages/2fa/setup.html

@@ -0,0 +1,122 @@
+{# pages/2fa/setup.html — 2FA setup with QR code #}
+{% extends "base.html" %}
+
+{% block title %}Two-Factor Authentication — {{ title | default("Admin") }}{% endblock %}
+
+{% block breadcrumb %}
+{{ super() }}
+<span class="text-[var(--color-gray-400)]">/</span>
+<a href="{{ admin_path | default('/admin') }}/profile" class="hover:text-[var(--color-primary-600)] transition-colors">Profile</a>
+<span class="text-[var(--color-gray-400)]">/</span>
+<span class="text-[var(--color-gray-900)] font-medium">Two-Factor Authentication</span>
+{% endblock %}
+
+{% block content %}
+<div class="space-y-6">
+  <div class="page-header">
+    <div class="page-header-left">
+      <a href="{{ admin_path | default('/admin') }}/profile" class="page-header-back">
+        {{ icon("chevron-left") }}
+        Profile
+      </a>
+      <h1 class="page-header-title">Two-Factor Authentication</h1>
+    </div>
+  </div>
+
+  {% if error %}
+  <div class="p-4 rounded-lg bg-red-50 border border-red-200 text-red-700 text-sm">
+    {{ error }}
+  </div>
+  {% endif %}
+
+  {% if success %}
+  <div class="p-4 rounded-lg bg-green-50 border border-green-200 text-green-700 text-sm">
+    {{ success }}
+  </div>
+  {% endif %}
+
+  {% if backup_codes %}
+  <div class="bg-white rounded-xl border border-[var(--color-gray-200)] p-6">
+    <h2 class="text-lg font-semibold text-[var(--color-gray-900)] mb-2">Backup Codes</h2>
+    <p class="text-sm text-[var(--color-gray-600)] mb-4">
+      Save these codes somewhere safe. Each code can only be used once.
+    </p>
+    <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
+      {% for code in backup_codes %}
+      <code class="px-3 py-2 bg-[var(--color-gray-50)] border border-[var(--color-gray-200)] rounded text-sm font-mono text-center">
+        {{ code }}
+      </code>
+      {% endfor %}
+    </div>
+  </div>
+  {% endif %}
+
+  {% if totp_enabled %}
+  <div class="bg-white rounded-xl border border-[var(--color-gray-200)] p-6">
+    <h2 class="text-lg font-semibold text-[var(--color-gray-900)] mb-2">2FA is Enabled</h2>
+    <p class="text-sm text-[var(--color-gray-600)] mb-4">Your account is protected with two-factor authentication.</p>
+
+    <div class="flex items-center gap-4">
+      <form method="post" action="{{ admin_path | default('/admin') }}/profile/2fa/disable" class="inline">
+        <input type="hidden" name="csrf_token" value="{{ get_csrf_token(request) }}">
+        <div class="flex items-center gap-2">
+          <input type="password" name="password" placeholder="Current password" required
+                 class="form-input px-3 py-1.5 rounded-lg border border-[var(--color-gray-300)] text-sm">
+          <input type="text" name="code" placeholder="TOTP code" required maxlength="6" pattern="[0-9]{6}"
+                 class="form-input px-3 py-1.5 rounded-lg border border-[var(--color-gray-300)] text-sm w-24">
+          <button type="submit"
+                  class="px-4 py-1.5 rounded-lg border border-red-300 text-red-700 text-sm hover:bg-red-50 transition-colors">
+            Disable 2FA
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <form method="post" action="{{ admin_path | default('/admin') }}/profile/2fa/backup-codes" class="mt-4">
+      <input type="hidden" name="csrf_token" value="{{ get_csrf_token(request) }}">
+      <button type="submit"
+              class="px-4 py-2 rounded-lg border border-[var(--color-gray-300)] text-sm text-[var(--color-gray-700)] hover:bg-[var(--color-gray-50)] transition-colors">
+        Regenerate Backup Codes
+      </button>
+    </form>
+  </div>
+
+  {% elif secret %}
+  <div class="bg-white rounded-xl border border-[var(--color-gray-200)] p-6">
+    <h2 class="text-lg font-semibold text-[var(--color-gray-900)] mb-2">Set Up 2FA</h2>
+    <p class="text-sm text-[var(--color-gray-600)] mb-4">
+      Scan the QR code below with your authenticator app (Google Authenticator, Authy, etc.).
+    </p>
+
+    <div class="flex items-start gap-8">
+      <div class="text-center">
+        {% if qr_uri %}
+        <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data={{ qr_uri | urlencode }}"
+             alt="TOTP QR Code" class="border border-[var(--color-gray-200)] rounded-lg">
+        {% endif %}
+        <p class="mt-2 text-xs text-[var(--color-gray-500)]">Or enter manually:</p>
+        <code class="text-xs font-mono break-all text-[var(--color-gray-600)]">{{ secret }}</code>
+      </div>
+
+      <div class="flex-1">
+        <form method="post" action="{{ admin_path | default('/admin') }}/profile/2fa/enable">
+          <input type="hidden" name="csrf_token" value="{{ get_csrf_token(request) }}">
+          <div class="mb-4">
+            <label for="code" class="block text-sm font-medium text-[var(--color-gray-700)] mb-1">
+              Enter the 6-digit code from your app
+            </label>
+            <input type="text" id="code" name="code" required maxlength="6" pattern="[0-9]{6}"
+                   class="form-input w-full px-4 py-2.5 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"
+                   placeholder="000000" autocomplete="off">
+          </div>
+          <button type="submit"
+                  class="btn-primary px-4 py-2 rounded-lg bg-[var(--color-primary-600)] text-white text-sm font-medium hover:bg-[var(--color-primary-500)] transition-colors">
+            Enable 2FA
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+  {% endif %}
+</div>
+{% endblock %}

fastapi_admin_kit/templates/pages/2fa/verify.html

@@ -0,0 +1,55 @@
+{# pages/2fa/verify.html — 2FA verification during login #}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{{ title | default("Admin") }} — Verify 2FA</title>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
+  <link rel="stylesheet" href="/static/css/tokens.css">
+  <link rel="stylesheet" href="/static/css/admin.css">
+</head>
+<body class="bg-[var(--surface-overlay)] text-[var(--text-primary)] font-sans antialiased min-h-screen flex items-center justify-center p-4">
+
+  <div class="w-full max-w-md">
+    <div class="text-center mb-6">
+      <div class="w-10 h-10 mx-auto mb-2 rounded-lg bg-[var(--primary-500)] flex items-center justify-center">
+        {{ icon("lock", css_class="text-white", size="20px") }}
+      </div>
+      <h1 class="text-xl font-bold text-[var(--text-primary)]" style="margin: 0;">Verify Your Identity</h1>
+      <p class="text-sm text-[var(--text-secondary)] mt-0.5">Enter the code from your authenticator app</p>
+    </div>
+
+    <form method="post" action="{{ admin_path | default('/admin') }}/verify-2fa"
+          class="bg-white rounded-xl shadow-md border border-[var(--surface-border)] p-8">
+      <input type="hidden" name="csrf_token" value="{{ get_csrf_token(request) }}">
+      {% if temp_token %}
+      <input type="hidden" name="temp_token" value="{{ temp_token }}">
+      {% endif %}
+
+      {% if error %}
+      <div class="mb-4 p-3 rounded-lg bg-[var(--danger-50)] text-[var(--danger-500)] text-sm border border-[var(--danger-100)]">
+        {{ error }}
+      </div>
+      {% endif %}
+
+      <div class="mb-6">
+        <label for="code" class="block text-sm font-medium text-[var(--text-secondary)] mb-1.5">Authentication Code</label>
+        <input type="text" id="code" name="code" required maxlength="6" pattern="[0-9]{6}"
+               class="form-input w-full px-4 py-2.5 rounded-lg border border-[var(--surface-border)] bg-white text-[var(--text-primary)] placeholder-[var(--text-disabled)] focus:ring-2 focus:ring-[var(--primary-500)] focus:border-[var(--primary-500)] transition-all text-center text-2xl tracking-[0.5em] font-mono"
+               placeholder="000000" autocomplete="off" autofocus>
+      </div>
+
+      <button type="submit"
+              class="w-full px-4 py-3 rounded-lg bg-[var(--primary-500)] text-white font-medium hover:bg-[var(--primary-600)] focus:ring-2 focus:ring-[var(--primary-500)] focus:ring-offset-2 transition-all cursor-pointer">
+        Verify
+      </button>
+    </form>
+  </div>
+
+</body>
+</html>

fastapi_admin_kit/templates/pages/audit_detail.html

@@ -0,0 +1,122 @@
+{# pages/audit_detail.html — single audit entry with full diff #}
+{% extends "base.html" %}
+
+{% block title %}Audit Entry #{{ entry.id }} — {{ title | default("Admin") }}{% endblock %}
+
+{% block breadcrumb %}
+{{ super() }}
+<span class="text-[var(--color-gray-400)]">/</span>
+<a href="{{ admin_path | default('/admin') }}/audit-log/" class="hover:text-[var(--color-primary-600)] transition-colors">Audit Log</a>
+<span class="text-[var(--color-gray-400)]">/</span>
+<span class="text-[var(--color-gray-900)] font-medium">#{{ entry.id }}</span>
+{% endblock %}
+
+{% block content %}
+<div class="space-y-6">
+  <div class="page-header">
+    <div class="page-header-left">
+      <a href="{{ admin_path | default('/admin') }}/audit-log/" class="page-header-back">
+        {{ icon("chevron-left") }}
+        Audit Log
+      </a>
+      <h1 class="page-header-title">Audit Entry <span class="mono">#{{ entry.id }}</span></h1>
+      <p class="page-header-subtitle">
+        {{ entry.model_name }} — {{ entry.object_repr | default("") }}
+      </p>
+    </div>
+    <div class="page-header-right">
+      {% if entry.action == 'CREATE' %}
+      <span class="badge badge-success">Created</span>
+      {% elif entry.action == 'UPDATE' %}
+      <span class="badge badge-warning">Updated</span>
+      {% elif entry.action == 'DELETE' %}
+      <span class="badge badge-danger">Deleted</span>
+      {% endif %}
+    </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)]">
+      <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">
+      <div>
+        <dt class="text-sm font-medium text-[var(--color-gray-500)]">Action</dt>
+        <dd class="mt-1 text-sm text-[var(--color-gray-900)]">{{ entry.action }}</dd>
+      </div>
+      <div>
+        <dt class="text-sm font-medium text-[var(--color-gray-500)]">Timestamp</dt>
+        <dd class="mt-1 text-sm text-[var(--color-gray-900)]">{{ entry.timestamp }}</dd>
+      </div>
+      <div>
+        <dt class="text-sm font-medium text-[var(--color-gray-500)]">User</dt>
+        <dd class="mt-1 text-sm text-[var(--color-gray-900)]">{{ entry.user_email | default("System") }}</dd>
+      </div>
+      <div>
+        <dt class="text-sm font-medium text-[var(--color-gray-500)]">IP Address</dt>
+        <dd class="mt-1 text-sm text-[var(--color-gray-900)]">{{ entry.ip_address | default("-") }}</dd>
+      </div>
+      <div>
+        <dt class="text-sm font-medium text-[var(--color-gray-500)]">Model</dt>
+        <dd class="mt-1 text-sm text-[var(--color-gray-900)]">{{ entry.model_name }}</dd>
+      </div>
+      <div>
+        <dt class="text-sm font-medium text-[var(--color-gray-500)]">Object ID</dt>
+        <dd class="mt-1 text-sm text-[var(--color-gray-900)]">{{ entry.object_id }}</dd>
+      </div>
+      <div class="md:col-span-2">
+        <dt class="text-sm font-medium text-[var(--color-gray-500)]">Object Representation</dt>
+        <dd class="mt-1 text-sm text-[var(--color-gray-900)]">{{ entry.object_repr | default("-") }}</dd>
+      </div>
+    </div>
+  </div>
+
+  {% if entry.changes %}
+  <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)]">Changes</h2>
+    </div>
+    <div class="p-6">
+      <table class="w-full text-sm">
+        <thead>
+          <tr class="border-b border-[var(--color-gray-200)]">
+            <th class="text-left py-2 font-medium text-[var(--color-gray-500)]">Field</th>
+            <th class="text-left py-2 font-medium text-[var(--color-gray-500)]">Before</th>
+            <th class="text-left py-2 font-medium text-[var(--color-gray-500)]">After</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-[var(--color-gray-100)]">
+          {% for field, change in entry.changes.items() %}
+          <tr>
+            <td class="py-2 font-medium text-[var(--color-gray-900)]">{{ field }}</td>
+            <td class="py-2 text-[var(--color-gray-600)]">{{ change.before | default("-") }}</td>
+            <td class="py-2 text-[var(--color-gray-900)]">{{ change.after | default("-") }}</td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  </div>
+  {% endif %}
+
+  {% if entry.full_snapshot %}
+  <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)]">Full Snapshot</h2>
+    </div>
+    <div class="p-6">
+      <pre class="bg-[var(--color-gray-50)] rounded-lg p-4 overflow-auto text-sm text-[var(--color-gray-900)]">{{ entry.full_snapshot | tojson(indent=2) }}</pre>
+    </div>
+  </div>
+  {% endif %}
+
+  <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)]">User Agent</h2>
+    </div>
+    <div class="p-6">
+      <p class="text-sm text-[var(--color-gray-600)] break-all">{{ entry.user_agent | default("-") }}</p>
+    </div>
+  </div>
+</div>
+{% endblock %}