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

fastapi_admin_kit/templates/pages/users/form.html

@@ -0,0 +1,229 @@
+{# pages/users/form.html — create/edit admin user #}
+{% extends "base.html" %}
+
+{% block title %}{% if user %}Edit User{% else %}Create User{% endif %} — {{ title | default("Admin") }}{% endblock %}
+
+{% block breadcrumb %}
+{{ super() }}
+<span class="breadcrumb-separator">/</span>
+<a href="{{ admin_path | default('/admin') }}/users/" class="breadcrumb-segment">Users</a>
+<span class="breadcrumb-separator">/</span>
+<span class="breadcrumb-current">{% if user %}{{ user.email }}{% else %}Create{% endif %}</span>
+{% endblock %}
+
+{% block content %}
+<div class="space-y-6">
+  <div class="page-header">
+    <div class="page-header-left">
+      <a href="{{ admin_path | default('/admin') }}/users/" class="page-header-back">
+        {{ icon("chevron-left", size="16px") }}
+        Users
+      </a>
+      <h1 class="page-header-title">
+        {% if user %}Edit User{% else %}New User{% endif %}
+      </h1>
+    </div>
+  </div>
+
+  {% if error %}
+  <div class="p-4 rounded-lg bg-red-50 border border-red-200">
+    <div class="flex items-center gap-2 text-red-700 text-sm">
+      {{ icon("exclamation-triangle", size="20px") }}
+      {{ error }}
+    </div>
+  </div>
+  {% endif %}
+
+  <form method="post" action="{{ admin_path | default('/admin') }}/users{% if user %}/{{ user.id }}{% else %}/create{% endif %}"
+        class="space-y-6">
+    <input type="hidden" name="csrf_token" value="{{ get_csrf_token(request) }}">
+
+    <div class="fieldset">
+      <div class="fieldset__header">
+        <h3 class="fieldset__title">User Details</h3>
+      </div>
+      <div class="fieldset__fields">
+        <div class="field-wrapper">
+          <label for="email" class="field-label">Email</label>
+          <input type="email" id="email" name="email" value="{{ user.email | default('') }}" required
+                 class="form-input">
+        </div>
+        <div class="field-wrapper">
+          <label for="full_name" class="field-label">Full Name</label>
+          <input type="text" id="full_name" name="full_name" value="{{ user.full_name | default('') }}"
+                 class="form-input">
+        </div>
+        <div class="field-wrapper">
+          <label for="password" class="field-label">
+            Password {% if user %}(leave blank to keep current){% endif %}
+          </label>
+          <input type="password" id="password" name="password" {% if not user %}required{% endif %}
+                 class="form-input">
+        </div>
+        <div class="field-wrapper">
+          <label for="role_ids" class="field-label">Roles</label>
+          {% set selected_role_ids = [] %}
+          {% set selected_role_items = [] %}
+          {% if user and user.id %}
+            {% for r in user.roles %}
+              {% if selected_role_ids.append(r.id) %}{% endif %}
+              {% if selected_role_items.append({"id": r.id, "label": r.name | string}) %}{% endif %}
+            {% endfor %}
+          {% endif %}
+          <div x-data="multiRelation({{ selected_role_ids | tojson | forceescape }}, '{{ admin_path | default('/admin') }}/users/roles/search', {{ selected_role_items | tojson | forceescape }})">
+            <input type="hidden" name="role_ids" :value="JSON.stringify(selectedIds)">
+            <div class="flex flex-wrap gap-2" style="margin-bottom: 8px;">
+              <template x-for="(item, index) in selectedItems" :key="item.id">
+                <span class="tag-chip">
+                  <span x-text="item.label"></span>
+                  <button type="button" @click="remove(index)" class="tag-chip__remove">&times;</button>
+                </span>
+              </template>
+            </div>
+            <div style="position: relative;">
+              <input type="text" x-model="searchQuery" @input="search()" @focus="open = true" @click.outside="open = false"
+                     placeholder="Search roles..."
+                     class="form-input">
+              <div x-show="open && results.length > 0"
+                   style="position: absolute; z-index: 50; width: 100%; margin-top: 4px; background: var(--surface-base); border: 1px solid var(--surface-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 200px; overflow-y: auto;">
+                <template x-for="result in results" :key="result.id">
+                  <div @click="add(result)"
+                       style="padding: 8px 12px; cursor: pointer; font-size: 0.875rem;"
+                       onmouseover="this.style.background='var(--surface-hover)'" onmouseout="this.style.background=''">
+                    <span x-text="result.label"></span>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </div>
+          <p class="field-help" style="color: var(--text-secondary); font-size: 0.75rem; margin-top: 0.25rem;">Search and select roles. Permissions are merged from all selected roles.</p>
+        </div>
+        <div class="field-wrapper">
+          <label class="field-label">Direct Permissions</label>
+          <p class="field-help" style="color: var(--text-secondary); font-size: 0.75rem; margin-bottom: 0.5rem;">
+            Override role permissions for specific tables. These are merged with role permissions using OR logic.
+          </p>
+          {% set user_perm_data = {} %}
+          {% if user and user.direct_permissions %}
+            {% for p in user.direct_permissions %}
+              {% set _ = user_perm_data.update({p.table_name: {"_label": p.table_name, "view": p.can_view, "create": p.can_create, "edit": p.can_edit, "delete": p.can_delete}}) %}
+            {% endfor %}
+          {% endif %}
+          {% set perm_search_url = admin_path | default('/admin') ~ '/tables/search' %}
+          <div x-data="permissionWidget('{{ perm_search_url }}', {{ user_perm_data | tojson | forceescape }})">
+            <input type="hidden" name="perm_data" :value="serializedPermData">
+
+            <div class="space-y-3">
+              <template x-for="(table, index) in selectedTables" :key="table.id">
+                <div class="border border-[var(--color-gray-200)] rounded-lg overflow-hidden">
+                  <div class="flex items-center justify-between px-4 py-3 bg-[var(--color-gray-50)] cursor-pointer hover:bg-[var(--color-gray-100)]"
+                       @click="toggleExpand(table.id)">
+                    <div class="flex items-center gap-3">
+                      <span class="text-sm font-medium text-[var(--color-gray-900)]" x-text="table.label"></span>
+                      <span class="text-xs text-[var(--color-gray-500)]" x-text="table.id"></span>
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <span class="text-xs px-2 py-0.5 rounded-full"
+                            :class="permData[table.id]?.view || permData[table.id]?.create || permData[table.id]?.edit || permData[table.id]?.delete
+                              ? 'bg-green-100 text-green-700'
+                              : 'bg-[var(--color-gray-100)] text-[var(--color-gray-500)]'"
+                            x-text="(permData[table.id]?.view ? 'V ' : '') + (permData[table.id]?.create ? 'C ' : '') + (permData[table.id]?.edit ? 'E ' : '') + (permData[table.id]?.delete ? 'D ' : '') || 'None'">
+                      </span>
+                      <button type="button" @click.stop="toggleExpand(table.id)"
+                              class="text-[var(--color-gray-400)] hover:text-[var(--color-gray-600)]">
+                        <svg class="w-4 h-4 transition-transform" :class="expandedTable === table.id ? 'rotate-180' : ''"
+                             fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                        </svg>
+                      </button>
+                      <button type="button" @click.stop="removeTable(index)"
+                              class="text-[var(--color-gray-400)] hover:text-red-500 ml-1">
+                        <svg class="w-4 h-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"/>
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+
+                  <div x-show="expandedTable === table.id" x-collapse class="px-4 py-4 bg-white">
+                    <div class="flex items-center justify-between mb-3">
+                      <span class="text-xs font-medium text-[var(--color-gray-500)] uppercase tracking-wide">Actions</span>
+                      <div class="flex gap-2">
+                        <button type="button" @click="toggleAllActions(table.id, true)"
+                                class="text-xs text-[var(--color-primary-600)] hover:text-[var(--color-primary-500)]">All</button>
+                        <span class="text-[var(--color-gray-300)]">|</span>
+                        <button type="button" @click="toggleAllActions(table.id, false)"
+                                class="text-xs text-[var(--color-gray-500)] hover:text-[var(--color-gray-700)]">None</button>
+                      </div>
+                    </div>
+                    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+                      <template x-for="action in ['view', 'create', 'edit', 'delete']" :key="action">
+                        <label class="flex items-center gap-2 p-2 rounded border border-[var(--color-gray-200)] cursor-pointer hover:bg-[var(--color-gray-50)]">
+                          <input type="checkbox"
+                                 :checked="permData[table.id]?.[action]"
+                                 @change="permData[table.id][action] = $event.target.checked"
+                                 class="rounded border-[var(--color-gray-300)] text-[var(--color-primary-600)] focus:ring-[var(--color-primary-500)]">
+                          <span class="text-sm capitalize" x-text="action"></span>
+                        </label>
+                      </template>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </div>
+
+            <div class="mt-4" style="position: relative;">
+              <div class="flex items-center gap-2">
+                <div class="flex-1 relative">
+                  <input type="text" x-model="searchQuery" @input="search()" @focus="open = true" @click.outside="open = false"
+                         placeholder="Search tables to add..."
+                         class="form-input w-full">
+                </div>
+              </div>
+              <div x-show="open && results.length > 0" x-cloak
+                   style="position: absolute; z-index: 50; width: 100%; margin-top: 4px; background: var(--surface-base); border: 1px solid var(--surface-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 200px; overflow-y: auto;">
+                <template x-for="result in results" :key="result.id">
+                  <div @click="addTable(result)"
+                       style="padding: 8px 12px; cursor: pointer; font-size: 0.875rem;"
+                       onmouseover="this.style.background='var(--surface-hover)'" onmouseout="this.style.background=''">
+                    <span x-text="result.label"></span>
+                    <span class="text-xs text-[var(--color-gray-400)] ml-2" x-text="result.id"></span>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-6 flex items-center gap-6">
+        <label class="flex items-center gap-2 cursor-pointer">
+          <input type="checkbox" name="is_superuser" value="on"
+                 {% if user and user.is_superuser %}checked{% endif %}
+                 class="matrix-checkbox">
+          <span class="text-sm" style="color: var(--text-primary);">Superuser</span>
+        </label>
+        {% if user %}
+        <label class="flex items-center gap-2 cursor-pointer">
+          <input type="checkbox" name="is_active" value="on"
+                 {% if user.is_active %}checked{% endif %}
+                 class="matrix-checkbox">
+          <span class="text-sm" style="color: var(--text-primary);">Active</span>
+        </label>
+        {% endif %}
+      </div>
+    </div>
+
+    <div class="sticky bottom-0 flex items-center justify-end gap-3 p-4" style="background: var(--surface-base); border: 1px solid var(--surface-border); border-radius: var(--radius-lg);">
+      <a href="{{ admin_path | default('/admin') }}/users/"
+         class="btn btn-secondary">
+        Cancel
+      </a>
+      <button type="submit"
+              class="btn btn-primary">
+        {% if user %}Save Changes{% else %}Create User{% endif %}
+      </button>
+    </div>
+  </form>
+</div>
+{% endblock %}

fastapi_admin_kit/templates/pages/users/list.html

@@ -0,0 +1,83 @@
+{# pages/users/list.html — admin user management list #}
+{% extends "base.html" %}
+
+{% block title %}Users — {{ title | default("Admin") }}{% endblock %}
+
+{% block breadcrumb %}
+{{ super() }}
+<span class="text-[var(--color-gray-400)]">/</span>
+<span class="text-[var(--color-gray-900)] font-medium">Users</span>
+{% endblock %}
+
+{% block content %}
+<div class="space-y-6">
+  <div class="page-header">
+    <div class="page-header-left">
+      <h1 class="page-header-title">Admin Users</h1>
+    </div>
+    <div class="page-header-right">
+      <a href="{{ admin_path | default('/admin') }}/users/create"
+         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">
+        Add User
+      </a>
+    </div>
+  </div>
+
+  <div class="bg-white rounded-xl border border-[var(--color-gray-200)] overflow-hidden">
+    <table class="w-full text-sm">
+      <thead>
+        <tr class="border-b border-[var(--color-gray-200)]">
+          <th class="px-6 py-3 text-left font-medium text-[var(--color-gray-500)]">Email</th>
+          <th class="px-6 py-3 text-left font-medium text-[var(--color-gray-500)]">Full Name</th>
+          <th class="px-6 py-3 text-left font-medium text-[var(--color-gray-500)]">Roles</th>
+          <th class="px-6 py-3 text-center font-medium text-[var(--color-gray-500)]">Superuser</th>
+          <th class="px-6 py-3 text-center font-medium text-[var(--color-gray-500)]">Active</th>
+          <th class="px-6 py-3 text-left font-medium text-[var(--color-gray-500)]">Last Login</th>
+          <th class="px-6 py-3 text-right font-medium text-[var(--color-gray-500)]">Actions</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-[var(--color-gray-100)]">
+        {% for u in users %}
+        <tr class="hover:bg-[var(--color-gray-50)] transition-colors">
+          <td class="px-6 py-4 font-medium text-[var(--color-gray-900)]">{{ u.email }}</td>
+          <td class="px-6 py-4 text-[var(--color-gray-600)]">{{ u.full_name or '—' }}</td>
+          <td class="px-6 py-4">
+            <div class="flex flex-wrap gap-1">
+              {% for r in u.roles %}
+              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary-50)] text-[var(--color-primary-700)]">
+                {{ r.name }}
+              </span>
+              {% endfor %}
+              {% if not u.roles %}
+              <span class="text-[var(--color-gray-400)]">—</span>
+              {% endif %}
+            </div>
+          </td>
+          <td class="px-6 py-4 text-center">
+            {% if u.is_superuser %}
+            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-amber-100 text-amber-800">Yes</span>
+            {% else %}
+            <span class="text-[var(--color-gray-400)]">No</span>
+            {% endif %}
+          </td>
+          <td class="px-6 py-4 text-center">
+            {% if u.is_active %}
+            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">Active</span>
+            {% else %}
+            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800">Inactive</span>
+            {% endif %}
+          </td>
+          <td class="px-6 py-4 text-[var(--color-gray-500)] text-sm">
+            {{ u.last_login.strftime('%Y-%m-%d %H:%M') if u.last_login else 'Never' }}
+          </td>
+          <td class="px-6 py-4 text-right">
+            <a href="{{ admin_path | default('/admin') }}/users/{{ u.id }}"
+               class="text-[var(--color-primary-600)] hover:text-[var(--color-primary-500)] text-sm font-medium mr-3">Edit</a>
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>
+{% endblock %}

