feat: implement audit logs system, request extractor, admin log panel, and dedicated documentation

- Added an enterprise-grade, request-scoped AuditLogger extractor in Axum. - Configured MongoDB persistence for structured, replayable audit logs (capturing timestamp, user, action, type, payload snapshot, client IP with proxy header support, and User-Agent). - Created a live Administrator console at /auth/audit to filter and inspect log events. - Re-architected documentation by moving Design Wiki pages out of /components into a dedicated /docs route. - Published logging architecture documentation at /docs/logging.
2026-05-30 18:23:49 +05:00
parent f6ea8a99d9
commit 4c98dd93ad
34 changed files with 1389 additions and 134 deletions
@@ -0,0 +1,104 @@
+{% extends "base.html" %}
+
+{% block title %}Avatars & Badges - Design System Wiki{% endblock %}
+
+{% block content %}
+<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
+    
+    <!-- Left Navigation Sidebar -->
+    {% include "docs/sidebar.html" %}
+
+    <!-- Main Content -->
+    <div class="flex-1 space-y-8">
+        
+        <!-- Header -->
+        <div class="pb-6 border-b border-border">
+            <span class="text-xs font-semibold text-indigo-400">Visuals</span>
+            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Avatars & Badges</h1>
+            <p class="text-muted-foreground text-sm mt-2 leading-relaxed">
+                Circular user avatars featuring fallback initials text, combined with status badges in sky, emerald, amber, and rose variants.
+            </p>
+        </div>
+
+        <!-- Section Visuals -->
+        <section class="space-y-4">
+            <h2 class="text-lg font-bold text-slate-200">Avatars & Badges Showcase</h2>
+            
+            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
+                <!-- Tab Headers -->
+                <div class="flex border-b border-border/60 pb-1.5">
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'visual-sandbox')">Interactive Demo</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'visual-code')">HTML Markup</button>
+                </div>
+                
+                <!-- Demo Viewport -->
+                <div id="visual-sandbox" class="wiki-pane space-y-4 py-2">
+                    <!-- Avatars -->
+                    <div class="space-y-2">
+                        <span class="block text-xs font-semibold text-muted-foreground">Fallback Avatars</span>
+                        <div class="flex items-center gap-3">
+                            <div class="w-9 h-9 rounded-full bg-secondary border border-border flex items-center justify-center text-xs font-bold text-sky-400 leading-none">AV</div>
+                            <div class="w-9 h-9 rounded-full bg-secondary border border-border flex items-center justify-center text-xs font-bold text-emerald-400 leading-none">BC</div>
+                            <div class="w-9 h-9 rounded-full bg-secondary border border-border flex items-center justify-center text-xs font-bold text-indigo-400 leading-none">JD</div>
+                            <span class="text-xs text-muted-foreground/90">Textual initials fallback inside boundaries</span>
+                        </div>
+                    </div>
+
+                    <!-- Badges -->
+                    <div class="space-y-2">
+                        <span class="block text-xs font-semibold text-muted-foreground">Status Badges</span>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-sky-500/10 text-sky-400 border border-sky-500/20 leading-none">In Progress</span>
+                            <span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 leading-none">Completed</span>
+                            <span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-amber-500/10 text-amber-400 border border-amber-500/20 leading-none">Reviewing</span>
+                            <span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-rose-500/10 text-rose-400 border border-rose-500/20 leading-none">Blocked</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Code Snippet Area -->
+                <div id="visual-code" class="wiki-pane hidden space-y-4">
+                    <div class="relative group">
+                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                            Copy Code
+                        </button>
+                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- Initials Fallback Avatar --&gt;
+&lt;div class="w-9 h-9 rounded-full bg-secondary border border-border flex items-center justify-center text-xs font-bold text-sky-400 leading-none"&gt;AV&lt;/div&gt;
+
+&lt;!-- Status Badges --&gt;
+&lt;!-- Info / Sky --&gt;
+&lt;span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-sky-500/10 text-sky-400 border border-sky-500/20 leading-none"&gt;In Progress&lt;/span&gt;
+
+&lt;!-- Success / Emerald --&gt;
+&lt;span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 leading-none"&gt;Completed&lt;/span&gt;
+
+&lt;!-- Warning / Amber --&gt;
+&lt;span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-amber-500/10 text-amber-400 border border-amber-500/20 leading-none"&gt;Reviewing&lt;/span&gt;
+
+&lt;!-- Destructive / Rose --&gt;
+&lt;span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-rose-500/10 text-rose-400 border border-rose-500/20 leading-none"&gt;Blocked&lt;/span&gt;</code></pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+    </div>
+</div>
+
+<script>
+    function toggleWikiTabs(btn, paneId) {
+        const card = btn.closest('.border-border');
+        if (!card) return;
+        card.querySelectorAll('button').forEach(b => {
+            b.classList.remove('border-sky-500', 'text-sky-400');
+            b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        });
+        btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
+        btn.classList.add('border-sky-500', 'text-sky-400');
+        card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
+        const target = card.querySelector('#' + paneId);
+        if (target) target.classList.remove('hidden');
+    }
+</script>
+{% endblock %}