django-adminflow 1.0.0__py3-none-any.whl

adminflow/templates/admin/import_export/export.html

@@ -0,0 +1,199 @@
+{% extends "admin/base_site.html" %}
+{% load i18n admin_urls static import_export_tags adminflow_tags %}
+
+{% block extrastyle %}
+  {{ block.super }}
+  {{ form.media }}
+  <style>
+    .field-chip input[type="checkbox"] { display: none; }
+    .field-chip label {
+      display: inline-flex; align-items: center; gap: 5px;
+      padding: 5px 11px; border-radius: 8px; cursor: pointer;
+      font-size: 12px; font-weight: 600; user-select: none; transition: all .15s;
+      border: 1px solid var(--color-outline-variant, #cbd5e1);
+      background: var(--color-surface-low, #f1f5f9);
+      color: var(--color-on-surface, #0f172a);
+    }
+    .field-chip input:checked + label {
+      background: var(--color-primary, #2563eb);
+      border-color: var(--color-primary, #2563eb);
+      color: #fff;
+    }
+    .field-chip label:hover { filter: brightness(.95); }
+    .info-chip {
+      display: inline-flex; align-items: center; gap: 5px;
+      padding: 5px 11px; border-radius: 8px;
+      font-size: 12px; font-weight: 500;
+      border: 1px dashed var(--color-outline-variant, #cbd5e1);
+      background: var(--color-surface-lowest, #fff);
+      color: var(--color-on-surface-variant, #64748b);
+    }
+  </style>
+{% endblock %}
+
+{% block extrahead %}
+  {{ block.super }}
+  <script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
+{% endblock %}
+
+{% block breadcrumbs %}
+<nav class="flex items-center gap-1.5 text-xs text-on-surface-variant/70 mb-4">
+  <a href="{% url 'admin:index' %}" class="hover:text-primary transition-colors flex items-center">
+    <span class="material-symbols-outlined text-[16px]">home</span>
+  </a>
+  <span class="material-symbols-outlined text-[14px]">chevron_right</span>
+  <a href="{% url 'admin:app_list' app_label=opts.app_label %}" class="hover:text-primary capitalize font-medium">{{ opts.app_config.verbose_name }}</a>
+  <span class="material-symbols-outlined text-[14px]">chevron_right</span>
+  <a href="{% url opts|admin_urlname:'changelist' %}" class="hover:text-primary font-medium">{{ opts.verbose_name_plural|capfirst }}</a>
+  <span class="material-symbols-outlined text-[14px]">chevron_right</span>
+  <span class="text-primary font-bold">{% translate "Export" %}</span>
+</nav>
+{% endblock %}
+
+{% block content %}
+<div class="space-y-5 max-w-3xl">
+
+  <!-- Header -->
+  <div>
+    <h2 class="text-xl font-black text-on-surface tracking-tight">
+      {% translate "Export" %} {{ opts.verbose_name_plural|capfirst }}
+    </h2>
+    <p class="text-xs text-on-surface-variant mt-1">
+      {% if sub_sheets %}
+        {% translate "XLSX → one file with multiple sheets · JSON → one nested JSON file" %}
+      {% else %}
+        {% translate "Select fields and format, then click Export." %}
+      {% endif %}
+    </p>
+  </div>
+
+  {% if form.non_field_errors %}
+  <div class="p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-xs font-semibold">
+    {{ form.non_field_errors }}
+  </div>
+  {% endif %}
+
+  <form action="{{ export_url }}" method="POST">
+    {% csrf_token %}
+
+    <!-- ── Primary resource: selectable checkboxes ── -->
+    <div class="border border-outline-variant bg-surface-lowest rounded-xl shadow-sm overflow-hidden mb-4">
+      <div class="px-5 py-3 bg-surface-low/40 border-b border-outline-variant flex items-center justify-between">
+        <div class="flex items-center gap-2 text-xs font-bold text-on-surface">
+          <span class="material-symbols-outlined text-[16px] text-primary">table_chart</span>
+          {% if primary_sheet_title %}{{ primary_sheet_title }}{% else %}{% translate "Fields to export" %}{% endif %}
+          <span class="text-[10px] font-normal text-on-surface-variant">— click to toggle</span>
+        </div>
+        <label class="flex items-center gap-1.5 text-xs font-semibold text-on-surface-variant cursor-pointer hover:text-on-surface">
+          <input type="checkbox" id="select-all-primary" class="rounded accent-primary" checked
+                 onchange="toggleAll(this)">
+          {% translate "Select all" %}
+        </label>
+      </div>
+
+      <div class="p-5 flex flex-wrap gap-2" id="primary-fields">
+        {% for field in form.visible_fields %}
+          {% if field.field.is_selectable_field %}
+          <span class="field-chip">
+            {{ field }}
+            <label for="{{ field.id_for_label }}">
+              <span class="material-symbols-outlined text-[12px]">check</span>
+              {{ field.label }}
+            </label>
+          </span>
+          {% endif %}
+        {% endfor %}
+        {% if form.export_items.errors %}
+        <p class="w-full text-xs text-red-600 font-semibold mt-1">{{ form.export_items.errors }}</p>
+        {% endif %}
+      </div>
+    </div>
+
+    <!-- ── Sub-sheets: always exported, shown as info ── -->
+    {% for sheet in sub_sheets %}
+    <div class="border border-outline-variant bg-surface-lowest rounded-xl shadow-sm overflow-hidden mb-4">
+      <div class="px-5 py-3 bg-surface-low/40 border-b border-outline-variant flex items-center gap-2">
+        <span class="material-symbols-outlined text-[16px] text-emerald-600">table_rows</span>
+        <span class="text-xs font-bold text-on-surface">{{ sheet.title }}</span>
+        <span class="ml-auto flex items-center gap-1 text-[10px] font-semibold text-emerald-700 bg-emerald-50 border border-emerald-200 px-2 py-0.5 rounded-full">
+          <span class="material-symbols-outlined text-[11px]">check_circle</span>
+          Always included in XLSX
+        </span>
+      </div>
+      <div class="p-5 flex flex-wrap gap-2">
+        {% for col in sheet.fields %}
+        <span class="info-chip">
+          <span class="material-symbols-outlined text-[12px]">drag_indicator</span>
+          {{ col|title }}
+        </span>
+        {% endfor %}
+      </div>
+    </div>
+    {% endfor %}
+
+    <!-- Hidden fields -->
+    {% for field in form.hidden_fields %}{{ field }}{% endfor %}
+
+    <!-- Format & non-selectable fields -->
+    <div class="border border-outline-variant bg-surface-lowest rounded-xl shadow-sm p-5 space-y-4 mb-5">
+      {% for field in form.visible_fields %}
+        {% if not field.field.is_selectable_field and not field.field.initial_field %}
+        <div class="flex flex-col gap-1">
+          <label class="text-xs font-bold text-on-surface" for="{{ field.id_for_label }}">{{ field.label }}</label>
+          <div class="[&_select]:max-w-xs [&_select]:w-full [&_select]:px-3 [&_select]:py-2
+                      [&_select]:border [&_select]:border-outline-variant [&_select]:rounded-lg
+                      [&_select]:bg-surface-low [&_select]:text-sm [&_select]:text-on-surface
+                      [&_select]:focus:outline-none [&_select]:focus:ring-2 [&_select]:focus:ring-primary/30">
+            {{ field }}
+          </div>
+          {% if field.field.help_text %}<p class="text-[11px] text-on-surface-variant">{{ field.field.help_text|safe }}</p>{% endif %}
+          {{ field.errors }}
+        </div>
+        {% endif %}
+      {% endfor %}
+      {% if sub_sheets %}
+      <p class="text-[11px] text-on-surface-variant/70 border-t border-outline-variant/40 pt-3">
+        <span class="material-symbols-outlined text-[13px] align-middle text-primary">info</span>
+        <strong>xlsx</strong> → one file, one sheet per section &nbsp;·&nbsp;
+        <strong>json</strong> → one <em>.json</em> file with all sections nested inside.
+      </p>
+      {% endif %}
+    </div>
+
+    <!-- Submit -->
+    <div class="flex items-center gap-3">
+      <button type="submit"
+        class="flex items-center gap-2 px-5 py-2.5 bg-primary text-white text-xs font-bold rounded-lg shadow-md hover:bg-primary/90 transition-all active:scale-[0.98]">
+        <span class="material-symbols-outlined text-[16px]">download</span>
+        {% translate "Export" %}
+      </button>
+      <a href="{% url opts|admin_urlname:'changelist' %}"
+         class="text-xs text-on-surface-variant hover:text-on-surface transition-colors font-medium">
+        {% translate "Cancel" %}
+      </a>
+    </div>
+  </form>
+</div>
+
+<script>
+function toggleAll(masterCb) {
+    document.querySelectorAll('#primary-fields .field-chip input[type="checkbox"]').forEach(cb => {
+        cb.checked = masterCb.checked;
+    });
+}
+
+// Sync select-all on individual change
+document.addEventListener('DOMContentLoaded', function () {
+    // Ensure all primary checkboxes start checked
+    document.querySelectorAll('#primary-fields .field-chip input[type="checkbox"]').forEach(cb => {
+        cb.checked = true;
+        cb.addEventListener('change', syncMaster);
+    });
+});
+
+function syncMaster() {
+    const all = [...document.querySelectorAll('#primary-fields .field-chip input[type="checkbox"]')];
+    document.getElementById('select-all-primary').checked = all.every(c => c.checked);
+}
+</script>
+{% endblock %}

adminflow/templates/admin/includes/fieldset.html

@@ -0,0 +1,73 @@
+{% load i18n adminflow_tags %}
+<fieldset class="space-y-4 {% if not is_inline %}border border-outline-variant bg-surface-lowest p-4 sm:p-6 rounded-xl shadow-sm{% endif %}">
+    {% if fieldset.name %}
+        {% if is_inline %}
+            <h4 class="text-xs font-bold text-on-surface uppercase tracking-wider mb-2 px-1">
+                {{ fieldset.name }}
+            </h4>
+        {% else %}
+            <legend class="text-xs font-black text-on-surface uppercase tracking-wider px-2 bg-surface-lowest">
+                {{ fieldset.name }}
+            </legend>
+        {% endif %}
+    {% endif %}
+    
+    {% if fieldset.description %}
+        <p class="text-xs text-on-surface-variant italic mb-4">{{ fieldset.description|safe }}</p>
+    {% endif %}
+    
+    <div class="space-y-4">
+        {% for line in fieldset %}
+            <div class="grid grid-cols-1 {% if line.fields|length > 1 %}md:grid-cols-{{ line.fields|length }}{% endif %} gap-4">
+                {% for field in line %}
+                    <div class="space-y-1.5 {% if field.errors %}text-danger{% endif %}">
+                        <!-- Label -->
+                        <div class="flex items-center justify-between">
+                            <label class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider" for="{{ field.field.id_for_label }}">
+                                {{ field.field.label }}
+                                {% if field.field.required %}<span class="text-danger">*</span>{% endif %}
+                            </label>
+                        </div>
+                        
+                        <!-- Input Control -->
+                        <div class="relative">
+                            {% if field.is_readonly %}
+                                <div class="px-3 py-2 bg-surface-low border border-outline-variant rounded-lg text-xs text-on-surface font-mono">
+                                    {{ field.contents }}
+                                </div>
+                            {% else %}
+                                {% if field.field|is_checkbox %}
+                                    <div class="flex items-center gap-2 py-2">
+                                        {{ field.field|add_class:"w-4 h-4 rounded border-outline-variant text-primary focus:ring-primary cursor-pointer dark:bg-slate-800 dark:border-slate-700" }}
+                                        <span class="text-xs text-on-surface-variant font-medium select-none">{{ field.field.help_text|safe }}</span>
+                                    </div>
+                                {% elif field.field|is_textarea %}
+                                    {{ field.field|add_class:"w-full px-3 py-2 rounded-lg border border-outline-variant bg-surface-lowest text-xs text-on-surface focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all outline-none dark:bg-slate-900 dark:border-slate-800" }}
+                                {% elif field.field|is_select %}
+                                    {{ field.field|add_class:"w-full pl-3 pr-8 py-2 bg-surface-lowest border border-outline-variant rounded-lg text-xs focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all outline-none dark:bg-slate-900 dark:border-slate-800" }}
+                                {% elif field.field|is_file %}
+                                    {{ field.field|add_class:"text-xs text-on-surface-variant file:mr-4 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary hover:file:text-white transition-all cursor-pointer" }}
+                                {% else %}
+                                    {{ field.field|add_class:"w-full h-10 px-3 rounded-lg border border-outline-variant bg-surface-lowest text-xs text-on-surface focus:ring-2 focus:ring-primary/10 focus:border-primary transition-all outline-none dark:bg-slate-900 dark:border-slate-800" }}
+                                {% endif %}
+                            {% endif %}
+                        </div>
+                        
+                        <!-- Field Errors -->
+                        {% if field.errors %}
+                            <p class="text-[11px] text-danger font-semibold flex items-center gap-1">
+                                <span class="material-symbols-outlined text-sm">error</span>
+                                {{ field.errors|striptags }}
+                            </p>
+                        {% endif %}
+                        
+                        <!-- Help Text (Only for non-checkboxes where it is shown inline above) -->
+                        {% if field.field.help_text and not field.field|is_checkbox %}
+                            <p class="text-[10px] text-on-surface-variant opacity-80">{{ field.field.help_text|safe }}</p>
+                        {% endif %}
+                    </div>
+                {% endfor %}
+            </div>
+        {% endfor %}
+    </div>
+</fieldset>

adminflow/templates/admin/includes/toast.html

@@ -0,0 +1,102 @@
+{% load i18n %}
+<!-- AdminFlow Unified Reusable Floating Toast Notifications -->
+{% if messages or form.errors or form.non_field_errors or errors %}
+<div id="toast-container" class="fixed top-6 right-6 z-[9999] space-y-3 max-w-md w-full px-4 pointer-events-none">
+    {% if messages %}
+        {% for message in messages %}
+        <div class="toast-item pointer-events-auto relative overflow-hidden flex items-start gap-3 p-4 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md rounded-2xl shadow-2xl border transition-all transform translate-y-0 opacity-100 duration-300 animate-slide-in {% if message.tags == 'warning' %}border-amber-400/80 text-amber-950 dark:text-amber-200 bg-amber-50/90{% elif message.tags == 'error' %}border-rose-400/80 text-rose-950 dark:text-rose-200 bg-rose-50/90{% else %}border-emerald-400/80 text-emerald-950 dark:text-emerald-200 bg-emerald-50/90{% endif %}" role="alert">
+            <div class="p-2 rounded-xl shrink-0 {% if message.tags == 'warning' %}bg-amber-500/20 text-amber-700 dark:text-amber-400{% elif message.tags == 'error' %}bg-rose-500/20 text-rose-700 dark:text-rose-400{% else %}bg-emerald-500/20 text-emerald-700 dark:text-emerald-400{% endif %}">
+                <span class="material-symbols-outlined text-[22px]">
+                    {% if message.tags == 'warning' %}warning{% elif message.tags == 'error' %}error{% else %}check_circle{% endif %}
+                </span>
+            </div>
+            <div class="flex-1 pt-0.5">
+                <h4 class="text-[11px] font-bold uppercase tracking-wider mb-0.5 {% if message.tags == 'warning' %}text-amber-800{% elif message.tags == 'error' %}text-rose-800{% else %}text-emerald-800{% endif %}">
+                    {% if message.tags == 'warning' %}Security Alert{% elif message.tags == 'error' %}Error Notification{% else %}Success Notification{% endif %}
+                </h4>
+                <p class="text-xs font-semibold leading-relaxed text-slate-800 dark:text-slate-100">{{ message }}</p>
+            </div>
+            <button type="button" onclick="dismissToast(this.closest('.toast-item'))" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 p-1 rounded-lg hover:bg-slate-200/50 dark:hover:bg-slate-800 transition-colors shrink-0 cursor-pointer">
+                <span class="material-symbols-outlined text-[18px]">close</span>
+            </button>
+
+            <!-- Progress Bar -->
+            <div class="absolute bottom-0 left-0 right-0 h-[3px] bg-slate-200/50 dark:bg-slate-800/50">
+                <div class="toast-progress h-full {% if message.tags == 'warning' %}bg-amber-500{% elif message.tags == 'error' %}bg-rose-500{% else %}bg-emerald-500{% endif %}"></div>
+            </div>
+        </div>
+        {% endfor %}
+    {% endif %}
+
+    {% if form.non_field_errors %}
+        {% for error in form.non_field_errors %}
+        <div class="toast-item pointer-events-auto relative overflow-hidden flex items-start gap-3 p-4 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md rounded-2xl shadow-2xl border border-rose-400/80 text-rose-950 dark:text-rose-200 bg-rose-50/90 transition-all transform translate-y-0 opacity-100 duration-300 animate-slide-in" role="alert">
+            <div class="p-2 rounded-xl shrink-0 bg-rose-500/20 text-rose-700 dark:text-rose-400">
+                <span class="material-symbols-outlined text-[22px]">error</span>
+            </div>
+            <div class="flex-1 pt-0.5">
+                <h4 class="text-[11px] font-bold uppercase tracking-wider mb-0.5 text-rose-800">Form Error</h4>
+                <p class="text-xs font-semibold leading-relaxed text-slate-800 dark:text-slate-100">{{ error }}</p>
+            </div>
+            <button type="button" onclick="dismissToast(this.closest('.toast-item'))" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 p-1 rounded-lg hover:bg-slate-200/50 dark:hover:bg-slate-800 transition-colors shrink-0 cursor-pointer">
+                <span class="material-symbols-outlined text-[18px]">close</span>
+            </button>
+            <div class="absolute bottom-0 left-0 right-0 h-[3px] bg-slate-200/50 dark:bg-slate-800/50">
+                <div class="toast-progress h-full bg-rose-500"></div>
+            </div>
+        </div>
+        {% endfor %}
+    {% endif %}
+
+    {% if errors and not form.non_field_errors %}
+        <div class="toast-item pointer-events-auto relative overflow-hidden flex items-start gap-3 p-4 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md rounded-2xl shadow-2xl border border-rose-400/80 text-rose-950 dark:text-rose-200 bg-rose-50/90 transition-all transform translate-y-0 opacity-100 duration-300 animate-slide-in" role="alert">
+            <div class="p-2 rounded-xl shrink-0 bg-rose-500/20 text-rose-700 dark:text-rose-400">
+                <span class="material-symbols-outlined text-[22px]">error</span>
+            </div>
+            <div class="flex-1 pt-0.5">
+                <h4 class="text-[11px] font-bold uppercase tracking-wider mb-0.5 text-rose-800">Validation Error</h4>
+                <p class="text-xs font-semibold leading-relaxed text-slate-800 dark:text-slate-100">
+                    {% blocktranslate count counter=errors|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
+                </p>
+            </div>
+            <button type="button" onclick="dismissToast(this.closest('.toast-item'))" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 p-1 rounded-lg hover:bg-slate-200/50 dark:hover:bg-slate-800 transition-colors shrink-0 cursor-pointer">
+                <span class="material-symbols-outlined text-[18px]">close</span>
+            </button>
+            <div class="absolute bottom-0 left-0 right-0 h-[3px] bg-slate-200/50 dark:bg-slate-800/50">
+                <div class="toast-progress h-full bg-rose-500"></div>
+            </div>
+        </div>
+    {% endif %}
+</div>
+
+<style>
+    @keyframes slideInRight {
+        from { transform: translateX(120%); opacity: 0; }
+        to { transform: translateX(0); opacity: 1; }
+    }
+    @keyframes toastProgress {
+        from { width: 100%; }
+        to { width: 0%; }
+    }
+    .animate-slide-in {
+        animation: slideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    }
+    .toast-progress {
+        animation: toastProgress 7s linear forwards;
+    }
+</style>
+
+<script>
+    function dismissToast(el) {
+        if (!el) return;
+        el.style.transform = 'translateX(120%)';
+        el.style.opacity = '0';
+        setTimeout(() => el.remove(), 300);
+    }
+    document.addEventListener('DOMContentLoaded', function() {
+        setTimeout(function() {
+            document.querySelectorAll('.toast-item').forEach(dismissToast);
+        }, 7000);
+    });
+</script>
+{% endif %}

adminflow/templates/admin/index.html

@@ -0,0 +1,227 @@
+{% extends "admin/base_site.html" %}
+{% load i18n static adminflow_tags %}
+
+{% block bodyclass %}dashboard-page{% endblock %}
+
+{% block content %}
+<div class="space-y-6 max-w-[1600px] mx-auto w-full">
+    <!-- Welcome Header -->
+    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+            <h2 class="text-2xl md:text-3xl font-extrabold text-on-surface tracking-tight">Good day, {{ user.get_username|capfirst }}</h2>
+            <p class="text-xs text-on-surface-variant mt-1">Here is a quick overview of your admin console.</p>
+        </div>
+        <div class="flex items-center gap-2">
+            <button onclick="openCommandPalette()" class="flex items-center gap-2 px-3 py-2 rounded-lg border border-outline-variant text-primary font-bold text-xs hover:bg-surface-low transition-all bg-surface-lowest shadow-sm">
+                <span class="material-symbols-outlined text-[16px]">search</span>
+                {% translate "Global Search" %}
+            </button>
+        </div>
+    </div>
+
+    <!-- Section 1: KPI Stats Cards (2x2 on mobile, 4 cols on desktop) -->
+    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
+        <!-- Users Card -->
+        {% get_user_stats as user_stats %}
+        <div class="glass-card p-5 rounded-xl shadow-sm hover:shadow-md transition-shadow" title="System Users — Active: {{ user_stats.active }}, Inactive: {{ user_stats.inactive }}, Staff: {{ user_stats.staff }}, Super Admins: {{ user_stats.superuser }}, Total: {{ user_stats.total }}">
+            <div class="flex justify-between items-start">
+                <div class="p-2 bg-primary/10 rounded-lg text-primary">
+                    <span class="material-symbols-outlined">group</span>
+                </div>
+                <span class="text-xs text-primary font-bold">
+                    {{ user_stats.total }} Total
+                </span>
+            </div>
+            <div class="mt-4">
+                <p class="text-[10px] text-on-surface-variant font-bold uppercase tracking-wider">{% translate "System Users" %}</p>
+                <div class="flex items-center gap-3 mt-2 pt-2 border-t border-outline-variant/40">
+                    <div class="flex items-center gap-1" title="Active Users">
+                        <span class="material-symbols-outlined text-[14px] text-success">check_circle</span>
+                        <span class="text-sm font-bold text-success">{{ user_stats.active }}</span>
+                    </div>
+                    <div class="flex items-center gap-1" title="Inactive Users">
+                        <span class="material-symbols-outlined text-[14px] text-danger">cancel</span>
+                        <span class="text-sm font-bold text-danger">{{ user_stats.inactive }}</span>
+                    </div>
+                    <div class="flex items-center gap-1" title="Staff Users">
+                        <span class="material-symbols-outlined text-[14px] text-primary">badge</span>
+                        <span class="text-sm font-bold text-primary">{{ user_stats.staff }}</span>
+                    </div>
+                    <div class="flex items-center gap-1" title="Super Admins">
+                        <span class="material-symbols-outlined text-[14px] text-warning">shield_person</span>
+                        <span class="text-sm font-bold text-warning">{{ user_stats.superuser }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Database Info -->
+        {% get_system_stats as system_stats %}
+        <div class="glass-card p-5 rounded-xl shadow-sm hover:shadow-md transition-shadow" title="Database Engine: {{ system_stats.db_engine }} — File: {{ system_stats.db_name }}">
+            <div class="flex justify-between items-start">
+                <div class="p-2 bg-success/10 rounded-lg text-success">
+                    <span class="material-symbols-outlined">database</span>
+                </div>
+                <span class="text-xs text-success font-bold flex items-center gap-1">
+                    <span class="material-symbols-outlined text-[12px]">check_circle</span> Connected
+                </span>
+            </div>
+            <div class="mt-4">
+                <p class="text-[10px] text-on-surface-variant font-bold uppercase tracking-wider">{% translate "Database Engine" %}</p>
+                <h3 class="text-xl md:text-2xl font-black text-on-surface mt-1">{{ system_stats.db_engine }}</h3>
+
+            </div>
+        </div>
+
+        <!-- Framework & Runtime -->
+        <div class="glass-card p-5 rounded-xl shadow-sm hover:shadow-md transition-shadow" title="Django v{{ system_stats.django_version }} running on Python {{ system_stats.python_version }}">
+            <div class="flex justify-between items-start">
+                <div class="p-2 bg-warning/10 rounded-lg text-warning">
+                    <span class="material-symbols-outlined">code</span>
+                </div>
+                <span class="text-xs text-primary font-bold">
+                    Python {{ system_stats.python_version }}
+                </span>
+            </div>
+            <div class="mt-4">
+                <p class="text-[10px] text-on-surface-variant font-bold uppercase tracking-wider">{% translate "Django Version" %}</p>
+                <h3 class="text-xl md:text-2xl font-black text-on-surface mt-1">v{{ system_stats.django_version }}</h3>
+            </div>
+        </div>
+
+        <!-- Admin Registry -->
+        <div class="glass-card p-5 rounded-xl shadow-sm hover:shadow-md transition-shadow" title="Registered Models ({{ system_stats.model_count }}):&#10;{{ system_stats.model_names }}">
+            <div class="flex justify-between items-start">
+                <div class="p-2 bg-info/10 rounded-lg text-info">
+                    <span class="material-symbols-outlined">widgets</span>
+                </div>
+                <span class="text-xs text-info font-bold flex items-center gap-1">
+                    {{ system_stats.app_count }} {% translate "Apps" %}
+                </span>
+            </div>
+            <div class="mt-4">
+                <p class="text-[10px] text-on-surface-variant font-bold uppercase tracking-wider">{% translate "Registered Models" %}</p>
+                <h3 class="text-xl md:text-2xl font-black text-on-surface mt-1">{{ system_stats.model_count }}</h3>
+            </div>
+        </div>
+    </div>
+
+    <!-- Section 2: Apps Grid & Recent Actions Split Layout -->
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <!-- Left: App Index Card Grid -->
+        <div class="lg:col-span-2 space-y-6">
+            {% get_admin_app_list as apps %}
+            {% for app in apps %}
+            <div class="border border-outline-variant bg-surface-lowest rounded-xl shadow-sm overflow-hidden">
+                <!-- App header -->
+                <div class="px-5 py-4 bg-surface-low border-b border-outline-variant flex justify-between items-center">
+                    <h3 class="text-sm font-bold text-on-surface tracking-tight">{{ app.name }}</h3>
+                    <a href="{{ app.app_url }}" class="text-xs font-semibold text-primary hover:underline" title="{% blocktranslate with name=app.name %}View all models in {{ name }}{% endblocktranslate %}">
+                        {% translate "Manage app" %} &rarr;
+                    </a>
+                </div>
+                
+                <!-- Models list -->
+                <div class="divide-y divide-outline-variant">
+                    {% for model in app.models %}
+                    <div class="px-5 py-3 flex items-center justify-between hover:bg-surface-low/30 transition-colors">
+                        <div class="flex items-center gap-3">
+                            <span class="material-symbols-outlined text-primary text-lg">{{ model|adminflow_icon }}</span>
+                            <div>
+                                <a href="{{ model.admin_url }}" class="text-xs font-bold text-on-surface hover:text-primary transition-colors">
+                                    {{ model.name }}
+                                </a>
+                                <p class="text-[10px] text-on-surface-variant">Class: {{ model.object_name }}</p>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-center gap-2">
+                            {% if model.add_url %}
+                            <a href="{{ model.add_url }}" class="flex items-center gap-1 px-2 py-1 rounded bg-primary/10 text-primary hover:bg-primary hover:text-white transition-all text-[11px] font-bold">
+                                <span class="material-symbols-outlined text-xs">add</span>
+                                {% translate "Add" %}
+                            </a>
+                            {% endif %}
+                            
+                            {% if model.admin_url %}
+                            <a href="{{ model.admin_url }}" class="flex items-center gap-1 px-2 py-1 rounded border border-outline-variant text-on-surface-variant hover:bg-surface-low transition-all text-[11px] font-bold bg-surface-lowest">
+                                <span class="material-symbols-outlined text-xs">visibility</span>
+                                {% translate "View" %}
+                            </a>
+                            {% endif %}
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+            {% empty %}
+            <div class="p-8 text-center bg-surface-lowest rounded-xl border border-outline-variant space-y-3">
+                <span class="material-symbols-outlined text-on-surface-variant text-5xl opacity-40">inbox</span>
+                <p class="text-xs text-on-surface-variant">{% translate "You don’t have permission to view or edit anything." %}</p>
+            </div>
+            {% endfor %}
+        </div>
+
+        <!-- Right: Recent Actions Timeline -->
+        <div class="border border-outline-variant bg-surface-lowest rounded-xl shadow-sm overflow-hidden h-fit">
+            <div class="px-5 py-4 bg-surface-low border-b border-outline-variant">
+                <h3 class="text-sm font-bold text-on-surface">{% translate "Recent Activity" %}</h3>
+            </div>
+            
+            <div class="p-5 max-h-[500px] overflow-y-auto custom-scrollbar">
+                {% load log %}
+                {% get_admin_log 10 as admin_log for_user user %}
+                
+                {% if not admin_log %}
+                <p class="text-xs text-on-surface-variant text-center py-6">{% translate "No recent activity found." %}</p>
+                {% else %}
+                <ul class="space-y-4 relative before:absolute before:top-2 before:bottom-2 before:left-[17px] before:w-0.5 before:bg-outline-variant">
+                    {% for entry in admin_log %}
+                    <li class="flex items-start gap-3 relative z-10">
+                        <!-- Icon indicator based on action flag -->
+                        <div class="w-9 h-9 rounded-full flex items-center justify-center border shadow-sm shrink-0
+                            {% if entry.is_addition %}bg-green-50 border-green-200 text-green-600 dark:bg-green-950/20 dark:border-green-800/30{% elif entry.is_change %}bg-amber-50 border-amber-200 text-amber-600 dark:bg-amber-950/20 dark:border-amber-800/30{% else %}bg-rose-50 border-rose-200 text-rose-600 dark:bg-rose-950/20 dark:border-rose-800/30{% endif %}">
+                            <span class="material-symbols-outlined text-sm">
+                                {% if entry.is_addition %}add{% elif entry.is_change %}edit{% else %}delete{% endif %}
+                            </span>
+                        </div>
+                        
+                        <!-- Content -->
+                        <div class="flex-1 space-y-1">
+                            <div class="flex justify-between items-center gap-2">
+                                <span class="text-xs font-bold text-on-surface break-all">
+                                    {% if entry.is_deletion or not entry.get_admin_url %}
+                                        {{ entry.object_repr }}
+                                    {% else %}
+                                        <a href="{{ entry.get_admin_url }}" class="hover:text-primary transition-colors">{{ entry.object_repr }}</a>
+                                    {% endif %}
+                                </span>
+                            </div>
+                            
+                            <p class="text-[10px] text-on-surface-variant leading-relaxed">
+                                {% if entry.content_type %}
+                                    <span class="font-semibold">{{ entry.content_type.name|capfirst }}</span>
+                                {% else %}
+                                    {% translate "Unknown content" %}
+                                {% endif %}
+                                &middot; 
+                                <span class="font-mono text-[9px] bg-surface-low px-1.5 py-0.5 rounded border border-outline-variant">
+                                    {% if entry.is_addition %}{% translate "Added" %}{% elif entry.is_change %}{% translate "Modified" %}{% else %}{% translate "Deleted" %}{% endif %}
+                                </span>
+                            </p>
+                            
+                            {% if entry.change_message %}
+                            <p class="text-[10px] italic text-on-surface-variant bg-surface-low/50 p-1.5 rounded border border-dashed border-outline-variant">
+                                {{ entry.change_message }}
+                            </p>
+                            {% endif %}
+                        </div>
+                    </li>
+                    {% endfor %}
+                </ul>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

adminflow/templates/admin/logged_out.html

@@ -0,0 +1,38 @@
+{% extends "admin/base_site.html" %}
+{% load i18n static %}
+
+{% block bodyclass %}bg-background h-full flex items-center justify-center p-4 md:p-8{% endblock %}
+
+{% block content %}
+<main class="w-full max-w-md flex flex-col overflow-hidden rounded-2xl shadow-xl bg-surface-lowest border border-outline-variant mx-auto my-[10vh] text-center p-8 md:p-12 space-y-6">
+    <!-- Icon Header -->
+    <div class="flex justify-center">
+        <div class="h-16 w-16 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center text-primary shadow-inner">
+            <span class="material-symbols-outlined text-3xl">logout</span>
+        </div>
+    </div>
+
+    <!-- Title & Subtitle -->
+    <div class="space-y-2">
+        <h1 class="text-2xl font-extrabold text-on-surface tracking-tight">{% translate "Logged Out" %}</h1>
+        <p class="text-xs text-on-surface-variant leading-relaxed max-w-xs mx-auto">
+            {% translate "Thanks for spending some quality time with the web site today." %}
+        </p>
+    </div>
+
+    <!-- Actions -->
+    <div class="pt-4 space-y-3">
+        <a href="{% url 'admin:login' %}" class="w-full h-11 bg-primary text-white rounded-xl text-xs font-bold hover:bg-primary/95 active:scale-[0.99] transition-all shadow-md flex items-center justify-center gap-2">
+            <span class="material-symbols-outlined text-[18px]">login</span>
+            <span>{% translate "Log in again" %}</span>
+        </a>
+
+        {% if site_url %}
+        <a href="{{ site_url }}" class="w-full h-10 border border-outline-variant bg-surface hover:bg-surface-low text-on-surface-variant rounded-xl text-xs font-semibold transition-all flex items-center justify-center gap-2">
+            <span class="material-symbols-outlined text-[16px]">home</span>
+            <span>{% translate "Return to site" %}</span>
+        </a>
+        {% endif %}
+    </div>
+</main>
+{% endblock %}