fastapi_admin_kit/templates/partials/command_palette.html

@@ -0,0 +1,52 @@
+{# partials/command_palette.html — global search command palette #}
+<div x-data="commandPalette()" x-show="open" x-cloak
+     @open-command-palette.window="open = true; $nextTick(() => { $refs.paletteInput.focus(); $refs.paletteInput.select(); })"
+     class="command-palette-backdrop"
+     @click="close()">
+  <div class="command-palette" @click.stop>
+    <div class="command-palette-header">
+      {{ icon("magnifying-glass", size="18px") }}
+      <input x-ref="paletteInput"
+             type="text"
+             class="command-palette-input"
+             placeholder="Search models, fields..."
+             x-model="query"
+             @input="onInput()"
+             @keydown="onKeydown($event)"
+             autocomplete="off">
+      <kbd class="command-palette-esc">Esc</kbd>
+    </div>
+
+    <div class="command-palette-results" x-show="results.length > 0">
+      <template x-for="(item, index) in results" :key="index">
+        <a :href="item.url"
+           class="command-palette-result"
+           :class="{ 'command-palette-result--active': index === selectedIndex }"
+           @mouseenter="selectedIndex = index"
+           @click.prevent="navigate(item.url)">
+          <span class="command-palette-result-icon">
+            <span class="material-symbols-outlined" style="font-size: 18px;"
+                  x-text="item.type === 'model' ? 'inventory_2' : 'description'"></span>
+          </span>
+          <span class="command-palette-result-text">
+            <span class="command-palette-result-label" x-text="item.label"></span>
+            <span class="command-palette-result-sublabel" x-text="item.sublabel"></span>
+          </span>
+          <span class="command-palette-result-badge"
+                :class="item.type === 'model' ? 'badge-model' : 'badge-field'"
+                x-text="item.type"></span>
+        </a>
+      </template>
+    </div>
+
+    <div class="command-palette-empty" x-show="query.trim() && results.length === 0">
+      <p>No results found for "<span x-text="query"></span>"</p>
+    </div>
+
+    <div class="command-palette-footer" x-show="results.length > 0">
+      <span><kbd>↑</kbd><kbd>↓</kbd> navigate</span>
+      <span><kbd>↵</kbd> open</span>
+      <span><kbd>esc</kbd> close</span>
+    </div>
+  </div>
+</div>

fastapi_admin_kit/templates/partials/field_wrapper.html

@@ -0,0 +1,2 @@
+{% from "macros/form_fields.html" import render_field %}
+{{ render_field(field_ctx, model_name) }}

fastapi_admin_kit/templates/partials/flash_messages.html

@@ -0,0 +1,39 @@
+{# partials/flash_messages.html — toast notifications #}
+{% set messages = get_flash_messages(request) | default([]) %}
+{% if messages %}
+<div class="fixed top-4 right-4 z-50 space-y-2" style="display: none;" x-data="{ show: true }" x-init="show = true">
+  {% for msg in messages %}
+  <div x-data="{ show: true }"
+       x-init="setTimeout(() => show = false, 4000)"
+       x-show="show"
+       x-transition:enter="transition ease-out duration-300"
+       x-transition:enter-start="opacity-0 translate-y-2"
+       x-transition:enter-end="opacity-100 translate-y-0"
+       x-transition:leave="transition ease-in duration-200"
+       x-transition:leave-start="opacity-100 translate-y-0"
+       x-transition:leave-end="opacity-0 translate-y-2"
+       class="toast toast-{{ msg.level | default('info') }} max-w-sm w-full bg-white shadow-lg rounded-lg border p-4"
+       style="display: none;">
+    <div class="flex items-start gap-3">
+      <div class="shrink-0">
+        {% if msg.level == 'success' %}
+        {{ icon("check", size="20px", class="text-[var(--color-success)]") }}
+        {% elif msg.level == 'error' %}
+        {{ icon("x-mark", size="20px", class="text-[var(--color-danger)]") }}
+        {% elif msg.level == 'warning' %}
+        {{ icon("exclamation-triangle", size="20px", class="text-[var(--color-warning)]") }}
+        {% else %}
+        {{ icon("information-circle", size="20px", class="text-[var(--color-info)]") }}
+        {% endif %}
+      </div>
+      <div class="flex-1">
+        <p class="text-sm text-[var(--color-gray-900)]">{{ msg.text }}</p>
+      </div>
+      <button @click="show = false" class="shrink-0 text-[var(--color-gray-400)] hover:text-[var(--color-gray-600)]">
+        {{ icon("x-mark") }}
+      </button>
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}

fastapi_admin_kit/templates/partials/head.html

@@ -0,0 +1,21 @@
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="csrf-token" content="{{ get_csrf_token(request) }}">
+    <title>{% block title %}Admin{% endblock %}</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=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/tokens.css">
+    <link rel="stylesheet" href="/static/css/admin.css">
+    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
+    <script defer src="https://unpkg.com/alpinejs@3.13.3/dist/cdn.min.js"></script>
+    <script>
+      (function() {
+        var theme = localStorage.getItem('admin_dark_mode');
+        if (theme === 'true') {
+          document.documentElement.setAttribute('data-theme', 'dark');
+        }
+      })();
+    </script>
+    {% block head %}{% endblock %}

fastapi_admin_kit/templates/partials/head_minimal.html

@@ -0,0 +1,18 @@
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="csrf-token" content="{{ get_csrf_token(request) }}">
+    <title>{% block title %}Admin{% endblock %}</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=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/tokens.css">
+    <link rel="stylesheet" href="/static/css/admin.css">
+    <script>
+      (function() {
+        var theme = localStorage.getItem('admin_dark_mode');
+        if (theme === 'true') {
+          document.documentElement.setAttribute('data-theme', 'dark');
+        }
+      })();
+    </script>
+    {% block head %}{% endblock %}

fastapi_admin_kit/templates/partials/list_table.html

@@ -0,0 +1,178 @@
+{# partials/list_table.html — table wrapper fragment for HTMX requests #}
+<div id="table-wrapper" class="table-container">
+  <input type="hidden" name="action" value="delete_selected">
+  <input type="hidden" name="csrf_token" value="{{ get_csrf_token(request) }}">
+  <div class="overflow-x-auto">
+    {% set _ui = ui_config | default({}) %}
+    <table class="data-table data-table--{{ _ui.table_style | default('default') }}{% if _ui.table_row_height | default('normal') == 'compact' %} data-table--compact{% endif %}{% if _ui.table_row_height | default('normal') == 'relaxed' %} data-table--relaxed{% endif %}">
+      <thead>
+        <tr>
+          {% if permissions.can_delete %}
+          <th class="col-checkbox">
+            <input type="checkbox" id="select-all"
+                   onchange="document.querySelectorAll('input[name=&quot;ids[]&quot;]').forEach(c => c.checked = this.checked); this.dispatchEvent(new Event('change', {bubbles: true}));">
+          </th>
+          {% endif %}
+          {% for col in display_columns %}
+          <th class="col-header">
+            <a href="?ordering={% if ordering == col.name %}-{% endif %}{{ col.name }}"
+               class="col-header-link{% if ordering == col.name or ordering == '-' ~ col.name %} active{% endif %}">
+              {{ col.label }}
+              {% if ordering == col.name %}
+              {{ icon("chevron-up", size="16px", css_class="sort-icon sort-icon--asc") }}
+              {% elif ordering == '-' ~ col.name %}
+              {{ icon("chevron-down", size="16px", css_class="sort-icon sort-icon--desc") }}
+              {% endif %}
+            </a>
+          </th>
+          {% endfor %}
+          <th class="col-actions">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% if items %}
+        {% for obj in items %}
+        <tr class="data-row">
+          {% if permissions.can_delete %}
+          <td class="col-checkbox">
+            <input type="checkbox" name="ids[]" value="{{ obj.id }}" class="row-checkbox">
+          </td>
+          {% endif %}
+          {% set _detail_url = admin_path | default('/admin') ~ '/' ~ registered.table_name ~ '/' ~ obj.id %}
+          {% set _first_col = true %}
+          {% for col in display_columns %}
+            <td class="col-cell{% if col.css_class %} {{ col.css_class }}{% endif %}">
+              {% set val = col.value(obj) %}
+              {% if _first_col %}
+                {% set _first_col = false %}
+                <a href="{{ _detail_url }}" class="text-[var(--color-primary-600)] hover:text-[var(--color-primary-700)] transition-colors">
+                {% if val is none %}
+                  -
+                {% elif col.boolean and val is sameas true %}
+                  <span class="toggle-switch toggle-switch--on" style="cursor: default;"><span class="toggle-switch__thumb"></span></span>
+                {% elif col.boolean and val is sameas false %}
+                  <span class="toggle-switch" style="cursor: default;"><span class="toggle-switch__thumb"></span></span>
+                {% elif val is sameas true %}
+                  <span class="toggle-switch toggle-switch--on" style="cursor: default;"><span class="toggle-switch__thumb"></span></span>
+                {% elif val is sameas false %}
+                  <span class="toggle-switch" style="cursor: default;"><span class="toggle-switch__thumb"></span></span>
+                {% elif val is string or val is number %}
+                  {% if col.icon %}<span class="material-symbols-outlined" style="font-size: 16px; vertical-align: middle; margin-right: 4px;">{{ col.icon }}</span>{% endif %}{{ val }}
+                {% elif val is iterable and val is not string %}
+                  {{ model_display_name(val) }}
+                {% else %}
+                  {{ val | string }}
+                {% endif %}
+                </a>
+              {% else %}
+                {% if val is none %}
+                  <span class="text-muted">-</span>
+                {% elif col.boolean and val is sameas true %}
+                  <span class="toggle-switch toggle-switch--on" style="cursor: default;"><span class="toggle-switch__thumb"></span></span>
+                {% elif col.boolean and val is sameas false %}
+                  <span class="toggle-switch" style="cursor: default;"><span class="toggle-switch__thumb"></span></span>
+                {% elif val is sameas true %}
+                  <span class="toggle-switch toggle-switch--on" style="cursor: default;"><span class="toggle-switch__thumb"></span></span>
+                {% elif val is sameas false %}
+                  <span class="toggle-switch" style="cursor: default;"><span class="toggle-switch__thumb"></span></span>
+                {% elif val is string or val is number %}
+                  {% if col.icon %}<span class="material-symbols-outlined" style="font-size: 16px; vertical-align: middle; margin-right: 4px;">{{ col.icon }}</span>{% endif %}{{ val }}
+                {% elif val is iterable and val is not string %}
+                  {{ model_display_name(val) }}
+                {% else %}
+                  {{ val | string }}
+                {% endif %}
+              {% endif %}
+            </td>
+          {% endfor %}
+          <td class="col-actions">
+            <div class="actions-dropdown" x-data="{ open: false, menuStyle: '' }"
+                 @actions-close.window="open = false">
+              <button type="button" class="actions-trigger" @click.stop="
+                open = !open;
+                if (open) {
+                  $dispatch('actions-close');
+                  open = true;
+                  $nextTick(() => {
+                    const btn = $el;
+                    const menu = $el.nextElementSibling;
+                    const rect = btn.getBoundingClientRect();
+                    const menuRect = menu.getBoundingClientRect();
+                    const viewportH = window.innerHeight;
+                    let top = rect.bottom + 4;
+                    let left = rect.right - menuRect.width;
+                    if (top + menuRect.height > viewportH) {
+                      top = rect.top - menuRect.height - 4;
+                    }
+                    if (left < 8) left = 8;
+                    menuStyle = 'position:fixed;top:' + top + 'px;left:' + left + 'px;z-index:9999;';
+                  });
+                }
+              " title="Actions">
+                {{ icon("ellipsis-vertical", size="16px") }}
+              </button>
+              <div class="actions-menu" x-show="open" x-cloak
+                   :style="menuStyle"
+                   @click.outside="open = false"
+                   x-transition>
+                {% if permissions.can_edit %}
+                <a href="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/{{ obj.id }}"
+                   class="actions-menu-item"
+                   @click="open = false">
+                  {{ icon("pencil", size="16px") }}
+                  Edit
+                </a>
+                {% endif %}
+                {% if row_actions %}
+                {% for action in row_actions %}
+                <button type="button" class="actions-menu-item"
+                        hx-post="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/action/{{ action.name }}/{{ obj.id }}"
+                        hx-headers='{"X-CSRF-Token": "{{ get_csrf_token(request) }}"}'
+                        hx-swap="none"
+                        hx-on::after-request="window.location.reload();"
+                        @click="open = false">
+                  {% if action.icon %}
+                  {{ icon(action.icon, size="16px") }}
+                  {% endif %}
+                  {{ action.label | default(action.name) }}
+                </button>
+                {% endfor %}
+                {% endif %}
+                {% if permissions.can_delete %}
+                <button type="button" class="actions-menu-item actions-menu-item--danger"
+                        @click="open = false; confirmAction('Delete', 'Are you sure you want to delete this {{ registered.verbose_name | lower }}?', () => { var form = document.createElement('form'); form.method = 'POST'; form.action = '{{ admin_path | default('/admin') }}/{{ registered.table_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(); })">
+                  {{ icon("trash", size="16px") }}
+                  Delete
+                </button>
+                {% endif %}
+              </div>
+            </div>
+          </td>
+        </tr>
+        {% endfor %}
+        {% else %}
+        <tr>
+          <td colspan="{{ display_columns | length + 2 }}" class="empty-cell">
+            <div class="empty-state">
+              {{ icon("document-text", size="48px", css_class="empty-state-icon") }}
+              <p class="empty-state-text">No {{ registered.verbose_name_plural | lower }} found</p>
+              {% if permissions.can_create %}
+              <a href="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/create"
+                 class="btn btn-primary btn-sm">
+                + Create your first {{ registered.verbose_name | lower }}
+              </a>
+              {% endif %}
+            </div>
+          </td>
+        </tr>
+        {% endif %}
+      </tbody>
+    </table>
+  </div>
+
+  {# Pagination #}
+  <div class="table-footer">
+    {% from "partials/pagination.html" import render_pagination %}
+    {{ render_pagination(page, total_pages, total, registered.admin.per_page, next_cursor|default(null), has_next|default(false), pagination_mode|default("offset")) }}
+  </div>
+</div>

fastapi_admin_kit/templates/partials/mobile_backdrop.html

@@ -0,0 +1,2 @@
+            <!-- Mobile sidebar backdrop -->
+            <div x-show="sidebarOpen" x-transition.opacity class="sidebar-backdrop" @click="sidebarOpen = false" style="display: none;"></div>