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

fastapi_admin_kit/templates/pages/form.html

@@ -0,0 +1,119 @@
+{# pages/form.html — create/edit form with fieldsets #}
+{% extends "base.html" %}
+{% from "macros/form_fields.html" import render_field %}
+
+{% block title %}{% if obj %}Edit{% else %}Create{% endif %} {{ registered.verbose_name }} — {{ 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">{% if obj %}Edit {{ obj }}{% else %}Create{% endif %}</span>
+{% endblock %}
+
+{% block content %}
+<div x-data="{ unsaved: false }" @change="unsaved = true">
+  <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">
+        {% if obj %}Edit {{ registered.verbose_name }}{% else %}New {{ registered.verbose_name }}{% endif %}
+      </h1>
+      {% if obj %}
+      <p class="page-header-subtitle">
+        <span class="mono">#{{ obj.id }}</span>
+        {% if obj.__str__() %} — {{ obj.__str__() }}{% endif %}
+      </p>
+      {% endif %}
+    </div>
+    <div class="page-header-right">
+      {% if obj and permissions.can_delete %}
+      <form method="post" action="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/{{ obj.id }}/delete">
+        <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 errors %}
+  <div class="mb-6 p-4 rounded-lg bg-red-50 border border-red-200">
+    <div class="flex items-center gap-2 text-red-700">
+      {{ icon("exclamation-triangle", size="20px") }}
+      <span class="font-medium">Please correct the errors below</span>
+    </div>
+  </div>
+  {% endif %}
+
+  {% set _ui = ui_config | default({}) %}
+  <form method="post"
+        action="{{ admin_path | default('/admin') }}/{{ registered.table_name }}{% if obj %}/{{ obj.id }}{% else %}/create{% endif %}"
+        @input="unsaved = true"
+        class="space-y-6 form--{{ _ui.form_layout | default('two-column') }} form--{{ _ui.form_spacing | default('normal') }}">
+    <input type="hidden" name="csrf_token" value="{{ get_csrf_token(request) }}">
+
+    {% if fieldsets %}
+    {% for fieldset in fieldsets %}
+    <div class="fieldset" x-data="{ open: true }">
+      <button type="button" @click="open = !open"
+              class="fieldset__header" style="cursor: pointer; background: none; border: none; width: 100%; text-align: left;">
+        <span class="fieldset__title">{{ fieldset.title or "General" }}</span>
+        <span class="fieldset__toggle" :style="open ? 'transform: rotate(180deg)' : ''">
+          {{ icon("chevron-right", size="16px") }}
+        </span>
+      </button>
+      <div x-show="open" x-collapse class="fieldset__fields">
+        {% for field in fieldset.fields %}
+        {{ render_field(field, registered.table_name) }}
+        {% endfor %}
+      </div>
+    </div>
+    {% endfor %}
+    {% else %}
+    <div class="fieldset">
+      <div class="fieldset__fields">
+        {% for field in form_fields %}
+        {{ render_field(field, registered.table_name) }}
+        {% endfor %}
+      </div>
+    </div>
+    {% endif %}
+
+    {% if perm_data is defined and search_url is defined %}
+    <div class="fieldset">
+      <div class="fieldset__header">
+        <h3 class="fieldset__title">Direct Permissions</h3>
+      </div>
+      <div class="fieldset__fields">
+        <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>
+        {% include "partials/permission_widget.html" with context %}
+      </div>
+    </div>
+    {% endif %}
+
+    <div class="sticky bottom-0 flex items-center justify-between p-4" style="background: var(--surface-base); border: 1px solid var(--surface-border); border-radius: var(--radius-lg);">
+      <div class="text-sm" style="color: var(--text-secondary);" x-show="unsaved" x-transition>
+        You have unsaved changes
+      </div>
+      <div class="flex items-center gap-3 ml-auto">
+        <a href="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
+           class="btn btn-secondary">
+          Cancel
+        </a>
+        <button type="submit"
+                @click="unsaved = false"
+                class="btn btn-primary">
+          {% if obj %}Save Changes{% else %}Create {{ registered.verbose_name }}{% endif %}
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+{% endblock %}

fastapi_admin_kit/templates/pages/list.html

@@ -0,0 +1,277 @@
+{# pages/list.html — model list view with type-aware filters #}
+{% extends "base.html" %}
+
+{% block title %}{{ registered.verbose_name_plural }} — {{ title | default("Admin") }}{% endblock %}
+
+{% block content %}
+<div class="space-y-6">
+  {# Breadcrumb #}
+  <nav class="breadcrumb">
+    <a href="{{ admin_path | default('/admin') }}/" class="breadcrumb-segment">
+      {{ icon("home", size="16px") }}
+      Dashboard
+    </a>
+    <span class="breadcrumb-separator">/</span>
+    <span class="breadcrumb-current">{{ registered.verbose_name_plural }}</span>
+  </nav>
+
+  <div class="page-header">
+    <div class="page-header-left">
+      <h1 class="page-header-title">{{ registered.verbose_name_plural }}</h1>
+      <p class="page-header-subtitle">Manage your {{ registered.verbose_name_plural | lower }} and inventory</p>
+    </div>
+    {% if permissions.can_create %}
+    <div class="page-header-right">
+      <a href="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/create" class="btn btn-primary">
+        + New {{ registered.verbose_name }}
+      </a>
+    </div>
+    {% endif %}
+  </div>
+
+  {# Filter Bar #}
+  <div class="filter-bar" x-data="filterBar()">
+    <div class="filter-bar-search">
+      {{ icon("magnifying-glass", class="filter-bar-search-icon", size="20px") }}
+      <input type="text" name="q" value="{{ search_query | default('') }}"
+             placeholder="Search {{ registered.verbose_name_plural | lower }}..."
+             hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
+             hx-trigger="keyup changed delay:300ms"
+             hx-target="#table-wrapper"
+             hx-swap="outerHTML"
+             hx-include="[name='q']"
+             class="filter-bar-search-input"
+             x-ref="searchInput"
+             @input="hasSearch = $refs.searchInput.value.length > 0">
+      <button type="button" class="filter-bar-clear"
+              x-show="hasSearch" x-transition
+              @click="$refs.searchInput.value = ''; hasSearch = false; $refs.searchInput.dispatchEvent(new KeyboardEvent('keyup', {bubbles: true}))">
+        {{ icon("x-mark", size="16px") }}
+      </button>
+    </div>
+
+    {% if filter_fields %}
+    <div class="filter-bar-chips">
+      {% for field_name, field_info in filter_fields.items() %}
+      <div class="relative" x-data="{ open: false }">
+
+        {% if field_info.field_type == "date" %}
+        <div class="filter-chip-wrap {% if active_filters.get(field_name) %}filter-chip--active{% endif %}">
+          <label class="filter-chip-label">{{ field_name | replace('_', ' ') | title }}</label>
+          <input type="date" name="filter_{{ field_name }}"
+                 value="{{ active_filters.get(field_name, '') }}"
+                 hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
+                 hx-trigger="change"
+                 hx-target="#table-wrapper"
+                 hx-swap="outerHTML"
+                 hx-include="[name='q'], [name^='filter_']"
+                 class="filter-input-date">
+          {% if active_filters.get(field_name) %}
+          <button type="button" class="filter-clear-btn" title="Clear"
+                  hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
+                  hx-target="#table-wrapper"
+                  hx-swap="outerHTML"
+                   hx-include="[name='q']">&times;</button>
+          {% endif %}
+        </div>
+
+        {% elif field_info.field_type == "datetime" %}
+        <div class="filter-chip-wrap {% if active_filters.get(field_name) %}filter-chip--active{% endif %}">
+          <label class="filter-chip-label">{{ field_name | replace('_', ' ') | title }}</label>
+          <input type="datetime-local" name="filter_{{ field_name }}"
+                 value="{{ active_filters.get(field_name, '') }}"
+                 hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
+                 hx-trigger="change"
+                 hx-target="#table-wrapper"
+                 hx-swap="outerHTML"
+                 hx-include="[name='q'], [name^='filter_']"
+                 class="filter-input-datetime">
+          {% if active_filters.get(field_name) %}
+          <button type="button" class="filter-clear-btn" title="Clear"
+                  hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
+                  hx-target="#table-wrapper"
+                  hx-swap="outerHTML"
+                   hx-include="[name='q']">&times;</button>
+          {% endif %}
+        </div>
+
+        {% elif field_info.field_type == "time" %}
+        <div class="filter-chip-wrap {% if active_filters.get(field_name) %}filter-chip--active{% endif %}">
+          <label class="filter-chip-label">{{ field_name | replace('_', ' ') | title }}</label>
+          <input type="time" name="filter_{{ field_name }}"
+                 value="{{ active_filters.get(field_name, '') }}"
+                 hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
+                 hx-trigger="change"
+                 hx-target="#table-wrapper"
+                 hx-swap="outerHTML"
+                 hx-include="[name='q'], [name^='filter_']"
+                 class="filter-input-time">
+          {% if active_filters.get(field_name) %}
+          <button type="button" class="filter-clear-btn" title="Clear"
+                  hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
+                  hx-target="#table-wrapper"
+                  hx-swap="outerHTML"
+                   hx-include="[name='q']">&times;</button>
+          {% endif %}
+        </div>
+
+        {% else %}
+        {# boolean, enum, relation, text — render as dropdown #}
+        <button type="button" class="filter-chip"
+                :class="{ 'active': activeFilters['{{ field_name }}'] }"
+                @click="open = !open">
+          {{ field_name | replace('_', ' ') | title }}
+          <template x-if="activeFilters['{{ field_name }}']">
+            <span class="filter-chip-count" x-text="activeFilters['{{ field_name }}']"></span>
+          </template>
+          {{ icon("chevron-right", size="16px") }}
+        </button>
+        <div class="filter-dropdown" x-show="open" @click.outside="open = false" x-transition>
+          <div class="filter-dropdown-header">
+            <span>{{ field_name | replace('_', ' ') | title }}</span>
+            <button type="button" class="filter-dropdown-clear"
+                    @click="clearFilter('{{ field_name }}'); open = false">Clear</button>
+          </div>
+          {% for value, label in field_info.choices %}
+          <div class="filter-dropdown-item">
+            <input type="radio" name="filter_{{ field_name }}" value="{{ value }}"
+                   :checked="activeFilters['{{ field_name }}'] === '{{ value }}'"
+                   @change="setFilter('{{ field_name }}', '{{ value }}'); open = false"
+                   id="filter_{{ field_name }}_{{ value }}">
+            <label for="filter_{{ field_name }}_{{ value }}">{{ label }}</label>
+          </div>
+          {% endfor %}
+        </div>
+        {% endif %}
+
+      </div>
+      {% endfor %}
+    </div>
+    {% endif %}
+
+    <div class="filter-bar-right">
+      {% if filter_fields %}
+      <button type="button" class="filter-bar-clear-all"
+              x-show="Object.keys(activeFilters).length > 0"
+              x-transition
+              @click="clearAllFilters()">
+        Clear all filters
+      </button>
+      <div class="filter-bar-divider" x-show="Object.keys(activeFilters).length > 0"></div>
+      {% endif %}
+
+      <button type="button" class="filter-bar-action" title="Toggle column visibility"
+              @click="showColumnPicker = !showColumnPicker">
+        {{ icon("eye", size="20px") }}
+      </button>
+    </div>
+  </div>
+
+  {# Bulk Actions Bar — Django-style: always visible above table #}
+  {% if permissions.can_delete or list_actions %}
+  <div class="bulk-bar">
+    <div class="bulk-bar-left">
+      <label class="bulk-bar-label" for="bulk-action-select">Action:</label>
+      <select id="bulk-action-select" name="bulk_action" class="bulk-bar-select">
+        <option value="">---------</option>
+        {% if list_actions %}
+        {% for action in list_actions %}
+        <option value="{{ action.name }}">{{ action.label | default(action.name) }}</option>
+        {% endfor %}
+        {% endif %}
+        {% if permissions.can_delete %}
+        <option value="delete_selected">Delete selected</option>
+        {% endif %}
+      </select>
+    </div>
+    <div class="bulk-bar-right">
+      <button type="button" class="btn btn-primary btn-sm" onclick="executeBulkAction()">Go</button>
+    </div>
+  </div>
+  {% endif %}
+
+  {% include "partials/list_table.html" %}
+</div>
+
+<script>
+function filterBar() {
+  return {
+    hasSearch: false,
+    activeFilters: {{ active_filters | tojson }},
+    showColumnPicker: false,
+    init() {
+    },
+    setFilter(field, value) {
+      if (value) {
+        this.activeFilters[field] = value;
+      } else {
+        delete this.activeFilters[field];
+      }
+      this.applyFilters();
+    },
+    clearFilter(field) {
+      delete this.activeFilters[field];
+      this.applyFilters();
+    },
+    clearAllFilters() {
+      this.activeFilters = {};
+      this.applyFilters();
+    },
+    applyFilters() {
+      const params = new URLSearchParams(window.location.search);
+      Object.entries(this.activeFilters).forEach(([key, val]) => {
+        if (val) params.set('filter_' + key, val);
+        else params.delete('filter_' + key);
+      });
+      const search = this.$refs.searchInput?.value;
+      if (search) params.set('q', search);
+      else params.delete('q');
+      const url = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
+      htmx.ajax('GET', url, { target: '#table-wrapper', swap: 'outerHTML' });
+    }
+  };
+}
+
+function _sendBulkAction(actionValue, selectedIds) {
+  var params = new URLSearchParams();
+  params.append('action', actionValue);
+  params.append('csrf_token', document.querySelector('meta[name="csrf-token"]').content);
+  selectedIds.forEach(function(id) {
+    params.append('ids[]', id);
+  });
+
+  var xhr = new XMLHttpRequest();
+  xhr.open('POST', '{{ admin_path | default("/admin") }}/{{ registered.table_name }}/bulk', true);
+  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+  xhr.setRequestHeader('HX-Request', 'true');
+  xhr.onload = function() { window.location.reload(); };
+  xhr.onerror = function() { window.location.reload(); };
+  xhr.send(params.toString());
+}
+
+function executeBulkAction() {
+  var actionSelect = document.getElementById('bulk-action-select');
+  var selected = document.querySelectorAll('input[name="ids[]"]:checked');
+
+  if (selected.length === 0) {
+    alert('Please select at least one item.');
+    return;
+  }
+  if (!actionSelect.value) {
+    alert('Please select an action.');
+    return;
+  }
+
+  var selectedIds = Array.from(selected).map(function(cb) { return cb.value; });
+
+  if (actionSelect.value === 'delete_selected') {
+    confirmAction('Delete selected', 'Are you sure you want to delete the selected items?', function() {
+      _sendBulkAction(actionSelect.value, selectedIds);
+    });
+    return;
+  }
+
+  _sendBulkAction(actionSelect.value, selectedIds);
+}
+</script>
+{% endblock %}

fastapi_admin_kit/templates/pages/login.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{{ title | default("Admin") }} — Login</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">
+
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+
+  <style>
+    :root {
+      --primary-500: {{ admin_config.primary_color | default('') }};
+      --primary-600: {{ admin_config.primary_color_dark | default('') }};
+    }
+  </style>
+</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">
+      {% if logo_url %}
+      <img src="{{ logo_url }}" alt="Logo" class="h-10 mx-auto mb-2">
+      {% else %}
+      <div class="w-10 h-10 mx-auto mb-2 rounded-lg bg-[var(--primary-500)] flex items-center justify-center">
+        {{ icon("home", css_class="text-white", size="20px") }}
+      </div>
+      {% endif %}
+      <h1 class="text-xl font-bold text-[var(--text-primary)]" style="margin: 0;">{{ title | default("Admin") }}</h1>
+      <p class="text-sm text-[var(--text-secondary)] mt-0.5">Sign in to your account</p>
+    </div>
+
+    {% set messages = get_flash_messages(request) | default([]) %}
+    {% if messages %}
+    <div class="mb-4 space-y-2">
+      {% for msg in messages %}
+      <div class="p-3 rounded-lg text-sm
+                  {% if msg.level == 'error' %}bg-[var(--danger-50)] text-[var(--danger-500)] border border-[var(--danger-100)]
+                  {% elif msg.level == 'success' %}bg-[var(--success-50)] text-[var(--success-500)] border border-[var(--success-100)]
+                  {% elif msg.level == 'warning' %}bg-[var(--warning-50)] text-[var(--warning-500)] border border-[var(--warning-100)]
+                  {% else %}bg-[var(--info-50)] text-[var(--info-500)] border border-[var(--info-100)]{% endif %}">
+        {{ msg.text }}
+      </div>
+      {% endfor %}
+    </div>
+    {% endif %}
+
+    <form method="post" action="{{ admin_path | default('/admin') }}/login{% if next %}?next={{ next }}{% endif %}"
+          class="bg-white rounded-xl shadow-md border border-[var(--surface-border)] p-8">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+      {% 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-4">
+        <label for="email" class="block text-sm font-medium text-[var(--text-secondary)] mb-1.5">Email address</label>
+        <input type="email" id="email" name="email" required autofocus
+               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"
+               placeholder="admin@example.com">
+      </div>
+
+      <div class="mb-6">
+        <label for="password" class="block text-sm font-medium text-[var(--text-secondary)] mb-1.5">Password</label>
+        <input type="password" id="password" name="password" required
+               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"
+               placeholder="Enter your password">
+      </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">
+        Sign in
+      </button>
+    </form>
+  </div>
+
+</body>
+</html>

fastapi_admin_kit/templates/pages/profile/password.html

@@ -0,0 +1,78 @@
+{# pages/profile/password.html — change password #}
+{% extends "base.html" %}
+
+{% block title %}Change Password — {{ 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">Change Password</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">Change Password</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 %}
+
+  <form method="post" action="{{ admin_path | default('/admin') }}/profile/password" class="space-y-6">
+    <input type="hidden" name="csrf_token" value="{{ get_csrf_token(request) }}">
+
+    <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-4">Password Requirements</h2>
+      <ul class="text-sm text-[var(--color-gray-600)] space-y-1 list-disc list-inside">
+        <li>At least 12 characters</li>
+        <li>At least one uppercase letter</li>
+        <li>At least one lowercase letter</li>
+        <li>At least one digit</li>
+        <li>At least one special character</li>
+      </ul>
+    </div>
+
+    <div class="bg-white rounded-xl border border-[var(--color-gray-200)] p-6">
+      <div class="grid grid-cols-1 gap-6">
+        <div>
+          <label for="current_password" class="block text-sm font-medium text-[var(--color-gray-700)] mb-1">Current Password</label>
+          <input type="password" id="current_password" name="current_password" required
+                 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">
+        </div>
+        <div>
+          <label for="new_password" class="block text-sm font-medium text-[var(--color-gray-700)] mb-1">New Password</label>
+          <input type="password" id="new_password" name="new_password" required
+                 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">
+        </div>
+        <div>
+          <label for="confirm_password" class="block text-sm font-medium text-[var(--color-gray-700)] mb-1">Confirm New Password</label>
+          <input type="password" id="confirm_password" name="confirm_password" required
+                 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">
+        </div>
+      </div>
+    </div>
+
+    <div class="sticky bottom-0 bg-white border border-[var(--color-gray-200)] rounded-xl p-4 flex items-center justify-end gap-3">
+      <a href="{{ admin_path | default('/admin') }}/profile"
+         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">
+        Cancel
+      </a>
+      <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">
+        Change Password
+      </button>
+    </div>
+  </form>
+</div>
+{% endblock %}

fastapi_admin_kit/templates/pages/profile/profile.html

@@ -0,0 +1,73 @@
+{# pages/profile/profile.html — user profile #}
+{% extends "base.html" %}
+
+{% block title %}Profile — {{ title | default("Admin") }}{% endblock %}
+
+{% block breadcrumb %}
+{{ super() }}
+<span class="text-[var(--color-gray-400)]">/</span>
+<span class="text-[var(--color-gray-900)] font-medium">Profile</span>
+{% endblock %}
+
+{% block content %}
+<div class="space-y-6">
+  <div class="page-header">
+    <div class="page-header-left">
+      <h1 class="page-header-title">My Profile</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 %}
+
+  <form method="post" action="{{ admin_path | default('/admin') }}/profile" class="space-y-6">
+    <input type="hidden" name="csrf_token" value="{{ get_csrf_token(request) }}">
+
+    <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-4">Account Information</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div>
+          <label for="email" class="block text-sm font-medium text-[var(--color-gray-700)] mb-1">Email</label>
+          <input type="email" id="email" name="email" value="{{ profile_user.email }}" required
+                 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">
+        </div>
+        <div>
+          <label for="full_name" class="block text-sm font-medium text-[var(--color-gray-700)] mb-1">Full Name</label>
+          <input type="text" id="full_name" name="full_name" value="{{ profile_user.full_name | default('') }}"
+                 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">
+        </div>
+        <div>
+          <label for="password" class="block text-sm font-medium text-[var(--color-gray-700)] mb-1">Confirm Password</label>
+          <input type="password" id="password" name="password" required
+                 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="Enter password to save changes">
+        </div>
+      </div>
+    </div>
+
+    <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">Security</h2>
+      <div class="flex items-center gap-4">
+        <a href="{{ admin_path | default('/admin') }}/profile/password"
+           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">
+          Change Password
+        </a>
+        <a href="{{ admin_path | default('/admin') }}/profile/2fa"
+           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">
+          Two-Factor Authentication
+        </a>
+      </div>
+    </div>
+
+    <div class="sticky bottom-0 bg-white border border-[var(--color-gray-200)] rounded-xl p-4 flex items-center justify-end">
+      <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">
+        Save Changes
+      </button>
+    </div>
+  </form>
+</div>
+{% endblock %}